[Chore]: Technical: Isolate styles (#1861)

* Styles isolated

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

* version update

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

package.json

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

src/components/bottom-widget.tsx

@@ -25,7 +25,7 @@ import AnimationControlFactory from './common/animation-control/animation-contro
 import AnimationControllerFactory from './common/animation-control/animation-controller';
 import {ANIMATION_WINDOW, DIMENSIONS, FILTER_TYPES} from '@kepler.gl/constants';
 import {getIntervalBins} from 'utils/filter-utils';
-import {media} from 'styles/media-breakpoints';
+import {media} from '@kepler.gl/styles';
 import {AnimationConfig, TimeRangeFilter} from 'reducers';
 import {bottomWidgetSelector} from './kepler-gl';
 

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

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

src/components/common/modal.tsx

@@ -25,7 +25,7 @@ import styled, {FlattenSimpleInterpolation} from 'styled-components';
 import Modal from 'react-modal';
 import {Delete} from 'components/common/icons';
 import {Button} from 'components/common/styled-components';
-import {media} from 'styles/media-breakpoints';
+import {media} from '@kepler.gl/styles';
 
 interface ModalContentWrapperProps {
   cssStyle?: FlattenSimpleInterpolation | string;

src/components/common/portaled.tsx

@@ -27,7 +27,7 @@ import {withTheme} from 'styled-components';
 import {RootContext} from 'components/context';
 import Modal from 'react-modal';
 import window from 'global/window';
-import {theme} from 'styles/base';
+import {theme} from '@kepler.gl/styles';
 
 const listeners = {};
 

src/components/common/styled-components.tsx

@@ -20,7 +20,7 @@
 
 import styled from 'styled-components';
 import ReactTooltip from 'react-tooltip';
-import {media} from 'styles/media-breakpoints';
+import {media} from '@kepler.gl/styles';
 import classnames from 'classnames';
 import {RGBColor} from '@kepler.gl/types';
 

src/components/kepler-gl.tsx

@@ -66,7 +66,7 @@ import {filterObjectByPredicate, generateHashId} from 'utils/utils';
 import {validateToken} from 'utils/mapbox-utils';
 import {mergeMessages} from 'utils/locale-utils';
 
-import {theme as basicTheme, themeLT, themeBS} from 'styles/base';
+import {theme as basicTheme, themeLT, themeBS} from '@kepler.gl/styles';
 import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
 import {KeplerGlState} from 'reducers/core';
 import {Provider} from 'cloud-providers';

src/components/modal-container.tsx

@@ -42,7 +42,7 @@ import SaveMapModalFactory from './modals/save-map-modal';
 import ShareMapModalFactory from './modals/share-map-modal';
 
 // Breakpoints
-import {media} from 'styles/media-breakpoints';
+import {media} from '@kepler.gl/styles';
 
 // Template
 import {

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

@@ -30,7 +30,7 @@ import {
   StyledModalVerticalPanel,
   StyledModalSection
 } from 'components/common/styled-components';
-import {media} from 'styles/media-breakpoints';
+import {media} from '@kepler.gl/styles';
 
 // Utils
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';

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

@@ -21,7 +21,7 @@
 import React, {useState} from 'react';
 import styled, {ThemeProvider} from 'styled-components';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
-import {themeLT} from 'styles/base';
+import {themeLT} from '@kepler.gl/styles';
 import ImageModalContainer, {ImageModalContainerProps} from './image-modal-container';
 import ProviderModalContainer from './provider-modal-container';
 

src/styles/babel.config.js

@@ -0,0 +1,64 @@
+// 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-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/styles/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@kepler.gl/styles",
+  "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": "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:umd && yarn build:types",
+    "stab": "mkdir -p dist && touch dist/index.js"
+  },
+  "files": [
+    "dist",
+    "umd"
+  ],
+  "dependencies": {
+    "@danmarshall/deckgl-typings": "4.9.22",
+    "@deck.gl/aggregation-layers": "8.4.11",
+    "@deck.gl/core": "^8.4.11",
+    "@deck.gl/extensions": "^8.4.11",
+    "@deck.gl/geo-layers": "^8.4.11",
+    "@deck.gl/layers": "^8.4.11",
+    "@deck.gl/mesh-layers": "^8.4.11",
+    "@deck.gl/react": "^8.4.11",
+    "@luma.gl/constants": "^8.4.3",
+    "@luma.gl/core": "^8.4.3",
+    "@mapbox/geo-viewport": "^0.4.1",
+    "@mapbox/vector-tile": "^1.3.1",
+    "@types/geojson": "^7946.0.7",
+    "d3-array": "^2.8.0",
+    "global": "^4.3.0",
+    "keymirror": "^0.1.1",
+    "@kepler.gl/constants": "2.5.5",
+    "lodash.memoize": "^4.1.2"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["dist/*"]
+    }
+  },
+  "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/styles/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": {
+      "*": ["*"] //TODO change once all dependencies are isolated
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

src/styles/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);

test/browser/components/notifications/notification-item-test.js

@@ -23,7 +23,7 @@ import test from 'tape';
 import {shallow} from 'enzyme';
 import NotificationItemFactory from 'components/notification-panel/notification-item';
 import {createNotification} from 'utils/notifications-utils';
-import {theme} from 'styles/base';
+import {theme} from '@kepler.gl/styles';
 
 const NotificationItem = NotificationItemFactory();