@knovator/pagecreator-admin 1.2.9 → 1.3.0

package/src/lib/components/common/ImageUpload/ImageUpload.tsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import SmallCancel from '../../../icons/close';
-import { ImageUploadProps } from '../../../types';
-import { build_path, isEmpty, isString } from '../../../helper/utils';
-
-const ImageUpload = ({
-  className,
-  text,
-  maxSize,
-  setImgId,
-  onError,
-  error,
-  imgId = '',
-  onImageUpload,
-  onImageRemove,
-  clearError,
-  baseUrl,
-  disabled = false,
-}: ImageUploadProps) => {
-  const [img, setImg] = useState<string | undefined>(undefined);
-  const { getRootProps, getInputProps } = useDropzone({
-    // accept: {
-    //   "image/*": [".jpeg,.jpg,.png"],
-    // },
-    noClick: true,
-    multiple: false,
-    minSize: 0,
-    maxSize,
-    onDrop: async (acceptedFiles, rejectedFiles) => {
-      try {
-        if (typeof clearError === 'function') clearError();
-        if (acceptedFiles?.length > 0) {
-          const regex = /\.(png|jpeg|jpg|webp|svg|gif)$/gi;
-          const files = acceptedFiles.filter((file) => regex.test(file.name));
-          if (files[0]) {
-            const response = await onImageUpload(files[0]);
-            if (response) {
-              setImg(response.fileUrl);
-              setImgId(response.fileId);
-            }
-          } else
-            throw new Error(
-              'Only .png, .jpg, .jpeg, .web, or .svg image types are supported.'
-            );
-        } else if (
-          rejectedFiles?.[0]?.errors?.[0]?.message ===
-          'File size must be smaller than 10485760 bytes'
-        ) {
-          throw new Error('File is larger than 10mb');
-        }
-      } catch (error) {
-        onError((error as Error).message);
-      }
-    },
-  });
-
-  const onRemoveFile = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    try {
-      if (onImageRemove && imgId)
-        await onImageRemove(typeof imgId === 'string' ? imgId : imgId['_id']);
-
-      setImgId(null);
-      setImg('');
-    } catch (error) {
-      onError((error as Error).message);
-    }
-  };
-
-  useEffect(() => {
-    if (imgId && typeof imgId === 'object') {
-      setImg(build_path(baseUrl, imgId['uri']));
-    }
-  }, [baseUrl, imgId]);
-
-  const showImage = (fileUrl: string) => {
-    return (
-      <div className="khb_img-wrapper">
-        <img src={`${fileUrl}`} alt="" className="khb_img-wrapper-img" />
-        {!disabled && (
-          <button onClick={onRemoveFile} className="khb_img-wrapper-del">
-            <SmallCancel />
-          </button>
-        )}
-      </div>
-    );
-  };
-
-  if (!isEmpty(img) && isString(img) && img) {
-    return (
-      <div className="khb_img-upload-wrapper-1">
-        <div className="khb_img-upload-wrapper-2">
-          <div>{showImage(img)}</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div {...getRootProps()} className="khb_img-upload-wrapper-1">
-        <input disabled={disabled} {...getInputProps()} id="file-upload" />
-        <label htmlFor="file-upload" className="khb_img-upload-wrapper-2">
-          <div className={className}>{text}</div>
-        </label>
-      </div>
-      {error && <p className="khb_input-error">{error}</p>}
-    </>
-  );
-};
-
-export default React.memo(ImageUpload);

package/src/lib/components/common/ImageUpload/index.tsx

@@ -1,3 +0,0 @@
-import ImageUpload from "./ImageUpload"
-
-export default ImageUpload

package/src/lib/components/common/Input/Checkbox.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { CheckboxProps } from '../../../types';
-
-const Checkbox = ({
-  rest,
-  label,
-  error,
-  wrapperClassName,
-  disabled,
-  switchClass,
-}: CheckboxProps) => {
-  return (
-    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
-      {label && <label className="khb_input-label">{label}</label>}
-      <label className={switchClass || 'khb_switch'} data-testid="khb_switch">
-        <input type="checkbox" disabled={disabled} {...rest} />
-        <span className="slider round" />
-      </label>
-      {error && <p className="khb_input-error">{error}</p>}
-    </div>
-  );
-};
-
-export default Checkbox;

package/src/lib/components/common/Input/Input.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { InputProps } from '../../../types';
-
-const Input = ({
-  label,
-  id,
-  placeholder,
-  type,
-  size = 'base',
-  required,
-  error,
-  className,
-  disabled,
-  rest,
-  onInput,
-  onBlur,
-  value,
-  info,
-  onChange,
-  wrapperClassName,
-}: InputProps) => {
-  return (
-    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
-      {label && (
-        <label className="khb_input-label">
-          {label}
-          {required ? (
-            <span className="khb_input-label-required">*</span>
-          ) : null}
-        </label>
-      )}
-      <input
-        className={classNames('khb_input', `khb_input-${size}`, className)}
-        type={type}
-        placeholder={placeholder}
-        disabled={disabled}
-        id={id}
-        value={value}
-        onChange={onChange}
-        {...rest}
-        onInput={onInput}
-        onBlur={onBlur}
-      />
-      {error && <p className="khb_input-error ">{error}</p>}
-      {info && <p className="khb_input-info">{info}</p>}
-    </div>
-  );
-};
-
-export default Input;

package/src/lib/components/common/Input/ReactSelect.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import ReactSelect from 'react-select/async';
-import { ReactSelectProps } from '../../../types';
-
-const CustomReactSelect = ({
-  onChange,
-  label,
-  error,
-  className,
-  isMulti,
-  selectedOptions = [],
-  required,
-  isLoading,
-  isSearchable,
-  loadOptions,
-  placeholder,
-  wrapperClassName,
-  formatOptionLabel,
-  listCode,
-  customStyles,
-  selectKey,
-}: ReactSelectProps) => {
-  return (
-    <div className={wrapperClassName}>
-      {label && (
-        <label className="khb_input-label">
-          {label}
-          {required ? (
-            <span className="khb_input-label-required">*</span>
-          ) : null}
-        </label>
-      )}
-      <ReactSelect
-        key={selectKey}
-        data-testid={`input-select-${label}`}
-        value={selectedOptions}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        onChange={onChange}
-        className={classNames(className)}
-        isMulti={isMulti}
-        defaultOptions
-        isSearchable={isSearchable}
-        isLoading={isLoading}
-        loadOptions={loadOptions}
-        placeholder={placeholder}
-        formatOptionLabel={
-          formatOptionLabel
-            ? (option: { [key: string]: any }) =>
-                formatOptionLabel(listCode!, option)
-            : undefined
-        }
-        styles={customStyles}
-      />
-      {error && <p className="khb_input-error ">{error}</p>}
-    </div>
-  );
-};
-
-export default CustomReactSelect;

package/src/lib/components/common/Input/Select.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { SelectProps } from '../../../types';
-
-const Select = ({
-  onChange,
-  value,
-  rest,
-  label,
-  error,
-  options = [],
-  size = 'base',
-  className,
-  disabled,
-  required,
-  wrapperClassName,
-}: SelectProps) => {
-  return (
-    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
-      {label && (
-        <label className="khb_input-label">
-          {label}
-          {required ? (
-            <span className="khb_input-label-required">*</span>
-          ) : null}
-        </label>
-      )}
-      <select
-        data-testid={`input-select-${label}`}
-        value={value}
-        onChange={onChange}
-        className={classNames('khb_input', `khb_input-${size}`, className)}
-        disabled={disabled}
-        {...rest}
-      >
-        {options.map((option, index) => (
-          <option value={option.value} key={index} data-testid="select-option">
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {error && <p className="khb_input-error ">{error}</p>}
-    </div>
-  );
-};
-
-export default Select;

package/src/lib/components/common/Input/SrcSet.tsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { useFieldArray } from 'react-hook-form';
-import Close from '../../../icons/close';
-import Plus from '../../../icons/plus';
-import { InputProps, InputSizes, SrcSetMessageProps } from '../../../types';
-
-const SrcSetInput = ({
-  size,
-  className,
-  rest,
-  error,
-  placeholder,
-  disabled = false,
-}: {
-  size: InputSizes;
-  rest: any;
-  index: number;
-  error?: string;
-  className?: string;
-  placeholder?: string;
-  disabled?: boolean;
-}) => {
-  return (
-    <div>
-      <input
-        className={classNames('khb_input', `khb_input-${size}`, className)}
-        type={'number'}
-        placeholder={placeholder}
-        disabled={disabled}
-        {...(rest || {})}
-      />
-      {error && <p className="khb_input-error">{error}</p>}
-    </div>
-  );
-};
-
-const SrcSet = ({
-  label,
-  size = 'base',
-  required,
-  error,
-  className,
-  register,
-  wrapperClassName,
-  control,
-  errors,
-  name,
-  disabled = false,
-
-  screenSizeRequired,
-  heightRequired,
-  minHeight,
-  minScreenSize,
-  minWidth,
-  widthRequired,
-}: InputProps & SrcSetMessageProps) => {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: name!,
-  });
-
-  return (
-    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
-      {label && (
-        <label className="khb_input-label">
-          {label}
-          {required ? (
-            <span className="khb_input-label-required">*</span>
-          ) : null}
-        </label>
-      )}
-      <div className="khb_input-srcset-items">
-        {fields?.map((item, index) => (
-          <div key={index} className="khb_input-srcset">
-            <SrcSetInput
-              error={errors?.[index]?.['screenSize']?.message?.toString()}
-              index={index}
-              className={className}
-              size={size}
-              placeholder="Screen Size"
-              rest={register(`${name}.${index}.screenSize`, {
-                required: screenSizeRequired,
-                validate: (value: string) =>
-                  Number(value) <= 0 ? minScreenSize : true,
-              })}
-              disabled={disabled}
-            />
-
-            <span className="p-2">=</span>
-            <SrcSetInput
-              error={errors?.[index]?.['width']?.message?.toString()}
-              index={index}
-              rest={register(`${name}.${index}.width`, {
-                required: widthRequired,
-                validate: (value: string) =>
-                  Number(value) <= 0 ? minWidth : true,
-              })}
-              className={className}
-              size={size}
-              placeholder="Width"
-              disabled={disabled}
-            />
-
-            <span className="p-2">x</span>
-            <SrcSetInput
-              error={errors?.[index]?.['height']?.message?.toString()}
-              index={index}
-              rest={register(`${name}.${index}.height`, {
-                required: heightRequired,
-                validate: (value: string) =>
-                  Number(value) <= 0 ? minHeight : true,
-              })}
-              className={className}
-              size={size}
-              placeholder="Height"
-              disabled={disabled}
-            />
-            <button
-              type="button"
-              className="khb_btn khb_btn-danger khb_btn-xs"
-              onClick={() => remove(index)}
-              disabled={disabled}
-            >
-              <Close />
-            </button>
-          </div>
-        ))}
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={() => append({ screenSize: '', width: '', height: '' })}
-          className="khb_btn khb_btn-primary khb_btn-xs"
-        >
-          <Plus className="khb_srcset-remove" />
-        </button>
-      </div>
-      {error && <p className="khb_input-error ">{error}</p>}
-    </div>
-  );
-};
-
-export default SrcSet;

package/src/lib/components/common/Input/index.ts

@@ -1,20 +0,0 @@
-import Checkbox from "./Checkbox";
-import Input from "./Input";
-import Select from "./Select";
-import ReactSelect from "./ReactSelect";
-import SrcSet from './SrcSet';
-
-export default Object.assign<
-  typeof Input,
-  {
-    Select: typeof Select;
-    ReactSelect: typeof ReactSelect;
-    Checkbox: typeof Checkbox;
-    SrcSet: typeof SrcSet;
-  }
->(Input, {
-  Select,
-  ReactSelect,
-  Checkbox,
-  SrcSet,
-});

package/src/lib/components/common/Modal/Modal.tsx

@@ -1,57 +0,0 @@
-import React, { useRef } from "react";
-import CSSTransition from "react-transition-group/CSSTransition";
-
-import CloseIcon from "../../../icons/close";
-
-interface ModalProps extends React.PropsWithChildren {
-	open: boolean;
-	onClose: () => void;
-	title?: string;
-}
-
-const Modal = ({ open, onClose, title, children }: ModalProps) => {
-	const nodeRef = useRef(null);
-	return (
-		<CSSTransition
-			ref={nodeRef}
-			in={open}
-			timeout={{ enter: 250, exit: 350 }}
-			classNames="khb_modal"
-			mountOnEnter
-			unmountOnExit
-		>
-			<div className="khb_modal-wrapper-1" ref={nodeRef} data-testid="modal">
-				<div className="khb_modal-wrapper-2">
-					<div
-						className="khb_modal-backdrop"
-						role="button"
-						onClick={onClose}
-						onKeyDown={onClose}
-						tabIndex={0}
-					/>
-					<div className="khb_modal-container-1">
-						<div className="khb_modal-container-2">
-							<div className="khb_modal-main">
-								<div className="khb_modal-header">
-									<span className="khb_modal-title">{title}</span>
-									<button
-										className="khb_modal-close"
-										onClick={onClose}
-										onKeyDown={onClose}
-										tabIndex={-1}
-										data-testid="modal-close"
-									>
-										<CloseIcon />
-									</button>
-								</div>
-								<div className="p-4">{children}</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</CSSTransition>
-	);
-};
-
-export default Modal;

package/src/lib/components/common/Modal/index.tsx

@@ -1,3 +0,0 @@
-import Modal from "./Modal"
-
-export default Modal

package/src/lib/components/common/Pagination/Pagination.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { PaginationProps } from '../../../types';
-import { TRANSLATION_PAIRS_COMMON } from '../../../constants/common';
-import ChevronLeft from '../../../icons/chevronLeft';
-import ChevronRight from '../../../icons/chevronRight';
-import Button from '../Button';
-import Input from '../Input';
-
-const Pagination = ({
-  currentPage,
-  pageSize,
-  totalPages,
-  totalRecords,
-  setCurrentPage,
-  showingText = TRANSLATION_PAIRS_COMMON.showing,
-  pageText = TRANSLATION_PAIRS_COMMON.page,
-  ofText = TRANSLATION_PAIRS_COMMON.of,
-  previousContent,
-  nextContent,
-}: PaginationProps) => {
-  const updatePagination = (newValue: number | string | undefined) => {
-    if (newValue && typeof newValue === 'number') {
-      if (newValue <= 0) {
-        newValue = 1;
-      } else if (newValue > totalPages) {
-        newValue = totalPages;
-      }
-      setCurrentPage(newValue);
-    }
-  };
-  const onPaginationButtonClick = (dir: 'next' | 'previous') => {
-    if (dir === 'next') {
-      updatePagination(currentPage + 1);
-    } else {
-      updatePagination(currentPage - 1);
-    }
-  };
-  return (
-    <nav className="khb_pagination" aria-label="Table navigation">
-      <span className="khb_pagination-total">
-        {showingText}{' '}
-        <span className="khb_pagination-total-showing">
-          {!totalRecords ? 0 : (currentPage - 1) * pageSize + 1}
-        </span>{' '}
-        -{' '}
-        <span className="khb_pagination-total-showing">
-          {Math.min(currentPage * pageSize, totalRecords)}
-        </span>{' '}
-        {ofText} {totalRecords}
-      </span>
-      <ul className="khb_pagination-actions">
-        <Button
-          size="xs"
-          type="secondary"
-          className="khb_pagination-previous"
-          disabled={currentPage - 1 <= 0}
-          onClick={() => onPaginationButtonClick('previous')}
-        >
-          {previousContent || <ChevronLeft srText="Previous" />}
-        </Button>
-        <div className="khb_pagination-pager">
-          {pageText}{' '}
-          <Input
-            className="mx-2"
-            size="xs"
-            type="number"
-            id="page"
-            value={currentPage}
-            onChange={(e) => updatePagination(Number(e.target.value))}
-            disabled={!totalRecords}
-          />{' '}
-          / {totalPages}
-        </div>
-        <Button
-          size="xs"
-          type="secondary"
-          className="khb_pagination-next"
-          disabled={currentPage >= totalPages}
-          onClick={() => onPaginationButtonClick('next')}
-        >
-          {nextContent || <ChevronRight srText="Next" />}
-        </Button>
-      </ul>
-    </nav>
-  );
-};
-
-export default Pagination;