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

package/src/components/common/icons/vert-dots.js

@@ -0,0 +1,50 @@
+// 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 Base from './base';
+
+export default class VertDots extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'data-ex-icons-vertdot'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <rect x="35.01" y="48.31" width="6.44" height="6.44" />
+        <rect x="35.01" y="35.43" width="6.44" height="6.44" />
+        <rect x="35.01" y="22.55" width="6.44" height="6.44" />
+        <rect x="35.01" y="9.67" width="6.44" height="6.44" />
+        <rect x="22.13" y="48.31" width="6.44" height="6.44" />
+        <rect x="22.13" y="35.43" width="6.44" height="6.44" />
+        <rect x="22.13" y="22.55" width="6.44" height="6.44" />
+        <rect x="22.13" y="9.67" width="6.44" height="6.44" />
+      </Base>
+    );
+  }
+}

package/src/components/common/icons/vert-three-dots.js

@@ -0,0 +1,45 @@
+// 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 Base from './base';
+
+export default class VertThreeDots extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'data-ex-icons-vert-three-dots'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <rect x="28" y="44" width="8" height="8" />
+        <rect x="28" y="28" width="8" height="8" />
+        <rect x="28" y="12" width="8" height="8" />
+      </Base>
+    );
+  }
+}

package/src/components/common/icons/warning.js

@@ -0,0 +1,46 @@
+// 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 Base from './base';
+
+export default class Warning extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'data-ex-icons-warning',
+    stroke: '#FFF'
+  };
+
+  render() {
+    return (
+      <Base viewBox="0 0 64 64" {...this.props}>
+        <path d="M0.349,49h49.302L25,1.842L0.349,49z M3.651,47L25,6.159L46.349,47H3.651z" />
+        <rect height="18" width="2" x="24" y="18" />
+        <rect height="3" width="2" x="24" y="39" />
+      </Base>
+    );
+  }
+}

package/src/components/common/image-preview.js

@@ -0,0 +1,111 @@
+// 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 styled from 'styled-components';
+import LoadingSpinner from 'components/common/loading-spinner';
+
+/** @typedef {import('../../reducers/ui-state-updaters').ExportImage} ExportImage */
+
+const StyledImagePreview = styled.div.attrs({
+  className: 'image-preview'
+})`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  padding: 30px;
+
+  .dimension,
+  .instruction {
+    padding: 8px 0px;
+  }
+
+  .preview-image {
+    background: #e2e2e2;
+    border-radius: 4px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.18);
+    width: 100%;
+    position: relative;
+  }
+
+  .preview-image-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .preview-image-spinner {
+    position: absolute;
+    left: calc(50% - 25px);
+    top: calc(50% - 25px);
+  }
+
+  .preview-image--error {
+    font-size: 12px;
+    padding: 12px;
+    color: ${props => props.theme.errorColor};
+    text-align: center;
+  }
+`;
+
+/**
+ * @param {object} props
+ * @param {ExportImage} [props.exportImage]
+ * @param {number} [props.width]
+ * @param {boolean} [props.showDimension]
+ */
+const ImagePreview = ({exportImage, width = 400, showDimension = false}) => {
+  const {error, imageDataUri, processing, imageSize: {imageW = 0, imageH = 0} = {}} =
+    exportImage || {};
+
+  const imageStyle = {
+    width: `${width}px`,
+    height: `${(imageH / (imageW || 1)) * width}px`
+  };
+
+  return (
+    <StyledImagePreview>
+      {showDimension ? (
+        <div className="dimension">
+          {imageW} pixel x {imageH} pixel
+        </div>
+      ) : null}
+      <div className="preview-image" style={imageStyle}>
+        {processing ? (
+          <div className="preview-image-spinner">
+            <LoadingSpinner />
+          </div>
+        ) : error ? (
+          <div className="preview-image--error">
+            <span>{error.message || 'Generate map image failed!'}</span>
+          </div>
+        ) : (
+          <img className="preview-image-placeholder" src={imageDataUri} />
+        )}
+      </div>
+    </StyledImagePreview>
+  );
+};
+
+export default ImagePreview;

package/src/components/common/info-helper.js

@@ -0,0 +1,84 @@
+// 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 PropTypes from 'prop-types';
+import {useIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+import {Tooltip} from './styled-components';
+import {Docs} from 'components/common/icons';
+import styled from 'styled-components';
+import {camelize} from 'utils/utils';
+
+const StyledInfoHelper = styled.div`
+  align-items: center;
+  margin-left: 10px;
+  color: ${props => props.theme.labelColor};
+  display: inline-flex;
+  .info-helper__content {
+    width: ${props => (props.width ? `${props.width}px` : 'auto')};
+    max-width: ${props => (props.width ? 'auto' : '100px')};
+  }
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.textColorHl};
+  }
+`;
+
+function InfoHelperFactory() {
+  const propTypes = {
+    description: PropTypes.string.isRequired,
+    containerClass: PropTypes.string
+  };
+  const InfoHelper = ({description, property, containerClass, width, id, children}) => {
+    // TODO: move intl out
+    const intl = useIntl();
+
+    return (
+      <StyledInfoHelper
+        className={`info-helper ${containerClass || ''}`}
+        width={width}
+        data-tip
+        data-for={id}
+      >
+        {children ? children : <Docs height="16px" />}
+        <Tooltip id={id} effect="solid">
+          <div className="info-helper__content">
+            {description && (
+              <FormattedMessage
+                id={description}
+                defaultValue={description}
+                values={{
+                  property: intl.formatMessage({
+                    id: property ? `property.${camelize(property)}` : 'misc.empty'
+                  })
+                }}
+              />
+            )}
+          </div>
+        </Tooltip>
+      </StyledInfoHelper>
+    );
+  };
+  InfoHelper.propTypes = propTypes;
+  return InfoHelper;
+}
+
+export default InfoHelperFactory;

package/src/components/common/item-selector/accessor.js

@@ -0,0 +1,45 @@
+// 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 Accessor = {
+  IDENTITY_FN: input => input,
+
+  generateAccessor: field => object => object[field],
+
+  generateOptionToStringFor: function generateOptionToStringFor(prop) {
+    if (typeof prop === 'string') {
+      return this.generateAccessor(prop);
+    } else if (typeof prop === 'function') {
+      return prop;
+    }
+    return this.IDENTITY_FN;
+  },
+
+  valueForOption: (option, object) => {
+    if (typeof option === 'string') {
+      return object[option];
+    } else if (typeof option === 'function') {
+      return option(object);
+    }
+    return object;
+  }
+};
+
+export default Accessor;

package/src/components/common/item-selector/chickleted-input.js

@@ -0,0 +1,143 @@
+// 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 PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+import Delete from '../icons/delete';
+import {FormattedMessage} from 'localization';
+
+const propTypes = {
+  // required properties
+  onClick: PropTypes.func.isRequired,
+  removeItem: PropTypes.func.isRequired,
+
+  // optional properties
+  selectedItems: PropTypes.arrayOf(PropTypes.any),
+  disabled: PropTypes.bool,
+  displayOption: PropTypes.func,
+  focus: PropTypes.bool,
+  error: PropTypes.bool,
+  placeholder: PropTypes.string,
+  inputTheme: PropTypes.string
+};
+
+export const ChickletButton = styled.div`
+  background: ${props =>
+    props.inputTheme === 'light' ? props.theme.chickletBgdLT : props.theme.chickletBgd};
+  border-radius: 1px;
+  color: ${props =>
+    props.inputTheme === 'light' ? props.theme.textColorLT : props.theme.textColor};
+  font-size: 11px;
+  line-height: 20px;
+  margin: 4px 10px 4px 3px;
+  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+  max-width: calc(100% - 8px);
+
+  :hover {
+    color: ${props =>
+      props.inputTheme === 'light' ? props.theme.textColorHlLT : props.theme.textColorHl};
+  }
+`;
+
+export const ChickletTag = styled.span`
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+
+  :hover {
+    overflow: visible;
+  }
+`;
+
+const Chicklet = ({disabled, name, remove, inputTheme}) => (
+  <ChickletButton inputTheme={inputTheme}>
+    <ChickletTag>{name}</ChickletTag>
+    <Delete onClick={disabled ? null : remove} />
+  </ChickletButton>
+);
+
+const ChickletedInputContainer = styled.div`
+  ${props =>
+    props.inputTheme === 'secondary'
+      ? props.theme.secondaryChickletedInput
+      : props.inputTheme === 'light'
+      ? props.theme.chickletedInputLT
+      : props.theme.chickletedInput}
+      
+  color: ${props =>
+    props.hasPlaceholder ? props.theme.selectColorPlaceHolder : props.theme.selectColor};
+  overflow: hidden;
+`;
+
+const ChickletedInput = ({
+  focus,
+  disabled,
+  error,
+  onClick,
+  className,
+  selectedItems = [],
+  placeholder = '',
+  removeItem,
+  displayOption = d => d,
+  inputTheme,
+  CustomChickletComponent
+}) => (
+  <ChickletedInputContainer
+    className={`${className} chickleted-input`}
+    focus={focus}
+    disabled={disabled}
+    error={error}
+    onClick={onClick}
+    inputTheme={inputTheme}
+    hasPlaceholder={!selectedItems || !selectedItems.length}
+  >
+    {selectedItems.length > 0 ? (
+      selectedItems.map((item, i) => {
+        const chickletProps = {
+          inputTheme,
+          disabled,
+          key: `${displayOption(item)}_${i}`,
+          name: displayOption(item),
+          displayOption,
+          item,
+          remove: e => removeItem(item, e)
+        };
+        return CustomChickletComponent ? (
+          <CustomChickletComponent {...chickletProps} />
+        ) : (
+          <Chicklet {...chickletProps} />
+        );
+      })
+    ) : (
+      <span className={`${className} chickleted-input__placeholder`}>
+        <FormattedMessage id={placeholder || 'placeholder.enterValue'} />
+      </span>
+    )}
+  </ChickletedInputContainer>
+);
+
+ChickletedInput.propTypes = propTypes;
+
+export default ChickletedInput;