@knovator/pagecreator-admin 1.2.9 → 1.3.1

package/src/lib/types/components.d.ts

@@ -0,0 +1,422 @@
+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: OptionType) => 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?: () => void;
+    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' | '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;
+}
+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;
+        }
+    ];
+}

package/src/lib/types/context.d.ts

@@ -0,0 +1,135 @@
+/// <reference types="react" />
+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 {
+    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;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    totalPages: number;
+    pageSize: number;
+    setPageSize: (size: number) => void;
+    totalRecords: number;
+    limits: number[];
+    canList: boolean;
+    canPartialUpdate: boolean;
+    columns: any[];
+    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 {
+    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;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    totalPages: number;
+    pageSize: number;
+    setPageSize: (size: number) => void;
+    totalRecords: number;
+    limits: number[];
+    canList: boolean;
+    columns: any[];
+    data: any;
+    loader?: JSX.Element;
+    canDelete?: boolean;
+    pageTranslations: PageTranslationPairs;
+}

package/index.d.ts

@@ -1 +0,0 @@
-declare module '@knovator/api';

package/src/lib/api/index.ts

@@ -1,70 +0,0 @@
-import fetchUrl, { setAPIConfig } from '@knovator/api';
-import apiList from './list';
-import {
-  ACTION_TYPES,
-  API_TYPE,
-  BaseAPIProps,
-  Routes_Input,
-  ResponseType,
-} from '../types';
-
-const handleError = (error: Error) => {
-  console.log(error);
-};
-
-const commonApi = async ({
-  data,
-  config,
-
-  baseUrl,
-  token,
-
-  url,
-  method,
-
-  onError = handleError,
-}: BaseAPIProps): Promise<ResponseType> => {
-  let apiToken = token;
-  if (typeof token === 'function') {
-    apiToken = await token();
-  }
-  setAPIConfig({
-    baseUrl,
-    tokenPrefix: 'jwt',
-    getToken: apiToken,
-    onError,
-  });
-  const response: ResponseType = (await fetchUrl({
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    type: method,
-    url,
-    data,
-    config,
-  })) as ResponseType;
-  return response;
-};
-
-const getApiType = ({
-  routes,
-  action,
-  prefix,
-  id,
-}: {
-  routes?: Routes_Input;
-  action: ACTION_TYPES;
-  prefix: string;
-  id?: string;
-}): API_TYPE => {
-  let route: API_TYPE;
-  if (routes && typeof routes[action] === 'function') {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    route = routes[action]!({ prefix, id });
-  } else {
-    route = apiList[action]({ prefix, id });
-  }
-  return route;
-};
-
-export default commonApi;
-export { getApiType };

package/src/lib/api/list.ts

@@ -1,59 +0,0 @@
-import { API_INPUT_TYPE } from '../types';
-
-const apiList = {
-  GET_ONE: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}`,
-    method: 'GET',
-  }),
-  LIST: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/list`,
-    method: 'POST',
-  }),
-  CREATE: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}`,
-    method: 'POST',
-  }),
-  UPDATE: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}`,
-    method: 'PUT',
-  }),
-  PARTIAL_UPDATE: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}`,
-    method: 'PATCH',
-  }),
-  DELETE: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}`,
-    method: 'DELETE',
-  }),
-  WIDGET_TYPES: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/widget-types`,
-    method: 'GET',
-  }),
-  SELECTION_TYPES: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/selection-types`,
-    method: 'GET',
-  }),
-  ITEM: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}`,
-    method: 'GET',
-  }),
-  COLLECTION_DATA: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/collection-data`,
-    method: 'POST',
-  }),
-  LANGUAGES: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/languages`,
-    method: 'GET',
-  }),
-  // Image Upload API
-  IMAGE_UPLOAD: ({ prefix }: API_INPUT_TYPE) => ({
-    url: `${prefix}/upload`,
-    method: 'post',
-  }),
-  IMAGE_REMOVE: ({ prefix, id }: API_INPUT_TYPE) => ({
-    url: `${prefix}/${id}/delete`,
-    method: 'DELETE',
-  }),
-};
-
-export default apiList;

package/src/lib/components/Page/AddButton/AddButton.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import Button from "../../common/Button";
-import { usePageState } from "../../../context/PageContext";
-import { useProviderState } from '../../../context/ProviderContext';
-
-const AddButton = () => {
-  const { commonTranslations } = useProviderState();
-  const { onChangeFormState, canAdd } = usePageState();
-  return (
-    <Button disabled={!canAdd} onClick={() => onChangeFormState('ADD')}>
-      {commonTranslations.add}
-    </Button>
-  );
-};
-
-export default AddButton;