@talend/react-components/6.0 - breaking changes.md

Set of react components.

# 6.0 Breaking changes

## React bootstrap

React-bootstrap components are not exported anymore. If you import one of these components from `@talend/react-components`, you will have to import them from `react-bootstrap` directly.

```diff
-import { Alert } from '@talend/react-components';
+import { Alert } from 'react-bootstrap';
```

The whole list of impacted components:

- Alert
- BootstrapBadge
- BootstrapCheckbox
- BootstrapTable
- Breadcrumb
- BreadcrumbItem
- Button
- ButtonGroup
- ButtonToolbar
- Carousel
- CarouselItem
- Clearfix
- ControlLabel
- Col
- Collapse
- Dropdown
- DropdownButton
- Fade
- Form
- FormControl
- FormGroup
- Glyphicon
- Grid
- HelpBlock
- InputGroup
- Jumbotron
- Label
- ListGroup
- ListGroupItem
- Media
- MenuItem
- Modal
- ModalBody
- ModalFooter
- ModalHeader
- ModalTitle
- Nav
- Navbar
- NavbarBrand
- NavDropdown
- NavItem
- Overlay
- OverlayTrigger
- PageHeader
- PageItem
- Pager
- Pagination
- Panel
- PanelGroup
- Popover
- ProgressBar
- Radio
- ResponsiveEmbed
- Row
- SafeAnchor
- SplitButton
- Tab
- TabContainer
- TabContent
- TabPane
- Tabs
- Thumbnail
- Tooltip
- Well

## AboutDialog

Dialog table entities (`getColumnHeaders`, `Text`) are now attached to the `AboutDialogTable` component, which is attached to the `AboutDialog` component.

```diff
-import { AboutDialogTable, Text, getColumnHeaders } from '@talend/react-components/lib/AboutDialog/AboutDialogTable.component'
+import AboutDialog from '@talend/react-components/lib/AboutDialog';

+const AboutDialogTable = AboutDialog.Table;
+const Text = AboutDialog.Table.Text;
+const getColumnHeaders = AboutDialog.Table.getColumnHeaders;
```

## AppLoader

Static `APP_LOADER` and static style getter `getLoaderStyle` are now atached to `AppLoader` component.

```diff
-import Loader from '@talend/react-components/lib/AppLoader/constant';
+import AppLoader from '@talend/react-components/lib/AppLoader';

-const staticLoader = Loader.APP_LOADER;
+const staticLoader = AppLoader.static;

-const staticLoaderStyle = Loader.getLoaderStyle(icon);
+const staticLoaderStyle = AppLoader.getLoaderStyle(icon);

```

## Badge

`BadgeComposition` is now attached to `Badge` component.

```diff
-import BadgeLib from '@talend/react-components/lib/Badge/BadgeComposition';
+import Badge from '@talend/react-components/lib/Badge';

-<BadgeLib.Label>
+<Badge.Label>
```

## CircularProgress

`CIRCULAR_PROGRESS_SIZE` is not exported from index anymore. It is attached to `CircularProgress` component.

```diff
-import { CIRCULAR_PROGRESS_SIZE } from '@talend/react-components';
-import { CIRCULAR_PROGRESS_SIZE } from '@talend/react-components/lib/constants';
+import CircularProgress from '@talend/react-components/lib/CircularProgress';

-const smallSize = CIRCULAR_PROGRESS_SIZE.SMALL;
+const smallSize = CircularProgress.SIZE.SMALL;
```

## CollapsiblePanel

`TYPE_ACTION` is not exported anymore. It is now attached to `CollapsiblePanel` component alongside with the other display modes.

```diff
-import { TYPE_ACTION } from '@talend/react-components/lib/CollapsiblePanel';
+import CollapsiblePanel from '@talend/react-components/lib/CollapsiblePanel';
+const type = CollapsiblePanel.displayModes.TYPE_ACTION;

```

## GridLayout

`Tile` is not exported anymore from index. It is now attached to `GridLayout` component.

```diff
-import Tile from '@talend/react-components/lib/GridLayout/Tile';
-import { Tile } from '@talend/react-components';
+import GridLayout from '@talend/react-components/lib/GridLayout';

-<Tile.Header>
+<GridLayout.Tile.Header>
```

And `context` is now attached to `Tile` component.

```diff
-import { TileContext } from '@talend/react-components/lib/GridLayout/Tile/context';
+import GridLayout from '@talend/react-components/lib/GridLayout';
+const TileContext = GridLayout.Tile.context;
```

## IconsProvider

`getIconHREF` has been removed.

```diff
-import { getIconHREF } from '@talend/react-components/lib/IconsProvider';
```

## i18n

1. `I18N_DOMAIN_COMPONENTS` is not exported from index anymore. It is attached to a new `i18n` object.

```diff
-import { I18N_DOMAIN_COMPONENTS } from '@talend/react-components';
-import I18N_DOMAIN_COMPONENTS from '@talend/react-components/lib/constants';
+import i18n from '@talend/react-components/lib/i18n';

-const tuiNamespace = I18N_DOMAIN_COMPONENTS;
+const tuiNamespace = i18n.namespace;
```

2. `getTranslated` has been removed. This function wrapper implementation has been removed since a long time, replaced by a warning to stop using it.

> I18nextProvider has deprecated. You should use i18n.use(initReactI18next).init(...) in your i18n config.

3. `DateFnsLocale` is now attached to the `i18n` object;

```diff
-import getLocale from '@talend/react-components/lib/DateFnsLocale';
+import i18n from '@talend/react-components/lib/i18n';

-const locale = getLocale(t);
+const locale = i18n.getDateFnsLocale(t);
```

# Inject

`NotFoundComponent` is not exported anymore, but it is attached to `Inject` component.

```diff
-import { NotFoundComponent } from '@talend/react-components/lib/Inject';
+import Inject from '@talend/react-components/lib/Inject';

-<NotFoundComponent>
+<Inject.NotFound>
```

# InlineMessage

`TYPES` are not exported anymore, but they are attached to `InlineMessage` component.

```diff
-import { TYPES } from '@talend/react-components/lib/InlineMessage';
+import InlineMessage from '@talend/react-components/lib/InlineMessage';

+const type = InlineMessage.TYPES.INFO;
```

# Layout

Constants are not exported anymore. They are attached to `Layout` component.

- DISPLAY_MODE_ONE_COLUMN
- DISPLAY_MODE_TWO_COLUMNS
- DISPLAY_MODES
- TALEND_T7_THEME_APPS
- TALEND_T7_THEME_CLASSNAME

```diff
-import { DISPLAY_MODE_ONE_COLUMN, DISPLAY_MODE_TWO_COLUMNS, DISPLAY_MODES, TALEND_T7_THEME_APPS, TALEND_T7_THEME_CLASSNAME } from '@talend/react-components/lib/Layout';
+import Layout from '@talend/react-components/lib/Layout';

-const mode = DISPLAY_MODE_ONE_COLUMN;
+const mode = Layout.DISPLAY_MODES.ONE_COLUMN;

-const mode = DISPLAY_MODE_TWO_COLUMNS;
+const mode = Layout.DISPLAY_MODES.TWO_COLUMNS;

-const appTheme = TALEND_T7_THEME_APPS[0];
+const appTheme = Layout.TALEND_T7_THEME_APPS[0];

-const t7Theme = TALEND_T7_THEME_CLASSNAME;
+const t7Theme = Layout.TALEND_T7_THEME_CLASSNAME;
```

## List

`ListComposition`, its sub components and its hooks are not attached to `List` component.

```diff
-import List, { hooks } from '@talend/react-components/lib/List/ListComposition';
-import useCollectionSelection from '@talend/react-components/lib/List/ListComposition/Manager/hooks/useCollectionSelection.hook';
+import List from '@talend/react-components/lib/List';

-useCollectionSelection();
+List.hooks.useCollectionSelection();
```

## Loader

Loader sizes are now attached to the `Loader` component.

```diff
-import { CIRCULAR_PROGRESS_SIZE } from '@talend/react-components/lib/constants';
+import Loader from '@talend/react-components/lib/Loader';

-const size = CIRCULAR_PROGRESS_SIZE.small;
+const size = Loader.SIZE.small;
```

## ObjectViewer

`DISPLAY_MODES` constants are not exported anymore, but they are attached to `ObjectViewer` component.

```diff
-import { DISPLAY_MODES } from '@talend/react-components/lib/ObjectViewer/ObjectViewer.component';
+import ObjectViewer from '@talend/react-components/lib/ObjectViewer';

-const size = DISPLAY_MODES.TABLE;
+const size = ObjectViewer.DISPLAY_MODES.TABLE;
```

# OverlayTrigger

Exported `OverlayTrigger` from index is not the one from `react-bootstrap` anymore, it's the one from our talend library.

```diff
-import { OverlayTrigger } from '@talend/react-components';
+import { OverlayTrigger } from 'react-bootstrap';
```

# PieChart

`PieChartButton`, `PieChartIcon` and `PIECHART_SIZES` are not exported anymore, but they are attached to `PieChart` component.

```diff
-import { PieChartButton, PieChartIcon, PIECHART_SIZES } from '@talend/react-components/lib/PieChart';
+import PieChart from '@talend/react-components/lib/PieChart';

-<PieChartButton>
+<PieChart.Button>

-<PieChartIcon>
+<PieChart.Icon>

-const size = PIECHART_SIZES.small;
+const size = PieChart.SIZES.small;
```

# RadarChart

`LabelWithClick`, `Dot`, `Radar` and `PolarAngleAxis` are not exported anymore. They are attached to `RadarChart` component.

```diff
-import { LabelWithClick, Dot, Radar, Radar } from '@talend/react-components/lib/RadarChart/RadarChart.component';
+import RadarChart from '@talend/react-components/lib/RadarChart';

-<LabelWithClick>
+<RadarChart.LabelWithClick>

-<Dot>
+<RadarChart.Dot>

-<Radar>
+<RadarChart.Radar>

-<PolarAngleAxis>
+<RadarChart.PolarAngleAxis>
```

# ResourcePicker

`TOOLBAR_OPTIONS` are not exported anymore, but they are attaches to `ResourcePicker` component.

```diff
-import { TOOLBAR_OPTIONS } from '@talend/react-components/lib/ResourcePicker';
+import ResourcePicker from '@talend/react-components/lib/ResourcePicker';

-const option = TOOLBAR_OPTIONS.ORDERS;
+const option = ResourcePicker.TOOLBAR_OPTIONS.ORDERS;
```

## Rich: RichLayout / RichError / HeaderTitle

`HeaderTitle`, `RichLayout`, `RichError` are not exported from index anymore, but they are attached to a new `Rich` object.

```diff
-import HeaderTitle from '@talend/react-components/lib/HeaderTitle';
-import { HeaderTitle } from '@talend/react-components';
-import RichError from '@talend/react-components/lib/RichError';
-import { RichError } from '@talend/react-components';
-import RichLayout from '@talend/react-components/lib/RichLayout';
-import { RichLayout } from '@talend/react-components';
+import Rich '@talend/react-components/lib/Rich';
+<Rich.HeaderTitle></Rich.HeaderTitle>
+<Rich.Error></Rich.Error>
+<Rich.Layout></Rich.Layout>
```

# Slider

`SLIDER_MODE` are not exported anymore, but they are attached to `Slider` component.

```diff
-import { SLIDER_MODE } from '@talend/react-components/lib/Slider';
+import Slider from '@talend/react-components/lib/Slider';

-const mode = SLIDER_MODE.EQUALS;
+const mode = Slider.MODES.EQUALS;
```

# Status

`Status` is now default exported from `/lib/Status` and named exported from index.  
`getbsStyleFromStatus` is not exported anymore, but it is attached to `Status` component via `Status.getBsStyleFromStatus` (with a capital 'B').

```diff
-import { Status, getbsStyleFromStatus } from '@talend/react-components/lib/Status';
+import Status from '@talend/react-components/lib/Status';

-const bsStyle = getbsStyleFromStatus(statusName);
+const mode = Status.getBsStyleFromStatus(statusName);
```

# Stepper

`SHOW_COMPLETED_TRANSITION_TIMER`, `LOADING_STEP_STATUSES`, `isStepsLoading`, `isAllSuccessful` and `isErrorInSteps` are not exported anymore. They are attached to `Stepper` component.

```diff
-import { LOADING_STEP_STATUSES, isStepsLoading, isAllSuccessful, isErrorInSteps } from '@talend/react-components/lib/Stepper';
-import { SHOW_COMPLETED_TRANSITION_TIMER } from '@talend/react-components/lib/Stepper/Stepper.component';
+import Stepper from '@talend/react-components/lib/Stepper';

-const status = LOADING_STEP_STATUSES.ABORTED;
+const status = Stepper.LOADING_STEP_STATUSES.ABORTED;

-const isLoading = isStepsLoading(steps);
+const isLoading = Stepper.isStepsLoading(steps);

-const successful = isAllSuccessful(steps);
+const successful = Stepper.isAllSuccessful(steps);

-const error = isErrorInSteps(steps);
+const error = Stepper.isErrorInSteps(steps);

-const time = SHOW_COMPLETED_TRANSITION_TIMER;
+const time = isErrorInSteps.SHOW_COMPLETED_TRANSITION_TIMER;
```

SHOW_COMPLETED_TRANSITION_TIMER
LOADING_STEP_STATUSES,
isStepsLoading,
isAllSuccessful,
isErrorInSteps,

# SubHeaderBar

`SubHeaderBar` is now only default exported from `/lib/SubHeaderBar` and named exported from index.  
`SubHeaderBarActions` and `CustomInject` are not exported anymore, but they are attached to `SubHeaderBar` component.

```diff
-import { SubHeaderBar, SubHeaderBarActions, CustomInject } from '@talend/react-components/lib/SubHeaderBar/SubHeaderBar.component';
+import SubHeaderBar from '@talend/react-components/lib/SubHeaderBar';

-<SubHeaderBarActions></SubHeaderBarActions>
+<SubHeaderBar.Content></SubHeaderBar.Content>

-<CustomInject></CustomInject>
+<SubHeaderBar.Inject></SubHeaderBar.Inject>
```

# Table

`Table` component has been removed. It was never used because it was more like a PoC but ended up to be a PR that has been merged.

# Checkbox

`Checkbox` is not exposed bia `Toggle` anymore.

```diff
-import { Checkbox } from '@talend/react-components/lib/Toggle';
+import Checkbox from '@talend/react-components/lib/Checkbox';
```

# VirtualizedList

1. `rowDictionary`, `cellDictionary` and `headerDictionary` are not exported anymore. They are attached to the `VirtualizedList` component.

```diff
-import { rowDictionary, cellDictionary, headerDictionary } from '@talend/react-components/lib/VirtualizedList';
-import { rowDictionary, cellDictionary, headerDictionary } from '@talend/react-components/lib/VirtualizedList/utils/dictionary';
+import VirtualizedList from '@talend/react-components/lib/VirtualizedList';

-const dateTimeCell = cellDictionary.datetime;
+const dateTimeCell = VirtualizedList.cellDictionary.datetime;

-const headerRenderer = headerDictionary[headerType];
+const headerRenderer = VirtualizedList.headerDictionary[headerType];
```

2. Now that all the dictionaries are attached to the component, you must get (row, cell, header) renderers from `VirtualizedList` component.  
   So import the type name from the renderer, use directly the value; they are constants that won't ever change.

```diff
-import { headerType as headerResizableType } from '@talend/react-components/lib/VirtualizedList/HeaderResizable';
+import VirtualizedList from '@talend/react-components/lib/VirtualizedList';

-const HeaderResizable = VirtualizedList.headerDictionary[headerResizableType];
+const HeaderResizable = VirtualizedList.headerDictionary.resizable;
```

| Renderer             | Name              |
| -------------------- | ----------------- |
| HeaderIconRenderer   | icon              |
| HeaderResizable      | resizable         |
|                      |                   |
| rowType              | LARGE             |
| RowCollapsiblePanel  | COLLAPSIBLE_PANEL |
|                      |                   |
| CellActionsRenderer  | actions           |
| CellCheckboxRenderer | checkbox          |
| CellTitleRenderer    | title             |
| CellBadgeRenderer    | badge             |
| CellLabelRenderer    | label             |
| CellTextIconRenderer | text              |
| CellDatetimeRenderer | datetime          |

3. Constants are not exposed anymore, they are attached to `VirtualizedList` component.

```diff
-import { listTypes, SORT_BY, SELECTION_MODE } from '@talend/react-components/lib/VirtualizedList';
+import VirtualizedList from '@talend/react-components/lib/VirtualizedList';

-const type = listTypes.LARGE;
+const type = VirtualizedList.LIST_TYPES.LARGE;

-const sortMode = SORT_BY.ASC;
+const sortMode = VirtualizedList.SORT_BY.ASC;

-const selectionMode = SELECTION_MODE.SINGLE;
+const selectionMode = VirtualizedList.SELECTION_MODE.SINGLE;
```

4. `gridrow` utility functions are now attached to `VirtualizedList.rowUtils`

```diff
-import * as gridrow from '@talend/react-components/lib/VirtualizedList/utils/gridrow';
+import VirtualizedList from '@talend/react-components/lib/VirtualizedList';

-gridrow.extractSpecialFields(...args);
+VirtualizedList.rowUtils.extractSpecialFields(...args);
```