@stokr/components-library 0.5.4 → 0.5.6

package/dist/LearnMoreSection/LearnMoreItem.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { LearnMoreItem } from './LearnMoreItem';
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+
+export default {
+  title: 'Components Library/LearnMoreSection/LearnMoreItem',
+  component: LearnMoreItem,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    content: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    link: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    coverSrc: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    postType: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    onClick: {
+      type: 'function',
+      action: 'onClick navigate to link'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(LearnMoreItem, args);
+export const LearnMoreItemVideo = Template.bind({});
+LearnMoreItemVideo.args = {
+  title: 'A Title',
+  content: 'Some Content',
+  link: 'www.link.com',
+  coverSrc: 'https://www.videoconverterfactory.com/glossary/imgs/video.jpg',
+  postType: 'video'
+};
+
+// doublecheck:
+// add video to coverSrc
+//ad version with text to coverSrc

package/dist/LearnMoreSection/LearnMoreItem.styles.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components/macro';
+import { Link } from '@reach/router';
+import { Container as BackgroundContainer, Content as BackgroundContent } from 'components/Background/Background.styles';
+export const Container = styled.div`
+  height: 100%;
+`;
+export const Cover = styled.div`
+  width: 100%;
+
+  ${BackgroundContainer} {
+    width: 100%;
+    padding-top: 56.25%;
+  }
+
+  ${BackgroundContent} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: auto;
+    transform: translateY(-50%) translateX(-50%);
+  }
+`;
+export const Play = styled(Link)`
+  width: 48px;
+  height: 48px;
+  color: ${props => props.theme.cWhite};
+  background: ${props => props.theme.cWarning};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.3s background;
+
+  &:hover {
+    color: ${props => props.theme.cWhite};
+    background: ${props => props.theme.cWarningDark};
+  }
+`;
+export const PlayIcon = styled.i.attrs({
+  className: 'ion ion-md-play'
+})`
+  font-size: 16px;
+`;
+export const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+`;
+export const Content = styled.div`
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: 0.6px;
+  min-height: 100px;
+`;

package/dist/LoginModal/LoginModal.js

@@ -0,0 +1,125 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Modal, ModalInner, ModalLinkWrap, ModalLink } from 'components/Modal/Modal';
+import Form, { FormField, FormInfo, FormError } from 'components/Form/Form';
+import Text from 'components/Text/Text.styles';
+import Input from 'components/Input/Input';
+import InputPassword from 'components/Input/InputPassword';
+import Button from 'components/Button/Button.styles';
+import TextLink from 'components/TextLink/TextLink.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+export class LoginModal extends PureComponent {
+  initialValues = {
+    email: '',
+    password: ''
+  };
+  validationSchema = Yup.object().shape({
+    email: Yup.string().email('Email is not valid').required('Email is required'),
+    password: Yup.string().required('Password is required')
+  });
+  render() {
+    const {
+      isModalOpen,
+      onModalClose,
+      onFormSend,
+      onModalSwitch,
+      onForgotPassword
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: isModalOpen,
+      onClose: onModalClose
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ModalInner, {
+      modalTop: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Log in"), /*#__PURE__*/React.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/React.createElement(ModalInner, {
+      modalBot: true
+    }, /*#__PURE__*/React.createElement(ModalLinkWrap, null, "Don't have an account yet? ", /*#__PURE__*/React.createElement(ModalLink, {
+      as: "button",
+      onClick: onModalSwitch
+    }, "Sign up")))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ModalInner, null, /*#__PURE__*/React.createElement(Formik, {
+      initialValues: this.initialValues,
+      validationSchema: this.validationSchema,
+      onSubmit: onFormSend
+    }, ({
+      values,
+      errors,
+      touched,
+      handleChange,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched
+    }) => {
+      const onChangeWithTouch = e => {
+        const field = e.target;
+        setFieldValue(field.name, field.value, false);
+        setFieldTouched(field.name);
+      };
+      const submitDisabled = !touched.email || !touched.password || !!errors.email || !!errors.password;
+      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPadding: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+        id: "sign-up-email",
+        name: "email",
+        type: "email",
+        label: "Your email",
+        value: values.email,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        error: !!errors.email,
+        touched: !!touched.email
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.email && touched.email
+      }, errors.email))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(InputPassword, {
+        id: "sign-up-password",
+        name: "password",
+        type: "password",
+        label: "Password",
+        value: values.password,
+        onChange: onChangeWithTouch,
+        onBlur: handleBlur,
+        error: !!errors.password,
+        touched: !!touched.password
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.password && touched.password
+      }, errors.password))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "submit",
+        fluid: true,
+        disabled: submitDisabled
+      }, "Login")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(TextLink, {
+        as: "button",
+        onClick: onForgotPassword
+      }, "Forgot password?")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormInfo, {
+        center: true
+      }, 'By signing up for STOKR, you agree to our ', /*#__PURE__*/React.createElement(Link, {
+        to: "#"
+      }, "Terms of Service."))));
+    })))));
+  }
+}
+LoginModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired,
+  onForgotPassword: PropTypes.func.isRequired
+};
+export default LoginModal;

package/dist/MainMenu/DynamicMainMenu.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+//import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types';
+import { Collapse } from 'react-collapse';
+import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption } from './MainMenu.styles';
+const DynamicMainMenu = props => {
+  const spanStyleForMenu = {
+    letterSpacing: '2px',
+    cursor: 'pointer'
+  };
+  const {
+    options,
+    isMenuActive
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledMainMenu, null, /*#__PURE__*/React.createElement(Collapse, {
+    isOpened: isMenuActive
+  }, /*#__PURE__*/React.createElement(MainMenuContainer, null, /*#__PURE__*/React.createElement(MainMenuOptions, null, options.map(item => {
+    return /*#__PURE__*/React.createElement(MainMenuOption, {
+      key: item.name,
+      as: "button",
+      button: true,
+      onClick: item.onClick,
+      noBorder: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, item.name));
+  })))));
+};
+const optionsShape = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+});
+DynamicMainMenu.propTypes = {
+  isMenuActive: PropTypes.bool.isRequired,
+  options: optionsShape
+};
+DynamicMainMenu.defaultProps = {
+  isMenuActive: false,
+  options: []
+};
+export default DynamicMainMenu;

package/dist/MainMenu/MainMenu.js

@@ -0,0 +1,207 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+// import { navigate } from '@reach/router'
+import { Collapse } from 'react-collapse';
+import { StyledMainMenu, MainMenuContainer, MainMenuOptions, MainMenuOption, UserName, ExpandArrow, Settings, SettingsOptions, SettingsOption, Notifications } from './MainMenu.styles';
+import Button from 'components/Button/Button.styles';
+import { platformDomain } from 'components/Header/Header';
+import { navigate } from '@reach/router';
+class MainMenu extends PureComponent {
+  state = {
+    isSettingsActive: false,
+    isScrollDown: false,
+    lastScroll: 0,
+    overrideHeightNeeded: true
+  };
+  componentDidMount() {
+    window.addEventListener('scroll', this.onScroll, true);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll, true);
+  }
+  toggleSettings = () => {
+    this.setState(prevState => ({
+      isSettingsActive: !prevState.isSettingsActive
+    }));
+  };
+  onScroll = () => {
+    const {
+      lastScroll,
+      isScrollDown,
+      overrideHeightNeeded
+    } = this.state;
+    const {
+      scrollY
+    } = window;
+    const newScrollDown = scrollY > lastScroll;
+    const newState = {
+      lastScroll: scrollY
+    };
+    if (newScrollDown !== isScrollDown) {
+      newState.isScrollDown = newScrollDown;
+    }
+    if (overrideHeightNeeded) {
+      newState.overrideHeightNeeded = false;
+    }
+    this.setState(newState);
+  };
+  setScrollUp = () => {
+    this.setState({
+      isScrollDown: false
+    });
+  };
+  checkActive = url => window.location.href.split('/').indexOf(url) > 0;
+  render() {
+    const {
+      isSettingsActive,
+      isScrollDown,
+      overrideHeightNeeded
+    } = this.state;
+    const {
+      isMenuActive,
+      user,
+      notifications = 0,
+      logoutUser,
+      isAdmin,
+      platformUrlForUserMenu,
+      isVentureDashboard
+    } = this.props;
+    const spanStyleForMenu = {
+      letterSpacing: '1.5px',
+      cursor: 'pointer'
+    };
+    const isUserLogged = !!user._id;
+    return /*#__PURE__*/React.createElement(StyledMainMenu, null, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: isMenuActive && isUserLogged,
+      hasNestedCollapse: true
+    }, /*#__PURE__*/React.createElement(MainMenuContainer, null, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: !isScrollDown,
+      style: overrideHeightNeeded ? {
+        height: 'auto'
+      } : {},
+      hasNestedCollapse: true
+    }, /*#__PURE__*/React.createElement(MainMenuOptions, null, !isVentureDashboard && /*#__PURE__*/React.createElement(MainMenuOption, {
+      nameOption: true,
+      isVenture: isAdmin
+    }, /*#__PURE__*/React.createElement(UserName, {
+      style: spanStyleForMenu,
+      onClick: () => isAdmin ? window.location.href = `https://admin.${platformDomain}` : window.location.href = `${platformUrlForUserMenu}/settings/profile-and-privacy`
+    }, user.username ? user.username : user.email)), isAdmin ? /*#__PURE__*/React.createElement(React.Fragment, null, isVentureDashboard ? /*#__PURE__*/React.createElement(MainMenuOption, {
+      as: "button",
+      button: true,
+      onClick: () => navigate('/settings')
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Settings")) : /*#__PURE__*/React.createElement(MainMenuOption, {
+      isDashboard: true,
+      isVenture: true,
+      as: "button",
+      button: true,
+      onClick: () => window.location.replace(`https://admin.${platformDomain}`)
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Dashboard"))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MainMenuOption, {
+      isDashboard: true,
+      as: "button",
+      button: true,
+      onClick: () => notifications > 0 ? window.location.href = `${platformUrlForUserMenu}/checklist` : window.location.href = `${platformUrlForUserMenu}/`
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Dashboard"), notifications > 0 && /*#__PURE__*/React.createElement(Notifications, null, notifications)), /*#__PURE__*/React.createElement(MainMenuOption, {
+      as: "button",
+      button: true,
+      isOpened: isSettingsActive,
+      onClick: this.toggleSettings,
+      isSettings: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Settings"), /*#__PURE__*/React.createElement(ExpandArrow, {
+      isOpened: isSettingsActive
+    }))), /*#__PURE__*/React.createElement(MainMenuOption, null, /*#__PURE__*/React.createElement(Button, {
+      negative: true,
+      onClick: () => logoutUser()
+    }, "log out"))), !isAdmin && /*#__PURE__*/React.createElement(Settings, null, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: isSettingsActive
+    }, /*#__PURE__*/React.createElement(SettingsOptions, null, /*#__PURE__*/React.createElement(SettingsOption, {
+      isActive: this.checkActive('profile-and-privacy'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/profile-and-privacy`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Profile & Privacy")), /*#__PURE__*/React.createElement(SettingsOption, {
+      isActive: this.checkActive('ethereum-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/ethereum-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Ethereum Addresses")), /*#__PURE__*/React.createElement(SettingsOption, {
+      isActive: this.checkActive('liquid-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/liquid-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Liquid Securities Account")), /*#__PURE__*/React.createElement(SettingsOption, {
+      isActive: this.checkActive('algorand-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/algorand-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Algorand Addresses")))))), !isAdmin && /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: isScrollDown,
+      hasNestedCollapse: true
+    }, /*#__PURE__*/React.createElement(SettingsOptions, null, /*#__PURE__*/React.createElement(SettingsOption, {
+      scrollDown: true,
+      isActive: this.checkActive('profile-and-privacy'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/profile-and-privacy`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Profile & Privacy")), /*#__PURE__*/React.createElement(SettingsOption, {
+      scrollDown: true,
+      isActive: this.checkActive('ethereum-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/ethereum-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Ethereum Addresses")), /*#__PURE__*/React.createElement(SettingsOption, {
+      scrollDown: true,
+      isActive: this.checkActive('liquid-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/liquid-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Liquid Securities Account")), /*#__PURE__*/React.createElement(SettingsOption, {
+      scrollDown: true,
+      isActive: this.checkActive('algorand-address'),
+      onClick: () => {
+        window.location.replace(`${platformUrlForUserMenu}/settings/algorand-address`);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "Algorand Addresses")), /*#__PURE__*/React.createElement(SettingsOption, {
+      scrollDown: true,
+      onClick: () => {
+        this.setScrollUp();
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: spanStyleForMenu
+    }, "More")))))));
+  }
+}
+MainMenu.propTypes = {
+  isMenuActive: PropTypes.bool.isRequired,
+  admin: PropTypes.bool,
+  userName: PropTypes.string
+};
+MainMenu.defaultProps = {
+  admin: false,
+  userName: ''
+};
+export default MainMenu;