@knovator/pagecreator-admin 1.2.2 → 1.2.3

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

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

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

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

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import CloseIcon from '../../../icons/close';
+
+interface DrawerProps extends React.PropsWithChildren {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  footerContent?: React.ReactNode;
+}
+
+const Drawer = ({
+  children,
+  open,
+  onClose,
+  title,
+  footerContent,
+}: DrawerProps) => {
+  const nodeRef = useRef(null);
+  return (
+    <CSSTransition
+      ref={nodeRef}
+      in={open}
+      timeout={{ enter: 250, exit: 350 }}
+      classNames="khb_drawer"
+      mountOnEnter
+      unmountOnExit
+    >
+      <div
+        className="khb_drawer-wrapper-1"
+        aria-labelledby="modal"
+        role="dialog"
+        aria-modal="true"
+        ref={nodeRef}
+        data-testid="drawer"
+      >
+        <div className="khb_drawer-wrapper-2">
+          <div
+            className="khb_drawer-backdrop"
+            role="button"
+            onClick={onClose}
+            onKeyDown={onClose}
+            tabIndex={0}
+          />
+          <div className="khb_drawer-container-1">
+            <div className="khb_drawer-container-2">
+              <div className="khb_drawer-close-section">
+                <button
+                  type="button"
+                  className="khb_drawer-close-btn"
+                  onClick={onClose}
+                  data-testid="drawer-close"
+                >
+                  <span className="khb_sr-only">Close panel</span>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className="khb_drawer-main">
+                <div className="khb_drawer-header">
+                  <p className="khb_drawer-header-title">{title}</p>
+                </div>
+                <div className="khb_darwer-content">
+                  {/* Replace with your content */}
+                  {children}
+                  {/* /End replace */}
+                </div>
+                {footerContent && (
+                  <div className="khb_drawer-footer">{footerContent}</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CSSTransition>
+  );
+};
+
+export default Drawer;

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

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

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

@@ -0,0 +1,256 @@
+import React, { forwardRef, MutableRefObject, useEffect } from 'react';
+import { useForm, Controller, EventType } from 'react-hook-form';
+import {
+  CombineObjectType,
+  ObjectType,
+  OptionType,
+  SchemaType,
+} from '../../../types';
+
+import Input from '../Input';
+import { isEmpty } from '../../../helper/utils';
+import CustomReactSelect from '../Input/ReactSelect';
+
+interface FormProps {
+  schema: SchemaType[];
+  data?: CombineObjectType;
+  isUpdating?: boolean;
+  onSubmit: (data: CombineObjectType) => void;
+  enable?: boolean;
+  updates?: CombineObjectType;
+  ref: MutableRefObject<HTMLFormElement | null>;
+  watcher?: (
+    value: ObjectType,
+    name: string | undefined,
+    type: EventType | undefined
+  ) => void;
+}
+
+const Form = forwardRef<HTMLFormElement | null, FormProps>(
+  (
+    {
+      schema,
+      onSubmit,
+      data,
+      isUpdating = false,
+      enable = true,
+      updates,
+      watcher,
+    },
+    ref
+  ) => {
+    const {
+      register,
+      formState: { errors },
+      handleSubmit,
+      reset,
+      setValue,
+      control,
+      setError,
+      watch,
+    } = useForm();
+
+    // setting update data in form
+    useEffect(() => {
+      if (!isEmpty(data)) {
+        reset(data);
+      }
+    }, [data, reset]);
+
+    // setting subscriber if watcher is provided
+    useEffect(() => {
+      if (watcher) {
+        const subscription = watch((value, { name, type }) =>
+          watcher(value, name, type)
+        );
+        return () => subscription.unsubscribe();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+      } else return () => {};
+    }, [watch, watcher]);
+
+    // setting values if updates are provided
+    useEffect(() => {
+      if (updates) {
+        Object.keys(updates).forEach((key) => {
+          setValue(key, updates[key]);
+        });
+      }
+    }, [setValue, updates]);
+
+    const inputRenderer = (schema: SchemaType) => {
+      let input;
+      if (typeof schema.show !== 'undefined' && !schema.show) return null;
+      if (schema.type) {
+        switch (schema.type) {
+          case 'ReactSelect':
+            input = (
+              <CustomReactSelect
+                disabled={!enable}
+                label={schema.label}
+                error={errors[schema.accessor]?.message?.toString()}
+                onChange={(value: OptionType | OptionType[] | null) => {
+                  if (value) {
+                    setValue(
+                      schema.accessor,
+                      Array.isArray(value)
+                        ? value.map((item) => item.value)
+                        : value.value
+                    );
+                    if (schema.onChange) schema.onChange(value);
+                  }
+                }}
+                selectedOptions={schema.selectedOptions}
+                required={schema.required}
+                isMulti={schema.isMulti}
+                isSearchable={schema.isSearchable}
+                isLoading={schema.isLoading}
+                placeholder={schema.placeholder}
+                wrapperClassName={schema.wrapperClassName}
+                formatOptionLabel={schema.formatOptionLabel}
+                selectKey={schema.selectKey}
+                loadOptions={schema.loadOptions}
+              />
+            );
+            break;
+          case 'checkbox':
+            input = (
+              <Input.Checkbox
+                error={errors[schema.accessor]?.message?.toString()}
+                switchClass={schema.switchClass}
+                label={schema.label}
+                rest={register(schema.accessor, schema.validations || {})}
+                className="block"
+                disabled={
+                  isUpdating &&
+                  typeof schema.editable !== 'undefined' &&
+                  !schema.editable
+                }
+                wrapperClassName={schema.wrapperClassName}
+              />
+            );
+            break;
+          case 'select':
+            input = (
+              <Controller
+                control={control}
+                name={schema.accessor}
+                render={({ field }) => (
+                  <Input.Select
+                    options={schema.options}
+                    label={schema.label}
+                    error={errors[schema.accessor]?.message?.toString()}
+                    onChange={(e) => field.onChange(e.target.value)}
+                    value={field.value}
+                    className="w-full"
+                    disabled={
+                      (isUpdating &&
+                        typeof schema.editable !== 'undefined' &&
+                        !schema.editable) ||
+                      !enable
+                    }
+                    required={schema.required}
+                    wrapperClassName={schema.wrapperClassName}
+                  />
+                )}
+              ></Controller>
+            );
+            break;
+          case 'text':
+          case 'number':
+          case 'url':
+          default:
+            input = (
+              <Input
+                rest={register(schema.accessor, schema.validations || {})}
+                label={schema.label}
+                error={errors[schema.accessor]?.message?.toString()}
+                type={schema.type}
+                className="w-full p-2"
+                placeholder={schema.placeholder}
+                disabled={
+                  (isUpdating &&
+                    typeof schema.editable !== 'undefined' &&
+                    !schema.editable) ||
+                  !enable
+                }
+                required={schema.required}
+                onInput={schema.onInput}
+                wrapperClassName={schema.wrapperClassName}
+              />
+            );
+            break;
+        }
+      } else if (schema.Input) {
+        input = (
+          <div className="kms_input-wrapper">
+            <label className="kms_input-label">{schema.label}</label>
+            <Controller
+              control={control}
+              name={schema.accessor}
+              rules={schema.validations}
+              render={({ field }) =>
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                schema.Input!({
+                  field,
+                  error: errors[schema.accessor]?.message?.toString(),
+                  disabled:
+                    (isUpdating &&
+                      typeof schema.editable !== 'undefined' &&
+                      !schema.editable) ||
+                    !enable,
+                  setError: (msg) =>
+                    setError.call(null, schema.accessor, {
+                      type: 'custom',
+                      message: msg,
+                    }),
+                })
+              }
+            />
+          </div>
+        );
+      } else
+        throw new Error(
+          `Please provide Input or type prop to render input Labeled ${schema.label}`
+        );
+
+      return input;
+    };
+
+    const onFormSubmit = async (e: React.FormEvent) => {
+      e.preventDefault();
+      handleSubmit((data) => {
+        const formattedData: CombineObjectType = schema.reduce(
+          (values: CombineObjectType, schemaItem: SchemaType) => {
+            // Do not add field if editing is disabled for it
+            if (
+              isUpdating &&
+              typeof schemaItem.editable !== 'undefined' &&
+              !schemaItem.editable
+            )
+              return values;
+
+            if (schemaItem.type === 'number') {
+              values[schemaItem.accessor] =
+                data[schemaItem.accessor] === ''
+                  ? null
+                  : parseInt(data[schemaItem.accessor]);
+            } else values[schemaItem.accessor] = data[schemaItem.accessor];
+            return values;
+          },
+          {}
+        );
+        onSubmit(formattedData);
+      })();
+    };
+
+    return (
+      <form onSubmit={onFormSubmit} ref={ref} className="khb-form-items">
+        {schema.map((schema, i) => (
+          <React.Fragment key={i}>{inputRenderer(schema)}</React.Fragment>
+        ))}
+      </form>
+    );
+  }
+);
+
+export default Form;