[Chore]: Technical: Isolate localization (#1858)

* Localizations isolation

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

* Prettier correction

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

* versions update

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

package.json

@@ -18,6 +18,7 @@
   "workspaces": [
     "./src/constants",
     "./src/types",
+    "./src/localization",
     "./src/middleware",
     "./src/deckgl-layers",
     "./src/layers",

src/components/common/animation-control/playback-controls.tsx

@@ -21,7 +21,7 @@
 import React, {useState, useCallback} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Button, Tooltip, ButtonProps} from 'components/common/styled-components';
 import AnimationSpeedSliderFactory from './animation-speed-slider';
 import {Reset, Play, Pause, Rocket, AnchorWindow, FreeWindow} from 'components/common/icons';

src/components/common/file-uploader/file-upload.tsx

@@ -32,7 +32,7 @@ import {GUIDES_FILE_FORMAT_DOC} from '@kepler.gl/constants';
 import ReactMarkdown from 'react-markdown';
 // Breakpoints
 import {media} from 'styles/media-breakpoints';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 /** @typedef {import('./file-upload').FileUploadProps} FileUploadProps */
 

src/components/common/info-helper.tsx

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Tooltip} from './styled-components';
 import {Docs} from 'components/common/icons';
 import styled from 'styled-components';

src/components/common/item-selector/chickleted-input.tsx

@@ -22,7 +22,7 @@ import React, {ElementType, MouseEventHandler, ReactNode} from 'react';
 
 import styled from 'styled-components';
 import Delete from '../icons/delete';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 interface ChickletedInput {
   // required properties

src/components/common/item-selector/item-selector.tsx

@@ -32,7 +32,7 @@ import DropdownList, {ListItem} from './dropdown-list';
 
 import {toArray} from 'utils/utils';
 import {injectIntl, IntlShape} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 interface StyledDropdownSelect {
   inputTheme?: string;

src/components/common/modal.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component, ReactNode} from 'react';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 import styled, {FlattenSimpleInterpolation} from 'styled-components';
 import Modal from 'react-modal';
@@ -158,7 +158,8 @@ interface ModalDialogOwnProps {
   children?: ReactNode;
 }
 
-export type ModalDialogProps = ModalDialogOwnProps & Omit<ReactModal.Props, "style" | "ariaHideApp" | "className">
+export type ModalDialogProps = ModalDialogOwnProps &
+  Omit<ReactModal.Props, 'style' | 'ariaHideApp' | 'className'>;
 
 export class ModalDialog extends Component<ModalDialogProps> {
   static defaultProps = {

src/components/common/toolbar-item.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {ComponentType, MouseEvent} from 'react';
 
 interface StyledDivProps {

src/components/filters/multi-select-filter.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import ItemSelector from '../common/item-selector/item-selector';
 import {PanelLabel} from '../common/styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {MultiSelectFilterProps} from './types';
 
 export default function MultiSelectFilterFactory() {

src/components/filters/single-select-filter.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import ItemSelector from '../common/item-selector/item-selector';
 import {PanelLabel, SidePanelSection} from '../common/styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {SingleSelectFilterProps} from './types';
 
 export default function SingleSelectFilterFactory() {

src/components/kepler-gl.tsx

@@ -25,7 +25,7 @@ import styled, {ThemeProvider, withTheme} from 'styled-components';
 import {createSelector} from 'reselect';
 import {connect as keplerGlConnect} from 'connect/keplergl-connect';
 import {IntlProvider} from 'react-intl';
-import {messages} from '../localization';
+import {messages} from '@kepler.gl/localization';
 import {RootContext} from 'components/context';
 import {OnErrorCallBack, OnSuccessCallBack} from 'actions/provider-actions';
 

src/components/map-container.tsx

@@ -61,7 +61,7 @@ import {FILTER_TYPES, GEOCODER_LAYER_ID, THROTTLE_NOTIFICATION_TIME} from '@kepl
 
 import ErrorBoundary from 'components/common/error-boundary';
 import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
-import {LOCALE_CODES} from 'localization/locales';
+import {LOCALE_CODES} from '@kepler.gl/localization';
 import {
   Datasets,
   Filter,

src/components/map/locale-panel.tsx

@@ -25,7 +25,7 @@ import ToolbarItem from 'components/common/toolbar-item';
 import {MapControlButton} from 'components/common/styled-components';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlToolbarFactory from './map-control-toolbar';
-import {FormattedMessage} from '../../localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import TippyTooltip from 'components/common/tippy-tooltip';
 import {MapControls} from 'reducers';
 

src/components/map/map-control-panel.tsx

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {IconRoundSmall} from 'components/common/styled-components';
 import {Close, Pin} from 'components/common/icons';
 

src/components/map/map-control-tooltip.tsx

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import {Tooltip} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 export type MapControlTooltipProps = {
   id: string;

src/components/map/map-draw-panel.tsx

@@ -35,7 +35,7 @@ import ToolbarItem from 'components/common/toolbar-item';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlPanelFactory from './map-control-panel';
 import MapControlToolbarFactory from './map-control-toolbar';
-import {FormattedMessage} from '../../localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import TippyTooltip from 'components/common/tippy-tooltip';
 import {Editor, MapControls} from 'reducers';
 import {BaseProps} from 'components/common/icons/base';

src/components/map/map-legend-panel.tsx

@@ -22,7 +22,7 @@ import React, {ComponentType, useState} from 'react';
 import styled from 'styled-components';
 
 import {Legend} from 'components/common/icons';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {MapControlButton} from 'components/common/styled-components';
 import MapControlPanelFactory from './map-control-panel';
 import MapLegendFactory from './map-legend';

src/components/map/map-legend.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {rgb} from 'd3-color';
 import ColorLegend from 'components/common/color-legend';
 import {CHANNEL_SCALES, DIMENSIONS} from '@kepler.gl/constants';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Layer, LayerBaseConfig, VisualChannel, VisualChannelDescription} from '@kepler.gl/layers';
 
 interface StyledMapControlLegendProps {

src/components/map/map-popover.tsx

@@ -24,7 +24,7 @@ import LayerHoverInfoFactory from './layer-hover-info';
 import CoordinateInfoFactory from './coordinate-info';
 import {ArrowLeft, ArrowRight, Pin} from 'components/common/icons';
 import {injectIntl, IntlShape} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import Tippy from '@tippyjs/react/headless';
 import {LayerHoverProp} from 'utils/layer-utils';
 

src/components/map/split-map-button.tsx

@@ -22,7 +22,7 @@ import React, {ComponentType, useCallback, useMemo} from 'react';
 import classnames from 'classnames';
 import {MapControlButton} from 'components/common/styled-components';
 import {Delete, Split} from 'components/common/icons';
-import {FormattedMessage} from '../../localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import TippyTooltip from '../common/tippy-tooltip';
 import {MapControl, MapControls} from 'reducers';
 

src/components/map/toggle-3d-button.tsx

@@ -23,7 +23,7 @@ import classnames from 'classnames';
 
 import {Cube3d} from 'components/common/icons';
 import {MapControlButton} from 'components/common/styled-components';
-import {FormattedMessage} from '../../localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import TippyTooltip from 'components/common/tippy-tooltip';
 import {MapControls} from 'reducers';
 

src/components/modals/add-map-style-modal.tsx

@@ -35,7 +35,7 @@ import {media} from 'styles/media-breakpoints';
 // Utils
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
 import {injectIntl, IntlShape} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {InputStyle, MapState} from 'reducers';
 import mapboxgl from 'mapbox-gl';
 

src/components/modals/delete-data-modal.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import DatasetLabel from 'components/common/dataset-label';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Layer} from '@kepler.gl/layers';
 import KeplerTable from 'utils/table-utils/kepler-table';
 

src/components/modals/export-data-modal.tsx

@@ -30,7 +30,7 @@ import {
   CheckMark
 } from 'components/common/styled-components';
 import {injectIntl, IntlShape} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Datasets} from 'reducers';
 
 const getDataRowCount = (

src/components/modals/export-image-modal.tsx

@@ -28,7 +28,7 @@ import {EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS} from '@kepler.g
 import {StyledModalContent, SelectionButton, CheckMark} from 'components/common/styled-components';
 import Switch from 'components/common/switch';
 import {injectIntl, IntlShape} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {ExportImage} from 'reducers';
 
 const ImageOptionList = styled.div`

src/components/modals/export-map-modal/export-html-map.tsx

@@ -28,7 +28,7 @@ import {
 } from '@kepler.gl/constants';
 import styled from 'styled-components';
 import {injectIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {IntlShape} from 'react-intl';
 
 import {setUserMapboxAccessToken, setExportHTMLMapMode, ActionHandler} from 'actions';

src/components/modals/export-map-modal/export-json-map.tsx

@@ -24,7 +24,7 @@ import {ADD_DATA_TO_MAP_DOC} from '@kepler.gl/constants';
 import styled from 'styled-components';
 import {StyledExportSection, Button} from 'components/common/styled-components';
 import {StyledExportMapSection, StyledWarning, ExportMapLink} from './components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 const StyledJsonExportSection = styled(StyledExportSection)`

src/components/modals/export-map-modal/export-map-modal.tsx

@@ -26,7 +26,7 @@ import {EXPORT_MAP_FORMATS, EXPORT_MAP_FORMAT_OPTIONS} from '@kepler.gl/constant
 import {StyledExportMapSection} from './components';
 import ExportHtmlMapFactory from './export-html-map';
 import ExportJsonMapFactory from './export-json-map';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {ActionHandler, setExportHTMLMapMode, setUserMapboxAccessToken} from 'actions';
 
 interface ExportMapModalFactoryProps {

src/components/modals/load-storage-map.tsx

@@ -27,7 +27,7 @@ import {Button} from 'components/common/styled-components';
 import CloudTile from './cloud-tile';
 import {Base, ArrowLeft} from 'components/common/icons';
 import ProviderModalContainer from './provider-modal-container';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {MapListItem, Provider} from 'cloud-providers';
 
 const StyledProviderSection = styled.div.attrs({

src/components/modals/loading-dialog.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import LoadingSpinner from 'components/common/loading-spinner';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 const StyledSpinner = styled.div`
   text-align: center;

src/components/modals/overwrite-map-modal.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {CenterVerticalFlexbox} from 'components/common/styled-components';
 import {UploadAnimation} from './status-panel';
 import ImageModalContainer from './image-modal-container';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Provider} from 'cloud-providers';
 
 import {ImageModalContainerProps} from './image-modal-container';

src/components/modals/save-map-modal.tsx

@@ -36,7 +36,7 @@ import {
   StyledModalInputFootnote
 } from 'components/common/styled-components';
 import ImagePreview from 'components/common/image-preview';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {ExportImage, MapInfo} from 'reducers';
 import {Provider} from 'cloud-providers';
 import {setMapInfo, cleanupExportImage} from 'actions';

src/components/modals/share-map-modal.tsx

@@ -33,7 +33,7 @@ import {
 } from 'components/common/styled-components';
 import CloudTile from './cloud-tile';
 import StatusPanel from './status-panel';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Provider} from 'cloud-providers';
 import {cleanupExportImage, SetCloudProviderPayload} from 'actions';
 

src/components/modals/status-panel.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {MapIcon} from 'components/common/icons';
 import {StyledExportSection} from 'components/common/styled-components';
 import ErrorDisplay from './error-display';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {IconProps} from 'cloud-providers/provider';
 
 const StyledUploader = styled.div`

src/components/modals/storage-map-viewer.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import styled from 'styled-components';
 import moment from 'moment';
 import {LeftArrow} from 'components/common/icons';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 const imageH = 108;
 

src/components/side-panel.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 import {
   EXPORT_DATA_ID,

src/components/side-panel/common/dataset-info.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import {format} from 'd3-format';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {DatasetInfoProps} from './types';
 
 const numFormat = format(',');

src/components/side-panel/common/dataset-tag.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import styled from 'styled-components';
 import {DatasetSquare, Tooltip} from 'components';
 import {DatasetTagProps, UpdateTableColorTypes} from './types';

src/components/side-panel/common/dataset-title.tsx

@@ -20,7 +20,7 @@
 
 import React, {createRef, MouseEvent, PureComponent} from 'react';
 import styled from 'styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 import {CenterFlexbox, Tooltip} from 'components/common/styled-components';
 import {ArrowRight, Table, Trash} from 'components/common/icons';

src/components/side-panel/common/source-data-selector.tsx

@@ -24,7 +24,7 @@ import {createSelector} from 'reselect';
 import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
 import ItemSelector from 'components/common/item-selector/item-selector';
 import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {DatasetItemProps, SourceDataSelectorProps} from './types';
 
 const defaultPlaceHolder = 'Select A Data Source';

src/components/side-panel/filter-manager.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {Button, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
 import {Add} from 'components/common/icons';
 import SourceDataCatalogFactory from './common/source-data-catalog';

src/components/side-panel/interaction-panel/brush-config.tsx

@@ -23,7 +23,7 @@ import RangeSliderFactory from 'components/common/range-slider';
 
 import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
 import {BRUSH_CONFIG} from 'utils/interaction-utils';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 BrushConfigFactory.deps = [RangeSliderFactory];
 

src/components/side-panel/interaction-panel/interaction-panel.tsx

@@ -31,7 +31,7 @@ import {
   PanelHeaderContent,
   PanelContent
 } from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 
 interface InteractionPanelProps {
   datasets: any;