@stokr/components-library 0.5.4 → 0.5.6

package/dist/MatomoConnect/Matomo_fuckup.js

@@ -0,0 +1,185 @@
+import axiosMatomo from '../../model/axios-matomo';
+class Matomo {
+  // MATOMO_API_URL = 'https://crafton.matomo.cloud'
+  // MATOMO_API_URL = 'https://stokr-analytics.matomo.cloud';
+  MATOMO_API_URL = process.env.NODE_ENV === 'production' ? '/matomoapi' : 'http://stokr.matomo.cloud';
+  MATOMO_SITE_ID = 2;
+  // MATOMO_AUTH_TOKEN = '8061ac4647615be41dcfa087cfdc157b'
+  // MATOMO_AUTH_TOKEN = 'b3746314f2556a3ea5110113d310c11f';
+  MATOMO_AUTH_TOKEN = 'c3989ca407e65354764eb16bfc0def79';
+  MATOMO_DEFAULT_PARAMS = {
+    module: 'API',
+    format: 'json',
+    token_auth: this.MATOMO_AUTH_TOKEN,
+    idSite: this.MATOMO_SITE_ID
+  };
+
+  /**
+   * Get real time counters
+   * @param lastMinutes
+   */
+  async LiveGetCounters(lastMinutes, column) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'Live.getCounters',
+          lastMinutes: lastMinutes,
+          showColumns: column
+        }
+      }).then(response => {
+        resolve(parseInt(response.data[0][column]));
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get visits summary for date range
+   * @param range
+   */
+  async GetVisitsSummary(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'VisitsSummary.get',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary per country
+   * @param range
+   */
+  async GetCountrySummary(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'UserCountry.getCountry',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for social networks
+   * @param range
+   */
+  async GetSocialSummary(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'Referrers.getSocials',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for os families
+   * @param range
+   */
+  async GetDeviceOsFamilies(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getOsFamilies',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for browsers
+   * @param range
+   */
+  async GetDeviceBrowsers(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getBrowsers',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get summary for browsers
+   * @param range
+   */
+  async GetDeviceModels(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'DevicesDetection.getModel',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+
+  /**
+   * Get visit times per local time
+   * @param range
+   */
+  async GetVisitTimePerLocalTime(period, date) {
+    const response = await new Promise(resolve => {
+      axiosMatomo.get(this.MATOMO_API_URL, {
+        params: {
+          ...this.MATOMO_DEFAULT_PARAMS,
+          method: 'VisitTime.getVisitInformationPerLocalTime ',
+          period: period,
+          date: date
+        }
+      }).then(response => {
+        resolve(response.data);
+      });
+    });
+    axios.defaults.headers.common.Authorization = `Bearer ${Auth.getAccessToken()}`;
+    return await response;
+  }
+}
+export default Matomo;

package/dist/MenuNav/MenuNav.styles.js

@@ -0,0 +1,88 @@
+import styled from 'styled-components/macro';
+import theme from 'styles/theme';
+export const MenuNav = styled.nav`
+  display: inline-block;
+  vertical-align: middle;
+
+  ul {
+    display: block;
+    list-style: none;
+    font-size: 0;
+    padding: 0;
+    margin: 0;
+    margin: 0 -18px;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0;
+    margin: 0 18px;
+  }
+
+  button,
+  a {
+    position: relative;
+    display: block;
+    font-size: 11px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 2px 0;
+    border: 0;
+    margin: 0;
+    cursor: pointer;
+    font-weight: 500;
+
+    &:hover {
+      opacity: 0.68;
+    }
+  }
+
+  ${props => props.mobile && `
+    display: block;
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      display: block;
+      text-align: center;
+      margin: 0;
+      padding: 18px 16px;
+    }
+
+    a {
+      display: inline-block;
+    }
+  `}
+`;
+export default MenuNav;
+
+// Merging using IIS & ID Version - from button section (fake style prop to show difference):
+//  ${props =>
+//    props.styleIISandID
+//      ? `   &:hover {
+//     opacity: 0.68;
+//   }`
+//      : `&:before {
+//    content: '';
+//    display: block;
+//    height: 2px;
+//    width: 100%;
+//    position: absolute;
+//    top: 100%;
+//    left: 0;
+//    background-color: ${props => theme.cPrimary};
+//    opacity: 0;
+//    transform: translateY(8px);
+//    transition: opacity 0.2s, transform 0.2s;
+//  }
+
+//  &:hover {
+//    &:before {
+//      opacity: 1;
+//      transform: translateY(0);
+//    }
+//  }`}

package/dist/Modal/Modal.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Transition } from 'react-transition-group';
+import { Portal } from 'react-portal';
+import { ModalRoot, Dimmer, Box, ModalInner, ModalClose, ModalBack, ModalLinkWrap, ModalLink, ModalInnerWithBorder, ModalInnerSmartContractAddress } from './Modal.styles';
+const timeout = 300;
+const getTransitionStyles = {
+  entering: {
+    opacity: 0
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0
+  }
+};
+const Modal = ({
+  children,
+  fullscreen,
+  kyc,
+  thin,
+  isOpen,
+  onClose,
+  className,
+  isRegisterEntity
+}) => /*#__PURE__*/React.createElement(Portal, {
+  isOpened: isOpen
+}, /*#__PURE__*/React.createElement(Transition, {
+  in: isOpen,
+  appear: true,
+  mountOnEnter: true,
+  unmountOnExit: true,
+  timeout: {
+    enter: timeout,
+    exit: timeout
+  }
+}, status => /*#__PURE__*/React.createElement(ModalRoot, {
+  className: className,
+  style: getTransitionStyles[status]
+}, /*#__PURE__*/React.createElement(Dimmer, {
+  open: isOpen,
+  kyc: kyc,
+  closeOnDimmerClick: false,
+  onClose: onClose
+}, /*#__PURE__*/React.createElement(Box, {
+  kyc: kyc,
+  fullscreen: fullscreen,
+  thin: thin,
+  isRegisterEntity: isRegisterEntity
+}, /*#__PURE__*/React.createElement(ModalClose, {
+  onClick: onClose
+}), children)))));
+Modal.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  className: PropTypes.string,
+  fullscreen: PropTypes.bool,
+  kyc: PropTypes.bool,
+  thin: PropTypes.bool,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+Modal.defaultProps = {
+  className: '',
+  fullscreen: false,
+  kyc: false,
+  thin: false
+};
+export { Modal, ModalInner, ModalBack, ModalClose, ModalLinkWrap, ModalLink, ModalInnerWithBorder, ModalInnerSmartContractAddress };

package/dist/Modal/Modal.stories.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Modal } from './Modal';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { TwoSvg } from 'components/SvgIcons';
+export default {
+  title: 'Components Library/Modal',
+  component: Modal,
+  argTypes: {
+    children: {
+      type: 'node / array of node',
+      required: true
+    },
+    className: {
+      type: 'string',
+      defaultValue: ''
+    },
+    fullscreen: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    kyc: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    thin: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    isOpen: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onClose: {
+      type: 'function',
+      action: 'onClose'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Modal, args));
+export const ModalOpen = Template.bind({});
+ModalOpen.args = {
+  children: 'I am the Child Element',
+  isOpen: true
+};
+export const ModalFullscreen = Template.bind({});
+ModalFullscreen.args = {
+  children: 'I am the Child Element and I am Fullscreen',
+  isOpen: true,
+  fullscreen: true
+};
+export const ModalWithImg = Template.bind({});
+ModalWithImg.args = {
+  children: /*#__PURE__*/React.createElement(TwoSvg, null),
+  isOpen: true
+};
+export const ModalWithImgThin = Template.bind({});
+ModalWithImgThin.args = {
+  children: /*#__PURE__*/React.createElement(TwoSvg, null),
+  isOpen: true,
+  thin: true
+};
+export const ModalWithImgKYC = Template.bind({});
+ModalWithImgKYC.args = {
+  children: /*#__PURE__*/React.createElement(TwoSvg, null),
+  isOpen: true,
+  kyc: true
+};