@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/components/GenericUIBlocks/Dialog/styles.scss

@@ -0,0 +1,106 @@
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  justify-content: center;
+  align-items: center;
+  position: fixed; /* Stay in place */
+  z-index: 99999; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+  /* Modal Content */
+  .modal-content {
+    position: relative;
+    background-color: var(--dialogModalBgColor);
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+    border-radius: 11px;
+    .modal-header {
+      position: relative;
+      height: 100%;
+      min-height: 20px;
+      color: var(--dialogModalTextColor);
+      /* The Close Button */
+      .close {
+        color: var(--dialogModalTextColor);
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        position: absolute;
+        right: 10px;
+        top: 0;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: var(--dialogModalTextColor);
+        text-decoration: none;
+        cursor: pointer;
+      }
+    }
+
+    .modal-body {
+      padding: 2px 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: var(--dialogModalTextColor);
+      .modal-icon{
+        svg{
+          width: 100%;
+          max-width: 60px;
+          height: 100%;
+          min-height: 70px;
+          fill: var(--dialogModalSVGColor);
+        }
+      }
+    }
+
+    .modal-footer {
+      padding: 2px 16px;
+      color: var(--dialogModalTextColor);
+      position: absolute;
+      bottom: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+    }
+  }
+
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0;
+    }
+    to {
+      top: 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0;
+    }
+    to {
+      top: 0;
+      opacity: 1;
+    }
+  }
+}

package/src/components/GenericUIBlocks/Divider/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+// styles
+import './styles.scss'
+
+const Divider: React.FC = () => {
+  return (
+    <hr className='basic-divider' />
+  )
+}
+
+export default Divider

package/src/components/GenericUIBlocks/Divider/styles.scss

@@ -0,0 +1,7 @@
+.basic-divider{
+    width: 100%;
+   border: none;
+   border-top: 0.5px solid #0000004D;
+   max-width: 1600px;
+   margin: 3px auto;
+}

package/src/components/GenericUIBlocks/GeneralSelect/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+// react select
+import Select, {StylesConfig} from 'react-select';
+
+// components
+import Typography from '../Typography';
+
+// styles
+import './styles.scss';
+
+interface Option {
+  id?: number | string;
+  value: string;
+  label: string;
+}
+
+interface GeneralSelectProps {
+  options: Option[];
+  placeholder?: string;
+  error?: string;
+  label?: string;
+  selectedValue: Option | null;
+  isError: boolean;
+  setSelectedValue: (option: Option | null) => void;
+}
+
+const colourStyles: StylesConfig<Option, false> = {
+  dropdownIndicator: (styles, {isFocused, selectProps}) => ({
+    ...styles,
+    color: isFocused && selectProps.menuIsOpen ? 'var(--primaryColor)' : 'grey',
+    transform:
+      !isFocused && !selectProps.menuIsOpen ? 'rotate(180deg)' : undefined,
+  }),
+  option: (styles, {isDisabled, isFocused, isSelected}) => {
+    return {
+      ...styles,
+      backgroundColor: isDisabled
+        ? undefined
+        : isSelected && isFocused
+          ? 'var(--selectOptionSelectedBg)'
+          : isFocused && !isSelected
+            ? 'var(--selectOptionFocusedColor)'
+            : undefined,
+    };
+  },
+};
+
+const errorStyles = {
+  color: '#FF0000',
+  fontWeight: '400'
+};
+
+const GeneralSelect: React.FC<GeneralSelectProps> = ({
+  options,
+  placeholder,
+  error,
+  label,
+  isError,
+  selectedValue,
+  setSelectedValue,
+}) => {
+  return (
+    <div className="select-layout">
+      <label>{label && label}</label>
+      <Select
+        value={selectedValue}
+        options={options}
+        onChange={setSelectedValue}
+        styles={colourStyles}
+        className="generic-select-container"
+        classNamePrefix="generic-select"
+        placeholder={placeholder}
+        blurInputOnSelect
+      />
+      {isError && (
+        <Typography variant="p" style={errorStyles}>
+          <sup>*</sup>
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default GeneralSelect;

package/src/components/GenericUIBlocks/GeneralSelect/styles.scss

@@ -0,0 +1,77 @@
+.select-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 8px;
+
+  label {
+    color: var(--selectTextColor);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin-bottom: 5px;
+  }
+
+  .generic-select-container {
+    width: 100%;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 21px;
+    .generic-select__control {
+      height: 100%;
+      min-height: 55px;
+      background-color: var(--selectBgColor);
+      border: 0.5px solid var(--selectBorderColor);
+      border-radius: 7px;
+      padding-left: 10px;
+      .generic-select__value-container {
+        .generic-select__single-value {
+          color: var(--selectTextColor);
+        }
+      }
+      &:hover {
+        border: 0.5px solid var(--selectBorderColor);
+      }
+      &::placeholder {
+        opacity: 0.5;
+      }
+      &.generic-select__control--is-focused {
+        border: 0.5px solid var(--selectBorderColor);
+        box-shadow: none;
+      }
+      .generic-select__indicators {
+        transition: 0.2s ease-in all;
+        .generic-select__indicator-separator {
+          display: none !important;
+        }
+      }
+    }
+
+    .generic-select__menu {
+      background-color: var(--selectMenuBgColor);
+      .generic-select__menu-list {
+        padding: 0px 5px;
+        .generic-select__option {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 16.94px;
+          text-align: left;
+          color: var(--selectOptionTextColor);
+          padding: auto 10px;
+          border-bottom: 0.5px solid var(--selectOptionBorderColor);
+          cursor: pointer;
+          &:last-child {
+            border: none;
+          }
+          &.generic-select__option--is-focused {
+            background-color: var(--selectOptionFocusedColor);
+            color: var(--selectOptionFocusedTextColor);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/GenericUIBlocks/GeneralTooltip/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+// react-tooltip
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+// styles
+import './styles.scss';
+
+interface GeneralTooltipProps {
+  anchorSelect: string;
+  place: 'top' | 'right' | 'bottom' | 'left';
+  title: string;
+}
+
+const GeneralTooltip: React.FC<GeneralTooltipProps> = ({ anchorSelect, place, title }) => {
+  return (
+    <Tooltip className="basic-tooltip" anchorSelect={anchorSelect} place={place}>
+      {title}
+    </Tooltip>
+  );
+};
+
+export default GeneralTooltip;

package/src/components/GenericUIBlocks/GeneralTooltip/styles.scss

@@ -0,0 +1,9 @@
+.basic-tooltip {
+  width: 90% !important;
+  max-width: fit-content !important;
+  text-align: center !important;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  box-shadow: 0px 0px 12px 0px #989595 !important;
+  opacity: 1 !important;
+}

package/src/components/GenericUIBlocks/GenericSnackbar/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+
+// Toastify
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+//Hooks
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from '../../../redux/store';
+
+// Actions
+import { closeSnackbar } from '../../../redux/actions/snackbarActions';
+
+// Components
+import Typography from '../Typography';
+
+// styles
+import './styles.scss'
+
+const GenericSnackbar:React.FC = () => {
+    const open = useSelector(
+      (state: RootState) => state.snackbarReducers.snackbar.open
+    );
+
+    const heading = useSelector(
+      (state: RootState) => state.snackbarReducers.snackbar.heading
+    );
+    const message = useSelector(
+      (state: RootState) => state.snackbarReducers.snackbar.message
+    );
+
+    const dispatch: AppDispatch = useDispatch();
+
+    const Element = (
+      <div className="toast-content">
+        <Typography>{heading || ''}</Typography>
+        <Typography>{message || ''}</Typography>
+      </div>
+    );
+
+  const notify = () => toast(Element);
+
+  useEffect(() =>{
+    if(open){
+        notify()
+        dispatch(closeSnackbar())
+    }
+  }, [open])
+
+  return <ToastContainer className="toast-container" toastClassName='basic-toast' bodyClassName="toast-body" hideProgressBar autoClose={3000}/>;
+}
+
+export default GenericSnackbar;

package/src/components/GenericUIBlocks/GenericSnackbar/styles.scss

@@ -0,0 +1,34 @@
+.toast-container {
+  width: 100%;
+  max-width: 400px;
+
+  .basic-toast {
+    background-color: #ef7820;
+    button {
+        opacity: 1;
+      svg {
+        height: 20px;
+        width: 20px;
+        fill: #ffffff;
+      }
+    }
+    .toast-body {
+      .toast-content {
+        height: 100%;
+        max-height: 50px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 10px;
+        flex-direction: column;
+        p {
+          color: #ffffff;
+          margin: 0;
+          &:first-child {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/GenericUIBlocks/Grid/index.tsx

@@ -0,0 +1,82 @@
+// src/components/Grid.js
+import React from 'react';
+
+// styled components
+import styled from 'styled-components';
+
+interface GridItemProps {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+}
+
+const breakpoints = {
+  xs: '0px',
+  sm: '600px',
+  md: '960px',
+  lg: '1280px',
+  xl: '1920px',
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+
+const Col = styled.div<GridItemProps>`
+  padding: 0 8px;
+  box-sizing: border-box;
+  ${(props) =>
+    props.xs &&
+    `flex: 0 0 ${(props.xs / 12) * 100}%; 
+    max-width: ${
+      (props.xs / 12) * 100
+    }%;`}
+  @media (min-width: ${breakpoints.sm}) {
+    ${(props) =>
+      props.sm &&
+      `flex: 0 0 ${(props.sm / 12) * 100}%; 
+      max-width: ${
+        (props.sm / 12) * 100
+      }%;`}
+  }
+  @media (min-width: ${breakpoints.md}) {
+    ${(props) =>
+      props.md &&
+      `flex: 0 0 ${(props.md / 12) * 100}%; 
+      max-width: ${
+        (props.md / 12) * 100
+      }%;`}
+  }
+  @media (min-width: ${breakpoints.lg}) {
+    ${(props) =>
+      props.lg &&
+      `flex: 0 0 ${(props.lg / 12) * 100}%; 
+      max-width: ${
+        (props.lg / 12) * 100
+      }%;`}
+  }
+  @media (min-width: ${breakpoints.xl}) {
+    ${(props) =>
+      props.xl &&
+      `flex: 0 0 ${(props.xl / 12) * 100}%; 
+      max-width: ${
+        (props.xl / 12) * 100
+      }%;`}
+  }
+`;
+
+export const GridContainer = ({children, style = {}}: any) => {
+  return <Container style={style}>{children}</Container>;
+};
+
+export const GridItem = ({xs, sm, md, lg, xl, children}: any) => {
+  return (
+    <Col xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+      {children}
+    </Col>
+  );
+};

package/src/components/GenericUIBlocks/Input/index.tsx

@@ -0,0 +1,89 @@
+import React, {ChangeEvent, FC} from 'react';
+
+// components
+import Typography from '../Typography';
+
+// icon
+import Search from '../../../assets/images/input/search';
+import Cancel from '../../../assets/images/input/cancel';
+
+// styles
+import './styles.scss';
+
+const errorStyles = {
+  color: '#FF0000',
+  fontWeight: "400"
+};
+
+interface InputProps {
+  variant?: keyof JSX.IntrinsicElements;
+  type: any;
+  value: string;
+  onChange: (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | any>
+  ) => void;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  inputIcon?: boolean;
+  searchApplied?: boolean;
+  onClick?: () => void;
+  removeSearchInput?: () => void;
+  onKeyDown?: () => void;
+}
+
+const Input: FC<InputProps> = ({
+  variant = 'input',
+  type,
+  value,
+  onChange,
+  placeholder,
+  label,
+  error,
+  inputIcon = false,
+  onClick,
+  searchApplied,
+  removeSearchInput,
+  onKeyDown,
+}) => {
+  const InputVariant = variant || 'input';
+
+  return (
+    <div className="input-layout">
+      <label className="basic-label">{label ? label : ''}</label>
+      <div className={`input-with-icon ${searchApplied && 'focused'}`}>
+        <InputVariant
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className="basic-input"
+          onKeyDown={onKeyDown}
+        />
+        {inputIcon && (
+          <>
+            {searchApplied && value.length > 0 ? (
+              <div className="cancel-input-button" onClick={removeSearchInput}>
+                <Cancel fill="var(--inputSearchIcon)" />
+              </div>
+            ) : null}
+            <div
+              className="search-input-button"
+              onClick={value.length > 0 ? onClick : () => {}}
+            >
+              <Search fill="#ED5C2F" />
+            </div>
+          </>
+        )}
+      </div>
+      {error && (
+        <Typography variant="p" style={errorStyles}>
+          <sup>*</sup>
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default Input;

package/src/components/GenericUIBlocks/Input/styles.scss

@@ -0,0 +1,80 @@
+.input-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 10px;
+
+  .basic-label {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .input-with-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0.5px solid var(--inputBorderColor);
+    border-radius: 7px;
+    height: 100%;
+    min-height: 55px;
+    width: 100%;
+    background-color: var(--inputBgColor);
+    
+    .basic-input {
+      width: 100%;
+      padding: 5px 20px;
+      background: transparent;
+      font-size: 14px;
+      font-family: 'Inter', sans-serif !important;
+      font-weight: 500;
+      line-height: 24px;
+      color: var(--inputTextColor);
+      border: none;
+      border-radius: 7px;
+      &:focus {
+        outline: none;
+      }
+      &::placeholder {
+        opacity: 50%;
+        color: var(--inputTextColor);
+      }
+    }
+
+    .search-input-button {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &::before {
+        content: '';
+        position: absolute;
+        background-color: #303030;
+        height: 100%;
+        width: 1px;
+        top: 0;
+        right: 40px;
+      }
+      svg {
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+
+    .cancel-input-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      svg {
+          width: 15px !important;
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .focused {
+    background-color: var(--inputSearchAppliedBg);
+  }
+}