@knovator/pagecreator-admin 1.2.4 → 1.2.6

package/src/lib/components/Widget/Pagination/WidgetPagination.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import Pagination from '../../common/Pagination';
-import { useWidgetState } from '../../../context/WidgetContext';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const WidgetPagination = () => {
-  const { commonTranslations } = useProviderState();
-  const { totalPages, totalRecords, currentPage, pageSize, setCurrentPage } =
-    useWidgetState();
-  return (
-    <Pagination
-      ofText={commonTranslations.of}
-      pageText={commonTranslations.page}
-      showingText={commonTranslations.showing}
-      nextContent={commonTranslations.next}
-      previousContent={commonTranslations.previous}
-      totalPages={totalPages}
-      totalRecords={totalRecords}
-      currentPage={currentPage}
-      pageSize={pageSize}
-      setCurrentPage={setCurrentPage}
-    />
-  );
-};
-
-export default WidgetPagination;

package/src/lib/components/Widget/Search/WidgetSearch.tsx

@@ -1,32 +0,0 @@
-import React, { useRef, useState } from 'react';
-import Input from '../../common/Input';
-import { useWidgetState } from '../../../context/WidgetContext';
-
-const WidgetSearch = () => {
-  const { changeSearch, widgetTranslations, canList, setCurrentPage } =
-    useWidgetState();
-  const callerRef = useRef<NodeJS.Timeout | null>(null);
-  const [searchVal, setSearchVal] = useState<string>();
-
-  const onChangeSearch = (str: string) => {
-    setSearchVal(str);
-    changeSearch(str);
-    if (callerRef.current) clearTimeout(callerRef.current);
-
-    callerRef.current = setTimeout(() => {
-      setCurrentPage(1);
-    }, 300);
-  };
-
-  return (
-    <Input
-      type="search"
-      value={searchVal}
-      disabled={!canList}
-      onChange={(e) => onChangeSearch(e.target.value)}
-      placeholder={widgetTranslations.searchPlaceholder}
-    />
-  );
-};
-
-export default WidgetSearch;

package/src/lib/components/Widget/Table/WidgetTable.tsx

@@ -1,70 +0,0 @@
-import React, { useCallback } from 'react';
-import Table from '../../common/Table';
-import ToggleWidget from '../../common/Toggle';
-import { useWidgetState } from '../../../context/WidgetContext';
-import {
-  CombineObjectType,
-  DerivedTableProps,
-  ObjectType,
-  ValuesType,
-} from '../../../types';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const WidgetTable = ({ extraActions, extraColumns }: DerivedTableProps) => {
-  const { commonTranslations, switchClass } = useProviderState();
-  const {
-    list,
-    canUpdate,
-    canDelete,
-    canPartialUpdate,
-    onChangeFormState,
-    onPartialUpdateWidget,
-    loading,
-    loader,
-  } = useWidgetState();
-  const updateClosure = useCallback(
-    (item: ObjectType, key: string, value: ValuesType) => {
-      onPartialUpdateWidget({ [key]: value }, item['_id']);
-    },
-    [onPartialUpdateWidget]
-  );
-  const onUpdateClick = (item: CombineObjectType) =>
-    onChangeFormState('UPDATE', item);
-  const onDeleteClick = (item: CombineObjectType) =>
-    onChangeFormState('DELETE', item);
-
-  const dataKeys: any[] = [
-    { label: commonTranslations.name, dataKey: 'name', highlight: true },
-    { label: commonTranslations.code, dataKey: 'code' },
-  ];
-  if (canPartialUpdate)
-    dataKeys.push({
-      label: commonTranslations.active,
-      dataKey: 'isActive',
-      Cell: ({ row }: any) =>
-        canPartialUpdate ? (
-          <ToggleWidget
-            switchClass={switchClass}
-            isChecked={row?.isActive}
-            onChange={(status) => updateClosure(row, 'isActive', status)}
-          />
-        ) : null,
-    });
-
-  return (
-    <Table
-      data={list}
-      loader={loader}
-      loading={loading}
-      dataKeys={dataKeys}
-      actionsLabel={commonTranslations.actions}
-      extraColumns={extraColumns}
-      extraActions={extraActions}
-      actions={{
-        edit: canUpdate ? onUpdateClick : false,
-        delete: canDelete ? onDeleteClick : false,
-      }}
-    />
-  );
-};
-export default WidgetTable;

package/src/lib/components/Widget/Widget/Widget.tsx

@@ -1,173 +0,0 @@
-import React, { useRef } from 'react';
-import useWidget from '../../../hooks/useWidget';
-import WidgetContextProvider from '../../../context/WidgetContext';
-import {
-  TRANSLATION_PAIRS_WIDGET,
-  DEFAULT_PERMISSIONS,
-} from '../../../constants/common';
-import { WidgetProps } from '../../../types';
-
-import Table from '../Table';
-import WidgetForm from '../Form';
-import AddButton from '../AddButton';
-import Pagination from '../Pagination';
-import WidgetSearch from '../Search';
-import Drawer from '../../common/Drawer';
-import DeleteModal from '../../common/DeleteModal';
-import WidgetFormActions from '../WidgetFormActions';
-import WiddgetFormWrapper from '../WidgetFormWrapper';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const Widget = ({
-  routes,
-  loader,
-  explicitForm = false,
-  imageBaseUrl,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  permissions = {},
-  preConfirmDelete,
-  formatListItem,
-  formatOptionLabel,
-  imageMaxSize,
-  translations,
-  children,
-}: WidgetProps) => {
-  const { commonTranslations } = useProviderState();
-  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, permissions);
-  const widgetFormRef = useRef<HTMLFormElement | null>(null);
-  const derivedT = {
-    ...TRANSLATION_PAIRS_WIDGET,
-    ...(translations || {}),
-  };
-  const {
-    list,
-    loading,
-    searchText,
-    changeSearch,
-    onChangeFormState,
-    formState,
-    onCloseForm,
-    onWidgetFormSubmit,
-    itemData,
-    getWidgets,
-    onCofirmDeleteWidget,
-    onImageRemove,
-    onImageUpload,
-    onPartialUpdateWidget,
-    itemsTypes,
-    widgetTypes,
-    getCollectionData,
-    collectionData,
-    collectionDataLoading,
-    // Pagination
-    totalPages,
-    totalRecords,
-    currentPage,
-    pageSize,
-    languages,
-    setCurrentPage,
-  } = useWidget({
-    canList: derivedPermissions.list,
-    routes,
-    defaultLimit: 10,
-    preConfirmDelete,
-    imageBaseUrl,
-  });
-  return (
-    <WidgetContextProvider
-      loading={loading}
-      list={list}
-      languages={languages}
-      imageBaseUrl={imageBaseUrl}
-      onChangeFormState={onChangeFormState}
-      searchText={searchText}
-      changeSearch={changeSearch}
-      loader={loader}
-      onWidgetFormSubmit={onWidgetFormSubmit}
-      data={itemData}
-      getWidgets={getWidgets}
-      onImageRemove={onImageRemove}
-      onImageUpload={onImageUpload}
-      onPartialUpdateWidget={onPartialUpdateWidget}
-      itemsTypes={itemsTypes}
-      widgetTypes={widgetTypes}
-      getCollectionData={getCollectionData}
-      collectionData={collectionData}
-      collectionDataLoading={collectionDataLoading}
-      formatListItem={formatListItem}
-      formatOptionLabel={formatOptionLabel}
-      // Pagination
-      totalPages={totalPages}
-      totalRecords={totalRecords}
-      currentPage={currentPage}
-      pageSize={pageSize}
-      setCurrentPage={setCurrentPage}
-      // Permissions
-      canAdd={derivedPermissions.add}
-      canDelete={derivedPermissions.delete}
-      canList={derivedPermissions.list}
-      canUpdate={derivedPermissions.update}
-      canPartialUpdate={derivedPermissions.partialUpdate}
-      formState={formState}
-      closeForm={onCloseForm}
-      imageMaxSize={imageMaxSize}
-      widgetTranslations={translations}
-    >
-      {children ? (
-        children
-      ) : (
-        <>
-          <AddButton />
-          <WidgetSearch />
-          <div className="khb_table-wrapper">
-            <Table />
-            <Pagination />
-          </div>
-        </>
-      )}
-
-      {!explicitForm && (
-        <Drawer
-          open={formState === 'ADD' || formState === 'UPDATE'}
-          onClose={onCloseForm}
-          title={
-            formState === 'ADD'
-              ? derivedT.addWidgetTitle
-              : formState === 'UPDATE'
-              ? derivedT.updateWidgetTitle
-              : ''
-          }
-          footerContent={<WidgetFormActions formRef={widgetFormRef} />}
-        >
-          <WidgetForm formRef={widgetFormRef} />
-        </Drawer>
-      )}
-      {itemData && (
-        <DeleteModal
-          formState={formState}
-          itemData={itemData}
-          onClose={onCloseForm}
-          onConfirmDelete={onCofirmDeleteWidget}
-          confirmationRequired={commonTranslations.confirmationRequired}
-          confirm={commonTranslations.confirm}
-          lossOfData={commonTranslations.lossOfData}
-          permanentlyDelete={commonTranslations.permanentlyDelete}
-          pleaseType={commonTranslations.pleaseType}
-          toProceedOrCancel={commonTranslations.toProceedOrCancel}
-          typeHerePlaceholder={commonTranslations.typeHerePlaceholder}
-        />
-      )}
-    </WidgetContextProvider>
-  );
-};
-
-Widget.Table = Table;
-Widget.Form = WidgetForm;
-Widget.AddButton = AddButton;
-Widget.Search = WidgetSearch;
-Widget.Pagination = Pagination;
-Widget.FormWrapper = WiddgetFormWrapper;
-Widget.FormActions = WidgetFormActions;
-
-export default Widget;

package/src/lib/components/Widget/WidgetFormActions/WidgetFormActions.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import FormActions from '../../common/FormActions';
-import { FormActionWrapperProps } from '../../../types';
-import { CALLBACK_CODES } from '../../../constants/common';
-import { useWidgetState } from '../../../context/WidgetContext';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const WidgetFormActions = ({ formRef }: FormActionWrapperProps) => {
-  const { onError, commonTranslations } = useProviderState();
-  const { closeForm, loading, canAdd, canUpdate, formState } = useWidgetState();
-  const onSubmitClick = (
-    e?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    if (!formRef) {
-      return onError(
-        CALLBACK_CODES.INTERNAL,
-        'error',
-        `formRef is required to submit the form!`
-      );
-    } else if (!formRef.current) {
-      return onError(
-        CALLBACK_CODES.INTERNAL,
-        'error',
-        `formRef is empty, make sure it's passed as 'formRef' prop to the form!`
-      );
-    }
-    // formRef is provided
-    e?.preventDefault();
-    formRef.current?.dispatchEvent(
-      new Event('submit', { cancelable: true, bubbles: true })
-    );
-  };
-
-  if (!canAdd && !canUpdate) return null;
-  return (
-    <FormActions
-      loading={loading}
-      primaryLabel={
-        formState === 'ADD'
-          ? commonTranslations.create
-          : commonTranslations.update
-      }
-      onPrimaryButtonClick={onSubmitClick}
-      onSecondaryButtonClick={closeForm}
-      secondaryLabel={commonTranslations.cancel}
-    />
-  );
-};
-
-export default WidgetFormActions;

package/src/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.tsx

@@ -1,16 +0,0 @@
-import { FormWrapperProps } from '../../../types';
-import { useWidgetState } from '../../../context/WidgetContext';
-
-const WiddgetFormWrapper = ({ children }: FormWrapperProps) => {
-  const { formState, closeForm } = useWidgetState();
-
-  return typeof children === 'function'
-    ? children({
-        formState,
-        onClose: closeForm,
-        open: formState === 'ADD' || formState === 'UPDATE',
-      })
-    : null;
-};
-
-export default WiddgetFormWrapper;

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

@@ -1,56 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ChevronDown from '../../../icons/chevronDown';
-import ChevronUp from '../../../icons/chevronUp';
-
-interface AccordianProps {
-  id?: string;
-  collapseId?: string;
-  className?: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  onToggle?: (status: boolean) => void;
-  title?: string;
-  footerContent?: React.ReactNode;
-}
-
-const Accordian = ({
-  id,
-  className,
-  children,
-  open,
-  onToggle,
-  title,
-  collapseId,
-  footerContent,
-}: AccordianProps) => {
-  return (
-    <div>
-      <h2 id={id}>
-        <button
-          type="button"
-          className="khb_accordian-header"
-          data-accordion-target={`#${collapseId}`}
-          aria-expanded="true"
-          aria-controls={collapseId}
-          onClick={() => onToggle && onToggle(!open)}
-        >
-          <span>{title}</span>
-          {open ? <ChevronUp /> : <ChevronDown />}
-        </button>
-      </h2>
-      <div
-        id={collapseId}
-        className={classNames('khb_accordian-body', { hidden: !open })}
-        aria-labelledby={id}
-      >
-        <div className="khb_accordian-content">{children}</div>
-        {footerContent && (
-          <div className="khb_accordian-footer">{footerContent}</div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Accordian;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { ButtonProps } from '../../../types';
-
-const Button = ({
-  type = 'primary',
-  size = 'base',
-  onClick,
-  className,
-  children,
-  disabled,
-  loading,
-}: ButtonProps) => {
-  return (
-    <button
-      className={classNames(
-        'khb_btn',
-        `khb_btn-${type}`,
-        `khb_btn-${size}`,
-        className
-      )}
-      onClick={onClick}
-      disabled={disabled || loading}
-    >
-      {loading && (
-        <svg
-          className="khb_btn-loader"
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="13"
-          viewBox="0 0 12 13"
-        >
-          <path
-            // style={{ fill: kind }}
-            d="M5.5,12a1,1,0,1,1,1,1A1,1,0,0,1,5.5,12ZM1.75,10.5A1.25,1.25,0,1,1,3,11.75,1.25,1.25,0,0,1,1.75,10.5Zm7.531.031a.75.75,0,1,1,.75.75A.75.75,0,0,1,9.281,10.531ZM0,7A1.5,1.5,0,1,1,1.5,8.5,1.5,1.5,0,0,1,0,7ZM11,7a.5.5,0,1,1,.5.5A.5.5,0,0,1,11,7ZM1.875,4.637a1.62,1.62,0,0,1,0-2.275,1.582,1.582,0,0,1,2.253,0,1.62,1.62,0,0,1,0,2.275,1.582,1.582,0,0,1-2.253,0ZM4.5,2a2,2,0,1,1,2,2A2,2,0,0,1,4.5,2ZM9.75,3.5a.25.25,0,1,1,.25.25A.25.25,0,0,1,9.75,3.5Z"
-          />
-        </svg>
-      )}
-
-      {children}
-    </button>
-  );
-};
-
-export default Button;

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

@@ -1,47 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable react/no-unstable-nested-components */
-import React, { useState } from 'react';
-import { Popover } from 'react-tiny-popover';
-import { ConfirmPopoverProps } from '../../../types';
-import Button from '../Button';
-
-const ConfirmPopOver = ({
-  children,
-  onConfirm,
-  title,
-  confirmText = 'Yes',
-  cancelText = 'No',
-}: ConfirmPopoverProps) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  const onConfirmClick = () => {
-    setIsPopoverOpen(false);
-    onConfirm();
-  };
-
-  return (
-    <Popover
-      containerClassName="khb_confirm-popover"
-      isOpen={isPopoverOpen}
-      padding={10}
-      onClickOutside={() => setIsPopoverOpen(false)}
-      content={() => (
-        <div className="khb_confirm-popover-content">
-          <div className="khb_confirm-popover-title">{title}</div>
-          <div className="khb_confirm-popover-footer">
-            <Button type="secondary" onClick={() => setIsPopoverOpen(false)}>
-              {cancelText}
-            </Button>
-            <Button type="primary" onClick={onConfirmClick}>
-              {confirmText}
-            </Button>
-          </div>
-        </div>
-      )}
-    >
-      <div onClick={() => setIsPopoverOpen(true)}>{children}</div>
-    </Popover>
-  );
-};
-export default ConfirmPopOver;

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { DNDItemsListProps } from '../../../types';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-
-const DNDItemsList = ({
-  onDragEnd,
-  items,
-  formatItem,
-  listCode,
-}: DNDItemsListProps) => {
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="droppable">
-        {(droppableProvided) => (
-          <div
-            className="khb_DND-items"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
-            {items
-              ? items.map((item, index) => (
-                  <Draggable
-                    key={item.value}
-                    draggableId={item.value}
-                    index={index}
-                  >
-                    {(provided) => (
-                      <div
-                        className="khb_DND-item"
-                        key={item.value}
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        {typeof formatItem === 'function' && listCode ? (
-                          formatItem(listCode, item)
-                        ) : (
-                          <p className="khb_DND-item-text">{item.label}</p>
-                        )}
-                      </div>
-                    )}
-                  </Draggable>
-                ))
-              : null}
-            {droppableProvided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
-};
-
-export default DNDItemsList;

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

@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Button from '../Button';
-import Input from '../Input';
-import Modal from '../Modal';
-import { DeleteModalProps } from '../../../types';
-import { TRANSLATION_PAIRS_COMMON } from '../../../constants/common';
-
-const DeleteModal = ({
-  formState,
-  onClose,
-  itemData,
-  onConfirmDelete,
-  confirmationRequired,
-  permanentlyDelete,
-  lossOfData,
-  pleaseType,
-  toProceedOrCancel,
-  confirm,
-  typeHerePlaceholder,
-}: DeleteModalProps) => {
-  const [userInput, setUserInput] = useState<string>('');
-  useEffect(() => {
-    setUserInput('');
-  }, [formState]);
-  return itemData ? (
-    <Modal
-      open={formState === 'DELETE' && itemData ? true : false}
-      onClose={onClose}
-      title={
-        confirmationRequired || TRANSLATION_PAIRS_COMMON.confirmationRequired
-      }
-    >
-      <div className="khb_delete-header">
-        <p>
-          {permanentlyDelete || TRANSLATION_PAIRS_COMMON.permanentlyDelete}{' '}
-          <b>{itemData['name']}</b>
-        </p>
-      </div>
-      <div className="khb_delete-content">
-        <p>{lossOfData || TRANSLATION_PAIRS_COMMON.lossOfData}</p>
-        <p className="khb_delete-note">
-          {pleaseType || TRANSLATION_PAIRS_COMMON.pleaseType}{' '}
-          <b className="text-black font-bold">{itemData['name']}</b>{' '}
-          {toProceedOrCancel || TRANSLATION_PAIRS_COMMON.toProceedOrCancel}
-        </p>
-      </div>
-      <div className="khb_delete-actions">
-        <Input
-          placeholder={
-            typeHerePlaceholder || TRANSLATION_PAIRS_COMMON.typeHerePlaceholder
-          }
-          wrapperClassName="w-full"
-          className="khb_delete-input"
-          value={userInput}
-          onChange={(e) => setUserInput(e.target.value)}
-        />
-        <div className="khb_delete-buttons">
-          <Button
-            disabled={
-              userInput.toString().trim() !== itemData?.['name']?.trim()
-            }
-            onClick={onConfirmDelete}
-          >
-            {confirm || TRANSLATION_PAIRS_COMMON.confirm}
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  ) : null;
-};
-
-export default DeleteModal;

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

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