@stokr/components-library 0.5.3 → 0.5.5

package/dist/InfoPanel/InfoPanel.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useState, useContext } from 'react';
+import Slider from 'components/Slider/Slider';
+import { ImageSlide, ImageSlideWrapper } from 'components/Slider/Slider.styles';
+import CaptialRaisedSummary from 'components/CapitalRaisedSummary/CaptialRaisedSummary';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import InvestmentStat from 'components/InvestmentStat/InvestmentStat';
+import parseBlockContent from 'utils/parseBlockContent';
+import { ProjectContext } from 'context/Project/ProjectContext';
+import { Video, PlayButton } from 'components/video';
+export function ImagesCarousel(params) {
+  const [shouldRenderPage, setShouldRenderPage] = useState(false);
+  const [carouselItems, setCarouselItems] = useState([]);
+  // const [venture, setVenture] = useState({})
+  let {
+    project
+  } = useContext(ProjectContext);
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const [videoUri, setVideoUri] = useState('');
+  useEffect(() => {
+    const carouselFiles = generateCarouselItems(project.blocks.media);
+    setCarouselItems(carouselFiles);
+    setShouldRenderPage(true);
+  }, []);
+  const generateCarouselItems = media => {
+    const mediaParsed = parseBlockContent(media);
+    const carouselFiles = [];
+    const tempObj = {};
+
+    // Find only carousel items
+    Object.keys(mediaParsed).forEach(key => {
+      if (key.includes('carouselFiles')) {
+        const index = key.split('carouselFiles_')[1].split('_')[0];
+
+        // Group video and its thumbnail
+        if (key.includes('videoThumbnail')) {
+          tempObj[index] = {
+            ...tempObj[index],
+            videoThumbnail: mediaParsed[key]
+          };
+        } else {
+          tempObj[index] = {
+            ...tempObj[index],
+            ...mediaParsed[key]
+          };
+        }
+      }
+    });
+    Object.keys(tempObj).forEach(key => {
+      carouselFiles.push(tempObj[key]);
+    });
+    return carouselFiles;
+  };
+  const openVideo = videoUri => {
+    setIsVideoOpen(true);
+    setVideoUri(videoUri);
+  };
+  const closeVideo = () => {
+    setIsVideoOpen(false);
+    setVideoUri();
+  };
+  return shouldRenderPage ? /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Video, {
+    src: videoUri,
+    isVideoOpen: true,
+    noPlayButton: true,
+    play: isVideoOpen,
+    onClose: closeVideo
+  }), /*#__PURE__*/React.createElement(Column, {
+    part: 2,
+    full: 3
+  }, /*#__PURE__*/React.createElement(Slider, {
+    dots: true
+  }, carouselItems.map(item => {
+    if (item.type === 'image') {
+      return /*#__PURE__*/React.createElement(ImageSlideWrapper, {
+        key: item.uri
+      }, /*#__PURE__*/React.createElement(ImageSlide, {
+        src: item.uri,
+        alt: ""
+      }));
+    } else if (item.type === 'video') {
+      return /*#__PURE__*/React.createElement(ImageSlideWrapper, {
+        key: item.uri
+      }, /*#__PURE__*/React.createElement(ImageSlide, {
+        src: item.videoThumbnail.uri,
+        alt: ""
+      }), /*#__PURE__*/React.createElement(PlayButton, {
+        onClick: () => openVideo(item.uri)
+      }, /*#__PURE__*/React.createElement("img", {
+        alt: "Play video",
+        src: require('components/video/img/play-btn.svg')
+      })));
+    }
+  })), /*#__PURE__*/React.createElement(CaptialRaisedSummary, {
+    capital: project.totalSold,
+    multiProgressBar: project.multiProgressBar
+  })), /*#__PURE__*/React.createElement(Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/React.createElement(InvestmentStat, {
+    content: project.sharePercentage,
+    title: project.name === 'aquarius' ? 'Target return' : project.shareType,
+    tooltip: project.name === 'aquarius' ? 'The target yield per annum in accordance with the Offering Memorandum. Please read carefully the Offering Memorandum before investing' : project.name === 'mazzanti' ? 'The Securities represent the right to 50% of the sale proceeds for the sale of 1 (one) Millecavalli R car (minus any taxes).' : project.name === 'blockstream-mining' ? 'The percentage represents all Bitcoins mined over a period of 36 months in accordance with the Terms and Conditions. Please carefully read the Terms and Conditions before investing.' : `The percentage of the venture’s future ${project.name === 'infinite-fleet' ? 'profits' : 'revenues'} to be distributed in accordance with the Offering Terms. Please carefully read the Offering Terms and Offering Document
+           before investing.`,
+    borderTop: true
+  }), /*#__PURE__*/React.createElement(InvestmentStat, {
+    content: project.name === 'aquarius' ? 'OPEN-ENDED' : project.name === 'infinite-fleet' ? 'TBD' : project.daysLeft,
+    title: project.name === 'aquarius' ? 'fund typ' : project.daysLeftText,
+    borderTop: true
+  }), /*#__PURE__*/React.createElement(InvestmentStat, {
+    content: project.name === 'aquarius' ? 'PROFESSIONAL' : project.investmentCount.toString(),
+    title: "Investors",
+    primaryBg: true
+  }))) : '';
+}
+export default ImagesCarousel;

package/dist/Input/DatePickerInput.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import { Wrapper, Label } from './Input.styles';
+import { DatePickerOverlay } from './DatePickerInput.styles';
+export const DatePickerInput = props => {
+  const {
+    id,
+    name,
+    label,
+    placeholder,
+    value,
+    error,
+    touched,
+    dashboard
+  } = props;
+  const [labelUp, setLabelUp] = useState(false);
+  useEffect(() => {
+    checkLabel(false);
+  }, []);
+  const onChange = value => {
+    props.onChange && props.onChange(null, {
+      name,
+      value
+    });
+  };
+  const checkLabel = focus => {
+    setLabelUp(focus || !!value);
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, null, label && /*#__PURE__*/React.createElement(Label, {
+    isUp: labelUp,
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(DatePickerOverlay, {
+    onClick: () => checkLabel(true),
+    dashboard: dashboard
+  }, /*#__PURE__*/React.createElement(DayPickerInput, {
+    id: id,
+    name: name,
+    value: value,
+    placeholder: placeholder,
+    onDayChange: onChange,
+    error: error
+  })));
+};
+DatePickerInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
+  onChange: PropTypes.func.isRequired,
+  dashboard: PropTypes.bool
+};
+DatePickerInput.defaultProps = {
+  label: '',
+  placeholder: '',
+  error: false,
+  touched: false,
+  dashboard: false
+};
+export default DatePickerInput;

package/dist/Input/DatePickerInput.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { DatePickerInput } from './DatePickerInput';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+// import { date } from '@storybook/addon-knobs'
+
+export default {
+  title: 'Components Library/Inputs/Date Picker Input',
+  component: DatePickerInput,
+  argTypes: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      defaultValue: ''
+    },
+    placeholder: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value: {
+      type: 'date',
+      control: {
+        type: 'object'
+      },
+      //   control: { type: 'date' },
+      required: true
+    },
+    //oneOf string, date, required,
+    error: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    touched: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    dashboard: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    checkLabel: {
+      type: 'function'
+    },
+    onChange: {
+      action: 'change',
+      type: 'function',
+      required: true
+    },
+    onBlur: {
+      action: 'blur',
+      type: 'function'
+    },
+    onFocus: {
+      action: 'hasFocus',
+      type: 'function'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(DatePickerInput, args));
+export const DatePickerInputFilled = Template.bind({});
+DatePickerInputFilled.args = {
+  label: 'label date',
+  value: '2022-1-4'
+};
+export const DatePickerInputEmpty = Template.bind({});
+DatePickerInputEmpty.args = {
+  label: 'label date'
+};
+
+//doublecheck:
+
+//works fine if clicking on element itself to change date,
+//but changes to "value" in SB controls print UNIX timestamp
+//value: new Date(2022, 0, 1, 0, 4)   also not working interactively

package/dist/Input/DatePickerInput.styles.js

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components/macro';
+import theme from 'styles/theme';
+export const DatePickerOverlay = styled.div`
+  &&& > .DayPickerInput {
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
+  &&& > .DayPickerInput-OverlayWrapper {
+    z-index: 100;
+  }
+
+  &&& > .DayPickerInput > input {
+    font-family: 'Open sans';
+    display: block;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 13px 0;
+    padding-bottom: 7px;
+    border-radius: 0;
+    box-shadow: none;
+    outline: 0;
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid ${props => theme.cGrey};
+    color: ${props => theme.cBlack};
+    background-color: transparent;
+    transition: border-color 0.2s;
+
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      border-top-color: transparent;
+      border-bottom-color: ${props => theme.cPrimary};
+    }
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+
+  ${props => props.dashboard && css`
+      &&& > .DayPickerInput > input {
+        border: 0;
+        padding: 0;
+        height: 22px;
+        font-family: 'Open Sans';
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 22px;
+        letter-spacing: 0.53px;
+        text-transform: normal;
+        color: ${theme.cBlack};
+
+        &::placeholder {
+          color: ${theme.cGrey2};
+          opacity: 1;
+        }
+      }
+    `}
+`;
+export default DatePickerOverlay;

package/dist/Input/Input.js

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Wrapper, Label, InputWrap } from './Input.styles';
+export const Input = props => {
+  const {
+    type,
+    id,
+    name,
+    label,
+    placeholder,
+    value,
+    error,
+    touched,
+    readOnly,
+    inverted,
+    dashboard
+  } = props;
+  const [labelUp, setLabelUp] = useState(false);
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    setLabelUp(hasFocus || !!value);
+  }, [hasFocus, value]);
+  const onFocus = (e, field) => {
+    props.onFocus && props.onFocus(e, field);
+    setHasFocus(true);
+  };
+  const onBlur = (e, field) => {
+    if (props.onBlur) props.onBlur(e, field);
+    setHasFocus(false);
+  };
+  const onChange = (e, field) => {
+    props.onChange && props.onChange(e, field);
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    inverted: inverted
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    isUp: labelUp,
+    active: hasFocus,
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(InputWrap, {
+    error: error && touched,
+    dashboard: dashboard
+  }, /*#__PURE__*/React.createElement("input", {
+    type: type,
+    id: id,
+    name: name,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    readOnly: readOnly,
+    placeholder: placeholder
+  })));
+};
+Input.propTypes = {
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  readOnly: PropTypes.bool,
+  inverted: PropTypes.bool,
+  dashboard: PropTypes.bool
+};
+Input.defaultProps = {
+  type: 'text',
+  label: '',
+  placeholder: '',
+  value: '',
+  error: false,
+  touched: false,
+  readOnly: false,
+  inverted: false,
+  dashboard: false,
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {}
+};
+export default Input;

package/dist/Input/Input.stories.js

@@ -0,0 +1,134 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import React from 'react';
+import { Input } from './Input';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Inputs/Input',
+  component: Input,
+  argTypes: {
+    type: {
+      type: 'string'
+    },
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      required: true
+    },
+    label: {
+      type: 'string',
+      defaultValue: ''
+    },
+    placeholder: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value: {
+      type: 'string',
+      defaultValue: ''
+    },
+    error: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    touched: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    readOnly: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    inverted: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    dashboard: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    checkLabel: {
+      type: 'function'
+    },
+    onChange: {
+      action: 'change',
+      type: 'function'
+    },
+    onBlur: {
+      action: 'blur',
+      type: 'function'
+    },
+    onFocus: {
+      action: 'hasFocus',
+      type: 'function'
+    }
+  },
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'resetviewport'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Input, args));
+
+//trying to integrate state:
+// const Template = args => {
+//   const [value, setValue] = useState(args.value ?? '')
+//   return (
+//         <Input
+//             {...args}
+//             onChange={(...params) => {
+//               args.onChange(...params)
+//               setValue(...params)
+//             }}
+//             value={value}
+//           />
+// }
+
+export const InputLabeled = Template.bind({});
+InputLabeled.args = {
+  label: 'input description (label)'
+};
+InputLabeled.parameters = {
+  backgrounds: {
+    default: 'resetviewport'
+  }
+};
+export const InputFilled = Template.bind({});
+InputFilled.args = {
+  label: 'input description (label)',
+  value: 'your text (value)'
+};
+InputFilled.parameters = {
+  backgrounds: {
+    default: 'resetviewport'
+  }
+};
+export const InputFillInverted = Template.bind({});
+InputFillInverted.args = {
+  type: 'text',
+  label: 'input description (label) inverted',
+  value: 'your text (value) inverted',
+  inverted: true
+};
+InputFillInverted.parameters = {
+  backgrounds: {
+    default: 'grey'
+  }
+};
+export const InputEmpty = Template.bind({});
+InputEmpty.args = {};
+InputEmpty.parameters = {
+  backgrounds: {
+    default: 'resetviewport'
+  }
+};
+
+//doublecheck:
+
+// state?
+// make error true version?
+// why can I not fill in the input in storybook on page? not important?

package/dist/Input/Input.styles.js

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components/macro';
+import theme from 'styles/theme';
+export const Wrapper = styled.div`
+  position: relative;
+  display: block;
+
+  input:-webkit-autofill {
+    border: none;
+    border-bottom: 1px solid #f0f0f0;
+    box-shadow: 0 0 0px 1000px #fff inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  ${props => props.inverted && css`
+      ${Label} {
+        color: ${theme.cWhite};
+        opacity: 0.4;
+      }
+      ${InputWrap} {
+        & > input {
+          color: ${theme.cWhite};
+          border-bottom-color: ${theme.cWhite};
+
+          &:focus,
+          &:hover {
+            border-bottom-color: rgba(255, 255, 255, 0.4);
+          }
+        }
+      }
+    `}
+`;
+export const Label = styled.label`
+  z-index: 11;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: -2px;
+  height: 12px;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${props => theme.cBlack};
+  pointer-events: none;
+  transform: translateY(15px);
+  transition: transform .2s, font-size .2s;
+
+  ${props => props.isUp && `
+    font-size: 10px;
+    transform: translateY(0);
+  `}
+
+  ${props => props.active && `
+    color: ${theme.cPrimary};
+  `}
+
+  ${props => props.error && `
+    color: ${theme.cWarning};
+  `}
+`;
+export const InputWrap = styled.div`
+  position: relative;
+
+  & > input {
+    z-index: 0;
+    font-family: 'Open sans';
+    display: block;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 15px 0;
+    padding-bottom: 5px;
+    box-shadow: none;
+    border: 0;
+    outline: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid ${props => theme.cGrey};
+    color: ${props => theme.cBlack};
+    background-color: transparent;
+    transition: border-color 0.2s;
+
+    &:focus,
+    &:hover {
+      border-top-color: transparent;
+      border-bottom-color: ${props => theme.cPrimary};
+    }
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+
+  ${props => props.disabled && css`
+      & > input {
+        color: ${props => theme.cGrey2};
+        &:focus,
+        &:hover {
+          border-top-color: transparent;
+          border-bottom-color: ${props => theme.cGrey};
+        }
+      }
+    `}
+
+  ${props => props.dashboard && css`
+      & > input {
+        border: 0;
+        padding: 0;
+        height: 22px;
+        font-family: 'Open Sans';
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 22px;
+        letter-spacing: 0.53px;
+        text-transform: normal;
+        color: ${theme.cBlack};
+
+        &::placeholder {
+          color: ${theme.cGrey2};
+          opacity: 1;
+        }
+      }
+    `}
+`;