[Chore]: Technical: Isolate components (#1967)

* Components imports fixed

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

* Moved some icont to constants

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

* test imports fixed

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

* Exports fixed

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

* components isolated

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

* Imports updated

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

* Some import fixes

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

* Review corrections

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

* Build fix

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

* Build fix

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

* Icons moved back to components

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

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

package.json

@@ -30,7 +30,8 @@
     "./src/processors",
     "./src/tasks",
     "./src/actions",
-    "./src/reducers"
+    "./src/reducers",
+    "./src/components"
   ],
   "repository": {
     "type": "git",

src/actions/src/provider-actions.ts

@@ -21,7 +21,7 @@
 import {createAction} from '@reduxjs/toolkit';
 import {ACTION_PREFIX} from './action-types';
 import {ExportFileOptions, ExportFileToCloudPayload, OnErrorCallBack, OnSuccessCallBack} from '@kepler.gl/types';
-import {MapListItem, Provider} from 'cloud-providers';
+import {MapListItem, Provider} from '@kepler.gl/cloud-providers';
 
 // eslint-disable-next-line prettier/prettier
 const assignType = <T>(obj: T): { [K in keyof T]: `${typeof ACTION_PREFIX}${string & K}`; } => obj as any

src/actions/tsconfig.production.json

@@ -22,9 +22,9 @@
     "strict": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "baseUrl": "../../src", //TODO change once all dependencies are isolated
+    "baseUrl": "./src",
     "paths": {
-      "@kepler.gl/actions": ["actions/src"] //TODO change once all dependencies are isolated
+      "*": ["*"]
     }
   },
   "include": [

src/cloud-providers/package.json

@@ -5,7 +5,7 @@
   "description": "kepler.gl constants used by kepler.gl components, actions and reducers",
   "license": "MIT",
   "main": "dist/index.js",
-  "types": "dist/cloud-providers/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "keywords": [
     "babel",
     "es6",

src/cloud-providers/src/base.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, CSSProperties} from 'react';
+
+const getStyleClassFromColor = (totalColor: number, colors: string[]) =>
+  new Array(totalColor)
+    .fill(1)
+    .reduce((accu, c, i) => `${accu}.cr${i + 1} {fill:${colors[i % colors.length]};}`, '');
+
+const nop = () => {};
+
+export type BaseProps = {
+  /** Set the height of the icon, ex. '16px' */
+  height?: string;
+  /** Set the width of the icon, ex. '16px' */
+  width?: string;
+  /** Set the viewbox of the svg */
+  viewBox?: string;
+  /** Path element */
+
+  predefinedClassName?: string;
+  className?: string;
+  style?: CSSProperties;
+  colors?: string[];
+  totalColor?: number;
+} & React.SVGAttributes<SVGSVGElement> &
+  React.DOMAttributes<SVGSVGElement>;
+
+export class Base extends Component<BaseProps> {
+  static displayName = 'Base Icon';
+
+  static defaultProps = {
+    height: null,
+    width: null,
+    viewBox: '0 0 64 64',
+    predefinedClassName: '',
+    className: '',
+    style: {
+      fill: 'currentColor'
+    }
+  };
+
+  render() {
+    const {
+      height,
+      width,
+      viewBox,
+      style,
+      children,
+      predefinedClassName,
+      className,
+      colors,
+      totalColor,
+      ...props
+    } = this.props;
+    const svgHeight = height;
+    const svgWidth = width || svgHeight;
+
+    const fillStyle =
+      Array.isArray(colors) && totalColor && getStyleClassFromColor(totalColor, colors);
+
+    return (
+      <svg
+        viewBox={viewBox}
+        width={svgWidth}
+        height={svgHeight}
+        style={style}
+        className={`${predefinedClassName} ${className}`}
+        onClick={nop}
+        {...props}
+      >
+        {fillStyle ? <style type="text/css">{fillStyle}</style> : null}
+        {children}
+      </svg>
+    );
+  }
+}

src/cloud-providers/src/index.ts

@@ -21,3 +21,4 @@
 export {default as Provider, FILE_CONFLICT_MSG} from './provider';
 // eslint-disable-next-line prettier/prettier
 export type {MapListItem, Millisecond, Thumbnail, ProviderProps, IconProps} from './provider';
+export {default as Upload} from './upload';

src/cloud-providers/src/provider.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {Upload} from 'components/common/icons';
+import Upload from './upload';
 import {MapData, ExportFileOptions} from '@kepler.gl/types';
 import {ComponentType} from 'react';
 

src/components/common/icons/upload.tsx → src/cloud-providers/src/upload.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component} from 'react';
-import Base, {BaseProps} from './base';
+import {Base, BaseProps} from './base';
 
 export default class Upload extends Component<Partial<BaseProps>> {
   static defaultProps = {

src/cloud-providers/tsconfig.production.json

@@ -22,9 +22,9 @@
     "strict": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "baseUrl": "../../src", //TODO change once all dependencies are isolated
+    "baseUrl": "./src",
     "paths": {
-      "@kepler.gl/cloud-providers": ["cloud-providers/src"] //TODO change once all dependencies are isolated
+      "*": ["*"]
     }
   },
   "include": [

src/components/babel.config.js

@@ -0,0 +1,65 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const KeplerPackage = require('./package');
+
+const PRESETS = ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'];
+const PLUGINS = [
+  ['@babel/plugin-transform-typescript', {isTSX: true, allowDeclareFields: true}],
+  '@babel/plugin-transform-modules-commonjs',
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-optional-chaining',
+  [
+    '@babel/transform-runtime',
+    {
+      regenerator: true
+    }
+  ],
+  [
+    'search-and-replace',
+    {
+      rules: [
+        {
+          search: '__PACKAGE_VERSION__',
+          replace: KeplerPackage.version
+        }
+      ]
+    }
+  ]
+];
+const ENV = {
+  test: {
+    plugins: ['istanbul']
+  },
+  debug: {
+    sourceMaps: 'inline',
+    retainLines: true
+  }
+};
+
+module.exports = function babel(api) {
+  api.cache(true);
+
+  return {
+    presets: PRESETS,
+    plugins: PLUGINS,
+    env: ENV
+  };
+};

src/components/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@kepler.gl/components",
+  "author": "Shan He <shan@uber.com>",
+  "version": "2.5.5",
+  "description": "kepler.gl constants used by kepler.gl components, actions and reducers",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "babel",
+    "es6",
+    "react",
+    "webgl",
+    "visualization",
+    "deck.gl"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keplergl/kepler.gl.git"
+  },
+  "scripts": {
+    "build": "rm -fr dist && babel src --out-dir dist --source-maps inline --extensions '.ts,.tsx,.js,.jsx' --ignore '**/*.d.ts'",
+    "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
+    "build:types": "tsc --project ./tsconfig.production.json",
+    "prepublish": "uber-licence && yarn build && yarn build:types",
+    "stab": "mkdir -p dist && touch dist/index.js"
+  },
+  "files": [
+    "dist",
+    "umd"
+  ],
+  "nyc": {
+    "sourceMap": false,
+    "instrument": false
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "maintainers": [
+    "Shan He <heshan0131@gmail.com>",
+    "Giuseppe Macri <gmacri@uber.com>"
+  ],
+  "volta": {
+    "node": "12.22.0",
+    "yarn": "1.22.17"
+  }
+}

src/components/common/action-panel.tsx → src/components/src/common/action-panel.tsx

@@ -21,8 +21,8 @@
 import React, {useCallback, PropsWithChildren, ElementType, CSSProperties, ReactNode} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
-import {ArrowRight} from 'components/common/icons';
-import Checkbox from 'components/common/switch';
+import {ArrowRight} from './icons';
+import Checkbox from './switch';
 
 export type ActionPanelProps = PropsWithChildren<{
   color?: string;

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

@@ -22,8 +22,8 @@ import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 
-import Slider from 'components/common/slider/slider';
-import {BottomWidgetInner} from 'components/common/styled-components';
+import Slider from '../slider/slider';
+import {BottomWidgetInner} from '../styled-components';
 import PlaybackControlsFactory from './playback-controls';
 import FloatingTimeDisplayFactory from './floating-time-display';
 import {datetimeFormatter, snapToMarks} from '@kepler.gl/utils';

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

@@ -20,7 +20,7 @@
 
 import React, {Component, ComponentType} from 'react';
 import styled from 'styled-components';
-import RangeSliderFactory from 'components/common/range-slider';
+import RangeSliderFactory from '../range-slider';
 import onClickOutside from 'react-onclickoutside';
 import {SPEED_CONTROL_RANGE, SPEED_CONTROL_STEP} from '@kepler.gl/constants';
 

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

@@ -1,8 +1,8 @@
 import React, {useCallback} from 'react';
-import {FormattedMessage} from 'localization';
+import {FormattedMessage} from '@kepler.gl/localization';
 import {ReactComponentLike} from 'prop-types';
 import IconButton from '../icon-button';
-import {Tooltip} from 'components/common/styled-components';
+import {Tooltip} from '../styled-components';
 
 export interface AnimationItem {
   id: string;

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

@@ -21,9 +21,9 @@
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
-import {Minus} from 'components/common/icons';
+import {Minus} from '../icons';
 import {DEFAULT_TIME_FORMAT} from '@kepler.gl/constants';
-import {CenterFlexbox} from 'components/common/styled-components';
+import {CenterFlexbox} from '../../common/styled-components';
 import {datetimeFormatter} from '@kepler.gl/utils';
 
 const StyledTimeDisplayWrapper = styled.div.attrs({

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import {FormattedMessage} from 'localization';
-import {Tooltip} from 'components/common/styled-components';
+import {FormattedMessage} from '@kepler.gl/localization';
+import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
 
 const DELAY_SHOW = 500;

src/components/common/animation-control/playback-controls.tsx → src/components/src/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 {Reset, Play, Pause, Save, Rocket, AnchorWindow, FreeWindow} from 'components/common/icons';
+import {Reset, Play, Pause, Save, Rocket, AnchorWindow, FreeWindow} from '../icons';
 import {ANIMATION_WINDOW} from '@kepler.gl/constants';
 import AnimationSpeedSliderFactory from './animation-speed-slider';
 import WindowActionControlFactory from './window-action-control';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import {FormattedMessage} from 'localization';
-import {Tooltip} from 'components/common/styled-components';
+import {FormattedMessage} from '@kepler.gl/localization';
+import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
 
 const DELAY_SHOW = 500;

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

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {Tooltip} from 'components/common/styled-components';
+import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
 import {media} from '@kepler.gl/styles';
 import {preciseRound} from '@kepler.gl/utils';

src/components/common/animation-control/window-action-control.tsx → src/components/src/common/animation-control/window-action-control.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import classnames from 'classnames';
-import {FormattedMessage} from 'localization';
-import {Tooltip} from 'components/common/styled-components';
+import {FormattedMessage} from '@kepler.gl/localization';
+import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
 
 const DELAY_SHOW = 500;