open-index/open-npm huggingface dataset:
npm package: @talend/babel-plugin-import-d3
Description: Transform import d3-xx to d3
Author: Talend Frontend
Latest version: 0.7.0

# @talend/babel-plugin-import-d3

This module is a babel plugin that transform imports from d3-shape and other d3 internal plugins, into imports from d3.

Before

```javascript
import { select, event } from 'd3-selection';
import { arc as foo, pie } from 'd3-shape';
import { scaleBand } from 'd3-scale';
import { csv } from 'd3-fetch'`,
```

After

```javascript
import { select, event, arc as foo, pie, scaleBand, csv } from 'd3';`,
```

## How to use

Installation

```bash
npm i --dev @talend/babel-plugin-import-d3
```

```bash
yarn add -D @talend/babel-plugin-import-d3
```

Configuration

```json
// .babelrc.json
{
	"plugins": ["@talend/babel-plugin-import-d3"]
}
```
npm package: @talend/babel-plugin-transform-ui-imports
Description: This plugin transform import of component using /lib path
Author: Talend Frontend
Latest version: 0.0.1

# @talend/plugin-transform-ui-imports

This package is a babel plugin ready to be used with @talend/react-components and @talend/react-containers

The object is to minimize bundle size by picking only the needed component.

How to use:

    npm i --save-dev @talend/plugin-transform-ui-imports
    // or
    yarn add -D @talend/plugin-transform-ui-imports

Then update your `.babelrc` file:
```diff
"plugins": [
+    "module:@talend/plugin-transform-ui-imports",
    ...
]
```

# QA

## Q1: I don t see any changes to my bundle size

OK, with version < 4.23 there are basic components which drain all components.
Fix: https://github.com/Talend/ui/pull/2610 included in 4.23.0 version (f14d41ae4d13b54720994244a17b1bcc0acbaf62)

## My App doesn't work once the plugin is activated

You may have a resolution to undefined in some corner case not already handled by the plugin.

The plugin first try to detect corner case. The last operation is a simple shift of import to `/lib`

So please give the corresponding corner case so we can do a fix.

## Is there an alternative ?

Yes you can also use a codemode which is provided in https://github.com/Talend/ui/pull/2607 so your code base is updated using same technics and so you can do the fix yourself because it s your code.
npm package: @talend/bootstrap-theme
Description: Bootstrap theme based on Talend styleguide
Author: Talend Frontend
Latest version: 9.5.0

# Talend Bootstrap Theme

[![npm version](https://badge.fury.io/js/@talend/bootstrap-theme.svg)](https://badge.fury.io/js/@talend/bootstrap-theme)
[![Build Status](https://travis-ci.org/Talend/bootstrap-theme.svg?branch=travis)](https://travis-ci.org/Talend/bootstrap-theme)
[![dependencies Status](https://david-dm.org/Talend/bootstrap-theme/status.svg)](https://david-dm.org/Talend/bootstrap-theme)

Base theme following Talend Style Guidelines.

Note: The example has been taken from the excellent project [Bootstwatch](https://bootswatch.com/).

# Docs & Help

* [Example page](https://talend.github.io/bootstrap-theme)
* [Sass Api](https://talend.github.io/bootstrap-theme/sassdoc)


# How to use

## Install dependency

```bash
npm install --save @talend/bootstrap-heme
```

or

```bash
yarn add --dev @talend/bootstrap-theme
```

## Configure your project

In every project, we use webpack with sass-loader + css modules.

Create your webpack file and fill it with your own configuration.
You should at least just change the `$brand-primary` first to get your own colors;

```javascript
const SASS_DATA = `
  $brand-primary: #77828A;
  @import '~@talend/bootstrap-theme/src/theme/guidelines';
`;

module.exports = {
	plugins: [
		// your custom plugins
	],
	module: {
		loaders: [
			{
				test: /\.scss$/,
				exclude: /bootstrap.scss/,
				loaders: [
					'style',
					'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass',
				],
			},
		],
	},
	sassLoader: {
		data: SASS_DATA,
	},
};
```

and in your app you can do the following

```javascript
import '!style!css!@talend/bootstrap-theme/dist/bootstrap.css';
```

sassLoader data is a sassLib params which inject the content on every @import directive.

You can now add [Bootstrap](http://getbootstrap.com/) markup!

# How to contribute

```bash
yarn && yarn start
```

Open [http://localhost:1337/](http://localhost:1337/) to see your changes.
npm package: @talend/cmf-designer
Description: This is a designer to create react-cmf app. It has to be installed on the dev session (FS access required)
Author: Talend Frontend
Latest version: 0.0.11

# CMF designer

This is a designer to create react-cmf app.
It has to be installed on the dev session (FS access required)

## How to install

You should install it globally

```
npm i -g @talend/cmf-designer
```

Then you can start it

```
PORT=3030 cmf-designer
```

It will start an express backend server and it will open your browser.

## Steps

So the designer cover the following steps:

* start it from a folder
* create app (name it then you will be able to start it)
* add / view / delete a component
* view existing props

## Create app

![create-app](http://www.plantuml.com/plantuml/svg/RP0x3y8m38Jt_8hRcAhk6QeYgav834mTGs8W8e-gSVlxINW8K5bzvy_dQnEhYMVlH4SBgWOT9Ni9D4aSHWgehz5JRMYfMJaAHhnrL0_p8h6tYQ6SWnh7jCRidDKtRBR65CC6fvavXZ-SFavU8YXFQyZPPdwHe891ca_UyXUYmH0bdWdbH4fpfVrP3B58_L52vo5JmL0I_V6vyT8_Ltx_MtMHuyEyHgBDvbpR7G00 "create-app")

More info at https://jira.talendforge.org/browse/TUI-209
npm package: @talend/cypress-api-mock-plugin
Description: Cypress plugin to record/serve api calls
Author: Talend Frontend
Latest version: 1.3.2

# @talend/cypress-api-mock-plugin

This Cypress plugin allows to mock any http request via HAR files.

It has 2 modes:
- record http requests into HAR (HTTP Archive) files
- mock http requests from HAR files

## Installation

```
npm install --save-dev @talend/cypress-api-mock-plugin

// or

yarn add -D @talend/cypress-api-mock-plugin
```

Edit your `cypress/plugins/index.js`

```javascript
const { installApiMock, ensureBrowserFlags } = require('@talend/cypress-api-mock-plugin');

module.exports = async (on, config) => {
    installApiMock(on, config);

	on('before:browser:launch', (browser = {}, launchOptions) => {
		ensureBrowserFlags(browser, launchOptions);
		return launchOptions;
	});
}
```

Edit your `cypress/support/commands.js`

```javascript
import { installApiMockCommands } from '@talend/cypress-api-mock-plugin/commands';

installApiMockCommands();
```

## Usage

In each spec files you want to record/mock the hhtp requests, add a before/after call.

```javascript
describe('my spec', () => {
    before(() => {
		cy.beforeApiMock();
	});

	after(() => {
		cy.afterApiMock();
	});
});
```

## Run

To record the requests, you can pass a `record-api` environment variable.  
Under the hood, the plugin uses `@neuralegion/cypress-har-generator` that needs to run on chrome.

```bash
cypress run --browser chrome --headless --env record-api=true
```

Once you have the api mock har files, to run the tests with the api mock:

```bash
cypress run
```
npm package: @talend/design-system
Description: Talend Design System
Latest version: 11.8.0

![Coral](https://raw.githubusercontent.com/Talend/design-system/master/.storybook/logo.svg)

# Talend Design System

<hr />

[![chromatic](https://github.com/Talend/ui/actions/workflows/design-system-visual-testing.yml/badge.svg)](https://github.com/Talend/ui/actions/workflows/design-system-visual-testing.yml)
[![netlify](https://github.com/Talend/ui/actions/workflows/design-system-deploy.yml/badge.svg)](https://github.com/Talend/ui/actions/workflows/design-system-deploy.yml)

<hr />

Coral is the design system used to build accessible, consistent, customizable and high quality customer experiences at Talend.

## Getting Started

Clone the repository

```sh
$> git clone git@github.com:Talend/ui.git
```

Install the dependencies

```sh
$> yarn
```

Start Storybook and start editing

```sh
$> yarn start
```

## Contributions

Check our exhaustive [contribution guidelines here](./CONTRIBUTING.md).

Please get to know our [Architecture Decision Records](https://github.com/joelparkerhenderson/architecture-decision-record#what-is-an-architecture-decision-record):

- [Using CSS modules to style our components](./adr/css-modules.md).
- [Use [data-test] attributes for generic automated tests](./adr/css-modules.md).

### Named exports

Please use named exports and link them at the root index to be embedded into the UMD.

### Mobile-first

Style should be designed for mobile and adapted for tablet and desktop.

### Style as separated files

Use CSS modules (`ComponentName.module.scss`) and [BEM](http://getbem.com/introduction/) in your style files.

### Variations

Variations should extend of the basic components in separated files.
Limit changes to styled-components scope.

### End-to-End tests

Visual non-regression testing will be covered by Chromatic.

## License

[Apache 2.0](https://github.com/Talend/ui/blob/master/packages/design-system/LICENSE)
npm package: @talend/eslint-config
Description: Eslint configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 13.4.1

# Eslint config customisation

To use the eslint configuration in your IDE, or to add custom rules

1. Create an `.eslintrc` at your project root folder
2. Make it extend the one from talend preset

```json
{
	"extends": "@talend",
	"rules": {}
}
```

3. Configure your IDE plugin to enable eslint with your root eslintrc configuration.
npm package: @talend/eslint-plugin
Description: Contains internal rules used at Talend
Author: Jean-Michel FRANCOIS
Latest version: 1.5.1

# @talend/eslint-plugin-talend

This package contains internal rules used at Talend.

## Installation

You have nothing to do if you use Talend/ui-scripts. If not this can be used as any other eslint plugin

## Usage

Add `talend` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
	"plugins": ["@talend"]
}
```

Then configure the rules you want to use under the rules section.

```json
{
	"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)
npm package: @talend/http
Description: HTTP helper
Author: Talend
Latest version: 3.3.2

# @talend/http

`@talend/http` is a fetch wrapper module to handle CSRF token.

## Configuration

### Global configuration

If you want to provide a global configuration for the calls, you can use this method :

```javascript
import { setDefaultConfig } from '@talend/http/config';

setDefaultConfig({ credentials: 'same-origin' });
```

### Default Language

If you want to provide the default language to be embedded in the header you can use this method :

```javascript
import { setDefaultLanguage } from '@talend/http/config';

setDefaultLanguage('fr');
```

## Usage

### Parameters

- url : the current endpoint targeted by the request
- config : specific fetch configuration for this call https://github.github.io/fetch/
- payload : payload embedded in the call

### Methods available

- get(url, config)
- delete(url, config)
- post(url, payload, config)
- put(url, payload, config)
- patch(url, payload, config)

```javascript
import { http } from '@talend/http';

async function test() {
	const response = await http.get('/api/v1/my-resource');
}
```

## Interceptors

You can add global response interceptors to catch or modify responses before resolve.

```es6
import { addHttpResponseInterceptor, http, HTTP_METHODS } from '@talend/http';
import type { TalendRequest } from '@talend/http';

addHttpResponseInterceptor('my-interceptor', async (response: Response, request: TalendRequest) => {
	if (request.method === HTTP_METHODS.GET) {
		// your custom logic here
	}

	return response;
});
```

You can add multiple interceptors. Each will be called in the order of registration and will receive the same request parameter, but response parameter will be the one returned by previous interceptor. If interceptor returns void, then it'll return received response.

Once your interceptor is not needed anymore, you can unregister it with `removeHttpResponseInterceptor` function of `@talend/http` package.

You can identify some requests in interceptor by using `context` property in fetch function config:

```es6
import { addHttpResponseInterceptor, http, HTTP_METHODS } from '@talend/http';

http.get('/api/v1/data', { context: { intercept: true } });

addHttpResponseInterceptor('my-interceptor', async (response: Response, request: TalendRequest) => {
	const { context } = request;
	if (request.method === HTTP_METHODS.GET && context.intercept) {
		// your custom logic here
	}
	return response;
});
```
npm package: @talend/jsonforms-coral
Description: jsonforms.io basic renderer for Talend
Author: Jean-Michel FRANCOIS
Latest version: 1.0.2

# @talend coral renderer for jsonforms

This package provide a jsonforms renderer based on `@talend/design-system`

To contribute to the lib please first read https://jsonforms.io/docs/tutorial/custom-renderers/

## renderer set

Current status checked means here but no test (still a POC)

| JSON Schema         | Renderer          | Status |
| ------------------- | ----------------- | ------ |
| boolean             | checkbox          | [x]    |
|                     | toggle            | [x]    |
| integer             | number            | [x]    |
|                     | tel               |        |
| string              | text              | [x]    |
|                     | textarea          | [x]    |
| enum                | combo             | [x]    |
|                     | autocomplete      |        |
| oneof (const/title) | combo             |        |
|                     | autocomplete      |        |
| date format         | date              | [x]    |
| time format         | time              | [x]    |
| datetime format     | datetime          | [x]    |
| object              | vertical grid     | [x]    |
| array of primitives | list              |        |
| array of objects    | table             | [x]    |
|                     | list              |        |
|                     | list with details |        |
| array of enum       | multiple choices  |        |
| oneof               | tabs              |        |
| allOf               | tabs              |        |
| anyOf               | tabs              |        |

| UI schema       | Renderer      | status |
| --------------- | ------------- | ------ |
| vertical layout | vertical grid | [x]    |
| categorization  | tabs          | [x]    |
| group           | group         | [x]    |
| label           | text          | [x]    |
npm package: @talend/local-libs-webpack-plugin
Description: Easier development on local libraries
Author: Talend Frontend
Latest version: 0.3.2

# @talend/local-libs-webpack-plugin

Easier local development on libraries. Skip the prepublish, npm link, copying libs into node_modules steps.

**This plugin is meant to be used in development only**

LocalLibsWebpackPlugin will let you do 2 things:

- import npm modules from local paths, without using npm link or modifying import paths.
- Use the **source** files of your library to avoid the manual compilation step after each code change.

# Requirements for using source files

- The library must have a `"mainSrc"` field in its package.json. This field specifies where the **source** entry file is. `"main"` usually refer to a dist or lib folder where the compiled files are located.
- Your app's webpack config and its loaders must be able to bundle the library code on its own.

# Install

`$ yarn add --dev @talend/local-libs-webpack-plugin`

# Usage

`$ webpack-dev-server --env.mylib --env.myotherlib`

Add the relative paths to the package.json of the packages you want to use locally. If you specify a lerna.json path it will automatically use all packages listed in lerna.json `packages` field. 
```js
// webpack.config.js
const LocalLibsWebpackPlugin = require('@talend/local-libs-webpack-plugin');

module.exports = (env = {}) => ({
	plugins: [
		new LocalLibsWebpackPlugin({
			'../mylib/package.json': env.mylib,
			'../myotherlib/lerna.json': env.myotherlib,
		}),
	],
});
```

This example uses webpack's env variables, but you can use Node environment variables or anything you prefer.

# Tips

If you have your webpack command in an npm script you can use that as well. The flags will be passed to webpack.

`$ yarn start --env.myLib`

package.json

```json
{
	"scripts": {
		"start": "webpack-dev-server mode=development --config webpack.config.dev.js"
	}
}
```

This combination will run `webpack-dev-server mode=development --config webpack.config.dev.js --env.myLib`

## LICENSE

Copyright (c) 2006-2019 Talend

Licensed under the Apache V2 License
npm package: @talend/locales-design-system
Description: This module contains i18n files for design-system project.
Author: Talend Frontend
Latest version: 7.15.1


# design-system locales

This module contains i18n files for design-system project.

## How to install
```
yarn add @talend/locales-design-system 
```
or 
```
npm install @talend/locales-design-system
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as designsystemNamespaces } from '@talend/locales-design-system/namespaces';
import { locales as designsystemLocales } from '@talend/locales-design-system/locales';

i18n
	.init({
		ns: [
			...designsystemNamespaces,
			...myProjectNamespaces
		],
		resources: merge(designsystemLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-design-system/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as designsystemNamespaces } from '@talend/locales-design-system/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...designsystemNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/locales-tui
Description: This module contains i18n files for TUI project.
Author: Talend Frontend
Latest version: 6.36.0


# TUI locales

This module contains i18n files for TUI project.

## How to install
```
yarn add @talend/locales-tui 
```
or 
```
npm install @talend/locales-tui
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as tuiNamespaces } from '@talend/locales-tui/namespaces';
import { locales as tuiLocales } from '@talend/locales-tui/locales';

i18n
	.init({
		ns: [
			...tuiNamespaces,
			...myProjectNamespaces
		],
		resources: merge(tuiLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-tui/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as tuiNamespaces } from '@talend/locales-tui/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...tuiNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/locales-tui-datagrid
Description: This module contains i18n files for TUI-datagrid project.
Author: Talend Frontend
Latest version: 19.1.0


# TUI-datagrid locales

This module contains i18n files for TUI-datagrid project.

## How to install
```
yarn add @talend/locales-tui-datagrid 
```
or 
```
npm install @talend/locales-tui-datagrid
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as tuidatagridNamespaces } from '@talend/locales-tui-datagrid/namespaces';
import { locales as tuidatagridLocales } from '@talend/locales-tui-datagrid/locales';

i18n
	.init({
		ns: [
			...tuidatagridNamespaces,
			...myProjectNamespaces
		],
		resources: merge(tuidatagridLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-tui-datagrid/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as tuidatagridNamespaces } from '@talend/locales-tui-datagrid/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...tuidatagridNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/locales-tui-dataviz
Description: This module contains i18n files for tui-dataviz project.
Author: Talend Frontend
Latest version: 3.0.1


# tui-dataviz locales

This module contains i18n files for tui-dataviz project.

## How to install
```
yarn add @talend/locales-tui-dataviz 
```
or 
```
npm install @talend/locales-tui-dataviz
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as tuidatavizNamespaces } from '@talend/locales-tui-dataviz/namespaces';
import { locales as tuidatavizLocales } from '@talend/locales-tui-dataviz/locales';

i18n
	.init({
		ns: [
			...tuidatavizNamespaces,
			...myProjectNamespaces
		],
		resources: merge(tuidatavizLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-tui-dataviz/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as tuidatavizNamespaces } from '@talend/locales-tui-dataviz/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...tuidatavizNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/locales-tui-faceted-search
Description: This module contains i18n files for tui-faceted-search project.
Author: Talend Frontend
Latest version: 11.3.0


# tui-faceted-search locales

This module contains i18n files for tui-faceted-search project.

## How to install
```
yarn add @talend/locales-tui-faceted-search 
```
or 
```
npm install @talend/locales-tui-faceted-search
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as tuifacetedsearchNamespaces } from '@talend/locales-tui-faceted-search/namespaces';
import { locales as tuifacetedsearchLocales } from '@talend/locales-tui-faceted-search/locales';

i18n
	.init({
		ns: [
			...tuifacetedsearchNamespaces,
			...myProjectNamespaces
		],
		resources: merge(tuifacetedsearchLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-tui-faceted-search/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as tuifacetedsearchNamespaces } from '@talend/locales-tui-faceted-search/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...tuifacetedsearchNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/locales-tui-stepper
Description: This module contains i18n files for tui-stepper project.
Author: Talend Frontend
Latest version: 8.1.1


# tui-stepper locales

This module contains i18n files for tui-stepper project.

## How to install
```
yarn add @talend/locales-tui-stepper 
```
or 
```
npm install @talend/locales-tui-stepper
```

## How to use with i18next

### Synchronous use

i18n.js
```javascript
import i18n from 'i18next';

import merge from 'lodash/merge';

import { namespaces as tuistepperNamespaces } from '@talend/locales-tui-stepper/namespaces';
import { locales as tuistepperLocales } from '@talend/locales-tui-stepper/locales';

i18n
	.init({
		ns: [
			...tuistepperNamespaces,
			...myProjectNamespaces
		],
		resources: merge(tuistepperLocales, myProjectLocales),
	});

export default i18n;
```

### Asynchronous use
For async load, you need to copy the i18n files to the location you want to serve them

webpack.config.js
```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
			{ from: 'node_modules/@talend/locales-tui-stepper/locales', to: 'assets/locales' },
		]),
	]
}
```

i18n.js
```javascript
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

import { namespaces as tuistepperNamespaces } from '@talend/locales-tui-stepper/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
			...tuistepperNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;
```
npm package: @talend/plugin-transform-ui-imports
Description: This plugin transform import of component using /lib path
Author: Talend Frontend
Latest version: 0.0.0

# @talend/plugin-transform-ui-imports

This package is a babel plugin ready to be used with @talend/react-components and @talend/react-containers

The object is to minimize bundle size by picking only the needed component.

How to use:

    npm i --save-dev @talend/plugin-transform-ui-imports
    // or
    yarn add -D @talend/plugin-transform-ui-imports

Then update your `.babelrc` file:
```diff
"plugins": [
+    "module:@talend/plugin-transform-ui-imports",
    ...
]
```

# QA

## Q1: I don t see any changes to my bundle size

OK, with version < 4.23 there are basic components which drain all components.
Fix: https://github.com/Talend/ui/pull/2610 included in 4.23.0 version (f14d41ae4d13b54720994244a17b1bcc0acbaf62)

## My App doesn't work once the plugin is activated

You may have a resolution to undefined in some corner case not already handled by the plugin.

The plugin first try to detect corner case. The last operation is a simple shift of import to `/lib`

So please give the corresponding corner case so we can do a fix.

## Is there an alternative ?

Yes you can also use a codemode which is provided in https://github.com/Talend/ui/pull/2607 so your code base is updated using same technics and so you can do the fix yourself because it s your code.
npm package: @talend/react-cmf-router
Description: This is the old router of react-cmf packaged as external dependency.
Author: Talend Frontend
Latest version: 8.0.3

# @talend/react-cmf-router

This is the old router of react-cmf packaged as external dependency.

## Setup

First add it to your bootstrap app

```javascript
import cmf from '@talend/react-cmf';
import getRouter from '@talend/react-cmf-router';

const routerFunctions = {
    // key for OnEnter/onLeave in router config: value is the function
};

const router = getRouter({ history, sagaRouterConfig, routerFunctions });

cmf.bootstrap({
    modules: [router.cmfModule],
    RootComponent: router.RootComponent,
});
```

If your project has multiple modules with `routerConfig` you can pass all of them to `getRouter()` the following way:


```javascript
const router = getRouter(config1, config2, config3);
```

The `getRouter` function will merge all of them to build the router configuration.

So be careful with the order since the next has a higher priority comparing to the previous config.

## routerAPI

routerAPI is an object which expose the following api:


| name | return type | description|
| -- | -- | -- |
| `routerAPI.selectors.getLocation(state)` | object | current [location object](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md) |
| `routerAPI.selectors.getPath(state)` | string |  the current path (a string) which is the fragment so you can apply matchPath to it |
npm package: @talend/react-components-kit
Description: React CMF Containers for Talend Component Kit
Author: Talend Frontend
Latest version: 0.201.0-2

# React CMF Containers for Talend Component Kit

This package provides [react-cmf](https://github.com/Talend/ui/blob/master/packages/cmf/README.md) containers which work with [Talend Component Kit](https://github.com/Talend/component-runtime)

## How to dev

`yarn start` will start a webpack with a mock of the backend so you can play with it.

## ComponentForm

The first citizen component every body wants is the form to let the enduser create instance of components.

How to use:

```javascript
import cmf from '@talend/react-cmf';
import kit from '@talend/react-components-kit';

cmf.bootstrap({
    modules: [kit],
});
```

Then you can Inject `ComponentForm` or using JSX:


```javascript
import { Inject } from '@talend/react-cmf';

export default function AddForm(props) {
    return (
        <Inject
            component="ComponentForm"
            definitionURL="/api/v1/dataset-spec"
            triggerURL="/api/v1/components/action/execute"
        />
    );
}
```

props table:

| Name | Type | Description |
|--|--|--|
| definitionURL | `string` | URL to get the UISpec. If the URL props change, the new uiSpec will be fetched. |
| triggerURL | `string` | URL to call on trigger. |

## ComponentForm events

ComponentForm is completely integrated with redux. The events are only dispatch actions.

| Type | Description |
|--|--|--|
| TCOMP_FORM_DEFINITION_URL_CHANGE | URL to get uiSpec definition changes. |
| TCOMP_FORM_CHANGE | A change is done on the form. To enable those dispatches, you need to pass a `props.dispatchOnChange`. WARNING : this can lead to performance issues, as it will dispatch an event at every changes. |
| TCOMP_FORM_SUBMIT | The submit action. |

## ComponentPalette

TODO

## ComponentTree

TODO
npm package: @talend/react-dataviz
Description: Talend charts and visualization components
Author: Talend Frontend
Latest version: 7.2.0

# @talend/dataviz

Charts and visualization components used in Talend products.

Look at the storybook for components documentation and usage.

## Important

- Date manipulation are done using locale timezone

## TODO

- support date locale format

## Contributing

Please look at our [CONTRIBUTING](https://github.com/Talend/tools/blob/master/tools-root-github/CONTRIBUTING.md) first.

## LICENSE

Copyright (c) 2020 Talend

Licensed under the Apache V2 License
npm package: @talend/react-sagas
Description: App wide redux sagas
Author: Talend Frontend
Latest version: 9.0.3

# @talend/react-sagas

A set of generic sagas that are reusable accross the app(http://guidelines.talend.com)

[![NPM][npm-icon] ][npm-url]

[![Travis CI][travis-ci-image] ][travis-ci-url]
[![Quality][quality-badge] ][quality-url]
[![dependencies][dependencies-image] ][dependencies-url]
[![devdependencies][devdependencies-image] ][devdependencies-url]
[![peerdependencies][peerdependencies-image] ][peerdependencies-url]
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2dd69f1168bb43f781fee182a67a00f2)](https://www.codacy.com/app/Talend/react-talend-sagas)

[npm-icon]: https://nodei.co/npm/react-talend-sagas.svg?downloads=true
[npm-url]: https://npmjs.org/package/@talend/react-sagas
[travis-ci-image]: https://travis-ci.org/Talend/react-talend-sagas.svg?branch=master
[travis-ci-url]: https://travis-ci.org/Talend/react-talend-sagas
[dependencies-image]: https://david-dm.org/Talend/react-talend-sagas.svg
[dependencies-url]: https://david-dm.org/Talend/react-talend-sagas
[devdependencies-image]: https://david-dm.org/Talend/react-talend-sagas/dev-status.svg
[devdependencies-url]: https://david-dm.org/Talend/react-talend-sagas#info=devDependencies
[peerdependencies-image]: https://david-dm.org/Talend/react-talend-sagas/peer-status.svg
[peerdependencies-url]: https://david-dm.org/Talend/react-talend-sagas?type=peer
[quality-badge]: http://npm.packagequality.com/shield/react-talend-sagas.svg
[quality-url]: http://packagequality.com/#?package=react-talend-sagas

## Conventions

Please look at our [CONTRIBUTING](https://github.com/Talend/tools/blob/master/tools-root-github/CONTRIBUTING.md) first.

Please read our [style guidelines](http://guidelines.talend.com) first.

## Supported browsers

<img src="https://camo.githubusercontent.com/46a1f6891a7e0d7f74956a056b19d6ba5b76a3be/68747470733a2f2f7777772e62726f77736572737461636b2e636f6d2f696d616765732f6c61796f75742f62726f77736572737461636b2d6c6f676f2d363030783331352e706e67" alt="BrowserStack logo" width="120" height="63">

Thanks to [BrowserStack](https://www.browserstack.com/) for providing real browser testing infrastructure.

### List of sagas

#### maybePenging

##### Description

This saga will trigger a state change after 400ms that consists in adding the component in an up-to-date pending list.
Based on that, any cmf-expression will be evaluated and pure component will be re-rendered.

#### Signature

First argument is about identifying your context: parent entity id or page id or any other way to provide a context id in a unique way.

Second argument is the identifier of the action or component.

=> Following this nomenclature, you will be able to get unique identifier through all your app and sibling entities.

## npm scripts

* npm run prepublish -> build the sources into the lib folder
* npm test -> to execute unit test
* npm run lint -> check the code style
* npm run watch -> watch the source to trigger a build

## LICENSE

Copyright (c) 2006-2017 Talend

Licensed under the Apache V2 License
npm package: @talend/react-storybook-cmf
Description: react-storybook-cmf library.
Author: Talend Frontend
Latest version: 11.0.2

# @talend/react-storybook-cmf

[![NPM][npm-icon] ][npm-url]

[![Travis CI][travis-ci-image] ][travis-ci-url]
[![dependencies][dependencies-image] ][dependencies-url]
[![devdependencies][devdependencies-image] ][devdependencies-url]

[npm-icon]: https://img.shields.io/npm/v/@talend/react-storybook-cmf.svg
[npm-url]: https://npmjs.org/package/@talend/react-storybook-cmf
[travis-ci-image]: https://travis-ci.org/Talend/ui.svg?branch=master
[travis-ci-url]: https://travis-ci.org/Talend/ui
[dependencies-image]: https://david-dm.org/Talend/ui/status.svg?path=packages/storybook-cmf
[dependencies-url]: https://david-dm.org/Talend/ui?path=packages/storybook-cmf
[devdependencies-image]: https://david-dm.org/Talend/ui/dev-status.svg?path=packages/storybook-cmf
[devdependencies-url]: https://david-dm.org/Talend/ui?path=packages/storybook-cmf&type=dev


This addon let you create a storybook for [react-cmf](https://github.com/Talend/ui).

For example please look at [react-cmf-bootstrap](https://github.com/Talend/react-cmf-bootstrap)

## LICENSE

Copyright (c) 2006-2016 Talend

Licensed under the Apache V2 License
npm package: @talend/router-bridge
Description: Bridge on top of cmf-router or react-router v5 + connected-react-router
Latest version: 2.2.2

# @talend/router-bridge

This router-bridge aims to have a layer on top of router and redux connecter router actions. So libraries can support both cmf-router and future react-router v5 stack for
- route definitions
- redux action for redirection

# Router components

React-router v5 support nested route definitions, but not v3 used by cmf-router v3.  

The library need to duplicate the route mapping
- cmf-router: based on settings
- react-router v5: Route component

**CMF-router mode**
![Applications with cmf-router will only use the route definition from settings](./img/route-mapping-cmf.png)

**React-router v5 mode**
![Applications with react-router v5 will use the router-bridge routing definition that is a layer on top of react-router v5](./img/route-mapping-rrv5.png)

`@talend/router-bridge` stays on top of `react-router-dom`. It serves react-router v5 components if it is loaded. Otherwise, nothing is rendered. So those route mapping can be used safely, they just won't set anything with `cmf-router`.

```javascript
import { Switch, Route } from '@talend/router-bridge';

export function Home() {
    return (
        <>
			<Route path="/datasets" component={DatasetList} />
			<Switch>
				<Route path="/datasets/add" component={AddDatasetForm} />
				<Route path="/dataset/:id" component={DatasetDetails} />
			</Switch>
		</>
    )
}
```

# Redux redirection action

`@talend/router-bridge` tries to stick to `connected-react-router` push/replace api. But with `cmf-router`, we need to pass a type, so we introduced a third argument, not available in `connected-react-router` functions.

| Argument          | Type   | Description                                                                                                                            |
| ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| url               | string | The url to redirect to.                                                                                                                |
| historyState?     | object | This state will be pushed to history state.                                                                                            |
| customBaseAction? | object | cmf-router doesn't put an action type. This can be used to set one. In cmf-router mode, this will be spread into the resulting action. |

![@talend/router-bridge redirect to cmf or connected-react-router action depending of the loaded library](./img/action-creator.png)

The push/replace bridge will either 
- call `connected-react-router` push/replace if it is loaded
- create an action for `cmf-router` otherwise

```javascript
import { push, replace } from '@talend/router-bridge';

function redirectActionCreator() {
    return push('/home', null, { type: 'REDIRECT_TO_HOME' });
}
```
npm package: @talend/scripts
Description: Set of scripts
Author: Talend Frontend
Latest version: 0.20.0
Deprecated: Please use @talend/scripts-core instead ( https://www.npmjs.com/package/@talend/scripts-core)

# Talend Scripts

## Webapp
* start     - start a dev server (webpack)
* build     - build a prod (webpack)
* lint:es   - run linter (eslint)
* test      - run tests (jest)

[Go to documentation](./webapp/README.md)
npm package: @talend/scripts-build-cdn
Description: Give a CLI to build a CDN for js and css with unpkg like structures
Author: Talend Frontend
Latest version: 11.2.0

# Build CDN scripts

Let's download UMD files from https://unpkg.com and/or build your own custom UMDs!


## Getting started

To use this CLI you just have to add `@talend/scripts-build-cdn` in your project.

Once installed this package add the command `talend-cdn` to the node_modules/.bin folder.

An example of usage is available at [github/Talend/cdn-content](https://github.com/Talend/cdn-content)


## Context

You should not let your app rely on unpkg which is provided for free. As a company, you want to master your toolchain and your produced content. This script has been created for this reason: **build your own CDN**.

Up to you to rely on whatever distribution network service like Netlify or CloudFlare or any other option.

# How to use

talend-cdn command accepts two subcommands:

* download
* build

Both have their options

```bash
$> talend-cdn download -d -e ';@angular;' --versions ../../../ui/versions/dependencies.json
```

| command | option  | default | description |
| -- | -- | -- | -- |
| download | -e --exclude | '' | exclude patterns from the global list |
| download | --versions | '' | path to a dependencies.json file containing the minimum version you want |
| download | -v --verbose | false | display more information in the output |
npm package: @talend/scripts-config-eslint
Description: Eslint configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 11.0.1
Deprecated: Please use @talend/eslint-config instead

# Eslint config customisation

To use the eslint configuration in your IDE, or to add custom rules

1. Create an `.eslintrc` at your project root folder
2. Make it extend the one from talend preset

```json
{
	"extends": "./node_modules/@talend/scripts-config-eslint/.eslintrc.js",
	"rules": {}
}
```

3. Configure your IDE plugin to enable eslint with your root eslintrc configuration.
npm package: @talend/scripts-config-jest
Description: Jest configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 14.4.0

# Jest config customisation

To use the jest configuration in your IDE, or to add customisation

1. Create an `jest.config.js` at your project root folder
2. Make it extend the one from talend preset

```javascript
const defaults = require('@talend/scripts-config-jest');

module.exports = {
	...defaults,

	// add/change default config here
};
```

## how stop ignore transform over packages in node_modules

because jest support of [ECMAPScriptModules](https://github.com/facebook/jest/blob/64de4d7361367fd711a231d25c37f3be89564264/docs/ECMAScriptModules.md) is experiemental we have added possibilities to apply transforms on modules.
Since d3 7.x library use ECMAPScriptModules in it's package.json as main entry point it break jest with this kind of errors:

```
node_modules/d3-scale/src/index.js:1
export {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
```

You may encounter in your project the need to add other modules than just d3. To do so we provide to you the following API:

```javascript
// your project's jest.config.js
const config = require('@talend/scripts-config-jest/jest.config.js');
const testUtils = require('@talend/scripts-config-jest/utils');

testUtils.applyBabelTransformOn(config, ['dexie']);

module.exports = config;
```
npm package: @talend/scripts-config-karma
Description: Karma configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 13.7.0

# Karma config customisation

To run angular tests via karma, you need to create a `spec.bundle.js` in your project root.
It must include everything that Karma needs to load to run your tests.

Example
```javascript
import '@babel/polyfill';

// load the app files
import './src/app';

import 'angular-mocks';

// load tests files
const context = require.context('./src', true, /\.spec\.js/);
context.keys().forEach(context);
```
npm package: @talend/scripts-config-prettier
Description: Shared Prettier config
Latest version: 12.4.0

# Prettier config customisation

To use the jest configuration in your IDE, or to add customisation

1. Create an `.prettierrc.js` at your project root folder
2. Make it extend the one from talend preset

```javascript
const defaults = require('@talend/scripts-config-prettier');

module.exports = {
	...defaults,

	// add/change default config here
};
```

3. Config includes import order configuration for `@trivago/prettier-plugin-sort-imports`
npm package: @talend/scripts-config-stylelint
Description: Stylelint configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 4.2.2

# Stylelint config customization

To use the jest configuration in your IDE, or to add customization

1. Create an `.stylelintrc.js` at your project root folder
2. Make it extend the one from talend preset

```javascript
const defaults = require('@talend/scripts-config-stylelint');

module.exports = {
	...defaults,

	// add/change default config here
};
```
npm package: @talend/scripts-config-typescript
Description: Typescript configuration for @talend/scripts-core
Author: Talend Frontend
Latest version: 11.3.2

# Typescript config customisation

To use the Typescript configuration in your IDE, or to add custom rules

1. Create an `tsconfig.json` at your project root folder
2. Make it extend the one from talend preset

```json
{
  "extends": "./node_modules/@talend/scripts-config-typescript/tsconfig.json",
  "compilerOptions": {
    
  },
  "include": [
    "src"
  ]
}
```

3. Configure your IDE plugin to enable Typescript with your root tsconfig configuration.
npm package: @talend/scripts-preset-react
Description: Preset for talend/scripts-core
Author: Talend Frontend
Latest version: 15.0.1

# Talend Preset

This is a preset for @talend/scripts-core. It holds most of Talend projects tools configuration for hybrid angularJS/react webapp.

This preset allows some customisation through specific entry points. The configuration is done via `talend-scripts` configuration file.

## Customisation

* [Webpack customisation](../config-react-webpack/config/README.md)
* [Babel customisation](../config-babel/README.md)
* [Eslint customisation](../config-eslint/README.md)
* [Jest customisation](../config-jest/README.md)
* [Typescript customisation](../config-typescript/README.md)


## Details

### Webpack

* [Common configuration](../config-react-webpack/config/webpack.config.js)
* [Development configuration](../config-react-webpack/config/webpack.config.dev.js)
* [Production configuration](../config-react-webpack/config/webpack.config.prod.js)

### Babel

* [Babel configuration](../config-babel/.babelrc.json)

### Jest

| Configuration | Description |
|---|---|
| moduleNameMapper | * `jpg/jpeg/png/gif/eot/otf/webp/svg/woff/woff2` are mocked with an empty object<br/>* `css/scss` are mocked with an object that adds a `theme` prefix to the requested classname. Example: `drawer` will result to `theme-drawer`. This is used to spot the classnames that come from css modules. |
| rootDir | You app root folder |
| setupFilesAfterEnv | * It configures enzyme with react 16 adapter<br/>* It mocks fetch with `(url, { response }) => promise that resolved response` |
| testEnvironment | It uses [`jest-environment-jsdom-global`](https://github.com/simon360/jest-environment-jsdom-global/blob/master/README.md) |
| testRegex | Jest will execute all the files that ends with `.test.js` in your `src/` folder. |
| transform | It transforms js files via babel, using the same [babel configuration](../config-babel/.babelrc.json) as webpack. |

### Eslint

The linter is based on airbnb configuration, with some customisation.
[Eslint configuration](../config-eslint/.eslintrc)

### Typescript

* [Typescript configuration](../config-typescript/tsconfig.json)