[chore] export types, add script to build types (#1636)

- export types, add script to build types
- ignore getDistanceScales type check (for now)
- upload button to PF
- fix localization file compile errors 
- move translations to translations folder


Signed-off-by: Shan He <heshan0131@gmail.com>
Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>
Co-authored-by: Giuseppe Macrì <macri.giuseppe@gmail.com>

docs/api-reference/localization/README.md

@@ -41,7 +41,7 @@ const reducers = combineReducers({
 Let's say we want to add the Swedish language to kepler.gl. Easiest way to add translation of new language is to follow these 3 steps:
 
 - Find out the [language code][language-codes] for Swedish: `sv`
-- Add new translation file `src/localization/sv.js` by copying `src/localization/en.js` and translating the strings
+- Add new translation file `src/localization/translations/sv.js` by copying `src/localization/translations/en.js` and translating the strings
 
 - Update _LOCALES_ in `src/localization/locales.js` to include new language translation:
   ```javascript

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

@@ -23,7 +23,7 @@ import Console from 'global/console';
 import CartoIcon from './carto-icon';
 import {formatCsv} from 'kepler.gl/processors';
 import {Provider} from 'kepler.gl/cloud-providers';
-import {createDataContainer} from 'kepler.gl';
+import {createDataContainer} from 'kepler.gl/utils';
 
 const NAME = 'carto';
 const DISPLAY_NAME = 'CARTO';

examples/webpack.config.local.js

@@ -104,10 +104,7 @@ function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
   return {
     // suppress warnings about bundle size
     devServer: {
-      historyApiFallback: true,
-      stats: {
-        warnings: false
-      }
+      historyApiFallback: true
     },
 
     devtool: 'source-map',

package.json

@@ -5,6 +5,7 @@
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
+  "types": "./types.d.ts",
   "keywords": [
     "babel",
     "es6",
@@ -43,11 +44,12 @@
     "start:e2e": "npm run install-and-start -- examples/demo-app start-local-e2e",
     "build": "rm -fr dist && babel src --out-dir dist --source-maps inline",
     "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
+    "build:types": "webpack --config ./webpack/build_types.js --progress",
     "analyze": "npm run analyze:bundle",
     "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",
-    "prepublish": "uber-licence && yarn build && yarn build:umd",
+    "prepublish": "uber-licence && yarn build && yarn build:umd && yarn build:types",
     "docs": "babel-node ./scripts/documentation.js",
     "typedoc": "typedoc --theme markdown --out typedoc --inputFiles ./src/reducers --inputFiles ./src/actions --excludeExternals --excludeNotExported --excludePrivate",
     "example-version": "babel-node ./scripts/edit-version.js",
@@ -196,6 +198,7 @@
     "babel-tape-runner": "^3.0.0",
     "babelify": "^10.0.0",
     "documentation": "^9.1.1",
+    "dts-bundle-webpack": "^1.0.2",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
     "eslint": "^5.16.0",
@@ -286,4 +289,4 @@
     "node": "12.19.0",
     "yarn": "1.22.17"
   }
-}
+}

src/components/common/action-panel.d.ts

@@ -1,9 +1,9 @@
-import {FunctionComponent, PropsWithChildren, ComponentType, CSSProperties} from 'react';
+import {FunctionComponent, PropsWithChildren, ElementType, CSSProperties} from 'react';
 
 export type ActionPanelItemProps = PropsWithChildren<{
   color?: string,
   className?: string,
-  Icon?: ComponentType<any>,
+  Icon?: ElementType,
   label: string,
   onClick?: () => void,
   isSelection?: boolean,

src/components/common/checkbox.d.ts

@@ -0,0 +1,3 @@
+export const Checkbox:  (...props: any[]) => JSX.Element;
+
+export default Checkbox;

src/components/common/file-uploader/file-drop.d.ts

@@ -15,5 +15,5 @@ export type FileDropProps = {
   onFrameDrop?: (event: any) => void;
 };
 
-const FileDrop: React.FunctionComponent<FileDropProps>;
+export const FileDrop: React.FunctionComponent<FileDropProps>;
 export default FileDrop;

src/components/common/file-uploader/upload-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export type UploadButtonProps = {
+  onUpload: (files: FileList, event: any) => void;
+};
+
+export const UploadButton: React.FC<UploadButtonProps>;
+export default UploadButton;

src/components/common/file-uploader/upload-button.js

@@ -18,15 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, createRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import styled from 'styled-components';
 
-/**
-@typedef {{
-  onUpload: (files: FileList, event: any) => void;
-}} UploadButtonProps
-*/
-
 const Wrapper = styled.div`
   display: inline-block;
   color: ${props => props.theme.textColorLT};
@@ -38,46 +32,53 @@ const Wrapper = styled.div`
     font-weight: 500;
   }
 `;
+const inputStyle = {display: 'none'};
+
 /*
 Inspired by https://github.com/okonet/react-dropzone/blob/master/src/index.js
 */
-/** @augments React.Component<UploadButtonProps> */
-export class UploadButton extends Component {
-  _fileInput = createRef();
+/** @type {typeof import('./upload-button').UploadButton} */
+const UploadButton = ({onUpload, children}) => {
+  const _fileInput = useRef(null);
 
-  _onClick = () => {
-    this._fileInput.current.value = null;
-    this._fileInput.current.click();
-  };
+  const _onClick = useCallback(() => {
+    if (_fileInput.current) {
+      // @ts-ignore create ref with useRef<HTMLInputElement>
+      _fileInput.current.value = null;
+      // @ts-ignore create ref with useRef<HTMLInputElement>
+      _fileInput.current.click();
+    }
+  }, [_fileInput]);
 
-  _onChange = event => {
-    const {
-      target: {files}
-    } = event;
+  const _onChange = useCallback(
+    event => {
+      const {
+        target: {files}
+      } = event;
 
-    if (!files) {
-      return;
-    }
+      if (!files) {
+        return;
+      }
 
-    this.props.onUpload(files, event);
-  };
+      onUpload(files, event);
+    },
+    [onUpload]
+  );
 
-  render() {
-    return (
-      <Wrapper className="upload-button">
-        <input
-          type="file"
-          ref={this._fileInput}
-          style={{display: 'none'}}
-          onChange={this._onChange}
-          className="upload-button-input"
-        />
-        <span className="file-upload__upload-button-span" onClick={this._onClick}>
-          {this.props.children}
-        </span>
-      </Wrapper>
-    );
-  }
-}
+  return (
+    <Wrapper className="upload-button">
+      <input
+        type="file"
+        ref={_fileInput}
+        style={inputStyle}
+        onChange={_onChange}
+        className="upload-button-input"
+      />
+      <span className="file-upload__upload-button-span" onClick={_onClick}>
+        {children}
+      </span>
+    </Wrapper>
+  );
+};
 
 export default UploadButton;

src/components/common/icons/index.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+
+export const Add: React.ElementType;
+export const AnchorWindow: React.ElementType;
+export const ArrowDown: React.ElementType;
+export const ArrowDownAlt: React.ElementType;
+export const ArrowDownSolid: React.ElementType;
+export const ArrowLeft: React.ElementType;
+export const ArrowRight: React.ElementType;
+export const ArrowUpSolid: React.ElementType;
+export const ArrowUpAlt: React.ElementType;
+export const ArrowUp: React.ElementType;
+export const Base: React.ElementType;
+export const Bug: React.ElementType;
+export const Cancel: React.ElementType;
+export const Checkmark: React.ElementType;
+export const Clipboard: React.ElementType;
+export const Clock: React.ElementType;
+export const Close: React.ElementType;
+export const Copy: React.ElementType;
+export const Crosshairs: React.ElementType;
+export const Cube3d: React.ElementType;
+export const CursorClick: React.ElementType;
+export const DataTable: React.ElementType;
+export const Db: React.ElementType;
+export const Delete: React.ElementType;
+export const Docs: React.ElementType;
+export const DragNDrop: React.ElementType;
+export const Email: React.ElementType;
+export const Expand: React.ElementType;
+export const EyeSeen: React.ElementType;
+export const EyeUnseen: React.ElementType;
+export const File: React.ElementType;
+export const Files: React.ElementType;
+export const FileType: React.ElementType;
+export const FilterFunnel: React.ElementType;
+export const FreeWindow: React.ElementType;
+export const Gear: React.ElementType;
+export const Hash: React.ElementType;
+export const Histogram: React.ElementType;
+export const Info: React.ElementType;
+export const Layers: React.ElementType;
+export const LeftArrow: React.ElementType;
+export const Legend: React.ElementType;
+export const LineChart: React.ElementType;
+export const Logout: React.ElementType;
+export const Login: React.ElementType;
+export const Map: React.ElementType;
+export const MapIcon: React.ElementType;
+export const Minus: React.ElementType;
+export const Messages: React.ElementType;
+export const Pause: React.ElementType;
+export const Picture: React.ElementType;
+export const Pin: React.ElementType;
+export const Play: React.ElementType;
+export const Reduce: React.ElementType;
+export const Reset: React.ElementType;
+export const Rocket: React.ElementType;
+export const Save: React.ElementType;
+export const Save2: React.ElementType;
+export const Share: React.ElementType;
+export const SquareSelect: React.ElementType;
+export const Settings: React.ElementType;
+export const Search: React.ElementType;
+export const Split: React.ElementType;
+export const Table: React.ElementType;
+export const Trash: React.ElementType;
+export const Upload: React.ElementType;
+export const VertDots: React.ElementType;
+export const VertThreeDots: React.ElementType;
+export const IconWrapper: React.ElementType;
+export const CodeAlt: React.ElementType;
+export const Warning: React.ElementType;
+export const DrawPolygon: React.ElementType;
+export const Polygon: React.ElementType;
+export const Rectangle: React.ElementType;

src/components/common/styled-components.d.ts

@@ -0,0 +1,48 @@
+export type ReactElement = (...props: any[]) => JSX.Element;
+
+export const Tooltip: ReactElement;
+export const BottomWidgetInner: ReactElement;
+export const CenterFlexbox: ReactElement;
+export const DatasetSquare: ReactElement;
+export const TruncatedTitleText: ReactElement;
+export const Button: ReactElement;
+export const Input: ReactElement;
+export const PanelLabel: ReactElement;
+export const StyledFilterContent: ReactElement;
+export const PanelLabel: ReactElement;
+export const SidePanelSection: ReactElement;
+export const SelectTextBold: ReactElement;
+export const IconRoundSmall: ReactElement;
+export const StyledAttrbution: ReactElement;
+export const MapControlButton: ReactElement;
+export const IconRoundSmall: ReactElement;
+export const StyledModalContent: ReactElement;
+export const InputLight: ReactElement;
+export const StyledMapContainer: ReactElement;
+export const StyledModalVerticalPanel: ReactElement;
+export const StyledModalSection: ReactElement;
+export const CenterVerticalFlexbox: ReactElement;
+export const CheckMark: ReactElement;
+export const StyledExportSection: ReactElement;
+export const StyledFilteredOption: ReactElement;
+export const StyledModalContent: ReactElement;
+export const StyledType: ReactElement;
+export const SelectionButton: ReactElement;
+export const TextAreaLight: ReactElement;
+export const StyledModalInputFootnote: ReactElement;
+export const SidePanelDivider: ReactElement;
+export const StyledPanelHeader: ReactElement;
+export const PanelHeaderTitle: ReactElement;
+export const PanelHeaderContent: ReactElement;
+export const PanelContent: ReactElement;
+export const SBFlexboxNoMargin: ReactElement;
+export const StyledPanelDropdown: ReactElement;
+export const InlineInput: ReactElement;
+export const SBFlexboxItem: ReactElement;
+export const SpaceBetweenFlexbox: ReactElement;
+export const PanelLabelWrapper: ReactElement;
+export const PanelLabelBold: ReactElement;
+export const PanelHeaderContent: ReactElement;
+
+
+

src/components/container.d.ts

@@ -0,0 +1,8 @@
+import {Component} from 'react';
+import {InjectorType, ProvideRecipesToInjectorType} from './injector';
+
+export const appInjector: InjectorType;
+
+export const injectComponents: (recipes: any[]) => ProvideRecipesToInjectorType;
+
+export const ContainerFactory: (KeplerGl: Component) => Component;

src/components/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import {FeatureFlags} from './context';
+
+export {withState} from './injector';
+
+export * from './context';
+export * from './bottom-widget';
+export * from './kepler-gl';
+export * from './map-container';
+export * from './maps-layout';
+export * from './modal-container';
+export * from './side-panel';
+export * from './container';
+
+// TODO: we need more specific types for the following components
+export * from './map/map-legend';
+export * from './map/split-map-button';
+export * from './side-panel/common/dataset-tag';
+export * from './common/checkbox';
+export * from './common/styled-components';
+export * from './common/tippy-tooltip'
+export * as Icons from './common/icons';
+export * from './common/file-uploader/file-drop';
+export * from './common/file-uploader/upload-button';
+export {default as Portaled} from './common/portaled';
+
+export const PanelHeaderAction: (...props: any[]) => JSX.Element;
+export const TippyTooltip: (...props: any[]) => JSX.Element;
+export const Toggle3dButtonFactory: (...deps: any) => React.ElementType;
+export const ToggleGlobeButtonFactory: (...deps: any) => React.ElementType;
+export const MapsLayoutFactory: (...deps: any) => React.ElementType;
+export const PanelHeaderDropdownFactory: (...deps: any) => React.ElementType;
+export const NotificationItemFactory: (...deps: any) => React.ElementType;
+export const DropdownList: React.ElementType;
+export const VerticalToolbar: React.ElementType;
+export const ToolbarItem: React.ElementType;
+export const ModalTitle: React.ElementType;
+export const ItemSelector: React.ElementType;
+export const Slider: React.ElementType;
+export const LoadingSpinner: React.ElementType;
+export const LayerConfigGroup: React.ElementType;
+export const ChannelByValueSelector: React.ElementType;
+export const LayerColorRangeSelector: React.ElementType;
+export const LayerColorSelector: React.ElementType;
+export const VisConfigSlider: React.ElementType;
+export const ConfigGroupCollapsibleContent: React.ElementType;
+export const PanelLabel: React.ElementType;
+
+export const useFeatureFlags: () => FeatureFlags;