@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

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

@@ -1,269 +0,0 @@
-import React, {ChangeEvent, FC, useState} from 'react';
-
-// components
-import Typography from '../Typography';
-import CustomTooltip from '../CustomTooltip';
-import Button from '../Button';
-
-// icon
-import Search from '../../../assets/images/input/search';
-import Cancel from '../../../assets/images/input/cancel';
-import VideoInfo from '../../../assets/images/modal-icons/info';
-import ToolCancel from '../../../assets/images/modal-icons/tool-cancel';
-import CancelInput from '../../../assets/images/modal-icons/cancel-input';
-
-// styles
-import './styles.scss';
-
-const errorStyles = {
-  color: 'var(--error-color)',
-  fontWeight: '400',
-  fontSize: '14px',
-  margin: "0"
-};
-
-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;
-  builderInput?: boolean;
-  gellerySearch?: boolean;
-  videoTooltip?: boolean;
-  handleFileRemove?: () => void;
-  qrField?: boolean;
-  onlyNumber?: boolean;
-  currentTheme?: string | null | undefined;
-  required?: boolean;
-  isClearable?: boolean;
-  className?: string;
-}
-
-const Input: FC<InputProps> = ({
-  variant = 'input',
-  type,
-  value,
-  onChange,
-  placeholder,
-  label,
-  error,
-  inputIcon = false,
-  onClick,
-  searchApplied,
-  removeSearchInput,
-  onKeyDown,
-  builderInput,
-  gellerySearch = false,
-  videoTooltip = false,
-  handleFileRemove,
-  qrField = false,
-  onlyNumber = false,
-  currentTheme = '',
-  required = false,
-  isClearable = false,
-  className = ''
-}) => {
-  const InputVariant = variant || 'input';
-
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
-
-  const loomButtonStyles = {
-    backgroundColor: 'var(--primary-color)',
-    fontSize: '12px',
-    padding: '10px 20px',
-    borderRadius: '4px',
-    maxHeight: '25px',
-  };
-
-  const URLTooltip = (
-    <div className="videoUrlTooltip">
-      <p>
-        You can use Loom to create this video. Create your free Loom account
-        now.
-      </p>
-      <Button
-        style={loomButtonStyles}
-        onClick={(e) => {
-          e.stopPropagation();
-          window.open('https://www.loom.com/','_blank');
-        }}
-      >
-        Open Loom
-      </Button>
-      <ToolCancel onClick={()=>setShowTooltip(false)}/>
-    </div>
-  );
-
-  const handleClose = () => {
-    setShowTooltip(false);
-  };
-
-  return (
-    <>
-    {currentTheme === 'v2' ? (
-      <div className={`input-layout ${currentTheme === 'v2' && 'new-theme-input-layout'} ${className} ${gellerySearch && 'gallery-input-layout'} ${qrField && 'qr-input-layout'}`}>
-      <label className="basic-label" style={{ 
-          marginBottom: label === 'Template Name' ? '4px' : '0',
-        }}>
-        {label ? <>{label} {required && <span className="required-asterisk">*</span>}</> : ''}
-        {videoTooltip && (
-          <>
-            <span className="urlTooltip" 
-            onMouseOver={()=>setShowTooltip(true)}
-            >
-              <VideoInfo />
-            </span>
-            <CustomTooltip
-              children={URLTooltip}
-              open={showTooltip}
-              handleClose={handleClose}
-              place="top"
-              />
-          </>
-        )}
-      </label>
-      <div
-        className={`input-with-icon ${searchApplied && 'focused'} ${error ? 'errorBorder' : ''} ${gellerySearch && 'galleryInput'} ${qrField && 'qrInputDiv'}`}
-        style={{
-          paddingRight: isClearable ? '20px' : '16px'
-        }}
-      >
-        {type === 'file' ? (
-          <input
-            type="file"
-            onChange={(e) => onChange(e)}
-            accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-            multiple
-            className={`basic-input ${builderInput && 'builder-input'}`}
-          />
-        ) : (
-          <InputVariant
-            type={type}
-            value={value}
-            onChange={onChange}
-            placeholder={placeholder}
-            className={`basic-input ${builderInput && 'builder-input'}`}
-            onKeyDown={onlyNumber ? (event) => {
-              if (event.key === 'e' || event.key === 'E' || event.key === '-' || event.key === '+') {
-                event.preventDefault();
-              }
-            } : onKeyDown}
-            style={{
-              fontSize: label === 'Template Name' ? '16px' : 'inherit',
-              color: label === 'Template Name' ? '#000000' : 'inherit',
-            }}
-          />
-        )}
-        {inputIcon && (
-          <>
-            {searchApplied && value?.length > 0 ? (
-              <div className="cancel-input-button" onClick={removeSearchInput}>
-                <Cancel fill="var(--border-color)" />
-              </div>
-            ) : null}
-            <div
-              className="search-input-button"
-              onClick={value?.length > 0 ? onClick : () => {}}
-            >
-              <Search fill="var(--primary-color)" />
-            </div>
-          </>
-        )}
-        {(isClearable && value?.length > 0) && (
-          <div className="clear-search-input" onClick={removeSearchInput}>
-            <CancelInput />
-          </div>
-        )}
-      </div>
-      {error && (
-        <Typography variant="p" style={errorStyles}>
-          <sup>*</sup>
-          {error}
-        </Typography>
-      )}
-      </div>
-      ) : (
-        <div className={`input-layout ${gellerySearch && 'gallery-input-layout'} ${qrField && 'qr-input-layout'}`}>
-        <label className="basic-label">
-          {label ? label : ''}
-          {videoTooltip && (
-            <>
-              <span className="urlTooltip" 
-              onMouseOver={()=>setShowTooltip(true)}
-              >
-                <VideoInfo />
-              </span>
-              <CustomTooltip
-                children={URLTooltip}
-                open={showTooltip}
-                handleClose={handleClose}
-                place="top"
-                />
-            </>
-          )}
-        </label>
-        <div
-          className={`input-with-icon ${searchApplied && 'focused'} ${error ? 'errorBorder' : ''} ${gellerySearch && 'galleryInput'} ${qrField && 'qrInputDiv'}`}
-        >
-          {type === 'file' ? (
-            <input
-              type="file"
-              onChange={(e) => onChange(e)}
-              accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-              multiple
-              className={`basic-input ${builderInput && 'builder-input'}`}
-            />
-          ) : (
-            <InputVariant
-              type={type}
-              value={value}
-              onChange={onChange}
-              placeholder={placeholder}
-              className={`basic-input ${builderInput && 'builder-input'}`}
-              onKeyDown={onlyNumber ? (event) => {
-                if (event.key === 'e' || event.key === 'E' || event.key === '-' || event.key === '+') {
-                  event.preventDefault();
-                }
-              } : onKeyDown}
-            />
-          )}
-          {inputIcon && (
-            <>
-              {searchApplied && value?.length > 0 ? (
-                <div className="cancel-input-button" onClick={removeSearchInput}>
-                  <Cancel fill="var(--border-color)" />
-                </div>
-              ) : null}
-              <div
-                className="search-input-button"
-                onClick={value?.length > 0 ? onClick : () => {}}
-              >
-                <Search fill="var(--primary-color)" />
-              </div>
-            </>
-          )}
-        </div>
-        {error && (
-          <Typography variant="p" style={errorStyles}>
-            <sup>*</sup>
-            {error}
-          </Typography>
-        )}
-        </div>
-      )
-    }
-    </>
-  );
-};
-
-export default Input;

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

@@ -1,332 +0,0 @@
-.input-layout {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  gap: 10px;
-  position: relative;
- 
- 
-  .basic-label {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--text-color);
-  }
-  .urlTooltip {
-    position: absolute;
-    left: 80px;
-    top: 1px;
-    cursor: pointer;
-  }
- 
- 
-  .input-with-icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 0.5px solid var(--border-color);
-    border-radius: 7px;
-    height: 100%;
-    min-height: 55px;
-    width: 100%;
-    background: #fff;
- 
- 
-    .basic-input {
-      width: 100%;
-      padding: 5px 20px;
-      background: transparent;
-      font-size: 14px;
-      font-family: var(--font-family) !important;
-      font-weight: 400;
-      line-height: 24px;
-      color: var(--text-color);
-      border: none;
-      border-radius: 7px;
-      &:focus {
-        outline: none;
-      }
-      &::placeholder {
-        opacity: 50%;
-        color: var(--text-color);
-      }
-    }
-    .builder-input {
-      color: #000;
-      &::placeholder {
-        color: #000;
-      }
-    }
- 
- 
-    .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;
-      }
-    }
- 
- 
-    &.errorBorder {
-      border: 1.5px solid var(--error-color);
-    }
-  }
- 
- 
-  .focused {
-    background-color: var(--secondary-color);
-  }
- 
- 
-  .galleryInput {
-    min-height: 40px !important;
-    border-radius: 3px !important;
-  }
- 
- 
-  .file-upload-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 0.5px solid var(--border-color);
-    border-radius: 8px;
-    padding: 20px;
-    background-color: #fff;
-    width: 100%;
-    height: 135px;
-    position: relative;
- 
- 
-    .file-input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: pointer;
-    }
- 
- 
-    .upload-area {
-      text-align: center;
- 
- 
-      .upload-icon {
-        font-size: 32px;
-        color: #ff6347; /* Customize color */
-        margin-bottom: 10px;
-      }
- 
- 
-      .upload-text {
-        color: #ff6347; /* Customize color */
-        font-weight: 400;
-        text-decoration: underline;
-        cursor: pointer;
-      }
- 
- 
-      .upload-info {
-        margin-top: 10px;
-        color: #545454;
-        font-size: 12px;
-      }
-    }
-  }
- 
- 
-  .uploaded-files {
-    width: 100%;
-  }
- 
- 
-  h3 {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--text-color);
-    margin-bottom: 10px;
-  }
- 
- 
-  .file-item {
-    display: flex;
-    align-items: center;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px;
-    margin-bottom: 10px;
-    background-color: #fff;
- 
- 
-    .file-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px;
-      border-radius: 4px;
-      margin-right: 10px;
-      width: 50px;
-    }
- 
- 
-    .file-details {
-      flex-grow: 1;
- 
- 
-      .file-name {
-      font-size: 14px !important;
-        margin: 0;
-        font-weight: 500;
-        color: #303030 !important;
-      }
- 
- 
-      .file-size {
-        font-size: 12px !important;
-        color: #b3b3b3 !important;
-        font-weight: 300 !important;
-      }
-    }
- 
- 
-    .file-remove {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
-  }
- }
- 
- 
- .videoUrlTooltip {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-end;
-  flex-direction: column;
-  width: 100%;
-  max-width: 330px;
-  p {
-    text-align: left;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-    color: #000 !important;
-  }
-  svg{
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    top: 2px;
-    right: 3px;
-    cursor: pointer;
-  }
- }
- 
- 
- .gallery-input-layout {
-  min-width: 320px !important;
- }
-
-.qr-input-layout{
-  .qrInputDiv{
-    min-height: 35px !important;
-    border-radius: 3px !important;
-  }
-}
-
-// new theme input layout
-.new-theme-input-layout{
-  gap: 8px;
-  .basic-label {
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 20px;
-    color: #111827;
-    position: relative;
-    
-    .required-asterisk{
-      color: #E10606;
-      position: absolute;
-      top: -1px;
-    }
-  }
-  .input-with-icon{
-    min-height: 44px !important;
-    border-radius: 4px !important;
-    border: 1px solid #E5E7EB;
-    position: relative;
-
-    .basic-input{
-      padding: 5px 16px;
-    }
-
-    .clear-search-input{
-      position: absolute;
-      right: 16px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-  }
-}
-
-.NewDesignSearch{
-  margin-top: 32px;
-  max-width: 300px;
-
-  .basic-label{
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--input-label-color);
-  }
-
-  .input-with-icon{
-    min-height: 42px;
-    border: 0.5px solid #B0B0B0;
-  }
-}
-
-.searchInput-v2{
-  width: auto !important;
-  min-height: 42px !important;
-  flex-direction: row !important;
-  min-width: 258px !important;
-  
-  .input-with-icon{
-    padding-right: 0 !important;
-    border-radius: 7px !important;
-
-    .basic-input{
-      padding: 5px 16px;
-
-      &::placeholder{
-        color: #00000099 !important;
-      }
-    }
-  }
-}
- 

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

@@ -1,71 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import './styles.scss'; 
-
-const Tabs = ({ value, onChange, tabs, className, tabClassName, indicatorClassName }: any) => {
-  const [indicatorStyle, setIndicatorStyle] = useState({});
-  const tabRefs = useRef<Array<HTMLDivElement | null>>([]);
-
-  const calculateIndicatorPosition = () => {
-    const activeIndex = tabs.findIndex((tab: any) => tab.id === value.id);
-
-    if (tabRefs.current[activeIndex]) {
-      const tabWidth = tabRefs.current[activeIndex]?.offsetWidth || 0;
-      const tabLeft = tabRefs.current[activeIndex]?.offsetLeft || 0;
-
-      let indicatorLeft;
-      if (window.innerWidth < 768) {
-        const indicatorWidth = tabWidth * 0.5;
-        indicatorLeft = tabLeft + (tabWidth - indicatorWidth) / 2;
-        setIndicatorStyle({
-          width: `${indicatorWidth}px`,
-          left: `${indicatorLeft}px`,
-        });
-      } else {
-        const indicatorWidth = 50; 
-        indicatorLeft = tabLeft + tabWidth / 2 - indicatorWidth / 2;
-        setIndicatorStyle({
-          width: `${indicatorWidth}px`,
-          left: `${indicatorLeft}px`,
-        });
-      }
-    }
-  };
-
-  useLayoutEffect(() => {
-    calculateIndicatorPosition();
-    window.addEventListener('resize', calculateIndicatorPosition);
-
-    return () => {
-      window.removeEventListener('resize', calculateIndicatorPosition);
-    };
-  }, [value, tabs.length]);
-
-  useEffect(() => {
-    if (tabs.length > 0 && !value.id) {
-      onChange(tabs[0]); 
-    }
-  }, [tabs, value, onChange]);
-
-  return (
-    <div className={`tabsWrapper ${className}`}>
-      <div className="tabsContainer">
-        {tabs.map((tab:any, index:any) => (
-          <div
-            key={index}
-            ref={(el) => (tabRefs.current[index] = el)}
-            className={`tab ${tabClassName} ${value.id === tab.id ? 'activeTab' : ''}`}
-            onClick={() => onChange(tab)}
-          >
-            {tab.label}
-          </div>
-        ))}
-      </div>
-        <div
-          className={`tabsIndicator ${indicatorClassName}`}
-          style={indicatorStyle}
-        />
-    </div>
-  );
-};
-
-export default Tabs;

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

@@ -1,42 +0,0 @@
-.tabsWrapper {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  transition: left 0.3s ease-in-out;
-
-  .tabsContainer {
-    display: flex;
-    gap: 55px;
-    width: 100%;
-    
-    .tab {
-      padding: 10px 0;
-      cursor: pointer;
-      text-align: center;
-      font-size: 18px;
-      flex: 1;
-      width: 100%;
-      min-width: fit-content;
-      transition: left 0.3s ease-in-out;
-      
-      @media (width <= 768px){
-        font-size: 15px;
-      }
-
-      &.activeTab {
-        font-weight: bold;
-        color: var(--primary-color);
-      }
-    }
-  }
-
-  .tabsIndicator {
-    position: absolute;
-    bottom: 3px;
-    height: 1.5px;
-    background-color: var(--primary-color);
-    transition: left 0.3s ease-in-out;
-  }
-}