@knovator/pagecreator-admin 1.2.2 → 1.2.3

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

@@ -0,0 +1,314 @@
+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/Form/{index.d.ts → index.ts}

@@ -1,4 +1,5 @@
 import Form from "./Form";
 import SimpleForm from "./SimpleForm";
+
 export default Form;
 export { SimpleForm };

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

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

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

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

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

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import SmallCancel from '../../../icons/close';
+import { ImageUploadProps } from '../../../types';
+import { build_path, isEmpty, isString } from '../../../helper/utils';
+
+const ImageUpload = ({
+  className,
+  text,
+  maxSize,
+  setImgId,
+  onError,
+  error,
+  imgId = '',
+  onImageUpload,
+  onImageRemove,
+  clearError,
+  baseUrl,
+  disabled = false,
+}: ImageUploadProps) => {
+  const [img, setImg] = useState<string | undefined>(undefined);
+  const { getRootProps, getInputProps } = useDropzone({
+    // accept: {
+    //   "image/*": [".jpeg,.jpg,.png"],
+    // },
+    noClick: true,
+    multiple: false,
+    minSize: 0,
+    maxSize,
+    onDrop: async (acceptedFiles, rejectedFiles) => {
+      try {
+        if (typeof clearError === 'function') clearError();
+        if (acceptedFiles?.length > 0) {
+          const regex = /\.(png|jpeg|jpg|webp|svg|gif)$/gi;
+          const files = acceptedFiles.filter((file) => regex.test(file.name));
+          if (files[0]) {
+            const response = await onImageUpload(files[0]);
+            if (response) {
+              setImg(response.fileUrl);
+              setImgId(response.fileId);
+            }
+          } else
+            throw new Error(
+              'Only .png, .jpg, .jpeg, .web, or .svg image types are supported.'
+            );
+        } else if (
+          rejectedFiles?.[0]?.errors?.[0]?.message ===
+          'File size must be smaller than 10485760 bytes'
+        ) {
+          throw new Error('File is larger than 10mb');
+        }
+      } catch (error) {
+        onError((error as Error).message);
+      }
+    },
+  });
+
+  const onRemoveFile = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    try {
+      if (onImageRemove && imgId)
+        await onImageRemove(typeof imgId === 'string' ? imgId : imgId['_id']);
+
+      setImgId(null);
+      setImg('');
+    } catch (error) {
+      onError((error as Error).message);
+    }
+  };
+
+  useEffect(() => {
+    if (imgId && typeof imgId === 'object') {
+      setImg(build_path(baseUrl, imgId['uri']));
+    }
+  }, [baseUrl, imgId]);
+
+  const showImage = (fileUrl: string) => {
+    return (
+      <div className="khb_img-wrapper">
+        <img src={`${fileUrl}`} alt="" className="khb_img-wrapper-img" />
+        {!disabled && (
+          <button onClick={onRemoveFile} className="khb_img-wrapper-del">
+            <SmallCancel />
+          </button>
+        )}
+      </div>
+    );
+  };
+
+  if (!isEmpty(img) && isString(img) && img) {
+    return (
+      <div className="khb_img-upload-wrapper-1">
+        <div className="khb_img-upload-wrapper-2">
+          <div>{showImage(img)}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div {...getRootProps()} className="khb_img-upload-wrapper-1">
+        <input disabled={disabled} {...getInputProps()} id="file-upload" />
+        <label htmlFor="file-upload" className="khb_img-upload-wrapper-2">
+          <div className={className}>{text}</div>
+        </label>
+      </div>
+      {error && <p className="khb_input-error">{error}</p>}
+    </>
+  );
+};
+
+export default React.memo(ImageUpload);

package/src/lib/components/common/ImageUpload/index.tsx

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

package/src/lib/components/common/Input/Checkbox.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CheckboxProps } from '../../../types';
+
+const Checkbox = ({
+  rest,
+  label,
+  error,
+  wrapperClassName,
+  disabled,
+  switchClass,
+}: CheckboxProps) => {
+  return (
+    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
+      {label && <label className="khb_input-label">{label}</label>}
+      <label className={switchClass || 'khb_switch'} data-testid="khb_switch">
+        <input type="checkbox" disabled={disabled} {...rest} />
+        <span className="slider round" />
+      </label>
+      {error && <p className="khb_input-error">{error}</p>}
+    </div>
+  );
+};
+
+export default Checkbox;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { InputProps } from '../../../types';
+
+const Input = ({
+  label,
+  id,
+  placeholder,
+  type,
+  size = 'base',
+  required,
+  error,
+  className,
+  disabled,
+  rest,
+  onInput,
+  onBlur,
+  value,
+  info,
+  onChange,
+  wrapperClassName,
+}: InputProps) => {
+  return (
+    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
+      {label && (
+        <label className="khb_input-label">
+          {label}
+          {required ? (
+            <span className="khb_input-label-required">*</span>
+          ) : null}
+        </label>
+      )}
+      <input
+        className={classNames('khb_input', `khb_input-${size}`, className)}
+        type={type}
+        placeholder={placeholder}
+        disabled={disabled}
+        id={id}
+        value={value}
+        onChange={onChange}
+        {...rest}
+        onInput={onInput}
+        onBlur={onBlur}
+      />
+      {error && <p className="khb_input-error ">{error}</p>}
+      {info && <p className="khb_input-info">{info}</p>}
+    </div>
+  );
+};
+
+export default Input;

package/src/lib/components/common/Input/ReactSelect.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+import ReactSelect from 'react-select/async';
+import { ReactSelectProps } from '../../../types';
+
+const CustomReactSelect = ({
+  onChange,
+  label,
+  error,
+  className,
+  isMulti,
+  selectedOptions = [],
+  required,
+  isLoading,
+  isSearchable,
+  loadOptions,
+  placeholder,
+  wrapperClassName,
+  formatOptionLabel,
+  listCode,
+  customStyles,
+  selectKey,
+}: ReactSelectProps) => {
+  return (
+    <div className={wrapperClassName}>
+      {label && (
+        <label className="khb_input-label">
+          {label}
+          {required ? (
+            <span className="khb_input-label-required">*</span>
+          ) : null}
+        </label>
+      )}
+      <ReactSelect
+        key={selectKey}
+        data-testid={`input-select-${label}`}
+        value={selectedOptions}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onChange={onChange}
+        className={classNames(className)}
+        isMulti={isMulti}
+        defaultOptions
+        isSearchable={isSearchable}
+        isLoading={isLoading}
+        loadOptions={loadOptions}
+        placeholder={placeholder}
+        formatOptionLabel={
+          formatOptionLabel
+            ? (option) => formatOptionLabel(listCode!, option)
+            : undefined
+        }
+        styles={customStyles}
+      />
+      {error && <p className="khb_input-error ">{error}</p>}
+    </div>
+  );
+};
+
+export default CustomReactSelect;

package/src/lib/components/common/Input/Select.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SelectProps } from '../../../types';
+
+const Select = ({
+  onChange,
+  value,
+  rest,
+  label,
+  error,
+  options = [],
+  size = 'base',
+  className,
+  disabled,
+  required,
+  wrapperClassName,
+}: SelectProps) => {
+  return (
+    <div className={classNames('khb_input-wrapper', wrapperClassName)}>
+      {label && (
+        <label className="khb_input-label">
+          {label}
+          {required ? (
+            <span className="khb_input-label-required">*</span>
+          ) : null}
+        </label>
+      )}
+      <select
+        data-testid={`input-select-${label}`}
+        value={value}
+        onChange={onChange}
+        className={classNames('khb_input', `khb_input-${size}`, className)}
+        disabled={disabled}
+        {...rest}
+      >
+        {options.map((option, index) => (
+          <option value={option.value} key={index} data-testid="select-option">
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {error && <p className="khb_input-error ">{error}</p>}
+    </div>
+  );
+};
+
+export default Select;