@carto/kepler.gl 0.0.81 → 0.0.82

package/src/components/side-panel/layer-panel/layer-type-dropdown-list.tsx

@@ -0,0 +1,118 @@
+// 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, {ComponentType, useCallback, MouseEvent} from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import {classList} from '../../common/item-selector/dropdown-list';
+
+type ListItem = {
+  id: string;
+  disabled: boolean;
+};
+
+type LayerTypeDropdownListProps = {
+  options: ListItem[];
+  selectedItems: ListItem[];
+  selectionIndex: number | null;
+  onOptionSelected: (opt: string, e: Event) => void;
+  customListItemComponent: ComponentType<{value: ListItem; isTile: boolean}>;
+};
+
+const DropdownListWrapper = styled.div`
+  ${props => props.theme.dropdownList};
+  background-color: ${props => props.theme.dropdownListBgd};
+  border-top: 1px solid ${props => props.theme.dropdownListBorderTop};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: ${props => props.theme.layerTypeIconPdL}px 0 0 ${props => props.theme.layerTypeIconPdL}px;
+`;
+
+const StyledDropdownListItem = styled.div`
+  padding-bottom: ${props => props.theme.layerTypeIconPdL}px;
+  padding-right: ${props => props.theme.layerTypeIconPdL}px;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  &.selected {
+    .layer-type-selector__item__icon {
+      border: 1px solid #caf2f4;
+    }
+  }
+
+  :hover,
+  &.selected {
+    cursor: pointer;
+    .layer-type-selector__item__icon {
+      color: ${props => props.theme.activeColor};
+    }
+
+    .layer-type-selector__item__label {
+      color: ${props => props.theme.textColor};
+    }
+  }
+`;
+
+export function LayerTypeDropdownListFactory() {
+  const LayerTypeDropdownList: React.FC<LayerTypeDropdownListProps> = ({
+    onOptionSelected,
+    options,
+    selectedItems,
+    selectionIndex,
+    customListItemComponent
+  }) => {
+    const onSelectOption = useCallback(
+      (e, value) => {
+        e.preventDefault();
+        onOptionSelected(value, e);
+      },
+      [onOptionSelected]
+    );
+
+    const Component = customListItemComponent;
+
+    return (
+      <DropdownListWrapper className={classList.list}>
+        {options.map((value, i) => (
+          <StyledDropdownListItem
+            className={classNames('layer-type-selector__item', {
+              selected: selectedItems.find(it => it.id === value.id),
+              hover: selectionIndex === i,
+              disabled: value.disabled
+            })}
+            key={`${value.id}_${i}`}
+            onMouseDown={(e: MouseEvent) => onSelectOption(e, value)}
+            onClick={(e: MouseEvent) => onSelectOption(e, value)}
+          >
+            <Component value={value} isTile />
+          </StyledDropdownListItem>
+        ))}
+      </DropdownListWrapper>
+    );
+  };
+
+  return LayerTypeDropdownList;
+}
+
+export default LayerTypeDropdownListFactory;

package/src/components/side-panel/layer-panel/layer-type-list-item.tsx

@@ -0,0 +1,92 @@
+// 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, {ComponentType} from 'react';
+import styled from 'styled-components';
+import {CLOUDFRONT} from 'constants/default-settings';
+import classNames from 'classnames';
+import {FormattedMessage} from 'localization';
+import {BaseProps} from 'components/common/icons/base';
+
+type LayerTypeListItemProps = {
+  value: {
+    icon: ComponentType<Partial<BaseProps>>;
+    label: string;
+  };
+  isTile: boolean;
+};
+
+const ITEM_SIZE = {
+  large: 50,
+  small: 28
+};
+
+const StyledListItem = styled.div`
+  &.list {
+    display: flex;
+    align-items: center;
+
+    .layer-type-selector__item__icon {
+      color: ${props => props.theme.activeColor};
+      background-size: ${props => props.theme.layerTypeIconSizeSM}px
+        ${props => props.theme.layerTypeIconSizeSM}px;
+      margin-right: 12px;
+    }
+  }
+
+  .layer-type-selector__item__icon {
+    color: ${props => props.theme.labelColor};
+    display: flex;
+    background-image: url(${`${CLOUDFRONT}/kepler.gl-layer-icon-bg.png`});
+    background-size: ${props => props.theme.layerTypeIconSizeL}px
+      ${props => props.theme.layerTypeIconSizeL}px;
+  }
+
+  .layer-type-selector__item__label {
+    text-transform: capitalize;
+    font-size: 12px;
+    text-align: center;
+    color: ${props => props.theme.selectColor};
+  }
+`;
+
+export function LayerTypeListItemFactory() {
+  const LayerTypeListItem: React.FC<LayerTypeListItemProps> = ({value, isTile}) => (
+    <StyledListItem
+      className={classNames('layer-type-selector__item__inner', {
+        list: !isTile
+      })}
+    >
+      <div className="layer-type-selector__item__icon">
+        <value.icon height={`${isTile ? ITEM_SIZE.large : ITEM_SIZE.small}px`} />
+      </div>
+      <div className="layer-type-selector__item__label">
+        <FormattedMessage
+          id={`layer.type.${value.label.toLowerCase()}`}
+          defaultMessage={value.label}
+        />
+      </div>
+    </StyledListItem>
+  );
+
+  return LayerTypeListItem;
+}
+
+export default LayerTypeListItemFactory;

package/src/components/side-panel/layer-panel/layer-type-selector.tsx

@@ -0,0 +1,115 @@
+// 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, {useMemo} from 'react';
+import styled, {withTheme} from 'styled-components';
+
+import LayerTypeDropdownListFactory from './layer-type-dropdown-list';
+import LayerTypeListItemFactory from './layer-type-list-item';
+import ItemSelector from 'components/common/item-selector/item-selector';
+
+import {SidePanelSection} from 'components/common/styled-components';
+import {Layer} from 'layers';
+import {Datasets} from 'reducers';
+
+type Option = {
+  id: string;
+  label: string;
+  icon: any; //
+  requireData: any; //
+};
+
+type LayerTypeSelectorProps = {
+  layer: Layer;
+  datasets: Datasets;
+  layerTypeOptions: Option[];
+  onSelect: (
+    items:
+      | readonly (string | number | boolean | object)[]
+      | string
+      | number
+      | boolean
+      | object
+      | null
+  ) => void;
+  // TODO add correct type after Theme typing
+  theme: Record<string, string>;
+};
+
+const StyledLayerTypeSelector = styled.div`
+  .item-selector .item-selector__dropdown {
+    padding: 4px 10px 4px 2px;
+  }
+`;
+
+LayerTypeSelectorFactory.deps = [LayerTypeListItemFactory, LayerTypeDropdownListFactory];
+
+const getDisplayOption = (op: Option) => op.label;
+const getOptionValue = (op: Option) => op.id;
+
+function LayerTypeSelectorFactory(
+  LayerTypeListItem: ReturnType<typeof LayerTypeListItemFactory>,
+  LayerTypeDropdownList: ReturnType<typeof LayerTypeDropdownListFactory>
+) {
+  const LayerTypeSelector: React.FC<LayerTypeSelectorProps> = ({
+    layer,
+    layerTypeOptions,
+    onSelect,
+    datasets
+  }) => {
+    const hasData = useMemo(() => Boolean(Object.keys(datasets).length), [datasets]);
+    const typeOptions = useMemo(
+      () =>
+        layerTypeOptions.map(op => ({
+          ...op,
+          disabled: !hasData && op.requireData !== false
+        })),
+      [hasData, layerTypeOptions]
+    );
+
+    const selectedItems = useMemo(() => typeOptions.find(op => op.id === layer.type), [
+      typeOptions,
+      layer.type
+    ]);
+
+    return (
+      <SidePanelSection>
+        <StyledLayerTypeSelector className="layer-config__type">
+          <ItemSelector
+            selectedItems={selectedItems}
+            options={typeOptions}
+            multiSelect={false}
+            placeholder="placeholder.selectType"
+            onChange={onSelect}
+            getOptionValue={getOptionValue}
+            filterOption="label"
+            displayOption={getDisplayOption}
+            DropDownLineItemRenderComponent={LayerTypeListItem}
+            DropDownRenderComponent={LayerTypeDropdownList}
+          />
+        </StyledLayerTypeSelector>
+      </SidePanelSection>
+    );
+  };
+
+  return withTheme(LayerTypeSelector);
+}
+
+export default LayerTypeSelectorFactory;

package/src/components/side-panel/layer-panel/layer-visibility-by-zoom.tsx

@@ -0,0 +1,123 @@
+// Copyright (c) 2021 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, {useCallback} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import RangeSliderFactory from 'components/common/range-slider';
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+import {ZOOM_LEVEL_LIMITS} from 'constants/default-settings';
+
+const SliderWrapper = styled.div`
+  position: relative;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+LayerVisibilityByZoomFactory.deps = [RangeSliderFactory];
+
+function LayerVisibilityByZoomFactory(RangeSlider) {
+  const LayerVisibilityByZoom = ({
+    updateLayerConfig,
+    layer,
+    rangeMinValue,
+    rangeMaxValue,
+    iconComponent,
+    disabled
+  }) => {
+    const {config} = layer;
+    const minLimit = rangeMinValue || ZOOM_LEVEL_LIMITS.min;
+    const maxLimit = rangeMaxValue || ZOOM_LEVEL_LIMITS.max;
+
+    const [zoomMin, setZoomMin] = React.useState(
+      config.visibilityByZoom?.min
+        ? config.visibilityByZoom?.min < minLimit
+          ? minLimit
+          : config.visibilityByZoom?.min
+        : minLimit
+    );
+    const [zoomMax, setZoomMax] = React.useState(
+      config.visibilityByZoom?.max
+        ? config.visibilityByZoom?.max > maxLimit
+          ? maxLimit
+          : config.visibilityByZoom?.max
+        : maxLimit
+    );
+
+    const _onChange = useCallback(
+      val => {
+        setZoomMin(val[0]);
+        setZoomMax(val[1]);
+        updateLayerConfig({visibilityByZoom: {min: val[0], max: val[1]}});
+      },
+      [updateLayerConfig]
+    );
+
+    const IconElement = () => iconComponent || null;
+
+    return (
+      <div>
+        <SidePanelSection disabled={disabled}>
+          <div className="layer-visibility__zoom">
+            <TopRow>
+              <PanelLabel>
+                <FormattedMessage id={'layerVisibility.title'} />{' '}
+                <IconElement data-test="icon-help-button" />
+              </PanelLabel>
+            </TopRow>
+            <SliderWrapper>
+              <RangeSlider
+                range={[
+                  rangeMinValue || ZOOM_LEVEL_LIMITS.min,
+                  rangeMaxValue || ZOOM_LEVEL_LIMITS.max
+                ]}
+                value0={zoomMin}
+                value1={zoomMax}
+                min={minLimit}
+                max={maxLimit}
+                onChange={_onChange}
+                isRanged={true}
+                showTooltip
+                showInput
+                inputTheme="secondary"
+                inputSize="tiny"
+              />
+            </SliderWrapper>
+          </div>
+        </SidePanelSection>
+      </div>
+    );
+  };
+
+  LayerVisibilityByZoom.propTypes = {
+    updateLayerConfig: PropTypes.func.isRequired,
+    rangeMinValue: PropTypes.number,
+    rangeMaxValue: PropTypes.number,
+    iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+  };
+
+  return LayerVisibilityByZoom;
+}
+
+export default LayerVisibilityByZoomFactory;

package/src/components/side-panel/layer-panel/panel-view-list-toggle.tsx

@@ -0,0 +1,132 @@
+// 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, {useMemo} from 'react';
+import styled from 'styled-components';
+import OrderByList from 'components/common/icons/order-by-list';
+import OrderByDataset from 'components/common/icons/order-by-dataset';
+import {Tooltip} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+import {LayerPanelListView} from 'reducers/ui-state-updaters';
+
+type ToggleOptionProps = {
+  isActive: boolean;
+  onClick: () => void;
+  option: typeof TOGGLE_OPTIONS[0];
+};
+
+type PanelViewListToggleProps = {
+  layerPanelListViewMode: LayerPanelListView;
+  toggleLayerPanelListView: (view: string) => void;
+};
+
+const PanelViewListToggleContainer = styled.div.attrs({
+  className: 'panel-view-list-toggle'
+})``;
+
+const PanelViewListToggleWrapper = styled.div.attrs({
+  className: 'panel-view-list-toggle-inner'
+})`
+  display: flex;
+  justify-content: flex-end;
+  align-content: center;
+  gap: 10px;
+`;
+
+export const StyledToggleOption = styled.div.attrs({
+  className: 'layer-panel-toggle-option'
+})<{active: boolean}>`
+  color: ${props =>
+    props.active
+      ? props.theme.layerPanelToggleOptionColorActive
+      : props.theme.layerPanelToggleOptionColor};
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.layerPanelToggleOptionColorActive};
+  }
+`;
+
+function ToggleOptionFactory() {
+  const ToggleOption: React.FC<ToggleOptionProps> = ({isActive, onClick, option}) => (
+    <StyledToggleOption
+      data-tip
+      data-for={`${option.id}-toggle-option`}
+      active={isActive}
+      onClick={onClick}
+    >
+      <option.iconComponent height="20px" />
+      <Tooltip id={`${option.id}-toggle-option`} effect="solid" delayShow={500} place="bottom">
+        <span>
+          <FormattedMessage id={option.label} />
+        </span>
+      </Tooltip>
+    </StyledToggleOption>
+  );
+
+  return ToggleOption;
+}
+
+const TOGGLE_OPTIONS = [
+  {
+    id: 'list',
+    iconComponent: OrderByList,
+    value: 'list',
+    label: 'List'
+  },
+  {
+    id: 'sort-by-dataset',
+    iconComponent: OrderByDataset,
+    value: 'sortByDataset',
+    label: 'Sort by dataset'
+  }
+];
+
+PanelViewListToggleFactory.deps = [ToggleOptionFactory];
+
+function PanelViewListToggleFactory(ToggleOption: ReturnType<typeof ToggleOptionFactory>) {
+  const PanelViewListToggle: React.FC<PanelViewListToggleProps> = props => {
+    const {layerPanelListViewMode, toggleLayerPanelListView} = props;
+
+    const toggleListView = (listView: string) => toggleLayerPanelListView(listView);
+    const options = useMemo(
+      () => TOGGLE_OPTIONS.map(opt => ({...opt, isActive: layerPanelListViewMode === opt.value})),
+      [layerPanelListViewMode]
+    );
+
+    return (
+      <PanelViewListToggleContainer>
+        <PanelViewListToggleWrapper>
+          {options.map(opt => (
+            <ToggleOption
+              key={opt.id}
+              onClick={() => toggleListView(opt.value)}
+              option={opt}
+              isActive={opt.isActive}
+            />
+          ))}
+        </PanelViewListToggleWrapper>
+      </PanelViewListToggleContainer>
+    );
+  };
+
+  return PanelViewListToggle;
+}
+
+export default PanelViewListToggleFactory;

package/src/components/side-panel/layer-panel/single-color-palette.tsx

@@ -0,0 +1,94 @@
+// 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, {MouseEvent} from 'react';
+import {range} from 'd3-array';
+import styled from 'styled-components';
+import {hexToRgb} from 'utils/color-utils';
+
+import {ColorsByTheme, Themes} from 'constants/color-palette';
+import {RGBColor} from 'reducers';
+import {ColorRange} from 'constants/color-ranges';
+
+type SingleColorPaletteProps = {
+  onSelectColor: (color: RGBColor | ColorRange, e: MouseEvent) => void;
+  // hex value
+  selectedColor: string;
+};
+
+const PALETTE_HEIGHT = '8px';
+const ROWS = 22;
+
+const StyledColorPalette = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 12px;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledColorColumn = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const StyledColorBlock = styled.div<{selected: boolean}>`
+  flex-grow: 1;
+  height: ${PALETTE_HEIGHT};
+  border-width: 1px;
+  border-style: solid;
+`;
+SingleColorPaletteFactory.deps = [];
+
+function SingleColorPaletteFactory() {
+  const SingleColorPalette: React.FC<SingleColorPaletteProps> = ({selectedColor, onSelectColor}) => {
+    return (
+      <StyledColorPalette className="single-color-palette">
+        {Themes.map((theme, col) => (
+          <StyledColorColumn key={theme} className="single-color-palette__column">
+            {range(1, ROWS + 1, 1).map((key, i) => (
+              <StyledColorBlock
+                className="single-color-palette__block"
+                style={{
+                  backgroundColor: ColorsByTheme[theme][key],
+                  borderColor:
+                    selectedColor === ColorsByTheme[theme][key].toUpperCase()
+                      ? 'white'
+                      : ColorsByTheme[theme][key]
+                }}
+                key={`${theme}_${key}`}
+                selected={selectedColor === ColorsByTheme[theme][key].toUpperCase()}
+                onClick={e => onSelectColor(hexToRgb(ColorsByTheme[theme][key]), e)}
+              />
+            ))}
+          </StyledColorColumn>
+        ))}
+      </StyledColorPalette>
+    );
+  };
+  return SingleColorPalette;
+}
+
+export default SingleColorPaletteFactory;