[Chore]: Technical: constants and types modules isolation

.eslintrc

@@ -19,14 +19,15 @@
     "context": true,
     "jestPuppeteer": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "plugins": ["babel", "prettier", "react", "@typescript-eslint"],
   "rules": {
     "valid-jsdoc": 0,
     "no-var": 0,
     "max-len": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-multi-comp": 0,
+    "no-use-before-define": "off",
     "prefer-spread": 1,
     "prefer-template": 1,
     "prettier/prettier": "error",

.gitignore

@@ -23,3 +23,11 @@ package-lock.json
 /index.html
 
 npm-debug.log
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

package.json

@@ -14,6 +14,11 @@
     "visualization",
     "deck.gl"
   ],
+  "private": true,
+  "workspaces": [
+    "./src/constants",
+    "./src/types"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/keplergl/kepler.gl.git"
@@ -50,12 +55,12 @@
     "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",
-    "prepublish": "uber-licence && yarn build && yarn build:umd && yarn build:types",
+    "prepublish": "yarn workspaces run prepublish && uber-licence && yarn build && yarn build:umd && yarn build:types",
     "docs": "babel-node ./scripts/documentation.js",
     "typedoc": "typedoc --theme markdown --out typedoc --inputFiles ./src/reducers --inputFiles ./src/actions --excludeExternals --excludeNotExported --excludePrivate",
     "example-version": "babel-node ./scripts/edit-version.js",
     "prettier-all": "prettier --write '{src,examples,test}/**/*.{js,tsx,ts}'",
-    "lint": "yarn typescript && eslint src test webpack examples/*.js examples/**/src/*.{js,tsx,ts} website/*.js website/src --fix",
+    "lint": "yarn typescript && eslint src/*/src/*.{js,tsx,ts}  test webpack examples/*.js examples/**/src/*.{js,tsx,ts} website/*.js website/src --fix",
     "lint:css": "stylelint './src/**/*.js'",
     "typescript": "tsc --noEmit",
     "web": "(yarn && yarn install:web && yarn start:web)",
@@ -132,6 +137,7 @@
     "@types/react-virtualized": "^9.21.20",
     "@types/react-vis": "^1.8.0",
     "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/parser": "^5.27.0",
     "classnames": "^2.2.1",
     "colorbrewer": "^1.5.0",
     "copy-to-clipboard": "^3.3.1",

src/actions/actions.ts

@@ -18,11 +18,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import ActionTypes from 'constants/action-types';
+import {ActionTypes} from '@kepler.gl/constants';
 import {createAction} from '@reduxjs/toolkit';
 
 import {ParsedConfig} from '../schemas';
-import {RGBColor} from 'reducers/types';
+import {RGBColor} from '@kepler.gl/types';
 import {Bounds} from 'reducers/map-state-updaters';
 import {MapInfo} from 'reducers/vis-state-updaters';
 import {UiState} from 'reducers/ui-state-updaters';

src/actions/identity-actions.ts

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {createAction} from '@reduxjs/toolkit';
-import ActionTypes from 'constants/action-types';
+import {ActionTypes} from '@kepler.gl/constants';
 import {UiState} from 'reducers/ui-state-updaters';
 
 export type RegisterEntryUpdaterAction = {

src/actions/index.ts

@@ -39,4 +39,4 @@ export {
   wrapTo
 } from './action-wrapper';
 
-export {default as ActionTypes} from '../constants/action-types';
+export {ActionTypes} from '@kepler.gl/constants';

src/actions/map-state-actions.ts

@@ -19,8 +19,8 @@
 // THE SOFTWARE.
 
 import {createAction} from '@reduxjs/toolkit';
-import ActionTypes from 'constants/action-types';
-import {Merge} from '../reducers/types';
+import {ActionTypes} from '@kepler.gl/constants';
+import {Merge} from '@kepler.gl/types';
 import {Bounds, Viewport} from '../reducers/map-state-updaters';
 
 export type TogglePerspectiveUpdaterAction = {};

src/actions/map-style-actions.ts

@@ -19,8 +19,8 @@
 // THE SOFTWARE.
 
 import {createAction} from '@reduxjs/toolkit';
-import ActionTypes from 'constants/action-types';
-import {Merge, RGBColor} from '../reducers/types';
+import {ActionTypes} from '@kepler.gl/constants';
+import {Merge, RGBColor} from '@kepler.gl/types';
 import {InputStyle, MapStyles, VisibleLayerGroups} from '../reducers/map-style-updaters';
 import {MapState} from '../reducers/map-state-updaters';
 

src/actions/provider-actions.ts

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {createAction} from '@reduxjs/toolkit';
-import {ACTION_PREFIX} from 'constants/action-types';
+import {ACTION_PREFIX} from '@kepler.gl/constants';
 import {SavedMap} from 'schemas';
 import {MapListItem, Provider} from 'cloud-providers';
 

src/actions/ui-state-actions.ts

@@ -19,8 +19,8 @@
 // THE SOFTWARE.
 
 import {createAction} from '@reduxjs/toolkit';
-import ActionTypes from 'constants/action-types';
-import {Merge} from '../reducers/types';
+import {ActionTypes} from '@kepler.gl/constants';
+import {Merge} from '@kepler.gl/types';
 import {ExportImage} from '../reducers/ui-state-updaters';
 
 /** TOGGLE_SIDE_PANEL */

src/actions/vis-state-actions.ts

@@ -19,12 +19,12 @@
 // THE SOFTWARE.
 
 // vis-state-reducer
-import ActionTypes from 'constants/action-types';
+import {ActionTypes} from '@kepler.gl/constants';
 import {AddDataToMapPayload} from '../actions/actions';
 import {FileCacheItem} from '../processors/types';
 import {Layer, LayerBaseConfig, LayerVisConfig} from 'layers';
 import {Feature, InteractionConfig} from 'reducers/vis-state-updaters';
-import {ValueOf, Merge, RGBColor, NestedPartial} from '../reducers/types';
+import {ValueOf, Merge, RGBColor, NestedPartial} from '@kepler.gl/types';
 import {ColorUI} from 'layers/layer-factory';
 // TODO - import LoaderObject type from @loaders.gl/core when supported
 // TODO - import LoadOptions type from @loaders.gl/core when supported

src/components/bottom-widget.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import TimeWidgetFactory from './filters/time-widget';
 import AnimationControlFactory from './common/animation-control/animation-control';
 import AnimationControllerFactory from './common/animation-control/animation-controller';
-import {ANIMATION_WINDOW, DIMENSIONS, FILTER_TYPES} from 'constants/default-settings';
+import {ANIMATION_WINDOW, DIMENSIONS, FILTER_TYPES} from '@kepler.gl/constants';
 import {getIntervalBins} from 'utils/filter-utils';
 import {media} from 'styles/media-breakpoints';
 import {AnimationConfig, TimeRangeFilter} from 'reducers';

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

@@ -27,7 +27,7 @@ import {BottomWidgetInner} from 'components/common/styled-components';
 import PlaybackControlsFactory from './playback-controls';
 import FloatingTimeDisplayFactory from './floating-time-display';
 import {snapToMarks, datetimeFormatter} from 'utils/data-utils';
-import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+import {DEFAULT_TIME_FORMAT} from '@kepler.gl/constants';
 
 const SliderWrapper = styled.div`
   display: flex;

src/components/common/animation-control/animation-controller.ts

@@ -22,7 +22,7 @@ import {Component} from 'react';
 import {bisectLeft} from 'd3-array';
 import {requestAnimationFrame, cancelAnimationFrame} from 'global/window';
 import Console from 'global/console';
-import {BASE_SPEED, FPS, ANIMATION_WINDOW} from 'constants/default-settings';
+import {BASE_SPEED, FPS, ANIMATION_WINDOW} from '@kepler.gl/constants';
 
 interface AnimationControllerProps<T extends number | number[]> {
   isAnimating?: boolean;

src/components/common/animation-control/animation-speed-slider.tsx

@@ -22,7 +22,7 @@ import React, {Component, ComponentType} from 'react';
 import styled from 'styled-components';
 import RangeSliderFactory from 'components/common/range-slider';
 import onClickOutside from 'react-onclickoutside';
-import {SPEED_CONTROL_RANGE, SPEED_CONTROL_STEP} from 'constants/default-settings';
+import {SPEED_CONTROL_RANGE, SPEED_CONTROL_STEP} from '@kepler.gl/constants';
 
 const SliderWrapper = styled.div`
   position: relative;

src/components/common/animation-control/floating-time-display.tsx

@@ -22,7 +22,7 @@ import React, {useMemo} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import {Minus} from 'components/common/icons';
-import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+import {DEFAULT_TIME_FORMAT} from '@kepler.gl/constants';
 import {CenterFlexbox} from 'components/common/styled-components';
 import {datetimeFormatter} from 'utils/data-utils';
 

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

@@ -25,7 +25,7 @@ import {FormattedMessage} from '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';
-import {ANIMATION_WINDOW} from 'constants/default-settings';
+import {ANIMATION_WINDOW} from '@kepler.gl/constants';
 import {preciseRound} from 'utils/data-utils';
 import {ReactComponentLike} from 'prop-types';
 

src/components/common/color-legend.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {createSelector} from 'reselect';
 import {format} from 'd3-format';
 import moment from 'moment';
-import {SCALE_TYPES, SCALE_FUNC, ALL_FIELD_TYPES} from 'constants/default-settings';
+import {SCALE_TYPES, SCALE_FUNC, ALL_FIELD_TYPES} from '@kepler.gl/constants';
 import {getTimeWidgetHintFormatter} from 'utils/filter-utils';
 
 const ROW_H = 10;

src/components/common/data-table/index.tsx

@@ -35,7 +35,7 @@ import {ArrowUp, ArrowDown, VertThreeDots} from 'components/common/icons';
 import {parseFieldValue} from 'utils/data-utils';
 import {adjustCellsToContainer} from './cell-size';
 
-import {ALL_FIELD_TYPES, SORT_ORDER} from 'constants/default-settings';
+import {ALL_FIELD_TYPES, SORT_ORDER} from '@kepler.gl/constants';
 import FieldTokenFactory from 'components/common/field-token';
 import {DataContainerInterface} from 'utils/table-utils/data-container-interface';
 

src/components/common/data-table/option-dropdown.tsx

@@ -22,7 +22,8 @@ import React, {useCallback} from 'react';
 import styled from 'styled-components';
 import Portaled from 'components/common/portaled';
 import DropdownList from 'components/common/item-selector/dropdown-list';
-import {SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST} from 'constants/default-settings';
+import {SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST} from '@kepler.gl/constants';
+import {Pin, ArrowDown, ArrowUp, Clipboard, Cancel} from 'components/common/icons';
 
 const ListItem = ({value}) => (
   <div>
@@ -102,7 +103,18 @@ const OptionDropdown = (props: OptionDropdownProps) => {
     [column, sortTableColumn, pinTableColumn, copyTableColumn, toggleMoreOptions]
   );
 
-  const options = TABLE_OPTION_LIST.filter(op => !op.condition || op.condition(props));
+  const TABLE_OPTION_LIST_ICONS = {
+    Pin: Pin,
+    ArrowDown: ArrowDown,
+    ArrowUp: ArrowUp,
+    Clipboard: Clipboard,
+    Cancel: Cancel
+  };
+
+  const options = TABLE_OPTION_LIST.filter(op => !op.condition || op.condition(props)).map(op => ({
+    ...op,
+    icon: TABLE_OPTION_LIST_ICONS[op.icon]
+  }));
 
   return (
     <Portaled right={120} top={20} isOpened={isOpened} onClose={() => toggleMoreOptions(column)}>

src/components/common/dataset-label.tsx

@@ -21,7 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import {CenterFlexbox, DatasetSquare} from 'components/common/styled-components';
-import {RGBColor} from 'reducers';
+import {RGBColor} from '@kepler.gl/types';
 
 const DatasetName = styled.div.attrs({
   className: 'dataset-name'

src/components/common/field-token.tsx

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {FILED_TYPE_DISPLAY, FIELD_COLORS} from 'constants/default-settings';
+import {FILED_TYPE_DISPLAY, FIELD_COLORS} from '@kepler.gl/constants';
 
 function FieldTokenFactory(
   fieldTypeDisplay: ReturnType<typeof getFieldTypes>,

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

@@ -28,7 +28,7 @@ import FileDrop from './file-drop';
 import {FileLoading, FileLoadingProgress} from 'reducers/vis-state-updaters';
 
 import {isChrome} from 'utils/utils';
-import {GUIDES_FILE_FORMAT_DOC} from 'constants/user-guides';
+import {GUIDES_FILE_FORMAT_DOC} from '@kepler.gl/constants';
 import ReactMarkdown from 'react-markdown';
 // Breakpoints
 import {media} from 'styles/media-breakpoints';

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

@@ -28,7 +28,7 @@ import {console as Console} from 'global/window';
 import Accessor from './accessor';
 import DropdownList, {ListItem} from './dropdown-list';
 import {Search} from 'components/common/icons';
-import KeyEvent from 'constants/keyevent';
+import {KeyEvent} from '@kepler.gl/constants';
 
 const DEFAULT_CLASS = 'typeahead';
 /**

src/components/common/logo.tsx

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {KEPLER_GL_NAME, KEPLER_GL_VERSION, KEPLER_GL_WEBSITE} from 'constants/default-settings';
+import {KEPLER_GL_NAME, KEPLER_GL_VERSION, KEPLER_GL_WEBSITE} from '@kepler.gl/constants';
 
 const LogoTitle = styled.div`
   display: inline-block;

src/components/common/styled-components.tsx

@@ -22,7 +22,7 @@ import styled from 'styled-components';
 import ReactTooltip from 'react-tooltip';
 import {media} from 'styles/media-breakpoints';
 import classnames from 'classnames';
-import {RGBColor} from 'reducers';
+import {RGBColor} from '@kepler.gl/types';
 
 export const SelectText = styled.span`
   color: ${props => props.theme.labelColor};

src/components/container.tsx

@@ -95,17 +95,6 @@ export function ContainerFactory(
       mint: true
     };
 
-    getSelector = memoize((id, getState) => state => {
-      if (!getState(state)) {
-        // log error
-        Console.error(ERROR_MSG.noState);
-
-        return null;
-      }
-      return getState(state)[id];
-    });
-    getDispatch = memoize((id, dispatch) => forwardTo(id, dispatch));
-
     componentDidMount() {
       const {
         id,
@@ -147,6 +136,17 @@ export function ContainerFactory(
       }
     }
 
+    getSelector = memoize((id, getState) => state => {
+      if (!getState(state)) {
+        // log error
+        Console.error(ERROR_MSG.noState);
+
+        return null;
+      }
+      return getState(state)[id];
+    });
+    getDispatch = memoize((id, dispatch) => forwardTo(id, dispatch));
+
     render() {
       const {id, getState, dispatch, state} = this.props;
       const selector = this.getSelector(id, getState);

src/components/editor/editor.tsx

@@ -27,11 +27,11 @@ import get from 'lodash.get';
 import {createSelector} from 'reselect';
 
 import FeatureActionPanelFactory, {FeatureActionPanelProps} from './feature-action-panel';
-import {FILTER_TYPES, EDITOR_MODES, EDITOR_AVAILABLE_LAYERS} from 'constants/default-settings';
+import {FILTER_TYPES, EDITOR_MODES, KeyEvent} from '@kepler.gl/constants';
+import {EDITOR_AVAILABLE_LAYERS} from 'layers/types';
 
 import {DEFAULT_RADIUS, getStyle as getFeatureStyle} from './feature-styles';
 import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style';
-import KeyEvent from 'constants/keyevent';
 import {Layer} from 'layers';
 import {Datasets, Filter} from 'reducers';
 import {Feature} from '@nebula.gl/edit-modes';

src/components/filters/time-range-filter.tsx

@@ -20,10 +20,9 @@
 
 import React from 'react';
 import TimeRangeSliderFactory from 'components/common/time-range-slider';
-import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+import {DEFAULT_TIME_FORMAT} from '@kepler.gl/constants';
 import {TimeRangeFilter} from 'reducers';
 import {TimeRangeFilterProps} from './types';
-
 /*
  * TimeRangeFilter -> TimeRangeSlider -> RangeSlider
  */

src/components/geocoder-panel.tsx

@@ -32,7 +32,7 @@ import {
   GEOCODER_GEO_OFFSET,
   GEOCODER_ICON_COLOR,
   GEOCODER_ICON_SIZE
-} from 'constants/default-settings';
+} from '@kepler.gl/constants';
 import {MapState, Viewport} from 'reducers';
 
 const ICON_LAYER = {

src/components/geocoder/geocoder.tsx

@@ -24,7 +24,7 @@ import classnames from 'classnames';
 import MapboxClient from 'mapbox';
 import {injectIntl, IntlShape} from 'react-intl';
 import {WebMercatorViewport} from 'viewport-mercator-project';
-import KeyEvent from 'constants/keyevent';
+import {KeyEvent} from '@kepler.gl/constants';
 import {Input} from 'components/common/styled-components';
 import {Search, Delete} from 'components/common/icons';
 import {Viewport} from 'reducers/map-state-updaters';