@stokr/components-library 0.5.4 → 0.5.6

package/dist/Input/Select.stories.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Select } from './Select';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { Medium } from '../icons/Medium';
+import { Share } from '../icons/Share';
+import Number from 'components/Number/Number';
+export default {
+  title: 'Components Library/Inputs/Select',
+  component: Select,
+  argTypes: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      defaultValue: ''
+    },
+    error: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    touched: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    value: {
+      type: 'string',
+      defaultValue: ''
+    },
+    disabled: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    options: {
+      control: {
+        type: 'object'
+      },
+      defaultValue: [{
+        key: 'default option key',
+        value: 'default option value',
+        label: 'default option label, (string or node)'
+      }],
+      required: true
+    },
+    // { required: true },
+    search: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    checkLabel: {
+      type: 'function'
+    },
+    onChange: {
+      action: 'change',
+      type: 'function'
+    },
+    onBlur: {
+      action: 'blur',
+      type: 'function'
+    },
+    onFocus: {
+      action: 'hasFocus',
+      type: 'function'
+    },
+    setTimeout: {
+      type: 'function'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Select, args));
+export const SelectOptionStrings = Template.bind({});
+SelectOptionStrings.args = {
+  label: 'click LABEL here for options',
+  value: null,
+  options: [{
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label string 1'
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label string 2'
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label string 3'
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label string 4'
+  }]
+};
+export const SelectOptionNodes = Template.bind({});
+SelectOptionNodes.args = {
+  label: 'click LABEL here for options',
+  value: 'your text (value)',
+  options: [{
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label 1'
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: 'dropdown option label 2'
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: /*#__PURE__*/React.createElement(Share, null)
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: /*#__PURE__*/React.createElement(Medium, null)
+  }, {
+    key: 'other option key',
+    value: 'other option value',
+    label: /*#__PURE__*/React.createElement(Number, null)
+  }]
+};
+export const SelectEmpty = Template.bind({});
+SelectEmpty.args = {};
+
+//doublecheck:
+
+//why is value not showing? (it does move the label up) (label down on blur, even if field is filled)

package/dist/Input/Select.styles.js

@@ -0,0 +1,143 @@
+import styled from 'styled-components/macro';
+import { components } from 'react-select';
+import { TrackV } from 'components/ComponentScroll/ComponentScroll.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+export const SelectControl = styled(components.Control)`
+  &&& {
+    z-index: 10 !important;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 15px 0;
+    padding-bottom: 5px;
+    border-radius: 0;
+    box-shadow: none;
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #f0f0f0;
+    color: #202020;
+    background-color: transparent;
+    transition: border-color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: none;
+      border-top-color: transparent;
+      border-bottom-color: #0050ca;
+    }
+
+    &.active {
+      z-index: 12 !important;
+    }
+  }
+`;
+export const SelectMenu = styled(components.Menu)`
+  &&& {
+    margin-top: -1px;
+    border-radius: 0;
+    box-shadow: none;
+    border: 0;
+    border-top: 1px solid #f0f0f0 !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    background-color: #ffffff;
+  }
+`;
+export const SelectMenuList = styled(ComponentScroll)`
+  ${TrackV} {
+    right: 6px;
+  }
+`;
+export const SelectOption = styled(components.Option)`
+  &&& {
+    cursor: pointer;
+    padding: 8px 0 !important;
+    padding-left: 2px !important;
+    font-size: 12px;
+    line-height: 18px;
+    border: 0;
+    background-color: transparent;
+    color: #202020;
+
+    ${props => props.isFocused && `
+      font-weight: bold;
+    `}
+
+    ${props => props.isSelected && `
+      font-weight: bold;
+    `}
+
+    &:hover {
+      background-color: transparent;
+      font-weight: bold;
+    }
+  }
+`;
+export const SelectContainer = styled(components.SelectContainer)`
+  z-index: 100;
+  ${props => props.selectProps.menuIsOpen && `
+    z-index: 150 !important;
+  `}
+`;
+export const SelectValueContainer = styled(components.ValueContainer)`
+  &&& {
+    font-family: 'Open sans';
+    padding: 0;
+    margin-left: -2px;
+    top: -4px;
+  }
+`;
+export const SelectIcon = styled.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+})`
+  &&& {
+    transition: 0.3s transform;
+    transform: rotate(0);
+
+    ${props => props.isMenuOpen && `
+      transform: rotate(180deg);
+    `}
+  }
+`;
+export const SelectWrapper = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 24px;
+
+  ${props => props.minWidth && `
+    min-width: ${props.minWidth};
+  `}
+
+  ${props => props.noMargin && `
+    margin-left: 0;
+  `}
+
+  &&& ${SelectControl} {
+    height: 24px;
+    font-weight: normal;
+    font-size: 11px;
+    line-height: 18px;
+    padding: 3px 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  &&& ${SelectMenu} {
+    left: 0;
+    right: 0;
+    width: auto;
+    margin: -6px -12px;
+    margin-top: 0;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+    border: 0;
+    padding: 6px 12px;
+  }
+
+  &&& ${SelectValueContainer} {
+    top: 0;
+  }
+`;

package/dist/InvestCalculator/InvestCalculator.js

@@ -0,0 +1,353 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { yupToFormErrors } from 'formik';
+import * as yup from 'yup';
+import Input from 'components/Input/Input';
+import Select from 'components/Input/Select';
+import { Wrapper, Container, EqualSign, Title, Caption, InputWrap, SelectWrapper, StyledFormError, Label } from './InvestCalculator.styles';
+//import Config from 'api/StokrConfig'
+import fixDecimals from '../../utils/fix-decimals';
+//import { tokenDecimals } from 'constants/decimals'
+
+export const InvestCalculatorCurrencies = {
+  ETH: 'eth',
+  EUR: 'eur',
+  GUSD: 'gusd',
+  USDT: 'usdt',
+  CRYPTO: 'crypto'
+};
+const BN = require('bignumber.js');
+const getNumericPart = input => {
+  // Normalize decimal separator and
+  // find numeric part (w/o leading zeros)
+  let match = input.replace(/,/, '.').match(/[1-9]\d*(\.\d*)?|\.\d*/);
+  // Prepend leading zero if necessary
+  return match ? match[0].replace(/^\./, '0.') : '0';
+};
+export class InvestCalculator extends PureComponent {
+  state = {
+    tokens: 0,
+    currencyValue: 0,
+    selectedCurrencyValue: 0,
+    selectedCurrency: this.props.userSelectedCurrency === 'ether' ? InvestCalculatorCurrencies.ETH : this.props.userSelectedCurrency === 'gemini' ? InvestCalculatorCurrencies.GUSD : InvestCalculatorCurrencies.USDT,
+    // selectedCurrency: InvestCalculatorCurrencies.ETH,
+    errors: {}
+  };
+  componentDidMount() {
+    const {
+      isIban
+    } = this.props;
+    if (isIban) {
+      this.setState({
+        selectedCurrency: InvestCalculatorCurrencies.EUR
+      });
+    }
+  }
+  normalizeCurrencySelected = currencySelected => {
+    if (currencySelected === 'euro') return 'eur';
+    if (currencySelected === 'ether') return 'eth';
+    if (currencySelected === 'gemini') return 'gusd';
+    if (currencySelected === 'tether') return 'usdt';
+  };
+  onFocus = (e, field) => {
+    const {
+      onFocus
+    } = this.props;
+    onFocus && onFocus(e, field);
+  };
+  onBlur = (e, field) => {
+    const {
+      onBlur
+    } = this.props;
+    onBlur && onBlur(e, field);
+  };
+  onChange = (e, field) => {
+    const {
+      onChange
+    } = this.props;
+    onChange && onChange(e, field);
+  };
+  onErrors = (e, field) => {
+    const {
+      onErrors
+    } = this.props;
+    onErrors && onErrors(e, field);
+  };
+  changeTokens = (e, field) => {
+    const {
+      exchangeRate,
+      available,
+      name,
+      userSelectedCurrency
+    } = this.props;
+    const {
+      selectedCurrency
+    } = this.state;
+    let tokensInput = getNumericPart(e.target.value);
+    let tokens = BN(tokensInput);
+    if (tokens.gt(available)) {
+      tokens = BN(available);
+      tokensInput = tokens.toFixed(4);
+    }
+    const currencyValue = tokens.times(exchangeRate[selectedCurrency]);
+    const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
+    this.validate({
+      tokens: tokens.toNumber(),
+      currencyValue: currencyValue.toNumber(),
+      selectedCurrency
+    });
+    this.setState({
+      tokens: tokensInput,
+      currencyValue: currencyValue.toFixed(4),
+      selectedCurrencyValue
+    }, () => {
+      this.onChange({
+        target: {
+          name,
+          value: tokens,
+          currencyValue,
+          currencyName: selectedCurrency,
+          selectedCurrencyValue
+        }
+      }, field);
+    });
+  };
+  changeCurrency = e => {
+    const {
+      exchangeRate,
+      name,
+      userSelectedCurrency
+    } = this.props;
+    const {
+      tokens
+    } = this.state;
+    const selectedCurrency = e.value;
+    const currencyValue = tokens * exchangeRate[selectedCurrency];
+    const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
+    this.validate({
+      tokens,
+      currencyValue,
+      selectedCurrency
+    });
+    this.setState({
+      currencyValue,
+      selectedCurrency,
+      selectedCurrencyValue
+    }, () => {
+      this.onChange({
+        target: {
+          name,
+          value: tokens,
+          currencyValue,
+          currencyName: selectedCurrency,
+          selectedCurrencyValue
+        }
+      });
+    });
+  };
+  changeCurrencyValue = (e, field) => {
+    const {
+      exchangeRate,
+      name,
+      available,
+      userSelectedCurrency
+    } = this.props;
+    const {
+      selectedCurrency
+    } = this.state;
+    let currencyValueInput = getNumericPart(e.target.value);
+    let currencyValue = BN(currencyValueInput);
+    let tokens = currencyValue.div(exchangeRate[selectedCurrency]);
+    const selectedCurrencyValue = tokens * exchangeRate[this.normalizeCurrencySelected(userSelectedCurrency)];
+    if (tokens.gt(available)) {
+      tokens = BN(available);
+      currencyValue = tokens.times(exchangeRate[selectedCurrency]);
+      currencyValueInput = currencyValue.toFixed(4);
+    }
+    this.validate({
+      tokens: tokens.toNumber(),
+      currencyValue: currencyValue.toNumber(),
+      selectedCurrency
+    });
+    this.setState({
+      tokens: tokens.toFixed(4),
+      currencyValue: currencyValueInput,
+      selectedCurrencyValue
+    }, () => {
+      this.onChange({
+        target: {
+          name,
+          value: tokens,
+          currencyValue,
+          currencyName: selectedCurrency,
+          selectedCurrencyValue
+        }
+      }, field);
+    });
+  };
+  validate = values => {
+    const {
+      minTokensCount,
+      available,
+      maxFunds,
+      name,
+      tokenName,
+      userSelectedCurrency
+    } = this.props;
+    const validationSchema = yup.object().shape({
+      tokens: yup.number().min(minTokensCount, `Minimum investment: ${minTokensCount}`).max(available, `Unfortunately there are less ${tokenName} TOKENS available as you wish to buy. Please choose a smaller amount.`),
+      currencyValue: yup.number().when('selectedCurrency', {
+        is: InvestCalculatorCurrencies.EUR,
+        then: yup.number().max(2 // `Credit card limit of €${Config.euroLimit} reached`, // Config.euroLimit,
+        ``),
+        otherwise: yup.number().max(maxFunds[InvestCalculatorCurrencies.CRYPTO], `Unfortunately there are not sufficient ${userSelectedCurrency} available on your chosen Ethereum address.`)
+      })
+    });
+    const callback = () => {
+      const {
+        errors
+      } = this.state;
+      this.onErrors({
+        target: {
+          name,
+          errors
+        }
+      });
+    };
+    try {
+      validationSchema.validateSync(values);
+      this.setState({
+        errors: {}
+      }, callback);
+    } catch (e) {
+      this.setState({
+        errors: yupToFormErrors(e)
+      }, callback);
+    }
+  };
+  render() {
+    const {
+      available,
+      tokenName,
+      id,
+      name,
+      isIban,
+      userSelectedCurrency
+    } = this.props;
+    const {
+      errors,
+      tokens,
+      currencyValue,
+      selectedCurrency
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Title, {
+      error: !!errors.tokens
+    }, `${tokenName} tokens`), /*#__PURE__*/React.createElement(InputWrap, null, /*#__PURE__*/React.createElement(Input, {
+      id: id,
+      name: name,
+      value: tokens.toString(),
+      onChange: this.changeTokens,
+      onBlur: this.handleBlur
+    })), /*#__PURE__*/React.createElement(Caption, null, `Still available: ${fixDecimals(available,
+    //tokenDecimals,
+    2)} ${tokenName}`), /*#__PURE__*/React.createElement(StyledFormError, {
+      show: !!errors.tokens
+    }, errors.tokens)), /*#__PURE__*/React.createElement(EqualSign, null, "="), /*#__PURE__*/React.createElement(Container, null, isIban ? /*#__PURE__*/React.createElement(Title, {
+      error: !!errors.tokens
+    }, "\u20AC value") : /*#__PURE__*/React.createElement(Title, {
+      error: selectedCurrency === InvestCalculatorCurrencies.ETH && !!errors.currencyValue || selectedCurrency === InvestCalculatorCurrencies.GUSD && !!errors.currencyValue || selectedCurrency === InvestCalculatorCurrencies.USDT && !!errors.currencyValue
+    }, userSelectedCurrency === 'ether' ? 'ETH VALUE' : userSelectedCurrency === 'gemini' ? 'GUSD VALUE' : 'USDT VALUE')
+    // <SelectWrapper>
+    //   <Select
+    //     id={`${id}-currencySelect`}
+    //     name={`${id}-currencySelect`}
+    //     value={selectedCurrency}
+    //     options={[
+    //       {
+    //         key: '1',
+    //         value: InvestCalculatorCurrencies.EUR,
+    //         label: (
+    //           <Label
+    //             error={
+    //               selectedCurrency === InvestCalculatorCurrencies.EUR &&
+    //               !!errors.currencyValue
+    //             }
+    //           >
+    //             € VALUE
+    //           </Label>
+    //         ),
+    //       },
+    //       {
+    //         key: '2',
+    //         value:
+    //           userSelectedCurrency === 'ether'
+    //             ? InvestCalculatorCurrencies.ETH
+    //             : userSelectedCurrency === 'gemini'
+    //             ? InvestCalculatorCurrencies.GUSD
+    //             : InvestCalculatorCurrencies.USDT,
+    //         label: (
+    //           <Label
+    //             error={
+    //               (selectedCurrency ===
+    //                 InvestCalculatorCurrencies.ETH &&
+    //                 !!errors.currencyValue) ||
+    //               (selectedCurrency ===
+    //                 InvestCalculatorCurrencies.GUSD &&
+    //                 !!errors.currencyValue) ||
+    //               (selectedCurrency ===
+    //                 InvestCalculatorCurrencies.USDT &&
+    //                 !!errors.currencyValue)
+    //             }
+    //           >
+    //             {userSelectedCurrency === 'ether'
+    //               ? 'ETH VALUE'
+    //               : userSelectedCurrency === 'gemini'
+    //               ? 'GUSD VALUE'
+    //               : 'USDT VALUE'}
+    //           </Label>
+    //         ),
+    //       },
+    //     ]}
+    //     onChange={this.changeCurrency}
+    //     onBlur={() => {}}
+    //   />
+    // </SelectWrapper>
+    , /*#__PURE__*/React.createElement(InputWrap, null, /*#__PURE__*/React.createElement(Input, {
+      id: `${id}-valueInput`,
+      name: `${id}-valueInput`,
+      value: currencyValue.toString(),
+      onChange: this.changeCurrencyValue,
+      onBlur: () => {}
+    })), /*#__PURE__*/React.createElement(StyledFormError, {
+      paddingTop: true,
+      show: !!errors.currencyValue
+    }, errors.currencyValue)));
+  }
+}
+InvestCalculator.propTypes = {
+  exchangeRate: PropTypes.shape({
+    [InvestCalculatorCurrencies.ETH]: PropTypes.number.isRequired,
+    [InvestCalculatorCurrencies.EUR]: PropTypes.number.isRequired
+  }).isRequired,
+  maxFunds: PropTypes.shape({
+    [InvestCalculatorCurrencies.CRYPTO]: PropTypes.number,
+    [InvestCalculatorCurrencies.EUR]: PropTypes.number
+  }).isRequired,
+  minTokensCount: PropTypes.number,
+  available: PropTypes.number.isRequired,
+  tokenName: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onErrors: PropTypes.func
+};
+InvestCalculator.defaultProps = {
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {},
+  onErrors: () => {},
+  minTokensCount: 0
+};
+export default InvestCalculator;