From 940f9aaded27d699f1941bd0108aa8ec9ed2649a Mon Sep 17 00:00:00 2001 From: dariaterekhovaae <98411986+dariaterekhovaae@users.noreply.github.com> Date: Sat, 23 Jul 2022 00:29:34 +0300 Subject: [PATCH] [Chore]: Technical: Isolate styles (#1861) * Styles isolated Signed-off-by: Daria Terekhova * version update Signed-off-by: Daria Terekhova --- package.json | 1 + src/components/bottom-widget.tsx | 2 +- .../common/file-uploader/file-upload.tsx | 2 +- src/components/common/modal.tsx | 2 +- src/components/common/portaled.tsx | 2 +- src/components/common/styled-components.tsx | 2 +- src/components/kepler-gl.tsx | 2 +- src/components/modal-container.tsx | 2 +- src/components/modals/add-map-style-modal.tsx | 2 +- src/components/modals/share-map-modal.tsx | 2 +- src/styles/babel.config.js | 64 ++++++++++ src/styles/package.json | 76 +++++++++++ src/styles/{ => src}/base.ts | 0 src/styles/{ => src}/index.ts | 0 src/styles/{ => src}/media-breakpoints.ts | 0 src/styles/tsconfig.production.json | 33 +++++ src/styles/webpack/umd.js | 120 ++++++++++++++++++ .../notifications/notification-item-test.js | 2 +- .../notifications/notification-panel-test.js | 2 +- test/helpers/component-utils.js | 2 +- 20 files changed, 306 insertions(+), 12 deletions(-) create mode 100644 src/styles/babel.config.js create mode 100644 src/styles/package.json rename src/styles/{ => src}/base.ts (100%) rename src/styles/{ => src}/index.ts (100%) rename src/styles/{ => src}/media-breakpoints.ts (100%) create mode 100644 src/styles/tsconfig.production.json create mode 100644 src/styles/webpack/umd.js diff --git a/package.json b/package.json index c3f4178636..3da82b5895 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "workspaces": [ "./src/constants", "./src/types", + "./src/styles", "./src/localization", "./src/middleware", "./src/deckgl-layers", diff --git a/src/components/bottom-widget.tsx b/src/components/bottom-widget.tsx index 208e51ea23..8f34c5094d 100644 --- a/src/components/bottom-widget.tsx +++ b/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'; diff --git a/src/components/common/file-uploader/file-upload.tsx b/src/components/common/file-uploader/file-upload.tsx index 9d86eb8612..1bf7cefb1f 100644 --- a/src/components/common/file-uploader/file-upload.tsx +++ b/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 */ diff --git a/src/components/common/modal.tsx b/src/components/common/modal.tsx index 9bcd2acab2..7ebb20fc63 100644 --- a/src/components/common/modal.tsx +++ b/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; diff --git a/src/components/common/portaled.tsx b/src/components/common/portaled.tsx index 6c9eebfe79..d714660174 100644 --- a/src/components/common/portaled.tsx +++ b/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 = {}; diff --git a/src/components/common/styled-components.tsx b/src/components/common/styled-components.tsx index 663f6e0615..c9dbd73f71 100644 --- a/src/components/common/styled-components.tsx +++ b/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'; diff --git a/src/components/kepler-gl.tsx b/src/components/kepler-gl.tsx index c40e8f6a92..1236ab4f61 100644 --- a/src/components/kepler-gl.tsx +++ b/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'; diff --git a/src/components/modal-container.tsx b/src/components/modal-container.tsx index b3b5736120..08a4837b5d 100644 --- a/src/components/modal-container.tsx +++ b/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 { diff --git a/src/components/modals/add-map-style-modal.tsx b/src/components/modals/add-map-style-modal.tsx index 11f5e83925..e9fa41f9d4 100644 --- a/src/components/modals/add-map-style-modal.tsx +++ b/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'; diff --git a/src/components/modals/share-map-modal.tsx b/src/components/modals/share-map-modal.tsx index dd07125e6a..c132fc788b 100644 --- a/src/components/modals/share-map-modal.tsx +++ b/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'; diff --git a/src/styles/babel.config.js b/src/styles/babel.config.js new file mode 100644 index 0000000000..0672a8d638 --- /dev/null +++ b/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 + }; +}; diff --git a/src/styles/package.json b/src/styles/package.json new file mode 100644 index 0000000000..9fccc543f0 --- /dev/null +++ b/src/styles/package.json @@ -0,0 +1,76 @@ +{ + "name": "@kepler.gl/styles", + "author": "Shan He ", + "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 ", + "Giuseppe Macri " + ], + "volta": { + "node": "12.22.0", + "yarn": "1.22.17" + } +} diff --git a/src/styles/base.ts b/src/styles/src/base.ts similarity index 100% rename from src/styles/base.ts rename to src/styles/src/base.ts diff --git a/src/styles/index.ts b/src/styles/src/index.ts similarity index 100% rename from src/styles/index.ts rename to src/styles/src/index.ts diff --git a/src/styles/media-breakpoints.ts b/src/styles/src/media-breakpoints.ts similarity index 100% rename from src/styles/media-breakpoints.ts rename to src/styles/src/media-breakpoints.ts diff --git a/src/styles/tsconfig.production.json b/src/styles/tsconfig.production.json new file mode 100644 index 0000000000..cddf14f7ca --- /dev/null +++ b/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" + ] +} diff --git a/src/styles/webpack/umd.js b/src/styles/webpack/umd.js new file mode 100644 index 0000000000..3eb025d5e4 --- /dev/null +++ b/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); diff --git a/test/browser/components/notifications/notification-item-test.js b/test/browser/components/notifications/notification-item-test.js index 86a1ebd110..2aa7d85ab6 100644 --- a/test/browser/components/notifications/notification-item-test.js +++ b/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(); diff --git a/test/browser/components/notifications/notification-panel-test.js b/test/browser/components/notifications/notification-panel-test.js index 43d9ff9efe..1a88807483 100644 --- a/test/browser/components/notifications/notification-panel-test.js +++ b/test/browser/components/notifications/notification-panel-test.js @@ -25,7 +25,7 @@ import {shallow} from 'enzyme'; import NotificationItemFactory from 'components/notification-panel/notification-item'; import NotificationPanelFactory from 'components/notification-panel'; import {createNotification} from 'utils/notifications-utils'; -import {theme} from 'styles/base'; +import {theme} from '@kepler.gl/styles'; const NotificationItem = NotificationItemFactory(); const NotificationPanel = NotificationPanelFactory(NotificationItem); diff --git a/test/helpers/component-utils.js b/test/helpers/component-utils.js index bc11670914..f0250560f4 100644 --- a/test/helpers/component-utils.js +++ b/test/helpers/component-utils.js @@ -21,7 +21,7 @@ import React from 'react'; import sinon from 'sinon'; import {mount} from 'enzyme'; -import {theme} from 'styles/base'; +import {theme} from '@kepler.gl/styles'; import {ThemeProvider} from 'styled-components'; import {IntlProvider} from 'react-intl'; import {messages} from '@kepler.gl/localization';