[Chore]: Technical: Isolate cloud-providers (#1942)

* cloud-provider isolation

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

* package.json update

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

* examples imports updated

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

* imports merge

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

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

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -21,8 +21,9 @@
 import {OAuthApp} from '@carto/toolkit';
 import Console from 'global/console';
 import CartoIcon from './carto-icon';
-import {Provider} from 'kepler.gl/cloud-providers';
-import {createDataContainer, formatCsv} from 'kepler.gl/reducers/table-utils';
+import {Provider} from '@kepler.gl/cloud-providers';
+import {createDataContainer} from 'kepler.gl/reducers/table-utils';
+import {formatCsv} from 'kepler.gl/reducers';
 
 const NAME = 'carto';
 const DISPLAY_NAME = 'CARTO';

examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js

@@ -24,7 +24,7 @@ import window from 'global/window';
 import Console from 'global/console';
 import DropboxIcon from './dropbox-icon';
 import {MAP_URI} from '../../constants/default-settings';
-import {Provider} from 'kepler.gl/cloud-providers';
+import {Provider} from '@kepler.gl/cloud-providers';
 
 const NAME = 'dropbox';
 const DISPLAY_NAME = 'Dropbox';

package.json

@@ -24,6 +24,7 @@
     "./src/middleware",
     "./src/deckgl-layers",
     "./src/layers",
+    "./src/cloud-providers",
     "./src/processors"
   ],
   "repository": {

src/cloud-providers/babel.config.js

@@ -0,0 +1,66 @@
+// 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-export-namespace-from',
+  '@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/cloud-providers/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@kepler.gl/cloud-providers",
+  "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/cloud-providers/src/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/cloud-providers/index.ts → src/cloud-providers/src/index.ts

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

src/cloud-providers/tsconfig.production.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "allowJs": false,
+    "checkJs": false,
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration":true,
+    "emitDeclarationOnly":true,
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": "../../src", //TODO change once all dependencies are isolated
+    "paths": {
+      "@kepler.gl/cloud-providers": ["cloud-providers/src"] //TODO change once all dependencies are isolated
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

src/cloud-providers/webpack/umd.js

@@ -0,0 +1,120 @@
+// 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 resolve = require('path').resolve;
+const join = require('path').join;
+
+// Import package.json to read version
+const KeplerPackage = require('../package');
+
+const SRC_DIR = resolve(__dirname, '../src');
+const OUTPUT_DIR = resolve(__dirname, '../umd');
+
+const LIBRARY_BUNDLE_CONFIG = env => ({
+  entry: {
+    KeplerGl: join(SRC_DIR, 'index.ts')
+  },
+
+  // Silence warnings about big bundles
+  stats: {
+    warnings: false
+  },
+
+  output: {
+    // Generate the bundle in dist folder
+    path: OUTPUT_DIR,
+    filename: 'keplergl.min.js',
+    globalObject: 'this',
+    library: '[name]',
+    libraryTarget: 'umd'
+  },
+
+  // let's put everything in
+  externals: {
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react',
+      umd: 'react'
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom',
+      umd: 'react-dom'
+    },
+    redux: {
+      root: 'Redux',
+      commonjs2: 'redux',
+      commonjs: 'redux',
+      amd: 'redux',
+      umd: 'redux'
+    },
+    'react-redux': {
+      root: 'ReactRedux',
+      commonjs2: 'react-redux',
+      commonjs: 'react-redux',
+      amd: 'react-redux',
+      umd: 'react-redux'
+    },
+    'styled-components': {
+      commonjs: 'styled-components',
+      commonjs2: 'styled-components',
+      amd: 'styled-components',
+      root: 'styled'
+    }
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    modules: ['node_modules', SRC_DIR]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        loader: 'babel-loader',
+        include: [SRC_DIR],
+        options: {
+          plugins: [
+            [
+              'search-and-replace',
+              {
+                rules: [
+                  {
+                    search: '__PACKAGE_VERSION__',
+                    replace: KeplerPackage.version
+                  }
+                ]
+              }
+            ]
+          ]
+        }
+      }
+    ]
+  },
+
+  node: {
+    fs: 'empty'
+  }
+});
+
+module.exports = env => LIBRARY_BUNDLE_CONFIG(env);

src/components/modals/cloud-tile.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {Logout, Login} from 'components/common/icons';
 import {CenterVerticalFlexbox, Button, CheckMark} from 'components/common/styled-components';
 import LoadingSpinner from 'components/common/loading-spinner';
-import {Provider} from 'cloud-providers';
+import {Provider} from '@kepler.gl/cloud-providers';
 
 interface StyledTileWrapperProps {
   selected?: boolean;

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

@@ -23,7 +23,7 @@ import get from 'lodash.get';
 
 import {MAP_THUMBNAIL_DIMENSION, EXPORT_IMG_RATIOS} from '@kepler.gl/constants';
 import {SetExportImageSettingUpdaterAction} from 'actions';
-import {Provider} from 'cloud-providers';
+import {Provider} from '@kepler.gl/cloud-providers';
 
 /** @typedef {import('./image-modal-container').ImageModalContainerProps} ImageModalContainerProps */
 

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

@@ -22,11 +22,9 @@ import React from 'react';
 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 '@kepler.gl/localization';
-import {Provider} from 'cloud-providers';
-
-import {ImageModalContainerProps} from './image-modal-container';
+import ImageModalContainer, {ImageModalContainerProps} from './image-modal-container';
+import {Provider} from '@kepler.gl/cloud-providers';
 import {cleanupExportImage as cleanupExportImageAction} from 'actions';
 
 /** @typedef {import('./overwrite-map-modal').OverwriteMapModalProps} OverwriteMapModalProps */

src/components/modals/status-panel.tsx

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