@openlettermarketing/olc-react-sdk 0.0.18 → 0.0.20

package/src/components/CreateTemplate/styles.scss

@@ -1,363 +0,0 @@
-@mixin errorField() {
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--red);
-  line-height: 16.94px;
-}
-
-.createTemplateMaindiv {
-  .createTemplateMainBox {
-    position: relative;
-    height: 100%;
-
-    .tempTypeRadioWrapper {
-      padding: 20px 0px 30px 0px;
-      border-left: none;
-      border-right: none;
-      margin-left: 40px;
-
-      .tempTypeRadioHeading {
-        p {
-          color: var(--textColor);
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: normal;
-        }
-      }
-
-      .tempTypeRadioBox {
-        margin-top: 20px;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        gap: 25px;
-
-        .tempRadio {
-          input {
-            &:checked {
-              accent-color: var(--primaryColor);
-            }
-
-            &:focus {
-              outline: none !important;
-            }
-
-            cursor: pointer;
-          }
-
-          label {
-            cursor: pointer;
-            color: var(--textColor);
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 500;
-            line-height: normal;
-          }
-        }
-      }
-
-      & .error-field {
-        @include errorField;
-        margin-left: 5px;
-      }
-    }
-  }
-  .createTemplateHeader {
-    padding-bottom: 15px;
-    margin-left: 40px;
-    
-    p {
-      color: var(--primaryColor);
-      font-size: 24px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: normal;
-      margin-bottom: 20px;
-    }
-
-    .templateInputWrapper {
-      p {
-        color: var(--textColor);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        margin-bottom: 16px;
-      }
-
-      & .error-field {
-        @include errorField;
-        margin-top: 10px !important;
-      }
-    }
-  }
-
-    .templateSelectWrapper {
-      padding-bottom: 15px;
-      margin: 20px 0px 0px 40px;
-      p {
-        color: var(--textColor);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        margin-bottom: 16px;
-      }
-
-      & .error-field {
-        @include errorField;
-        margin-top: 10px !important;
-        font-weight: 400;
-      }
-    }
-  
-
-  .productTypeWrapper {
-    padding: 20px 0px;
-    margin-left: 40px;
-
-    .productHeading {
-      p {
-        &:first-child {
-          color: var(--textColor);
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: normal;
-        }
-
-        &:last-child {
-          color: var(--primaryColor);
-          font-size: 10px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 18px;
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    .productsWrapper {
-      margin-top: 20px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      gap: 25px;
-
-      .productCard {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        border-radius: 6.299px;
-        border: 0.45px solid var(--borderColor);
-        background: var(--productCardBgColor);
-        width: 100%;
-        max-width: 185px;
-        height: 100%;
-        min-height: 135px;
-        cursor: pointer;
-        transition: 0.1s ease-in all;
-        gap: 17px;
-
-        &.active,
-        &:hover {
-          background: var(--productCardBackgroundColorActive);
-          border-color: var(--primaryColor);
-        }
-
-        p {
-          color: var(--primaryColor);
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-          margin: 0;
-        }
-
-        &:last-child {
-          img {
-            margin-bottom: 5px !important;
-          }
-        }
-
-        &.error {
-          border: 0.45px solid var(--red);
-        }
-      }
-    }
-
-    & .error-field {
-      margin-top: 10px;
-      @include errorField;
-    }
-  }
-
-  .postCardSizeWrapper {
-    padding: 20px 0px;
-    margin: 0px 0px 80px 40px;
-
-    .postCardHeading {
-      p {
-        color: var(--textColor);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-      }
-    }
-
-    .postCardWrapper {
-      margin-top: 20px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      gap: 25px;
-
-      .postCard {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 20px;
-        flex-direction: column;
-        border-radius: 6.299px;
-        border: 0.45px solid var(--borderColor);
-        background: var(--postCardBgColor);
-        cursor: pointer;
-        padding: 13px 20px;
-        transition: 0.1s ease-in all;
-
-        svg {
-          &:nth-child(2) {
-            margin-bottom: 20px;
-          }
-
-          &:last-child {
-            margin-bottom: 20px;
-          }
-        }
-
-        svg {
-          path {
-            fill: var(--postCardSVGColor);
-          }
-        }
-
-        &.active,
-        &:hover {
-          background: var(--postCardBackgroundColorActive);
-          border-color: var(--primaryColor);
-
-          svg {
-            &:nth-child(2) {
-              margin-bottom: 20px;
-            }
-
-            &:last-child {
-              margin-bottom: 20px;
-            }
-
-            path {
-              fill: var(--svgColor);
-
-              &:hover {
-                fill: var(--svgColor);
-              }
-            }
-          }
-        }
-
-        p {
-          color: var(--primaryColor);
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-          margin: 0;
-        }
-      }
-
-      .postCard-small {
-        width: 100%;
-        max-width: 150px;
-        height: 100%;
-        min-height: 148px;
-      }
-
-      .postCard-mid {
-        width: 100%;
-        max-width: 196px;
-        height: 100%;
-        min-height: 182px;
-      }
-
-      .postCard-large {
-        width: 100%;
-        max-width: 248px;
-        height: 100%;
-        min-height: 226px;
-      }
-    }
-
-    & .error-field {
-      margin-top: 10px;
-      @include errorField;
-    }
-  }
-
-  .footerBtns {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-    border-top: 0.5px solid var(--borderColor);
-    background-color: var(--footerBgColor);
-
-    .createTemplateBtns {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 20px;
-      padding: 14px 95px 14px 35px;
-
-      button {
-        width: 100%;
-        max-width: 100px;
-        height: 100%;
-        min-height: 40px;
-        text-transform: capitalize;
-        border-radius: 3px;
-
-        &:first-child {
-          color: var(--secondaryButtonTextColor);
-          text-align: center;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-          border: 0.5px solid var(--borderColor);
-          background-color: var(--secondaryButtonBgColor);
-        }
-
-        &:last-child {
-          color: var(--primaryButtonTextColor);
-          text-align: center;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: normal;
-          background-color: var(--primaryButtonBgColor);
-        }
-      }
-    }
-  }
-}
-
-.mb-5 {
-  margin-bottom: 6rem !important;
-}
-
-.error {
-  border: 1.5px solid var(--red);
-}

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

@@ -1,21 +0,0 @@
-import React, { CSSProperties, ReactNode, MouseEventHandler } from 'react';
-
-// styles
-import './styles.scss';
-
-interface ButtonProps {
-  children?: ReactNode;
-  style?: CSSProperties;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  className?: string;
-}
-
-const Button: React.FC<ButtonProps> = ({ children = '', style = {}, onClick, className = '' }) => {
-  return (
-    <div className={`basic-button ${className}`} onClick={onClick} style={style}>
-      {children}
-    </div>
-  );
-};
-
-export default Button;

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

@@ -1,15 +0,0 @@
-.basic-button {
-  background-color: var(--primaryColor);
-  color: white;
-  width: 100%;
-  max-width: fit-content;
-  padding: 0px 10px;
-  font-size: 16px;
-  cursor: pointer;
-  height: 100%;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-}

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

@@ -1,18 +0,0 @@
-import React, { useState, useEffect, CSSProperties } from 'react';
-
-// styles
-import './styles.scss';
-
-interface CircularProgressProps {
-  style?: CSSProperties;
-}
-
-const CircularProgress: React.FC<CircularProgressProps> = ({ style = {} }) => {
-  return (
-    <div className={'basic-progress'}>
-      <div className="loader" style={style} />
-    </div>
-  );
-}
-
-export default CircularProgress;

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

@@ -1,98 +0,0 @@
-.basic-progress {
-  .loader {
-    width: 50px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
-  }
-  @keyframes l20-1 {
-    0% {
-      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-    }
-    12.5% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%
-      );
-    }
-    25% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        100% 100%,
-        100% 100%
-      );
-    }
-    50% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    62.5% {
-      clip-path: polygon(
-        50% 50%,
-        100% 0,
-        100% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    75% {
-      clip-path: polygon(
-        50% 50%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    100% {
-      clip-path: polygon(
-        50% 50%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-  }
-  @keyframes l20-2 {
-    0% {
-      transform: scaleY(1) rotate(0deg);
-    }
-    49.99% {
-      transform: scaleY(1) rotate(135deg);
-    }
-    50% {
-      transform: scaleY(-1) rotate(0deg);
-    }
-    100% {
-      transform: scaleY(-1) rotate(-135deg);
-    }
-  }
-  .hide-loader {
-    .loader {
-      display: none !important; /* Hide the pseudo-element */
-    }
-  }
-}

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

@@ -1,127 +0,0 @@
-import React, { ReactNode, CSSProperties } from 'react';
-
-// components
-import Button from '../Button';
-import Typography from '../Typography';
-import CircularProgress from '../CircularProgress';
-
-// styles
-import './styles.scss';
-
-interface DialogProps {
-  icon?: ReactNode;
-  customStyles?: CSSProperties;
-  open: boolean;
-  handleClose: () => void;
-  loading?: boolean;
-  title?: string;
-  subHeading?: string;
-  description?: string;
-  onSubmit?: () => void;
-  onCancel?: () => void;
-  cancelText?: string;
-  submitText?: string;
-  children?: ReactNode;
-}
-
-const buttonStyles: CSSProperties = {
-  color: 'var(--primaryButtonTextColor)',
-  backgroundColor: 'var(--primaryButtonBgColor)',
-  maxWidth: '100px',
-  minHeight: '40px',
-  border: '0.5px solid var(--borderColor)',
-  fontSize: '14px',
-};
-
-const heading: CSSProperties = {
-  fontSize: '22px',
-  color: 'var(--dialogModalHeadingColor)',
-  fontWeight: '700',
-};
-
-const subHeadingStyle: CSSProperties = {
-  fontSize: '16px',
-  color: 'var(--dialogModalTextColor',
-  fontWeight: '700',
-  textAlign: 'center',
-};
-
-const progressStyles: CSSProperties = {
-  width: '20px',
-  height: '20px',
-  border: '2px solid #fff',
-};
-
-const Dialog: React.FC<DialogProps> = ({
-  icon = null,
-  customStyles = {},
-  open,
-  handleClose,
-  loading = false,
-  title = "",
-  subHeading = "",
-  description = "",
-  onSubmit,
-  onCancel,
-  cancelText = "",
-  submitText = "",
-  children = [],
-}) => {
-  const contentAdjust = submitText.length > 6 ? "fit-content" : "100px";
-
-  return (
-    <div
-      id="myModal"
-      className="modal"
-      style={{display: open ? 'flex' : 'none'}}
-    >
-      <div className="modal-content" style={customStyles}>
-        <div className="modal-header">
-          <span className="close" onClick={handleClose}>
-            &times;
-          </span>
-        </div>
-        <div className="modal-body">
-          <div className="modal-icon">{icon}</div>
-          <Typography variant="p" style={heading}>
-            {title}
-          </Typography>
-          {subHeading && (
-            <Typography variant="p" style={subHeadingStyle}>
-              {subHeading}
-            </Typography>
-          )}
-          {description && (
-            <Typography
-              variant="p"
-              style={{...subHeadingStyle, fontWeight: '400'}}
-            >
-              {description}
-            </Typography>
-          )}
-          {children}
-        </div>
-        <div className="modal-footer">
-          <Button
-            onClick={onCancel}
-            style={{
-              ...buttonStyles,
-              color: 'var(--secondaryButtonTextColor)',
-              backgroundColor: 'var(--secondaryButtonBgColor)',
-            }}
-          >
-            {cancelText}
-          </Button>
-          <Button
-            style={{...buttonStyles, border: 'none', maxWidth: contentAdjust}}
-            onClick={onSubmit}
-          >
-            {loading ? <CircularProgress style={progressStyles} /> : submitText}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Dialog;