@stokr/components-library 0.5.5 → 0.5.7

package/dist/Input/Select.stories.js

@@ -1,129 +0,0 @@
-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 'index';
-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

@@ -1,143 +0,0 @@
-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

@@ -1,353 +0,0 @@
-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;