@knovator/pagecreator-admin 1.2.4 → 1.2.6

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

@@ -1,79 +0,0 @@
-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/Form/Form.tsx

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

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

@@ -1,314 +0,0 @@
-import classNames from 'classnames';
-import React, { forwardRef, MutableRefObject } from 'react';
-import { Controller } from 'react-hook-form';
-import {
-  CombineObjectType,
-  LanguageType,
-  OptionType,
-  SchemaType,
-} from '../../../types';
-
-import Input from '../Input';
-import CustomReactSelect from '../Input/ReactSelect';
-
-interface SimpleFormProps {
-  schema: SchemaType[];
-  isUpdating?: boolean;
-  onSubmit: (data: CombineObjectType) => void;
-  enable?: boolean;
-  languages?: LanguageType[];
-  ref: MutableRefObject<HTMLFormElement | null>;
-  register: any;
-  errors: any;
-  handleSubmit: any;
-  setValue: any;
-  control: any;
-  setError: any;
-}
-
-const SimpleForm = forwardRef<HTMLFormElement | null, SimpleFormProps>(
-  (
-    {
-      schema,
-      onSubmit,
-      isUpdating = false,
-      enable = true,
-      register,
-      errors,
-      handleSubmit,
-      setValue,
-      control,
-      setError,
-      languages,
-    },
-    ref
-  ) => {
-    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}
-                listCode={schema.listCode}
-                customStyles={schema.customStyles}
-                loadOptions={schema.loadOptions}
-                selectKey={schema.selectKey}
-              />
-            );
-            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)}
-                    rest={field}
-                    // 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':
-          case 'color':
-          default:
-            if (
-              Array.isArray(languages) &&
-              languages.length > 0 &&
-              schema.accessor === 'widgetTitles'
-            ) {
-              input = languages.map((lang) => (
-                <Input
-                  key={lang.code}
-                  rest={register(
-                    `${schema.accessor}.${lang.code}`,
-                    schema.validations || {}
-                  )}
-                  label={schema.label + ' (' + lang.name + ')'}
-                  onInput={schema.onInput}
-                  error={errors[schema.accessor]?.[lang.code]?.message}
-                  required={schema.required}
-                  type={schema.type}
-                  className="kms_w-full kms_p-2"
-                  placeholder={
-                    (schema.placeholder || '') + ' (' + lang.name + ')'
-                  }
-                  disabled={
-                    isUpdating &&
-                    typeof schema.editable !== 'undefined' &&
-                    !schema.editable
-                  }
-                />
-              ));
-            } else
-              input = (
-                <Input
-                  rest={register(schema.accessor, schema.validations || {})}
-                  label={schema.label}
-                  error={errors[schema.accessor]?.message?.toString()}
-                  type={schema.type}
-                  className={classNames('w-full p-2', schema.className)}
-                  placeholder={schema.placeholder}
-                  disabled={
-                    (isUpdating &&
-                      typeof schema.editable !== 'undefined' &&
-                      !schema.editable) ||
-                    !enable
-                  }
-                  required={schema.required}
-                  onInput={schema.onInput}
-                  wrapperClassName={schema.wrapperClassName}
-                  info={schema.info}
-                />
-              );
-            break;
-        }
-      } else if (schema.Input) {
-        if (
-          Array.isArray(languages) &&
-          languages.length > 0 &&
-          schema.accessor === 'widgetTitles'
-        ) {
-          input = languages.map((lang) => (
-            <div
-              key={lang.code}
-              className={classNames(
-                'khb_input-wrapper',
-                schema.wrapperClassName
-              )}
-            >
-              <label className="khb_input-label">
-                {schema.label} ({lang.name})
-                {schema.required ? (
-                  <span className="khb_input-label-required">*</span>
-                ) : null}
-              </label>
-              <Controller
-                control={control}
-                name={`${schema.accessor}.${lang.code}`}
-                rules={schema.validations}
-                render={({ field }) =>
-                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  schema.Input!({
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    field,
-                    error:
-                      errors[schema.accessor]?.[lang.code]?.message?.toString(),
-                    disabled:
-                      (isUpdating &&
-                        typeof schema.editable !== 'undefined' &&
-                        !schema.editable) ||
-                      !enable,
-                    setError: (msg) =>
-                      setError.call(null, schema.accessor, {
-                        type: 'custom',
-                        message: msg,
-                      }),
-                  })
-                }
-              />
-            </div>
-          ));
-        } else
-          input = (
-            <div
-              className={classNames(
-                'khb_input-wrapper',
-                schema.wrapperClassName
-              )}
-            >
-              {schema.label && (
-                <label className="khb_input-label">
-                  {schema.label}
-                  {schema.required ? (
-                    <span className="khb_input-label-required">*</span>
-                  ) : null}
-                </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: any) => {
-        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 SimpleForm;

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import Button from '../Button';
-
-interface FormActionsProps {
-  loading?: boolean;
-  primaryLabel?: string;
-  secondaryLabel?: string;
-  onPrimaryButtonClick?: (
-    e?: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => void;
-  onSecondaryButtonClick?: () => void;
-}
-
-const FormActions = ({
-  loading = false,
-  primaryLabel = 'Submit',
-  secondaryLabel = 'Cancel',
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-}: FormActionsProps) => {
-  return (
-    <>
-      <Button
-        type="secondary"
-        disabled={loading}
-        onClick={onSecondaryButtonClick}
-      >
-        {secondaryLabel}
-      </Button>
-      <Button onClick={onPrimaryButtonClick} loading={loading}>
-        {primaryLabel}
-      </Button>
-    </>
-  );
-};
-
-export default FormActions;