@weareconceptstudio/form 0.0.3 → 0.0.5

package/dist/FormConfig.d.ts

@@ -0,0 +1,5 @@
+export function FormConfig({ fontFamily, children }: {
+    fontFamily?: string;
+    children: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/FormConfig.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from '@weareconceptstudio/core';
+import { ThemeProvider } from 'styled-components';
+//* Translations
+import translations from './translations';
+//* Styles
+import theme from './styles/theme';
+import FormVariables from './styles/variables';
+import FormStyle from './styles/formStyle';
+export const FormConfig = ({ fontFamily = 'core_Font', children }) => {
+    const { addTranslation } = useTranslation();
+    useEffect(() => {
+        addTranslation(translations, 'prepend');
+    }, []);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(FormVariables, { fontFamily: fontFamily }),
+        React.createElement(FormStyle, null),
+        children));
+};

package/dist/checkbox/BaseCheckbox.d.ts

@@ -0,0 +1,3 @@
+export default BaseCheckbox;
+declare const BaseCheckbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/checkbox/BaseCheckbox.js

@@ -0,0 +1,51 @@
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useMergedState } from '@weareconceptstudio/core';
+import classNames from 'classnames';
+const BaseCheckbox = forwardRef((props, ref) => {
+    const { prefixCls = 'checkbox', className, style, checked, disabled, defaultChecked = false, type = 'checkbox', title, onChange, ...inputProps } = props;
+    const inputRef = useRef(null);
+    const holderRef = useRef(null);
+    const [rawValue, setRawValue] = useMergedState(defaultChecked, {
+        value: checked,
+    });
+    useImperativeHandle(ref, () => ({
+        focus: (options) => {
+            inputRef.current?.focus(options);
+        },
+        blur: () => {
+            inputRef.current?.blur();
+        },
+        input: inputRef.current,
+        nativeElement: holderRef.current,
+    }));
+    const classString = classNames(prefixCls, className, {
+        [`${prefixCls}-checked`]: rawValue,
+        [`${prefixCls}-disabled`]: disabled,
+    });
+    const handleChange = (e) => {
+        if (disabled) {
+            return;
+        }
+        if (!('checked' in props)) {
+            setRawValue(e.target.checked);
+        }
+        onChange?.({
+            target: {
+                ...props,
+                type,
+                checked: e.target.checked,
+            },
+            stopPropagation() {
+                e.stopPropagation();
+            },
+            preventDefault() {
+                e.preventDefault();
+            },
+            nativeEvent: e.nativeEvent,
+        });
+    };
+    return (React.createElement("span", { className: classString, title: title, style: style, ref: holderRef },
+        React.createElement("input", { type: type, className: `${prefixCls}-input`, ref: inputRef, onChange: handleChange, disabled: disabled, checked: !!rawValue, ...inputProps }),
+        React.createElement("span", { className: `${prefixCls}-inner` })));
+});
+export default BaseCheckbox;

package/dist/checkbox/index.js

@@ -1,8 +1,19 @@
 import React, { forwardRef } from 'react';
-const Checkbox = forwardRef(({ type = 'checkbox', children, ...restProps }, forwardRef) => {
-    return (React.createElement("label", null,
-        React.createElement("input", { type: type, ...forwardRef, ...restProps }),
-        children !== undefined && React.createElement("span", null, children)));
+import BaseCheckbox from './BaseCheckbox';
+import classNames from 'classnames';
+const Checkbox = forwardRef((props, forwardRef) => {
+    const { type = 'checkbox', prefixCls = 'checkbox', children, ...restProps } = props;
+    const checkboxProps = {
+        ref: forwardRef,
+        ...restProps,
+    };
+    const classString = classNames(`${prefixCls}-wrapper`, {
+        [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
+        [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
+    });
+    return (React.createElement("label", { className: classString },
+        React.createElement(BaseCheckbox, { ...checkboxProps }),
+        children !== undefined && React.createElement("span", { className: `${prefixCls}-content` }, children)));
 });
 if (process.env.NODE_ENV !== 'production') {
     Checkbox.displayName = 'Checkbox';

package/dist/color-picker/index.d.ts

@@ -1,3 +1,6 @@
 export default ColorPicker;
-declare const ColorPicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+declare function ColorPicker(props: any): React.JSX.Element;
+declare namespace ColorPicker {
+    let displayName: string;
+}
 import React from 'react';

package/dist/color-picker/index.js

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
-const ColorPicker = forwardRef((props, forwardRef) => {
-    return (React.createElement("input", { type: 'color', ...forwardRef }));
-});
+import React from 'react';
+const ColorPicker = (props) => {
+    return React.createElement("input", { type: 'color' });
+};
 if (process.env.NODE_ENV !== 'production') {
     ColorPicker.displayName = 'ColorPicker';
 }

package/dist/date-picker/index.d.ts

@@ -1,3 +1,8 @@
 export default DatePicker;
-declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+declare function DatePicker({ type }: {
+    type?: string;
+}): React.JSX.Element;
+declare namespace DatePicker {
+    let displayName: string;
+}
 import React from 'react';

package/dist/date-picker/index.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 /*
     types - default=date,datetime-local,month,time,week
 *
 */
-const DatePicker = forwardRef(({ type = 'date' }, forwardRef) => {
-    return (React.createElement("input", { type: type, ...forwardRef }));
-});
+const DatePicker = ({ type = 'date' }) => {
+    return React.createElement("input", { type: type });
+};
 if (process.env.NODE_ENV !== 'production') {
     DatePicker.displayName = 'DatePicker';
 }

package/dist/error-message/index.js

@@ -13,10 +13,10 @@ const ErrorMessage = ({ as, errors, name, message, render, ...rest }) => {
     return isValidElement(as)
         ? cloneElement(as, props)
         : render
-            ? (render({
+            ? render({
                 message: messageFromRegister || message,
                 messages: types,
-            }))
+            })
             : createElement(as || Fragment, props);
 };
 if (process.env.NODE_ENV !== 'production') {

package/dist/form/BaseForm.d.ts

@@ -1,21 +1,23 @@
-export default BaseForm;
-declare function BaseForm({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
-    initialValues: any;
-    values: any;
-    children: any;
-    onSubmit: any;
-    layout?: string;
-    mode?: string;
-    reValidateMode: any;
-    errors: any;
-    resetOptions: any;
-    criteriaMode: any;
-    shouldFocusError: any;
-    delayError: any;
-    shouldUseNativeValidation: any;
-    shouldUnregister: any;
-}): React.JSX.Element;
-declare namespace BaseForm {
-    let displayName: string;
+import React, { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+interface BaseFormProps<T extends FieldValues> {
+    initialValues?: T;
+    values?: T;
+    children: ReactNode;
+    onSubmit: (values: T) => Promise<any>;
+    mode?: 'onChange' | 'onBlur' | 'onSubmit' | 'all';
+    reValidateMode?: 'onChange' | 'onBlur' | 'onSubmit';
+    errors?: any;
+    resetOptions?: Record<string, any>;
+    criteriaMode?: 'firstError' | 'all';
+    shouldFocusError?: boolean;
+    delayError?: number;
+    shouldUseNativeValidation?: boolean;
+    shouldUnregister?: boolean;
+    className?: string;
 }
-import React from 'react';
+declare const BaseForm: {
+    <T extends FieldValues>({ initialValues: defaultValues, values, children, onSubmit: onFinish, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, className, }: BaseFormProps<T>): React.JSX.Element;
+    displayName: string;
+};
+export default BaseForm;

package/dist/form/BaseForm.js

@@ -1,67 +1,50 @@
-import React from 'react';
-import { FormProvider, useForm } from "react-hook-form";
-import styled from 'styled-components';
-// initialValues: object || async () => fetch('/api-endpoint')
-// values: object
-// children: React elements
-// onSubmit: func (values) => {}
-// layout: vertical | horizontal
-// mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'
-// reValidateMode: onChange | onBlur | onSubmit = 'onChange' 
-// errors: Reactive errors to update the form errors.
-// resetOptions: Option to reset form state update while updating new form values.
-// criteriaMode: Display all validation errors or one at a time. (firstError | all)
-// shouldFocusError: Enable or disable built-in focus management.
-// delayError: 	Delay error from appearing instantly.
-// shouldUseNativeValidation: Use browser built-in form constraint API.
-// shouldUnregister: Enable and disable input unregister after unmount.
-/**
- * defaultValues are cached. To reset them, use the reset API.
- * defaultValues will be included in the submission result by default.
- * values will get updated when values props updates
- * resetOptions: {
-    keepDirtyValues: true, // user-interacted input will be retained
-    keepErrors: true, // input errors will be retained with value update
-  },
- * criteriaMode:{
-    When set to firstError (default), only the first error from each field will be gathered.
-    When set to all, all errors from each field will be gathered.
-  }
- * shouldFocusError:  When set to true (default), and the user submits a form that fails validation, focus is set on the first field with an error.
- * delayError: number
- *
-*/
-const StyledForm = styled.form `
-    &.vertical {
-        .form-item-row {
-            flex-direction: column;
-        }
-    }
-
-    .form-item-row {
-        display: flex;
-    }
-
-    .form-item {
-         margin-bottom: 24px;    
-    }
-`;
-const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, layout = 'vertical', mode = 'onChange', reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }) => {
+import React, { useCallback } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Text } from '@weareconceptstudio/core';
+import classNames from 'classnames';
+const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit: onFinish, mode = 'onChange', reValidateMode = 'onChange', errors, resetOptions, criteriaMode, shouldFocusError, delayError = 0, shouldUseNativeValidation, shouldUnregister, className, }) => {
     const methods = useForm({
-        defaultValues,
-        values,
         mode,
-        reValidateMode,
         errors,
+        values,
+        delayError,
         resetOptions,
         criteriaMode,
+        // @ts-ignore
+        defaultValues,
+        reValidateMode,
         shouldFocusError,
-        delayError,
-        shouldUseNativeValidation,
         shouldUnregister,
+        shouldUseNativeValidation,
     });
+    const onSubmit = useCallback((values) => {
+        return onFinish(values).catch(({ data, status, ...err }) => {
+            if (status === 422) {
+                for (const key in data.errors) {
+                    if (data.errors.hasOwnProperty(key)) {
+                        // @ts-ignore
+                        methods.setError(key, {
+                            type: 'manual',
+                            message: data.errors[key][0],
+                        });
+                    }
+                }
+            }
+            else {
+                methods.setError('root.serverError', {
+                    type: String(status),
+                    message: data?.message || 'serverError',
+                });
+            }
+        });
+    }, [methods, onFinish]);
     return (React.createElement(FormProvider, { ...methods },
-        React.createElement(StyledForm, { onSubmit: methods.handleSubmit(onSubmit), className: layout }, children)));
+        methods.formState.errors.root?.serverError && (React.createElement("div", { className: "global-error-wrap" },
+            React.createElement(Text, { className: 'backend-error', text: methods.formState.errors.root?.serverError.message }),
+            React.createElement(Text, { className: 'frontend-error', text: 'globalError' }))),
+        React.createElement("form", { onSubmit: methods.handleSubmit(onSubmit), className: classNames({
+                [className]: !!className,
+            }) }, children)));
 };
 if (process.env.NODE_ENV !== 'production') {
     BaseForm.displayName = 'BaseForm';

package/dist/form/Builder/index.d.ts

@@ -0,0 +1,9 @@
+export default FormBuilder;
+declare function FormBuilder({ className, onSubmit, formOptions, fields, children }: {
+    className?: string;
+    onSubmit: any;
+    formOptions?: {};
+    fields?: any[];
+    children: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/form/Builder/index.js

@@ -0,0 +1,46 @@
+import React, { useMemo, cloneElement, isValidElement } from 'react';
+import classNames from 'classnames';
+//* Components
+import Form from '../';
+import Input from '../../input';
+import Checkbox from '../../checkbox';
+import Radio from '../../radio';
+import PhoneNumber from '../../phone-number';
+import Select from '../../select';
+import Upload from '../../upload';
+import DatePicker from '../../date-picker';
+import ColorPicker from '../../color-picker';
+//* Style
+import BuilderStyle from './style';
+const formElements = {
+    'input': React.createElement(Input, null),
+    'password': React.createElement(Input.Password, null),
+    'textarea': React.createElement(Input.TextArea, null),
+    'number': React.createElement(Input.Number, null),
+    'checkbox': React.createElement(Checkbox, null),
+    'radio': React.createElement(Radio, null),
+    'phone': React.createElement(PhoneNumber, null),
+    'select': React.createElement(Select, null),
+    'upload': React.createElement(Upload, null),
+    'date': React.createElement(DatePicker, null),
+    'color': React.createElement(ColorPicker, null),
+};
+const FormBuilder = ({ className = '', onSubmit, formOptions = {}, fields = [], children }) => {
+    const elements = useMemo(() => {
+        return fields.map((field, index) => {
+            if (field.fieldType == 'empty') {
+                return (React.createElement("div", { className: 'empty-form-item', ...field.fieldProps }));
+            }
+            else {
+                return isValidElement(formElements[field.fieldType]) ? (React.createElement(Form.Item, { key: index, ...field.labelProps }, cloneElement(formElements[field.fieldType], field.fieldProps))) : null;
+            }
+        });
+    }, [fields]);
+    const classString = classNames('form-builder', {
+        [className]: className,
+    });
+    return (React.createElement(Form, { ...formOptions, onSubmit: onSubmit },
+        React.createElement(BuilderStyle, { className: classString }, elements),
+        children));
+};
+export default FormBuilder;

package/dist/form/Builder/style.d.ts

@@ -0,0 +1,2 @@
+export default BuilderStyle;
+declare const BuilderStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/form/Builder/style.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+const BuilderStyle = styled.div ``;
+export default BuilderStyle;

package/dist/form/Item/index.d.ts

@@ -1,11 +1,13 @@
-export default FormItem;
-declare function FormItem({ label, name, children, rules }: {
-    label: any;
-    name: any;
-    children: any;
-    rules?: {};
-}): React.JSX.Element;
-declare namespace FormItem {
-    let displayName: string;
+import React, { ReactNode } from 'react';
+interface FormItemProps {
+    label?: string;
+    name: string;
+    children: ReactNode;
+    className?: string;
+    errorKey?: string;
+    required?: boolean;
+    requiredMessage?: string;
+    rules?: Array<any>;
 }
-import React from 'react';
+declare const FormItem: React.FC<FormItemProps>;
+export default FormItem;

package/dist/form/Item/index.js

@@ -1,23 +1,30 @@
 import React, { cloneElement, isValidElement } from 'react';
-//* HOC's
-import { useFormContext } from "react-hook-form";
-//* Components
+import lodashGet from 'lodash.get';
+import classNames from 'classnames';
+import { useTranslation } from '@weareconceptstudio/core';
 import ErrorMessage from '../../error-message';
-const FormItem = ({ label, name, children, rules = {} }) => {
-    const { register, getValues } = useFormContext();
-    const innerRef = register(name, rules);
-    return (React.createElement("div", { className: "form-item" },
+import { useInput } from '../hooks/useInput';
+import { useRules } from '../hooks/rules';
+const FormItem = ({ label, name, children, className, errorKey, required = true, requiredMessage, rules = [], }) => {
+    const { translate } = useTranslation();
+    const { formState } = useInput({
+        name,
+        rules: useRules({ rules, required, requiredMessage }),
+        errorKey: errorKey || label,
+    });
+    const hasError = !!lodashGet(formState.errors, name);
+    const classString = classNames('form-item', {
+        [className]: className,
+        'has-error': hasError,
+        disabled: isValidElement(children) && children.props.disabled,
+    });
+    return (React.createElement("div", { className: classString },
         React.createElement("div", { className: "form-item-row" },
-            React.createElement("div", { className: "form-item-label" },
-                React.createElement("label", { htmlFor: name }, label)),
-            React.createElement("div", { className: 'form-item-control' }, isValidElement(children) && cloneElement(children, {
-                ref: innerRef,
-                name,
-                value: getValues()[name]
-            })),
-            React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: 'error-message' }) }))));
+            label ? (React.createElement("div", { className: "form-item-label" },
+                React.createElement("label", { htmlFor: name, "data-required": required },
+                    translate(label),
+                    required ? React.createElement("span", { className: "required-symbol" }, "*") : null))) : null,
+            React.createElement("div", { className: "form-item-control" }, isValidElement(children) && cloneElement(children, { name })),
+            React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: "error-message" }) }))));
 };
-if (process.env.NODE_ENV !== 'production') {
-    FormItem.displayName = 'FormItem';
-}
 export default FormItem;

package/dist/form/hooks/rules.d.ts

@@ -0,0 +1,3 @@
+export function validationPatterns(type: any, pattern: any): any;
+export function useRules(props: any): any[];
+export function mapValidationRules(errorKey: any, rules: any): any;

package/dist/form/hooks/rules.js

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from '@weareconceptstudio/core';
+export const validationPatterns = (type, pattern) => {
+    switch (type) {
+        case 'email':
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/g;
+        case 'number':
+            return /[0-9]/g;
+        default:
+            return pattern;
+    }
+};
+export const useRules = (props) => {
+    return useMemo(() => {
+        let r = [...props.rules];
+        if (props.required) {
+            r.unshift({ required: true, message: props.requiredMessage });
+        }
+        return r;
+    }, [props]);
+};
+export const mapValidationRules = (errorKey, rules) => {
+    const { translate } = useTranslation();
+    return rules?.reduce((acc, rule) => {
+        if (rule.required) {
+            acc.required = rule.message || translate('validateMessages.required', { errorKey: translate(errorKey) });
+        }
+        if (rule.pattern || rule.type) {
+            acc.pattern = { value: validationPatterns(rule.type, rule.pattern), message: rule.message || 'Invalid format' };
+        }
+        if (rule.minLength) {
+            acc.minLength = { value: rule.minLength, message: rule.message || `Minimum length is ${rule.minLength}` };
+        }
+        if (rule.maxLength) {
+            acc.maxLength = { value: rule.maxLength, message: rule.message || `Maximum length is ${rule.maxLength}` };
+        }
+        if (rule.validator) {
+            acc.validate = async (value) => {
+                return (await rule.validator(value)) || rule.message || 'Validation failed';
+            };
+        }
+        return acc;
+    }, {});
+};

package/dist/form/hooks/useEvent.d.ts

@@ -0,0 +1 @@
+export declare const useEvent: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

package/dist/form/hooks/useEvent.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const useEvent = (fn) => {
+    const ref = React.useRef(() => {
+        throw new Error('Cannot call an event handler while rendering.');
+    });
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => ref.current(...args), []);
+};

package/dist/form/hooks/useFormInstance.js

@@ -2,5 +2,8 @@ import React from 'react';
 import { useFormContext } from 'react-hook-form';
 export default function useFormInstance() {
     const methods = useFormContext();
+    if (methods == null) {
+        return null;
+    }
     return { ...methods };
 }

package/dist/form/hooks/useInput.d.ts

@@ -0,0 +1,12 @@
+export declare const useInput: (props: any) => {
+    field: {
+        value: any;
+        onBlur: (...args: unknown[]) => void;
+        onChange: (...args: any[]) => void;
+        disabled?: boolean;
+        name: any;
+        ref: import("react-hook-form").RefCallBack;
+    };
+    fieldState: import("react-hook-form").ControllerFieldState;
+    formState: import("react-hook-form").UseFormStateReturn<import("react-hook-form").FieldValues>;
+};

package/dist/form/hooks/useInput.js

@@ -0,0 +1,46 @@
+import { useController } from 'react-hook-form';
+import { useEvent } from './useEvent';
+import { mapValidationRules } from './rules';
+const defaultFormat = (value) => (value == null ? '' : value);
+const defaultParse = (value) => (value === '' ? null : value);
+export const useInput = (props) => {
+    const { defaultValue, name, onBlur: initialOnBlur, onChange: initialOnChange, format = defaultFormat, parse = defaultParse, multiple, errorKey, rules = [] } = props;
+    const { field: controllerField, fieldState, formState, } = useController({
+        name,
+        defaultValue,
+        rules: mapValidationRules(errorKey, rules),
+    });
+    const onBlur = useEvent((...event) => {
+        controllerField.onBlur();
+        if (initialOnBlur) {
+            initialOnBlur(...event);
+        }
+    });
+    const onChange = useEvent((...event) => {
+        let eventOrValue;
+        if (props.type == 'checkbox' && event[0]?.target?.value === 'on') {
+            eventOrValue = event[0].target.checked;
+        }
+        else if (props.type == 'select') {
+            eventOrValue = multiple ? event[0].map((ev) => ev.value) : event[0]?.value;
+        }
+        else {
+            eventOrValue = event[0]?.target?.value ?? event[0];
+        }
+        controllerField.onChange(parse ? parse(eventOrValue) : eventOrValue);
+        if (initialOnChange) {
+            initialOnChange(...event);
+        }
+    });
+    const field = {
+        ...controllerField,
+        value: format ? format(controllerField.value) : controllerField.value,
+        onBlur,
+        onChange,
+    };
+    return {
+        field,
+        fieldState,
+        formState,
+    };
+};

package/dist/form/index.d.ts

@@ -1,18 +1,7 @@
+import BaseForm from './BaseForm';
+import Item from './Item';
+type FormComponent<T> = typeof BaseForm & {
+    Item: typeof Item;
+};
+declare const Form: FormComponent<any>;
 export default Form;
-declare function Form({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
-    initialValues: any;
-    values: any;
-    children: any;
-    onSubmit: any;
-    layout?: string;
-    mode?: string;
-    reValidateMode: any;
-    errors: any;
-    resetOptions: any;
-    criteriaMode: any;
-    shouldFocusError: any;
-    delayError: any;
-    shouldUseNativeValidation: any;
-    shouldUnregister: any;
-}): import("react").JSX.Element;
-declare namespace Form { }

package/dist/form/index.js

@@ -1,5 +1,6 @@
-import BaseForm from "./BaseForm";
-import Item from "./Item";
+import BaseForm from './BaseForm';
+import Item from './Item';
+// Create the Form object with both BaseForm and Item component
 const Form = BaseForm;
 Form.Item = Item;
 export default Form;