@openlettermarketing/olc-react-sdk 0.0.18 → 0.0.20

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

@@ -1,106 +0,0 @@
-/* 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

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

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

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

@@ -1,77 +0,0 @@
-.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: 16px;
-    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

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

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

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

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

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

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

@@ -1,80 +0,0 @@
-.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);
-  }
-}

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

@@ -1,18 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-
-// styles
-import './styles.scss';
-
-interface TypographyProps {
-  children?: ReactNode;
-  style?: CSSProperties;
-  variant?: keyof JSX.IntrinsicElements;
-  className?: string;
-}
-
-const Typography: React.FC<TypographyProps> = ({ children = '', style = {}, variant = 'p', className = '' }) => {
-  const Tag = variant || 'p';
-  return <Tag className={className} style={style}>{children}</Tag>;
-};
-
-export default Typography;