[chore] export types, add script to build types

Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>

chore: ignore getDistanceScales type check (for now)

Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>

[bug] fix localization file compile errors  (#241)

* export LAYER_ID_LENGTH
* fix localization compile error
* move translations to translations folder

Signed-off-by: Shan He <heshan0131@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/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": "ber-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",
@@ -285,4 +288,4 @@
   "volta": {
     "node": "12.19.0"
   }
-}
+}

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.ElementType<UploadButtonProps>;
+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 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;
+export const Globe: 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,48 @@
+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 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;

src/components/injector.d.ts

@@ -0,0 +1,26 @@
+import {Component, FunctionComponent, FC} from 'react';
+
+export const ERROR_MSG: {
+  wrongRecipeType: string;
+  noDep: (fac: any, parent: any) => string;
+  noFunc: string;
+};
+
+export type FactoryElement = (...args) => Component;
+export type Factory = FactoryElement & {
+  deps: FactoryElement[];
+}
+export type InjectorType = {
+  provide: (factory: any, replacement: any) => InjectorType;
+  get: (fac: any, parent?: any) => any;
+}
+
+export const injector: (map?: Map) => InjectorType;
+
+export type ProvideRecipesToInjectorType = (factories: Factory[], appInjector: InjectorType) => InjectorType;
+
+export const provideRecipesToInjector: ProvideRecipesToInjectorType;
+
+export const flattenDeps: (deps: Factory[], replacement: any) => Factory[];
+
+export const withState: (lenses: any, mapStateToProps: (state: object) => object, actions: object) => (Component: Component<any> | FunctionComponent<any> | FC<any>) => Component;

src/components/map-container.d.ts

@@ -1,13 +1,5 @@
-import {Layer} from '../layers';
-import {SplitMapLayers} from '../reducers/vis-state-updaters';
 import React from 'react';
 
-export function prepareLayersToRender(
-  layers: Layer[],
-  layerData: any[],
-  mapLayers: SplitMapLayers | undefined
-): {[id: string]: boolean};
-
 export type MapContainerProps = {
   // TODO
   primary: boolean;

src/components/map/map-control-tooltip.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import {Tooltip} from '..';
+import {Tooltip} from 'components/common/styled-components';
 import {FormattedMessage} from 'localization';
 
 function MapControlTooltipFactory() {

src/components/side-panel/common/dataset-tag.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const DatasetTagFactory: (...deps: any) => React.ElementType;