Icons moved back to components

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

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/upload.tsx

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

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

@@ -22,8 +22,8 @@ import React, {useCallback} from 'react';
 import styled from 'styled-components';
 import Portaled from '../portaled';
 import DropdownList from '../item-selector/dropdown-list';
-import {Pin, SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST} from '@kepler.gl/constants';
-import {ArrowDown, ArrowUp, Clipboard, Cancel} from '../icons';
+import {SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST} from '@kepler.gl/constants';
+import {ArrowDown, ArrowUp, Clipboard, Pin, Cancel} from '../icons';
 
 const ListItem = ({value}) => (
   <div>

src/components/src/common/icons/add.tsx

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

src/components/src/common/icons/anchor_window.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import {Base, BaseProps} from '@kepler.gl/constants';
+import Base, {BaseProps} from './base';
 
 const AnchorWindow = (props: Partial<BaseProps>) => (
   <Base {...props}>

src/components/src/common/icons/arrow-down-alt.tsx

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

src/components/src/common/icons/arrow-down-solid.tsx

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

src/components/src/common/icons/arrow-down.tsx

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

src/components/src/common/icons/arrow-left.tsx

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

src/components/src/common/icons/arrow-right.tsx

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

src/components/src/common/icons/arrow-up-alt.tsx

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

src/components/src/common/icons/arrow-up-solid.tsx

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

src/components/src/common/icons/arrow-up.tsx

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

src/components/src/common/icons/bug.tsx

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

src/components/src/common/icons/cancel.tsx

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

src/components/src/common/icons/checkmark.tsx

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

src/components/src/common/icons/clipboard.tsx

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

src/components/src/common/icons/clock.tsx

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

src/components/src/common/icons/close.tsx

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

src/components/src/common/icons/code-alt.tsx

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

src/components/src/common/icons/copy.tsx

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

src/components/src/common/icons/cube-3d.tsx

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

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

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

src/components/src/common/icons/db.tsx

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

src/components/src/common/icons/delete.tsx

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

src/components/src/common/icons/docs.tsx

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

src/components/src/common/icons/drag-n-drop.tsx

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

src/components/src/common/icons/draw-polygon.tsx

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

src/components/src/common/icons/email.tsx

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

src/components/src/common/icons/expand.tsx

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

src/components/src/common/icons/eye-seen.tsx

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

src/components/src/common/icons/eye-unseen.tsx

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

src/components/src/common/icons/file.tsx

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

src/components/src/common/icons/files.tsx

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