@knovator/pagecreator-admin 1.4.0 → 1.4.1

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

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

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

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

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

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

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

package/src/lib/components/common/Pagination/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Pagination from "./Pagination";
+
 export default Pagination;

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import Pencil from '../../../icons/pencil';
+import Trash from '../../../icons/trash';
+import { ObjectType, TableDataItemFormat, TableProps } from '../../../types';
+
+const Table = ({
+  data,
+  dataKeys,
+  actions,
+  loader,
+  loading,
+  extraActions,
+  actionsLabel,
+  extraColumns,
+}: TableProps) => {
+  const cellItemRenderer = (
+    item: ObjectType,
+    dataKey: TableDataItemFormat,
+    index: number
+  ) => {
+    if (dataKey.highlight)
+      return (
+        <th scope="row" className="khb_table-row-heading" key={index}>
+          {item[dataKey.dataKey]}
+        </th>
+      );
+    else if (dataKey.Cell)
+      return (
+        <td className="khb_table-row-data" key={index}>
+          {dataKey.Cell({ row: item })}
+        </td>
+      );
+    else
+      return (
+        <td className="khb_table-row-data" key={index}>
+          {item[dataKey.dataKey]}
+        </td>
+      );
+  };
+  return (
+    <div className={`khb_table-container`} data-testid="table">
+      <div className={`khb_table-height`}>
+        {loading && loader ? (
+          <div className="khb_table-height">{loader}</div>
+        ) : (
+          <table
+            className={`khb_table ${data.length > 0 ? '' : 'empty-table'}`}
+          >
+            <thead className="khb_thead">
+              <tr>
+                {dataKeys.map((key, i) => (
+                  <th scope="col" className="khb_table-heading" key={i}>
+                    {key.label}
+                  </th>
+                ))}
+                {Array.isArray(extraColumns)
+                  ? extraColumns.map((action) => (
+                      <th scope="col" className="khb_table-heading">
+                        {action.label}
+                      </th>
+                    ))
+                  : null}
+                {(actions && (actions?.edit || actions?.delete)) ||
+                typeof extraActions === 'function' ? (
+                  <th scope="col" className="khb_table-heading">
+                    {actionsLabel}
+                  </th>
+                ) : null}
+              </tr>
+            </thead>
+            <tbody className="khb_tbody">
+              {data.length > 0 ? (
+                data.map((item: ObjectType, i: number) => (
+                  <tr
+                    className="khb_table-row"
+                    key={item['id'] || item['_id'] || i}
+                  >
+                    {dataKeys.map((key, j) => cellItemRenderer(item, key, j))}
+                    {Array.isArray(extraColumns)
+                      ? extraColumns.map((column) => (
+                          <td className="khb_table-row-data" key={i}>
+                            {column.Cell(item)}
+                          </td>
+                        ))
+                      : null}
+                    {(actions && (actions?.edit || actions?.delete)) ||
+                    typeof extraActions === 'function' ? (
+                      <td className="khb_table-row-actions">
+                        {actions &&
+                        actions.edit &&
+                        typeof actions.edit === 'function' ? (
+                          <button
+                            className="khb_actions-update"
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            onClick={() => actions.edit(item)}
+                          >
+                            <Pencil />
+                          </button>
+                        ) : null}
+                        {actions &&
+                          actions.delete &&
+                          typeof actions.delete === 'function' &&  !!item['canDel'] !== false &&  (
+                            <button
+                              className="khb_actions-delete"
+                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                              // @ts-ignore
+                              onClick={() => actions.delete!(item)}
+                            >
+                              <Trash />
+                            </button>
+                          )}
+                        {typeof extraActions === 'function'
+                          ? extraActions(item)
+                          : null}
+                      </td>
+                    ) : null}
+                  </tr>
+                ))
+              ) : (
+                <tr className="empty-row">
+                  <td colSpan={(dataKeys?.length || 0) + 1}>No data found</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/src/lib/components/common/Table/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Table from './Table';
+
 export default Table;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ToggleProps } from '../../../types';
+
+const Toggle = ({
+  isChecked,
+  disabled,
+  onChange,
+  switchClass,
+}: ToggleProps) => {
+  return (
+    <label className={switchClass || 'khb_switch'} data-testid="khb_switch">
+      <input
+        type="checkbox"
+        onChange={() => onChange && onChange(!isChecked)}
+        checked={isChecked}
+        disabled={disabled}
+      />
+      <span className="slider round" />
+    </label>
+  );
+};
+
+export default Toggle;

package/src/lib/components/common/Toggle/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Toggle from "./Toggle";
+
 export default Toggle;

package/src/lib/constants/common.ts

@@ -0,0 +1,145 @@
+const DEFAULT_OFFSET_PAYLOAD = 0;
+const DECIMAL_REDIX = 10;
+const DEFAULT_CURRENT_PAGE = 1;
+const INTERNAL_ERROR_CODE = 'INTERNAL_ERROR';
+const DEFAULT_LIMIT = 10;
+const PAGE_LIMITS = [10, 20, 30];
+
+enum CALLBACK_CODES {
+  'GET_ALL' = 'GET_ALL',
+  'GET_SINGLE' = 'GET_SINGLE',
+  'CREATE' = 'CREATE',
+  'UPDATE' = 'UPDATE',
+  'PARTIAL_UPDATE' = 'PARTIAL_UPDATE',
+  'DELETE' = 'DELETE',
+  'IMAGE_UPLOAD' = 'IMAGE_UPLOAD',
+  'IMAGE_REMOVE' = 'IMAGE_REMOVE',
+  'INTERNAL' = 'INTERNAL',
+}
+
+const CONSTANTS = {
+  EMPTY_REGEX: / /g,
+  SLUG_REGEX: /^[\da-z-]*$/,
+  SLUG_REPLACE_REGEX: /[^\da-z-]/gi,
+};
+
+const DEFAULT_PERMISSIONS = {
+  list: true,
+  add: true,
+  delete: true,
+  partialUpdate: true,
+  update: true,
+};
+
+const TRANSLATION_PAIRS_COMMON = {
+  confirmationRequired: 'Confirmation Required',
+  permanentlyDelete: 'You are about to permanently delete the',
+  lossOfData:
+    'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
+  pleaseType: 'Please type',
+  toProceedOrCancel: 'to processed or close this modal to cancel.',
+  confirm: 'Confirm',
+  next: 'Next',
+  previous: 'Previous',
+  page: 'Page',
+  indicatesRequired: 'Indicates fields are required',
+  cancel: 'Cancel',
+  yes: 'Yes',
+  delete: 'Delete',
+  create: 'Create',
+  update: 'Update',
+  showing: 'Showing',
+  add: 'Add',
+  of: 'of',
+  typeHerePlaceholder: 'Type Here',
+
+  code: 'Code',
+  codePlaceholder: 'Enter code',
+  codeRequired: 'Code is required',
+  name: 'Name',
+  namePlaceholder: 'Enter name',
+  nameRequired: 'Name is required',
+  title: 'Title',
+  titlePlaceholder: 'Enter title',
+  titleRequired: 'Title is required',
+
+  active: 'Active',
+  actions: 'Actions',
+};
+
+const TRANSLATION_PAIRS_WIDGET = {
+  itemsType: 'Items Type',
+  itemsTypePlaceholder: 'Select Items Type',
+  widgetType: 'Widget Type',
+  widgetTypeRequired: 'Widget Type is required',
+  color: 'Color',
+  webPerRow: 'Web Per Row',
+  webPerRowPlaceholder: 'Enter web per row',
+  mobilePerRow: 'Mobile Per Row',
+  mobilePerRowPlaceholder: 'Enter mobile per row',
+  tabletPerRow: 'Tablet Per Row',
+  tabletPerRowPlaceholder: 'Enter tablet per row',
+  mobileItems: 'Mobile Items',
+  webItems: 'Web Items',
+  searchPlaceholder: 'Search Widgets...',
+  autoPlay: 'Auto Play',
+  addWidgetTitle: 'Add Widget',
+  updateWidgetTitle: 'Update Widget',
+  webPerRowRequired: 'Web Per Row is required',
+  tabletPerRowRequired: 'Tablet Per Row is required',
+  mobilePerRowRequired: 'Mobile Per Row is required',
+  tabDeleteTitle: 'Are you sure you want to delete this tab?',
+  widgetTitleInfo: 'HTML is supported',
+  minPerRow: 'Value must be greater than zero',
+  // actionsLabel': 'Actions', -> 'actions'
+  tabNameRequired: 'Tab Name is required',
+
+  subtitle: 'Subtitle',
+  subTitlePlaceholder: 'Enter Subtitle',
+  altText: 'Alt Text',
+  altTextPlaceholder: 'Enter alt text',
+  link: 'Link',
+  linkPlaceholder: 'Enter link',
+  image: 'Image',
+  uploadFile: 'Upload File',
+  dragDrop: 'or drag and drop',
+  allowedFormat: 'PNG, JPG, SVG up to 2 MB',
+  srcset: 'Srcset',
+  screenSizeRequired: 'ScreenSize is required',
+  widthRequired: 'Width is required',
+  heightRequired: 'Height is required',
+  minScreenSize: 'ScreenSize should be greater than 0',
+  minWidth: 'Width should be greater than 0',
+  minHeight: 'Height should be greater than 0',
+  deleteTitle: 'Are you sure you want to delete this item?',
+  htmlContent: 'HTML',
+  htmlContentPlaceholder: 'Enter your html',
+  htmlContentRequired: 'html is required',
+  textContent: 'Text',
+  textContentRequired: 'Text is required',
+  textContentInfo: 'HTML is supported',
+  textContentPlaceholder: 'Enter text',
+};
+const TRANSLATION_PAIRS_PAGE = {
+  widgets: 'Widgets',
+  slug: 'Slug',
+  slugPlaceholder: 'Enter Slug',
+  slugRequired: 'Slug is required',
+  addPage: 'Add Page',
+  updatePage: 'Update Page',
+  searchPages: 'Search Pages...',
+};
+export {
+  CONSTANTS,
+  CALLBACK_CODES,
+  DECIMAL_REDIX,
+  DEFAULT_CURRENT_PAGE,
+  DEFAULT_OFFSET_PAYLOAD,
+  INTERNAL_ERROR_CODE,
+  DEFAULT_PERMISSIONS,
+  TRANSLATION_PAIRS_COMMON,
+  DEFAULT_LIMIT,
+  PAGE_LIMITS,
+  TRANSLATION_PAIRS_WIDGET,
+  TRANSLATION_PAIRS_PAGE,
+};