@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/geocoder-panel.js

@@ -0,0 +1,191 @@
+// 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.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Processors from 'processors';
+import {FlyToInterpolator} from '@deck.gl/core';
+import KeplerGlSchema from 'schemas';
+import {getCenterAndZoomFromBounds} from 'utils/projection-utils';
+
+import Geocoder from './geocoder/geocoder';
+import {
+  GEOCODER_DATASET_NAME,
+  GEOCODER_LAYER_ID,
+  GEOCODER_GEO_OFFSET,
+  GEOCODER_ICON_COLOR,
+  GEOCODER_ICON_SIZE
+} from 'constants/default-settings';
+
+const ICON_LAYER = {
+  id: GEOCODER_LAYER_ID,
+  type: 'icon',
+  config: {
+    label: 'Geocoder Layer',
+    color: GEOCODER_ICON_COLOR,
+    dataId: GEOCODER_DATASET_NAME,
+    columns: {
+      lat: 'lt',
+      lng: 'ln',
+      icon: 'icon',
+      label: 'text'
+    },
+    isVisible: true,
+    hidden: true,
+    visConfig: {
+      radius: GEOCODER_ICON_SIZE
+    }
+  }
+};
+
+const PARSED_CONFIG = KeplerGlSchema.parseSavedConfig({
+  version: 'v1',
+  config: {
+    visState: {
+      layers: [ICON_LAYER]
+    }
+  }
+});
+
+const StyledGeocoderPanel = styled.div`
+  position: absolute;
+  top: ${props => props.theme.geocoderTop}px;
+  right: ${props => props.theme.geocoderRight}px;
+  width: ${props => (Number.isFinite(props.width) ? props.width : props.theme.geocoderWidth)}px;
+  box-shadow: ${props => props.theme.boxShadow};
+  z-index: 100;
+`;
+
+function generateGeocoderDataset(lat, lon, text) {
+  return {
+    data: Processors.processRowObject([
+      {
+        lt: lat,
+        ln: lon,
+        icon: 'place',
+        text
+      }
+    ]),
+    id: GEOCODER_DATASET_NAME,
+    info: {
+      hidden: true,
+      id: GEOCODER_DATASET_NAME,
+      label: GEOCODER_DATASET_NAME
+    }
+  };
+}
+
+function isValid(key) {
+  return /pk\..*\..*/.test(key);
+}
+
+export default function GeocoderPanelFactory() {
+  class GeocoderPanel extends Component {
+    static propTypes = {
+      isGeocoderEnabled: PropTypes.bool.isRequired,
+      mapboxApiAccessToken: PropTypes.string.isRequired,
+      mapState: PropTypes.object.isRequired,
+      updateVisData: PropTypes.func.isRequired,
+      removeDataset: PropTypes.func.isRequired,
+      updateMap: PropTypes.func.isRequired,
+
+      transitionDuration: PropTypes.number,
+      width: PropTypes.number
+    };
+
+    removeGeocoderDataset() {
+      this.props.removeDataset(GEOCODER_DATASET_NAME);
+    }
+
+    onSelected = (viewport = null, geoItem) => {
+      const {
+        center: [lon, lat],
+        text,
+        bbox
+      } = geoItem;
+      this.removeGeocoderDataset();
+      this.props.updateVisData(
+        [generateGeocoderDataset(lat, lon, text)],
+        {
+          keepExistingConfig: true
+        },
+        PARSED_CONFIG
+      );
+      const bounds = bbox || [
+        lon - GEOCODER_GEO_OFFSET,
+        lat - GEOCODER_GEO_OFFSET,
+        lon + GEOCODER_GEO_OFFSET,
+        lat + GEOCODER_GEO_OFFSET
+      ];
+      const centerAndZoom = getCenterAndZoomFromBounds(bounds, {
+        width: this.props.mapState.width,
+        height: this.props.mapState.height
+      });
+
+      if (!centerAndZoom) {
+        // failed to fit bounds
+        return;
+      }
+
+      this.props.updateMap({
+        latitude: centerAndZoom.center[1],
+        longitude: centerAndZoom.center[0],
+        // For marginal or invalid bounds, zoom may be NaN. Make sure to provide a valid value in order
+        // to avoid corrupt state and potential crashes as zoom is expected to be a number
+        ...(Number.isFinite(centerAndZoom.zoom) ? {zoom: centerAndZoom.zoom} : {}),
+        pitch: 0,
+        bearing: 0,
+        transitionDuration: this.props.transitionDuration,
+        transitionInterpolator: new FlyToInterpolator()
+      });
+    };
+
+    removeMarker = () => {
+      this.removeGeocoderDataset();
+    };
+
+    render() {
+      const {isGeocoderEnabled, mapboxApiAccessToken, width} = this.props;
+      return (
+        <StyledGeocoderPanel
+          className="geocoder-panel"
+          width={width}
+          style={{display: isGeocoderEnabled ? 'block' : 'none'}}
+        >
+          {isValid(mapboxApiAccessToken) && (
+            <Geocoder
+              mapboxApiAccessToken={mapboxApiAccessToken}
+              onSelected={this.onSelected}
+              onDeleteMarker={this.removeMarker}
+              width={width}
+            />
+          )}
+        </StyledGeocoderPanel>
+      );
+    }
+  }
+
+  GeocoderPanel.defaultProps = {
+    transitionDuration: 3000
+  };
+
+  return GeocoderPanel;
+}

package/src/components/index.js

@@ -0,0 +1,247 @@
+// 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.
+
+import TimeRangeSliderFactory from './common/time-range-slider';
+import RangeSliderFactory from './common/range-slider';
+import VisConfigSliderFactory from './side-panel/layer-panel/vis-config-slider';
+import VisConfigSwitchFactory from './side-panel/layer-panel/vis-config-switch';
+import LayerConfigGroupFactory from './side-panel/layer-panel/layer-config-group';
+import {
+  LayerColorRangeSelectorFactory,
+  LayerColorSelectorFactory,
+  ArcLayerColorSelectorFactory,
+  ChannelByValueSelectorFactory
+} from './side-panel/layer-panel/layer-configurator';
+import ColorDimensionScaleSelectorFactory from './side-panel/layer-panel/color-dimension-scale-selector';
+import FieldSelectorFactory, {FieldListItemFactoryFactory} from './common/field-selector';
+import FieldTokenFactory from './common/field-token';
+import PanelHeaderActionFactory from './side-panel/panel-header-action';
+import InfoHelperFactory from 'components/common/info-helper';
+import {appInjector} from './container';
+
+// Components
+export {default as KeplerGl, default, injectComponents, ContainerFactory} from './container';
+
+// factories
+export {default as KeplerGlFactory, DEFAULT_KEPLER_GL_PROPS} from './kepler-gl';
+export {default as SidePanelFactory} from './side-panel';
+export {default as PanelTitleFactory} from './side-panel/panel-title';
+export {default as MapContainerFactory, Attribution} from './map-container';
+export {default as MapsLayoutFactory} from './maps-layout';
+export {
+  default as BottomWidgetFactory,
+  LayerAnimationControllerFactory,
+  FilterAnimationControllerFactory
+} from './bottom-widget';
+export {default as ModalContainerFactory} from './modal-container';
+export {default as PlotContainerFactory} from './plot-container';
+export {default as GeocoderPanelFactory} from './geocoder-panel';
+
+// // side panel factories
+export {
+  default as PanelHeaderFactory,
+  SaveExportDropdownFactory,
+  PanelHeaderDropdownFactory
+} from './side-panel/panel-header';
+export {default as PanelHeaderActionFactory} from './side-panel/panel-header-action';
+export {CollapseButtonFactory, default as SidebarFactory} from './side-panel/side-bar';
+export {default as PanelToggleFactory} from './side-panel/panel-toggle';
+export {default as PanelTabFactory} from './side-panel/panel-tab';
+
+export {
+  AddDataButtonFactory,
+  LayerBlendingSelectorFactory,
+  default as LayerManagerFactory
+} from './side-panel/layer-manager';
+export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel';
+export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer-panel-header';
+export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
+export {default as CustomMarkersConfigGroupFactory} from './side-panel/layer-panel/custom-markers-config-group';
+export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
+export {LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
+export {default as LayerVisibilityByZoomFactory} from './side-panel/layer-panel/layer-visibility-by-zoom';
+export {default as LayerAggregationResolutionFactory} from './side-panel/layer-panel/layer-aggregation-resolution';
+
+export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
+export {default as SourceDataSelectorFactory} from './side-panel/common/source-data-selector';
+export {default as DatasetTitleFactory} from './side-panel/common/dataset-title';
+export {default as DatasetInfoFactory} from './side-panel/common/dataset-info';
+export {default as DatasetTagFactory} from './side-panel/common/dataset-tag';
+
+export {default as FilterManagerFactory} from './side-panel/filter-manager';
+export {default as FilterPanelFactory} from './side-panel/filter-panel/filter-panel';
+
+export {default as InteractionManagerFactory} from './side-panel/interaction-manager';
+export {default as BrushConfigFactory} from './side-panel/interaction-panel/brush-config';
+export {default as TooltipConfigFactory} from './side-panel/interaction-panel/tooltip-config';
+
+export {default as MapManagerFactory} from './side-panel/map-manager';
+export {default as LayerGroupSelectorFactory} from './side-panel/map-style-panel/map-layer-selector';
+export {default as MapStyleSelectorFactory} from './side-panel/map-style-panel/map-style-selector';
+export {default as CustomPanelsFactory} from './side-panel/custom-panel';
+// // map factories
+export {default as MapPopoverFactory} from './map/map-popover';
+export {default as MapControlFactory} from './map/map-control';
+export {default as LayerHoverInfoFactory} from './map/layer-hover-info';
+export {default as CoordinateInfoFactory} from './map/coordinate-info';
+export {default as LayerSelectorPanelFactory} from './map/layer-selector-panel';
+export {default as LocalePanelFactory} from './map/locale-panel';
+export {default as MapControlPanelFactory} from './map/map-control-panel';
+export {default as MapControlTooltipFactory} from './map/map-control-tooltip';
+export {
+  default as MapLegendFactory,
+  LayerLegendHeaderFactory,
+  LayerLegendContentFactory
+} from './map/map-legend';
+export {default as MapDrawPanelFactory} from './map/map-draw-panel';
+export {default as SplitMapButtonFactory} from './map/split-map-button';
+export {default as MapLegendPanelFactory} from './map/map-legend-panel';
+export {default as Toggle3dButtonFactory} from './map/toggle-3d-button';
+export {default as MapControlToolbarFactory} from './map/map-control-toolbar';
+
+// // modal factories
+export {default as ModalDialogFactory} from './modals/modal-dialog';
+export {default as DeleteDatasetModalFactory} from './modals/delete-data-modal';
+export {default as DataTableModalFactory} from './modals/data-table-modal';
+export {default as LoadDataModalFactory} from './modals/load-data-modal';
+export {default as ExportImageModalFactory} from './modals/export-image-modal';
+export {default as ExportDataModalFactory} from './modals/export-data-modal';
+export {default as AddMapStyleModalFactory} from './modals/add-map-style-modal';
+export {default as ExportMapModalFactory} from './modals/export-map-modal/export-map-modal';
+export {default as ModalTabsFactory} from './modals/modal-tabs';
+export {default as LoadStorageMapFactory} from './modals/load-storage-map';
+export {default as ExportJsonMapFactory} from './modals/export-map-modal/export-json-map';
+export {default as ExportHtmlMapFactory} from './modals/export-map-modal/export-html-map';
+
+// // common factory
+export {default as AnimationControlFactory} from './common/animation-control/animation-control';
+export {default as AnimationControllerFactory} from './common/animation-control/animation-controller';
+export {default as SpeedControlFactory} from './common/animation-control/speed-control';
+export {default as PlaybackControlsFactory} from './common/animation-control/playback-controls';
+export {default as FloatingTimeDisplayFactory} from './common/animation-control/floating-time-display';
+export {default as AnimationSpeedSliderFactory} from './common/animation-control/animation-speed-slider';
+export {default as RangePlotFactory} from './common/range-plot';
+export {default as HistogramPlotFactory} from './common/histogram-plot';
+export {default as LineChartFactory} from './common/line-chart';
+export {default as RangeBrushFactory} from './common/range-brush';
+export {default as TimeSliderMarkerFactory} from './common/time-slider-marker';
+export {default as TimeRangeSliderTimeTitleFactory} from './common/time-range-slider-time-title';
+
+// // Filters factory
+export {default as TimeWidgetFactory, TimeWidgetTopFactory} from './filters/time-widget';
+export {default as SingleSelectFilterFactory} from './filters/single-select-filter';
+export {default as MultiSelectFilterFactory} from './filters/multi-select-filter';
+export {
+  timeRangeSliderFieldsSelector,
+  default as TimeRangeFilterFactory
+} from './filters/time-range-filter';
+export {default as RangeFilterFactory} from './filters/range-filter';
+
+// // Editor Factory
+export {default as EditorFactory} from './editor/editor';
+export {default as FeatureActionPanelFactory} from './editor/feature-action-panel';
+
+// Injector
+export {injector, provideRecipesToInjector, withState} from './injector';
+
+// Common Components
+export {default as CloudTile} from './modals/cloud-tile';
+export {default as FileUploadFactory, FileUpload} from './common/file-uploader/file-upload';
+export {default as DatasetLabel} from './common/dataset-label';
+export {default as ItemSelector} from './common/item-selector/item-selector';
+export {default as Typeahead} from './common/item-selector/typeahead';
+export {default as DropdownList} from './common/item-selector/dropdown-list';
+export {default as FieldSelectorFactory} from './common/field-selector';
+export {default as Modal, ModalFooter, ModalTitle} from './common/modal';
+export {default as AppLogo} from './common/logo';
+export {default as Switch} from './common/switch';
+export {default as Checkbox} from './common/checkbox';
+export {default as LoadingSpinner} from './common/loading-spinner';
+export {default as LoadingDialog} from './modals/loading-dialog';
+export {default as FieldTokenFactory} from './common/field-token';
+export {default as Portaled} from './common/portaled';
+export {default as ProgressBar} from './common/progress-bar';
+export {default as FileUploadProgress} from './common/file-uploader/file-upload-progress';
+export {default as Slider} from './common/slider/slider';
+export {DatasetSquare} from './common/styled-components';
+export {default as ActionPanel, ActionPanelItem} from './common/action-panel';
+export {default as DataTableFactory} from './common/data-table';
+export {default as CanvasHack} from './common/data-table/canvas';
+export {default as MapLayerSelector} from './common/map-layer-selector';
+export {default as VerticalToolbar} from './common/vertical-toolbar';
+export {default as ToolbarItem} from './common/toolbar-item';
+
+// side pane components
+export {default as LayerTypeSelectorFactory} from './side-panel/layer-panel/layer-type-selector';
+export {default as LayerTypeDropdownListFactory} from './side-panel/layer-panel/layer-type-dropdown-list';
+export {default as LayerTypeListItemFactory} from './side-panel/layer-panel/layer-type-list-item';
+export {ConfigGroupCollapsibleContent} from './side-panel/layer-panel/layer-config-group';
+export {default as ColumnSelectorFactory} from './side-panel/layer-panel/column-selector';
+export {default as FilterPanelHeaderFactory} from './side-panel/filter-panel/filter-panel-header';
+export {default as StyledDropdownSelect} from './common/item-selector/item-selector';
+export {
+  LayerLabelEditor,
+  LayerTitleSectionFactory
+} from './side-panel/layer-panel/layer-panel-header';
+
+export {HowToButton, AggregationTypeSelector} from './side-panel/layer-panel/layer-configurator';
+
+export {default as ColorPalette} from './side-panel/layer-panel/color-palette';
+
+export * from './common/styled-components';
+import * as Icons from './common/icons';
+
+export {Icons};
+
+// Individual Component from Dependency Tree
+export const LayerColorSelector = appInjector.get(LayerColorSelectorFactory);
+export const LayerColorRangeSelector = appInjector.get(LayerColorRangeSelectorFactory);
+export const ArcLayerColorSelector = appInjector.get(ArcLayerColorSelectorFactory);
+export const TimeRangeSlider = appInjector.get(TimeRangeSliderFactory);
+export const RangeSlider = appInjector.get(RangeSliderFactory);
+export const VisConfigSlider = appInjector.get(VisConfigSliderFactory);
+export const VisConfigSwitch = appInjector.get(VisConfigSwitchFactory);
+export const LayerConfigGroup = appInjector.get(LayerConfigGroupFactory);
+export const ChannelByValueSelector = appInjector.get(ChannelByValueSelectorFactory);
+export const ColorDimensionScaleSelector = appInjector.get(ColorDimensionScaleSelectorFactory);
+export const FieldSelector = appInjector.get(FieldSelectorFactory);
+export const FieldToken = appInjector.get(FieldTokenFactory);
+export const PanelHeaderAction = appInjector.get(PanelHeaderActionFactory);
+export const FieldListItemFactory = appInjector.get(FieldListItemFactoryFactory);
+export const InfoHelper = appInjector.get(InfoHelperFactory);
+
+export {
+  appInjector,
+  TimeRangeSliderFactory,
+  RangeSliderFactory,
+  VisConfigSliderFactory,
+  VisConfigSwitchFactory,
+  LayerConfigGroupFactory,
+  ChannelByValueSelectorFactory,
+  ColorDimensionScaleSelectorFactory,
+  FieldListItemFactoryFactory,
+  InfoHelperFactory,
+  LayerColorSelectorFactory,
+  LayerColorRangeSelectorFactory,
+  ArcLayerColorSelectorFactory
+};
+
+// Context
+export {default as KeplerGlContext, RootContext} from 'components/context';

package/src/components/injector.js

@@ -0,0 +1,161 @@
+// 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.
+
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {console as Console} from 'global/window';
+import KeplerGlContext from 'components/context';
+
+const MissingComp = () => <div />;
+
+export const ERROR_MSG = {
+  wrongRecipeType:
+    `injectComponents takes an array of factories replacement pairs as input, ` +
+    `each pair be a array as [originalFactory, replacement].`,
+
+  noDep: (fac, parent) =>
+    `${fac.name} is required as a dependency of ${parent.name}, ` +
+    `but is not provided to injectComponents. It will not be rendered.`,
+
+  notFunc: 'factory and its replacement should be a function'
+};
+
+export function injector(map = new Map()) {
+  const cache = new Map(); // map<factory, factory -> ?>
+  const get = (fac, parent) => {
+    const factory = map.get(fac);
+    // factory is not injected
+    if (!factory) {
+      Console.error(ERROR_MSG.noDep(fac, parent));
+      return MissingComp;
+    }
+
+    // check if custom factory deps is declared
+    const instances =
+      cache.get(factory) ||
+      factory(...(factory.deps ? factory.deps.map(dep => get(dep, factory)) : []));
+
+    cache.set(fac, instances);
+    return instances;
+  };
+
+  // if you have two functions that happen to have the exactly same text
+  // it will be override: 2018-02-05
+  return {
+    provide: (factory, replacement) => {
+      if (!typeCheckRecipe([factory, replacement])) {
+        return injector(map);
+      }
+      return injector(new Map(map).set(factory, replacement));
+    },
+    get
+  };
+}
+
+// entryPoint
+export function flattenDeps(allDeps, factory) {
+  const addToDeps = allDeps.concat([factory]);
+  return Array.isArray(factory.deps) && factory.deps.length
+    ? factory.deps.reduce((accu, dep) => flattenDeps(accu, dep), addToDeps)
+    : addToDeps;
+}
+
+export function provideRecipesToInjector(recipes, appInjector) {
+  const provided = new Map();
+
+  return recipes.reduce((inj, recipe) => {
+    if (!typeCheckRecipe(recipe)) {
+      return inj;
+    }
+
+    // collect dependencies of custom factories, if there is any.
+    // Add them to the appInjector
+    const customDependencies = flattenDeps([], recipe[1]);
+    inj = customDependencies.reduce((ij, factory) => {
+      if (provided.get(factory)) {
+        Console.warn(
+          `${factory.name} already injected from ${provided.get(factory).name}, injecting ${
+            recipe[0].name
+          } after ${provided.get(factory).name} will override it`
+        );
+      }
+      return ij.provide(factory, factory);
+    }, inj);
+
+    provided.set(recipe[0], recipe[1]);
+    return inj.provide(...recipe);
+  }, appInjector);
+}
+
+export function typeCheckRecipe(recipe) {
+  if (!Array.isArray(recipe) || recipe.length < 2) {
+    Console.error('Error injecting [factory, replacement]', recipe);
+    Console.error(ERROR_MSG.wrongRecipeType);
+    return false;
+  }
+
+  const [factory, replacement] = recipe;
+  if (typeof factory !== 'function') {
+    Console.error('Error injecting factory: ', factory);
+    Console.error(ERROR_MSG.notFunc);
+    return false;
+  } else if (typeof replacement !== 'function') {
+    Console.error('Error injecting replacement for: ', factory);
+    Console.error(ERROR_MSG.notFunc);
+    return false;
+  }
+
+  return true;
+}
+
+const identity = state => state;
+// Helper to add reducer state to custom component
+export function withState(lenses = [], mapStateToProps = identity, actions = {}) {
+  return Component => {
+    const WrappedComponent = ({state, ...props}) => (
+      <KeplerGlContext.Consumer>
+        {context => (
+          <Component
+            {...lenses.reduce(
+              (totalState, lens) => ({
+                ...totalState,
+                ...lens(context.selector(state))
+              }),
+              props
+            )}
+          />
+        )}
+      </KeplerGlContext.Consumer>
+    );
+
+    return connect(
+      state => ({...mapStateToProps(state), state}),
+      dispatch =>
+        Object.keys(actions).reduce(
+          (accu, key) => ({
+            ...accu,
+            [key]: bindActionCreators(actions[key], dispatch)
+          }),
+          {}
+        )
+    )(WrappedComponent);
+  };
+}

package/src/components/kepler-gl.d.ts

@@ -0,0 +1,60 @@
+import {ComponentClass} from 'react';
+import {OnErrorCallBack, OnSuccessCallBack} from 'actions/provider-actions';
+import {MapState} from 'reducers/map-state-updaters';
+import {MapStyle} from 'reducers/map-style-updaters';
+import {UiState} from 'reducers/ui-state-updaters';
+import {VisState} from 'reducers/vis-state-updaters';
+import {ProviderState} from 'reducers/provider-state-updaters';
+import * as VisStateActions from 'actions/vis-state-actions';
+import * as MapStateActions from 'actions/map-state-actions';
+import * as MapStyleActions from 'actions/map-style-actions';
+import * as UIStateActions from 'actions/ui-state-actions';
+import * as ProviderActions from 'actions/provider-actions';
+
+export type KeplerGlProps = {
+  id: string;
+  appWebsite: any;
+  onSaveMap?: () => void;
+  onViewStateChange?: () => void;
+  onDeckInitialized?: () => void;
+  onKeplerGlInitialized?: () => void;
+  mapboxApiAccessToken: string;
+  mapboxApiUrl: string;
+  getMapboxRef: () => React.RefType<any>;
+  mapStyles: {id: string; style?: object}[];
+  mapStylesReplaceDefault: boolean;
+  mapboxApiUrl: string;
+  width: number;
+  height: number;
+  appName: string;
+  version: string;
+  sidePanelWidth: number;
+  theme: object;
+  cloudProviders: object[];
+  deckGlProps?: object;
+  onLoadCloudMapSuccess?: OnSuccessCallBack;
+  onLoadCloudMapError?: OnErrorCallBack;
+  onExportToCloudSuccess?: OnSuccessCallBack;
+  onExportToCloudError?: OnErrorCallBack;
+  readOnly?: boolean;
+  maskPolygon?: Array<Array<number>>;
+  popupSettings: any;
+};
+
+export type UnconnectedKeplerGlProps = KeplerGlProps & {
+  mapState: MapState;
+  mapStyle: MapStyle;
+  uiState: UiState;
+  visState: VisState;
+  providerState: ProviderState;
+  visStateActions: typeof VisStateActions;
+  uiStateActions: typeof UIStateActions;
+  mapStateActions: typeof MapStateActions;
+  mapStyleActions: typeof MapStyleActions;
+  providerActions: typeof ProviderActions;
+};
+
+export type KeplerGlComponent = ComponentClass<UnconnectedKeplerGlProps>;
+export const DEFAULT_KEPLER_GL_PROPS: Partial<KeplerGlProps>;
+
+export default function KeplerGlFactory(): ComponentClass<KeplerGlProps>;