@knovator/pagecreator-admin 1.4.0 → 1.4.1

package/src/lib/icons/trash.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IconProps } from '../types';
+
+const Trash = ({ srText, className }: IconProps) => {
+  return (
+    <>
+      {srText ? <span className="khb_sr-only">{srText}</span> : null}
+      <svg
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-4 -2 24 24"
+        width="24"
+        fill="currentColor"
+      >
+        <path d="M14.833 5l-.728 13.11A2 2 0 0 1 12.108 20H3.892a2 2 0 0 1-1.997-1.89L1.167 5H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-.167zM12.83 5H3.17l.722 13h8.216l.722-13zM2 2v1h12V2H2zm4 5a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z"></path>
+      </svg>
+    </>
+  );
+};
+
+export default Trash;

package/src/lib/types/api.ts

@@ -0,0 +1,44 @@
+export type ACTION_TYPES =
+  | 'IMAGE_UPLOAD'
+  | 'IMAGE_REMOVE'
+  | 'CREATE'
+  | 'LIST'
+  | 'DELETE'
+  | 'UPDATE'
+  | 'ITEM'
+  | 'PARTIAL_UPDATE'
+  | 'WIDGET_TYPES'
+  | 'SELECTION_TYPES'
+  | 'COLLECTION_DATA'
+  | 'GET_ONE'
+  | 'LANGUAGES';
+
+export type API_TYPE = {
+  url: string;
+  method: string;
+};
+
+export type API_INPUT_TYPE = { prefix: string; id?: string };
+
+export type Routes_Input = {
+  [K in ACTION_TYPES]?: (data: API_INPUT_TYPE) => API_TYPE;
+};
+
+export type ItemsType = { value: string; label: string };
+export type WidgetType = { value: string; label: string };
+
+export interface BaseAPIProps {
+  config?: any;
+  baseUrl: string;
+  token: string | (() => Promise<string>);
+  data?: any;
+  url: string;
+  method: string;
+  onError?: (error: Error) => void;
+}
+
+export interface ResponseType {
+  message: string;
+  code: 'SUCCESS' | 'FAILED';
+  data: any;
+}

package/src/lib/types/common.ts

@@ -0,0 +1,31 @@
+export type FormActionTypes = 'ADD' | 'UPDATE' | 'DELETE' | null | '';
+export type TFunc = (key: string) => string;
+export type OptionType = { label: string; value: string; code?: string };
+export interface PermissionsObj {
+  list: boolean;
+  add: boolean;
+  update: boolean;
+  partialUpdate: boolean;
+  delete: boolean;
+}
+export type LanguageType = { name: string; code: string };
+export type ObjectType = {
+  [key: string]: string;
+};
+export type CombineObjectType = {
+  [key: string]:
+    | string
+    | boolean
+    | number
+    | string[]
+    | null
+    | Record<string | number, CombineObjectType>
+    | CombineObjectType
+    | CombineObjectType[];
+};
+export type ValuesType = string | boolean | number | string[];
+export interface SrcSetItem {
+  screenSize: number | string;
+  width: number | string;
+  height: number | string;
+}

package/src/lib/types/components.ts

@@ -0,0 +1,430 @@
+import React, { MutableRefObject } from 'react';
+import { DropResult } from 'react-beautiful-dnd';
+import {
+  FieldValues,
+  RegisterOptions,
+  UseFormClearErrors,
+  UseFormGetValues,
+  UseFormSetValue,
+  ValidationRule,
+} from 'react-hook-form';
+import { Routes_Input } from './api';
+import {
+  OptionType,
+  FormActionTypes,
+  PermissionsObj,
+  ObjectType,
+  LanguageType,
+} from './common';
+
+export interface DNDItemsListProps {
+  onDragEnd: (result: DropResult) => void;
+  items: OptionType[];
+  listCode?: string;
+  formatItem?: (code: string, data: any) => JSX.Element;
+  onFilterClick?: (item?: any) => void;
+}
+export interface DrawerProps {
+  children?: React.ReactNode;
+  open: boolean;
+  onClose?: () => void;
+  id?: string;
+  name?: string;
+  title?: string;
+}
+export type ButtonTypes = 'primary' | 'secondary' | 'success' | 'danger';
+export type ButtonSizes = 'xs' | 'sm' | 'base' | 'lg';
+export interface ButtonProps {
+  children?: React.ReactNode;
+  type?: ButtonTypes;
+  size?: ButtonSizes;
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+}
+export interface IconProps {
+  srText?: string;
+  className?: string;
+}
+export type InputSizes = 'xs' | 'sm' | 'base' | 'lg';
+export interface InputProps {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  type?: string;
+  size?: InputSizes;
+  className?: string;
+  error?: string;
+  errors?: any;
+  required?: boolean;
+  disabled?: boolean;
+  rest?: any;
+  wrapperClassName?: string;
+  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: string | number;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  control?: any;
+  register?: any;
+  info?: string;
+  name?: string;
+}
+export interface SrcSetMessageProps {
+  screenSizeRequired: string;
+  minScreenSize: string;
+  widthRequired: string;
+  minWidth: string;
+  heightRequired: string;
+  minHeight: string;
+}
+export interface HTMLEditorProps {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  wrapperClassName?: string;
+  onChange: (value: string) => void;
+  onInput?: (e: any) => void;
+  required?: boolean;
+  error?: string;
+}
+export interface CheckboxProps {
+  rest?: any;
+  label?: string;
+  error?: string;
+  className?: string;
+  disabled?: boolean;
+  wrapperClassName?: string;
+  switchClass?: string;
+}
+export interface SelectProps {
+  value?: string | number;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  label?: string;
+  error?: string;
+  options?: { value: string; label: string }[];
+  className?: string;
+  disabled?: boolean;
+  size?: InputSizes;
+  id?: string;
+  rest?: any;
+  required?: boolean;
+  wrapperClassName?: string;
+}
+export interface ReactSelectProps {
+  onChange?: (opt: OptionType[] | OptionType | null) => void;
+  label?: string;
+  error?: string;
+  options?: { value: string; label: string }[];
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  isMulti?: boolean;
+  required?: boolean;
+  selectedOptions?: { value: string; label: string }[];
+  isLoading?: boolean;
+  isSearchable?: boolean;
+  placeholder?: string;
+  formatOptionLabel?: (code: string, data: any) => JSX.Element;
+  listCode?: string;
+  wrapperClassName?: string;
+  customStyles?: any;
+  loadOptions?: (
+    value?: string,
+    callback?: (options: OptionType[]) => void
+  ) => Promise<OptionType[]>;
+  selectKey?: string;
+}
+export interface CustomInputType {
+  field: import('react-hook-form').ControllerRenderProps;
+  error?: string;
+  setError: (msg: string) => void;
+}
+export interface FormProps {
+  onFilterClick?: (pageData?: any) => void;
+  filterQuery?: string;
+  formRef: MutableRefObject<HTMLFormElement | null>;
+  customInputs?: Record<string, (props: InputRendererProps) => JSX.Element>;
+}
+export interface InputRendererProps {
+  field: import('react-hook-form').ControllerRenderProps;
+  error?: string;
+  setError: (msg: string) => void;
+  disabled?: boolean;
+}
+export interface WidgetTranslationPairs {
+  htmlContentRequired: string | ValidationRule<boolean> | undefined;
+  htmlContentPlaceholder: string | undefined;
+  htmlContent: string | undefined;
+  itemsType: string;
+  itemsTypePlaceholder: string;
+  widgetType: string;
+  widgetTypeRequired: string;
+  color: string;
+  webPerRow: string;
+  webPerRowPlaceholder: string;
+  mobilePerRow: string;
+  mobilePerRowPlaceholder: string;
+  tabletPerRow: string;
+  tabletPerRowPlaceholder: string;
+  mobileItems: string;
+  webItems: string;
+  searchPlaceholder: string;
+  autoPlay: string;
+  addWidgetTitle: string;
+  updateWidgetTitle: string;
+  webPerRowRequired: string;
+  tabletPerRowRequired: string;
+  mobilePerRowRequired: string;
+  tabDeleteTitle: string;
+  widgetTitleInfo: string;
+  minPerRow: string;
+  tabNameRequired: string;
+
+  subtitle: string;
+  subTitlePlaceholder: string;
+  altText: string;
+  altTextPlaceholder: string;
+  link: string;
+  linkPlaceholder: string;
+  image: string;
+  uploadFile: string;
+  dragDrop: string;
+  allowedFormat: string;
+  srcset: string;
+  screenSizeRequired: string;
+  widthRequired: string;
+  heightRequired: string;
+  minScreenSize: string;
+  minWidth: string;
+  minHeight: string;
+  deleteTitle: string;
+
+  textContent: string;
+  textContentRequired: string;
+  textContentInfo: string;
+  textContentPlaceholder: string;
+}
+export interface WidgetProps {
+  loader?: any;
+  routes?: Routes_Input;
+  explicitForm?: boolean;
+  permissions?: PermissionsObj;
+  formatListItem?: (code: string, data: any) => JSX.Element;
+  formatOptionLabel?: (code: string, data: any) => JSX.Element;
+  preConfirmDelete?: (data: { row: ObjectType }) => Promise<boolean>;
+  children?: JSX.Element;
+  reactSelectStyles?: any;
+  imageBaseUrl?: string;
+  imageMaxSize?: number;
+  translations?: WidgetTranslationPairs;
+}
+export interface DerivedTableProps {
+  extraActions?: (item: any) => JSX.Element;
+  extraColumns?: [
+    {
+      label: string;
+      Cell: (item: any) => JSX.Element;
+    }
+  ];
+}
+
+export interface FormWrapperProps {
+  children: (data: {
+    formState: FormActionTypes | undefined;
+    onClose: () => void;
+    open: boolean;
+  }) => JSX.Element | null;
+}
+export interface FormActionWrapperProps {
+  formRef: MutableRefObject<HTMLFormElement | null>;
+}
+
+export interface SchemaType extends ReactSelectProps {
+  label?: string;
+  accessor: string;
+  Input?: (props: InputRendererProps) => JSX.Element;
+  validations?: RegisterOptions;
+  editable?: boolean;
+  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  type?:
+    | 'text'
+    | 'number'
+    | 'select'
+    | 'checkbox'
+    | 'textarea'
+    | 'file'
+    | 'url'
+    | 'ReactSelect'
+    // | 'srcset'
+    | 'color'
+    | 'html';
+  options?: { value: string; label: string }[];
+  selectedOptions?: { value: string; label: string }[];
+  isMulti?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  onChange?: (e: any) => void;
+  show?: boolean;
+  wrapperClassName?: string;
+  switchClass?: string;
+  info?: string;
+  customStyles?: any;
+}
+export interface PageTranslationPairs {
+  slug: string;
+  slugPlaceholder: string;
+  slugRequired: string;
+  addPage: string;
+  updatePage: string;
+  searchPages: string;
+  widgets: string;
+}
+export interface PageProps {
+  loader?: any;
+  explicitForm?: boolean;
+  children?: JSX.Element;
+  permissions?: PermissionsObj;
+  translations?: PageTranslationPairs;
+  preConfirmDelete?: (data: { row: ObjectType }) => Promise<boolean>;
+}
+export interface PaginationProps {
+  totalPages: number;
+  totalRecords: number;
+  currentPage: number;
+  pageSize: number;
+  setCurrentPage: (value: number) => void;
+  showingText?: string;
+  pageText?: string;
+  ofText?: string;
+  previousContent?: string | React.ReactNode;
+  nextContent?: string | React.ReactNode;
+}
+export interface ItemsAccordianProps {
+  id: string;
+  show: boolean;
+  title: string;
+  collapseId: string;
+  toggleShow: (status: boolean) => void;
+  addText?: string;
+  deleteText?: string;
+  loading?: boolean;
+  languages?: LanguageType[];
+
+  name: string;
+  itemType: 'Web' | 'Mobile';
+  errors: any;
+  control: any;
+  register: any;
+  setError: any;
+  clearError: (key: string) => void;
+}
+export interface TabItemProps {
+  showDelete?: boolean;
+  isDisabled?: boolean;
+  deleteTitle: string;
+  onRemoveTab: () => void;
+  register?: any;
+  noButtonText: string;
+  yesButtonText: string;
+  error?: string;
+}
+export interface TabsProps {
+  activeTab: number;
+  setActiveTab: (value: number) => void;
+  onSubmit?: () => void;
+  control: any;
+  options?: { value: string; label: string }[];
+  deleteTitle: string;
+  listCode: string;
+  noButtonText: string;
+  yesButtonText: string;
+  itemsPlaceholder?: string;
+  formatOptionLabel?: (code: string, data: any) => JSX.Element;
+  isItemsLoading?: boolean;
+  formatItem?: (code: string, data: any) => JSX.Element;
+  onCollectionItemsIndexChange: (index: number, data: DropResult) => void;
+  tabCollectionItems: any[];
+  errors?: { [key: string]: any };
+  customStyles?: any;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  languages?: LanguageType[];
+  loadOptions?: (
+    value?: string,
+    callback?: (options: OptionType[]) => void
+  ) => Promise<OptionType[]>;
+}
+
+export interface ImageUploadProps {
+  className?: string;
+  text: string | JSX.Element;
+  maxSize: number;
+  imgId?: string | ObjectType;
+  setImgId: (value?: string | null) => void;
+  clearError?: () => void;
+  onError: (msg: string) => void;
+  onImageUpload: (
+    file: File
+  ) => Promise<{ fileUrl: string; fileId: string; fileUri: string } | void>;
+  onImageRemove?: (id: string) => Promise<void>;
+  baseUrl: string;
+  error?: string;
+  disabled?: boolean;
+}
+export interface ToggleProps {
+  isChecked?: boolean;
+  disabled?: boolean;
+  onChange?: (status: boolean) => void;
+  switchClass?: string;
+}
+export interface ConfirmPopoverProps {
+  children?: JSX.Element;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  title: string;
+}
+export interface DeleteModalProps {
+  formState: FormActionTypes | undefined;
+  onClose: () => void;
+  itemData: ObjectType;
+  onConfirmDelete: () => void;
+  confirmationRequired?: string;
+  permanentlyDelete?: string;
+  lossOfData?: string;
+  pleaseType?: string;
+  toProceedOrCancel?: string;
+  confirm?: string;
+  typeHerePlaceholder?: string;
+}
+// Table
+export type CellInputType = (parameters: {
+  row: any;
+  onUpdate?: (row: any) => void;
+}) => JSX.Element | null | string;
+export type TableDataItemFormat = {
+  label: string;
+  dataKey: string;
+  highlight?: boolean;
+  Cell?: CellInputType;
+};
+export interface TableProps {
+  data: any[];
+  dataKeys: TableDataItemFormat[];
+  loading?: boolean;
+  loader?: any;
+  actions?: {
+    edit?: ((data: { [key: string]: any }) => void) | boolean;
+    delete?: ((data: { [key: string]: any }) => void) | boolean;
+  };
+  actionsLabel: string;
+  extraActions?: (item: any) => JSX.Element;
+  extraColumns?: [{
+    label: string
+    Cell: (item: any) => JSX.Element;
+  }]
+}
+// \ End Table

package/src/lib/types/context.ts

@@ -0,0 +1,184 @@
+import { WidgetType, ItemsType } from './api';
+import { FormActionTypes, LanguageType, OptionType } from './common';
+import { WidgetTranslationPairs, PageTranslationPairs } from './components';
+
+export interface CommonTranslationPairs {
+  confirmationRequired: string;
+  permanentlyDelete: string;
+  lossOfData: string;
+  pleaseType: string;
+  toProceedOrCancel: string;
+  confirm: string;
+  next: string;
+  previous: string;
+  page: string;
+  indicatesRequired: string;
+  cancel: string;
+  yes: string;
+  delete: string;
+  create: string;
+  update: string;
+  showing: string;
+  add: string;
+  of: string;
+  typeHerePlaceholder: string;
+
+  code: string;
+  codePlaceholder: string;
+  codeRequired: string;
+  name: string;
+  namePlaceholder: string;
+  nameRequired: string;
+  title: string;
+  titlePlaceholder: string;
+  titleRequired: string;
+
+  active: string;
+  actions: string;
+}
+
+export interface ProviderContextType {
+  baseUrl: string;
+  token: string | (() => Promise<string>);
+  onError: (
+    callback_code: import('../constants/common').CALLBACK_CODES,
+    code: string,
+    message: string
+  ) => void;
+  onSuccess: (
+    callback_code: import('../constants/common').CALLBACK_CODES,
+    code: string,
+    message: string
+  ) => void;
+  switchClass: string;
+  onLogout: () => void;
+  commonTranslations: CommonTranslationPairs;
+  widgetRoutesPrefix: string;
+  pageRoutesPrefix: string;
+}
+export interface ProviderContextProviderProps
+  extends React.PropsWithChildren,
+    Omit<
+      ProviderContextType,
+      | 'onError'
+      | 'onSuccess'
+      | 'onLogout'
+      | 'widgetRoutesPrefix'
+      | 'itemsRoutesPrefix'
+      | 'pageRoutesPrefix'
+      | 'switchClass'
+      | 'commonTranslations'
+    > {
+  onError?: (
+    callback_code: import('../constants/common').CALLBACK_CODES,
+    code: string,
+    message: string
+  ) => void;
+  onSuccess?: (
+    callback_code: import('../constants/common').CALLBACK_CODES,
+    code: string,
+    message: string
+  ) => void;
+  onLogout?: () => void;
+  switchClass?: string;
+  widgetRoutesPrefix?: string;
+  itemsRoutesPrefix?: string;
+  pageRoutesPrefix?: string;
+  translations?: Partial<CommonTranslationPairs>;
+}
+
+export interface WidgetContextType {
+  // Form
+  list: any[];
+  languages: LanguageType[];
+  searchText?: string;
+  changeSearch: (str: string) => void;
+  formState: FormActionTypes | undefined;
+  closeForm: () => void;
+  onWidgetFormSubmit: (data: any) => void;
+  onChangeFormState: (status: FormActionTypes, data?: any) => void;
+  updateData: any;
+  loading: boolean;
+  canAdd: boolean;
+  canUpdate: boolean;
+  onDeleteItem: (id: string) => void;
+  getWidgets: (searchText?: string) => void;
+  onImageUpload: (
+    file: File
+  ) => Promise<{ fileUrl: string; fileId: string; fileUri: string } | void>;
+  onImageRemove: (id: string) => Promise<void>;
+  itemsTypes: ItemsType[];
+  widgetTypes: WidgetType[];
+  getCollectionData: (
+    collectionName: string,
+    search?: string,
+    callback?: (options: OptionType[]) => void,
+    collectionItems?: string[]
+  ) => Promise<void>;
+  collectionDataLoading: boolean;
+  collectionData: any[];
+  formatListItem?: (code: string, data: any) => JSX.Element;
+  formatOptionLabel?: (code: string, data: any) => JSX.Element;
+  // Pagination
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  totalPages: number;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  totalRecords: number;
+  limits: number[];
+  // Table
+  canList: boolean;
+  canPartialUpdate: boolean;
+  columns: any[]; //ColumnsSchema
+  data: any;
+  loader?: JSX.Element;
+  canDelete?: boolean;
+  onPartialUpdateWidget: (data: any, id: string) => Promise<void>;
+  reactSelectStyles?: any;
+  imageBaseUrl?: string;
+  imageMaxSize: number;
+  widgetTranslations: WidgetTranslationPairs;
+}
+
+export interface PageContextType {
+  // Form
+  list: any[];
+  searchText: string;
+  changeSearch: (val: string) => void;
+  getWidgets: (
+    search: string,
+    collectionItems: string[],
+    callback?: (data: any) => void
+  ) => void;
+  formState: FormActionTypes | undefined;
+  closeForm: () => void;
+  onPageFormSubmit: (data: any) => void;
+  onChangeFormState: (status: FormActionTypes, data?: any) => void;
+  loading: boolean;
+  canAdd: boolean;
+  canUpdate: boolean;
+  widgets: any[];
+  selectedWidgets: OptionType[];
+  setSelectedWidgets: (widgets: OptionType[]) => void;
+  onChangeWidgetSequence: (
+    souceIndex: number,
+    destinationIndex: number
+  ) => void;
+  getPages: (searchText: string) => void;
+  // Pagination
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  totalPages: number;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  totalRecords: number;
+  limits: number[];
+  // Table
+  canList: boolean;
+  columns: any[]; //ColumnsSchema
+  data: any;
+  loader?: JSX.Element;
+  canDelete?: boolean;
+  pageTranslations: PageTranslationPairs;
+}