@knovator/pagecreator-admin 1.2.6 → 1.2.8

package/index.d.ts

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

package/package.json

@@ -1,42 +1,38 @@
-{
-  "name": "@knovator/pagecreator-admin",
-  "version": "1.2.6",
-  "dependencies": {
-    "classnames": "^2.3.1",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-transition-group": "^4.4.5",
-    "react-hook-form": "^7.34.2",
-    "react-dropzone": "^14.2.2",
-    "react-select": "^5.4.0",
-    "react-tabs": "^6.0.0",
-    "react-tiny-popover": "^7.2.0"
-  },
-  "peerDependencies": {
-    "react": "^18 | ^17",
-    "@knovator/api": "^0.0.10"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:knovator/pagecreator.git"
-  },
-  "keywords": [
-    "pagecreator",
-    "pagebuilder",
-    "knovator",
-    "chavda-bhavik"
-  ],
-  "author": "knovator (https://knovator.com/)",
-  "files": [
-    "src",
-    "package.json",
-    "README.md",
-    "index.css",
-    "index.d.ts",
-    "index.js",
-    "index.cjs"
-  ],
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "type": "module",
-  "types": "./src\\index.d.ts"
-}
+{
+  "name": "@knovator/pagecreator-admin",
+  "version":"1.2.8",
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-transition-group": "^4.4.5",
+    "react-hook-form": "^7.34.2",
+    "react-dropzone": "^14.2.2",
+    "react-select": "^5.4.0",
+    "react-tabs": "^6.0.0",
+    "react-tiny-popover": "^7.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18 | ^17",
+    "@knovator/api": "^0.0.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:knovator/pagecreator.git"
+  },
+  "keywords": [
+    "pagecreator",
+    "pagebuilder",
+    "knovator",
+    "chavda-bhavik"
+  ],
+  "author": "knovator (https://knovator.com/)",
+  "files": [
+    "src",
+    "package.json",
+    "README.md",
+    "index.css",
+    "index.d.ts",
+    "index.js",
+    "index.cjs"
+  ]
+}

package/src/{index.d.ts → index.ts}

@@ -2,4 +2,5 @@ import './styles/index.css';
 import { Page } from './lib/components/Page';
 import { Widget } from './lib/components/Widget';
 import Provider from './lib/context/ProviderContext';
+
 export { Widget, Provider, Page };

package/src/lib/api/index.ts

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

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

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

package/src/lib/components/Page/AddButton/{index.d.ts → index.ts}

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

package/src/lib/components/Page/Form/PageForm.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { DropResult } from 'react-beautiful-dnd';
+import { FormProps, SchemaType } from '../../../types';
+
+import { SimpleForm } from '../../common/Form';
+import DNDItemsList from '../../common/DNDItemsList';
+
+import { usePageState } from '../../../context/PageContext';
+import {
+  capitalizeFirstLetter,
+  changeToCode,
+  changeToSlug,
+  isEmpty,
+} from '../../../helper/utils';
+import { CONSTANTS } from '../../../constants/common';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const PageForm = ({ formRef }: FormProps) => {
+  const { commonTranslations } = useProviderState();
+  const {
+    data,
+    formState,
+    onPageFormSubmit,
+    selectedWidgets,
+    setSelectedWidgets,
+    widgets,
+    getWidgets,
+    onChangeWidgetSequence,
+    canAdd,
+    canUpdate,
+    pageTranslations,
+  } = usePageState();
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    setError,
+    getValues,
+  } = useForm();
+  const callerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  useEffect(() => {
+    if (formState === 'ADD') {
+      setSelectedWidgets([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formState]);
+
+  // Form Utility Functions
+  function handleCapitalize(event: React.ChangeEvent<HTMLInputElement>) {
+    event.target.value = capitalizeFirstLetter(event.target.value);
+    return event;
+  }
+  function handleCode(event: React.ChangeEvent<HTMLInputElement>) {
+    event.target.value = changeToCode(event.target.value);
+    return event;
+  }
+  function handleSlug(event: React.ChangeEvent<HTMLInputElement>) {
+    let slugValue = changeToSlug(event.target.value);
+    if (!slugValue || !CONSTANTS.SLUG_REGEX.test(slugValue)) {
+      slugValue = '';
+    } else {
+      slugValue = slugValue.replace(CONSTANTS.SLUG_REPLACE_REGEX, '');
+    }
+    event.target.value = slugValue;
+    return event;
+  }
+  function loadOptions(value?: string, callback?: (data: any) => void): any {
+    let widgetItems: any[] = [];
+    if (formState === 'UPDATE') {
+      widgetItems = getValues('widgets');
+    }
+    widgetItems = Array.isArray(widgetItems)
+      ? widgetItems
+      : data?.widgets
+      ? data?.widgets
+      : [];
+    if (callerRef.current) clearTimeout(callerRef.current);
+
+    callerRef.current = setTimeout(() => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      getWidgets(value || '', widgetItems, (widgetsData: any) => {
+        if (callback) callback(widgetsData);
+        if (formState === 'UPDATE' && data)
+          setSelectedWidgets(
+            widgetItems
+              .map((widgetId: string) =>
+                widgetsData.find((widget: any) => widget['value'] === widgetId)
+              )
+              .filter((widget: any) => widget)
+          );
+      });
+    }, 300);
+  }
+  // Widget Form Functions
+  const onDragEnd = (result: DropResult) => {
+    const { destination, source } = result;
+    if (destination) onChangeWidgetSequence(source.index, destination.index);
+  };
+
+  // Schemas
+  const pageFormSchema: SchemaType[] = [
+    {
+      label: commonTranslations.name,
+      required: true,
+      accessor: 'name',
+      type: 'text',
+      placeholder: commonTranslations.namePlaceholder,
+      onInput: handleCapitalize,
+      validations: {
+        required: commonTranslations.nameRequired,
+      },
+    },
+    {
+      label: commonTranslations.code,
+      accessor: 'code',
+      required: true,
+      type: 'text',
+      onInput: handleCode,
+      editable: false,
+      placeholder: commonTranslations.codePlaceholder,
+      validations: {
+        required: commonTranslations.codeRequired,
+      },
+    },
+    {
+      label: pageTranslations.slug,
+      accessor: 'slug',
+      required: true,
+      type: 'text',
+      onInput: handleSlug,
+      editable: false,
+      placeholder: pageTranslations.slugPlaceholder,
+      validations: {
+        required: pageTranslations.slugRequired,
+      },
+    },
+    {
+      label: pageTranslations.widgets,
+      accessor: 'widgets',
+      type: 'ReactSelect',
+      options: widgets,
+      selectedOptions: selectedWidgets,
+      isMulti: true,
+      loadOptions: loadOptions,
+      onChange: (widgets) => setSelectedWidgets(widgets),
+    },
+  ];
+
+  if (!canAdd && !canUpdate) return null;
+  return (
+    <div className="khb_form">
+      <SimpleForm
+        schema={pageFormSchema}
+        onSubmit={onPageFormSubmit}
+        ref={formRef}
+        isUpdating={formState === 'UPDATE'}
+        register={register}
+        errors={errors}
+        handleSubmit={handleSubmit}
+        setValue={setValue}
+        control={control}
+        setError={setError}
+      />
+      {/* <Form
+        schema={pageFormSchema}
+        onSubmit={onPageFormSubmit}
+        ref={formRef}
+        data={data}
+        isUpdating={formState === 'UPDATE'}
+        updates={{
+          widgets: selectedWidgets.map(
+            (widget: { value: string }) => widget.value
+          ),
+        }}
+      /> */}
+
+      <DNDItemsList onDragEnd={onDragEnd} items={selectedWidgets} />
+    </div>
+  );
+};
+
+export default PageForm;

package/src/lib/components/Page/Form/{index.d.ts → index.ts}

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

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

@@ -0,0 +1,151 @@
+import React, { useRef } from 'react';
+import usePage from '../../../hooks/usePage';
+import PageContextProvider from '../../../context/PageContext';
+import {
+  DEFAULT_PERMISSIONS,
+  TRANSLATION_PAIRS_PAGE,
+} from '../../../constants/common';
+import { PageProps } from '../../../types';
+
+import Table from '../Table';
+import Search from '../Search';
+import PageForm from '../Form';
+import AddButton from '../AddButton';
+import Pagination from '../Pagination';
+import Drawer from '../../common/Drawer';
+import DeleteModal from '../../common/DeleteModal';
+import PageFormActions from '../PageFormActions';
+import PageFormWrapper from '../PageFormWrapper';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const Page = ({
+  loader,
+  translations,
+  explicitForm = false,
+  children,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions = {},
+  preConfirmDelete,
+}: PageProps) => {
+  const { commonTranslations } = useProviderState();
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, permissions);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const combinedTranslations = {
+    ...TRANSLATION_PAIRS_PAGE,
+    ...translations,
+  };
+  const {
+    list,
+    widgets,
+    loading,
+    totalPages,
+    totalRecords,
+    currentPage,
+    pageSize,
+    itemData,
+    searchText,
+    changeSearch,
+    setCurrentPage,
+    formState,
+    getWidgets,
+    onChangeFormState,
+    onPageFormSubmit,
+    onCloseForm,
+    selectedWidgets,
+    setSelectedWidgets,
+    onCofirmDeletePage,
+    onChangeWidgetSequence,
+    getPages,
+  } = usePage({
+    defaultLimit: 10,
+    preConfirmDelete,
+    canList: derivedPermissions.list,
+  });
+
+  return (
+    <PageContextProvider
+      loader={loader}
+      list={list}
+      searchText={searchText}
+      changeSearch={changeSearch}
+      widgets={widgets}
+      data={itemData}
+      loading={loading}
+      totalPages={totalPages}
+      totalRecords={totalRecords}
+      currentPage={currentPage}
+      onChangeFormState={onChangeFormState}
+      pageSize={pageSize}
+      getWidgets={getWidgets}
+      setCurrentPage={setCurrentPage}
+      onPageFormSubmit={onPageFormSubmit}
+      selectedWidgets={selectedWidgets}
+      setSelectedWidgets={setSelectedWidgets}
+      onChangeWidgetSequence={onChangeWidgetSequence}
+      getPages={getPages}
+      formState={formState}
+      closeForm={onCloseForm}
+      // permissions
+      canAdd={derivedPermissions.add}
+      canDelete={derivedPermissions.delete}
+      canUpdate={derivedPermissions.update}
+      canList={derivedPermissions.list}
+      pageTranslations={translations}
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <AddButton />
+          <Search />
+          <div className="khb_table-wrapper">
+            <Table />
+            <Pagination />
+          </div>
+        </>
+      )}
+      {!explicitForm && (
+        <Drawer
+          open={formState === 'ADD' || formState === 'UPDATE'}
+          onClose={onCloseForm}
+          title={
+            formState === 'ADD'
+              ? combinedTranslations.addPage
+              : formState === 'UPDATE'
+              ? combinedTranslations.updatePage
+              : ''
+          }
+          footerContent={<PageFormActions formRef={formRef} />}
+        >
+          <PageForm formRef={formRef} />
+        </Drawer>
+      )}
+      {itemData && (
+        <DeleteModal
+          formState={formState}
+          itemData={itemData}
+          onClose={onCloseForm}
+          onConfirmDelete={onCofirmDeletePage}
+          confirmationRequired={commonTranslations.confirmationRequired}
+          confirm={commonTranslations.confirm}
+          lossOfData={commonTranslations.lossOfData}
+          permanentlyDelete={commonTranslations.permanentlyDelete}
+          pleaseType={commonTranslations.pleaseType}
+          toProceedOrCancel={commonTranslations.toProceedOrCancel}
+          typeHerePlaceholder={commonTranslations.typeHerePlaceholder}
+        />
+      )}
+    </PageContextProvider>
+  );
+};
+
+Page.Table = Table;
+Page.Search = Search;
+Page.Form = PageForm;
+Page.AddButton = AddButton;
+Page.Pagination = Pagination;
+Page.FormActions = PageFormActions;
+Page.FormWrapper = PageFormWrapper;
+
+export default Page;

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import FormActions from '../../common/FormActions';
+import { FormActionWrapperProps } from '../../../types';
+import { CALLBACK_CODES } from '../../../constants/common';
+import { usePageState } from '../../../context/PageContext';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const PageFormActions = ({ formRef }: FormActionWrapperProps) => {
+  const { onError, commonTranslations } = useProviderState();
+  const { closeForm, loading, canAdd, canUpdate, formState } = usePageState();
+  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 'ref' 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 PageFormActions;

package/src/lib/components/Page/PageFormActions/{index.d.ts → index.ts}

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

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

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

package/src/lib/components/Page/PageFormWrapper/{index.d.ts → index.ts}

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