@infosoftas/s4-orders-js-sdk 0.1.19 → 0.1.21-0

package/src/components/FormFields/AddressField.tsx

@@ -1,62 +1,55 @@
-import { FC } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import { uuidv4 } from '../../utils/helper';
-
-type Props = {
-    name: string;
-    required: boolean;
-    readOnly: boolean;
-    label?: string;
-    errorReqMsg?: string;
-    errors?: {
-        [key: string]: {
-            message?: string;
-        };
-    };
-};
-
-const AddressField: FC<Props> = ({
-    name = 'address',
-    required = false,
-    readOnly = false,
-    label = 'Address',
-    errorReqMsg = 'This field is required!',
-    errors,
-}) => {
-    const { register, setValue, watch } = useFormContext();
-
-    const value = watch(name);
-
-    const id = uuidv4();
-    return (
-        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
-            <textarea
-                id={id}
-                autoComplete="address"
-                placeholder=" "
-                readOnly={readOnly}
-                className={`input-control ${readOnly ? 'read-only' : ''}`}
-                {...register(name, {
-                    required: required ? errorReqMsg : false,
-                })}
-                {...(required
-                    ? {
-                          onBlur: () => {
-                              const newValue = value?.trim() || '';
-                              setValue(name, newValue);
-                          },
-                      }
-                    : '')}
-            />
-            <label className="label-control" htmlFor={id}>
-                {label} {required && <span className="text-error">*</span>}
-            </label>
-            {errors && errors[name] && (
-                <div className="text-error caption">{errors[name].message}</div>
-            )}
-        </div>
-    );
-};
-
-export default AddressField;
+import { FC, useId } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Textarea } from '../ui/textarea';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+};
+
+const AddressField: FC<Props> = ({
+    name = 'address',
+    required = false,
+    readOnly = false,
+    label = 'Address',
+}) => {
+    const { register, getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    const id = useId();
+
+    return (
+        <Field data-invalid={!!error} data-testid={`sdk-${name}-field-id`}>
+            <FieldLabel htmlFor={id}>
+                <span>
+                    {label}
+                    {required && (
+                        <span aria-hidden="true" className="text-destructive">
+                            {' '}
+                            *
+                        </span>
+                    )}
+                </span>
+            </FieldLabel>
+            <Textarea
+                id={id}
+                autoComplete="street-address"
+                readOnly={readOnly}
+                className="read-only:cursor-not-allowed read-only:bg-input/50"
+                aria-invalid={!!error}
+                aria-required={required}
+                required={required}
+                {...register(name, {
+                    setValueAs: (value) =>
+                        typeof value === 'string' ? value.trim() : value,
+                })}
+            />
+            <FieldError errors={[error]} />
+        </Field>
+    );
+};
+
+export default AddressField;

package/src/components/FormFields/EmailField.tsx

@@ -1,58 +1,53 @@
-import { FC } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import { uuidv4 } from '../../utils/helper';
-
-type Props = {
-    name: string;
-    required: boolean;
-    readOnly: boolean;
-    label?: string;
-    errorReqMsg?: string;
-    errorInvalidEmailMsg?: string;
-    errors?: {
-        [key: string]: {
-            message?: string;
-        };
-    };
-};
-
-const EmailField: FC<Props> = ({
-    name = 'email',
-    required = false,
-    readOnly = false,
-    label = 'Email',
-    errorReqMsg = 'This field is required!',
-    errorInvalidEmailMsg = 'Invalid email address!',
-    errors,
-}) => {
-    const { register } = useFormContext();
-    const id = uuidv4();
-    return (
-        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
-            <input
-                id={id}
-                autoComplete="email"
-                placeholder=" "
-                className={`input-control ${readOnly ? 'read-only' : ''}`}
-                readOnly={readOnly}
-                type="email"
-                {...register(name, {
-                    required: required ? errorReqMsg : false,
-                    pattern: {
-                        value: /^[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]+)*@[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]{2,20})+$/i,
-                        message: errorInvalidEmailMsg,
-                    },
-                })}
-            />
-            <label className="label-control" htmlFor={id}>
-                {label} {required && <span className="text-error">*</span>}
-            </label>
-            {errors && errors[name] && (
-                <div className="text-error caption">{errors[name].message}</div>
-            )}
-        </div>
-    );
-};
-
-export default EmailField;
+import { FC, useId } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+};
+
+const EmailField: FC<Props> = ({
+    name = 'email',
+    required = false,
+    readOnly = false,
+    label = 'Email',
+}) => {
+    const { register, getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    const id = useId();
+
+    return (
+        <Field data-invalid={!!error} data-testid={`sdk-${name}-field-id`}>
+            <FieldLabel htmlFor={id}>
+                <span>
+                    {label}
+                    {required && (
+                        <span aria-hidden="true" className="text-destructive">
+                            {' '}
+                            *
+                        </span>
+                    )}
+                </span>
+            </FieldLabel>
+            <Input
+                id={id}
+                type="email"
+                autoComplete="email"
+                readOnly={readOnly}
+                className="read-only:cursor-not-allowed read-only:bg-input/50"
+                aria-invalid={!!error}
+                aria-required={required}
+                required={required}
+                {...register(name)}
+            />
+            <FieldError errors={[error]} />
+        </Field>
+    );
+};
+
+export default EmailField;

package/src/components/FormFields/InputField.tsx

@@ -1,53 +1,52 @@
-import { FC } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import { uuidv4 } from '../../utils/helper';
-import { REQUIRED_VALIDATION_REGEXP } from '../../constants/index';
-
-type Props = {
-    name: string;
-    required: boolean;
-    readOnly: boolean;
-    label?: string;
-    errorReqMsg?: string;
-    errors?: {
-        [key: string]: {
-            message?: string;
-        };
-    };
-};
-
-const NameField: FC<Props> = ({
-    name,
-    required = false,
-    readOnly = false,
-    label = '',
-    errorReqMsg = 'This field is required!',
-    errors,
-}) => {
-    const { register } = useFormContext();
-    const id = uuidv4();
-    return (
-        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
-            <input
-                id={id}
-                autoComplete={name}
-                placeholder=" "
-                readOnly={readOnly}
-                className={`input-control ${readOnly ? 'read-only' : ''}`}
-                {...register(name, {
-                    required: required ? errorReqMsg : false,
-                })}
-                {...(required ? { pattern: REQUIRED_VALIDATION_REGEXP } : '')}
-            />
-            <label className="label-control" htmlFor={id}>
-                {label} {required && <span className="text-error">*</span>}
-            </label>
-            {errors && errors[name] && (
-                <div className="text-error caption">{errors[name].message}</div>
-            )}
-        </div>
-    );
-};
-
-export default NameField;
+import { FC, useId } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+};
+
+const InputField: FC<Props> = ({
+    name,
+    required = false,
+    readOnly = false,
+    label = '',
+}) => {
+    const { register, getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    const id = useId();
+
+    return (
+        <Field data-invalid={!!error} data-testid={`sdk-${name}-field-id`}>
+            <FieldLabel htmlFor={id}>
+                <span>
+                    {label}
+                    {required && (
+                        <span aria-hidden="true" className="text-destructive">
+                            {' '}
+                            *
+                        </span>
+                    )}
+                </span>
+            </FieldLabel>
+            <Input
+                id={id}
+                autoComplete={name}
+                readOnly={readOnly}
+                className="read-only:cursor-not-allowed read-only:bg-input/50"
+                aria-invalid={!!error}
+                aria-required={required}
+                required={required}
+                {...register(name)}
+            />
+            <FieldError errors={[error]} />
+        </Field>
+    );
+};
+
+export default InputField;

package/src/components/FormFields/NameField.tsx

@@ -1,53 +1,52 @@
-import { FC } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import { uuidv4 } from '../../utils/helper';
-import { REQUIRED_VALIDATION_REGEXP } from '../../constants/index';
-
-type Props = {
-    name: string;
-    required: boolean;
-    readOnly: boolean;
-    label?: string;
-    errorReqMsg?: string;
-    errors?: {
-        [key: string]: {
-            message?: string;
-        };
-    };
-};
-
-const NameField: FC<Props> = ({
-    name = 'name',
-    required = false,
-    readOnly = false,
-    label = 'Name',
-    errorReqMsg = 'This field is required!',
-    errors,
-}) => {
-    const { register } = useFormContext();
-    const id = uuidv4();
-    return (
-        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
-            <input
-                id={id}
-                autoComplete="name"
-                placeholder=" "
-                readOnly={readOnly}
-                className={`input-control ${readOnly ? 'read-only' : ''}`}
-                {...register(name, {
-                    required: required ? errorReqMsg : false,
-                })}
-                {...(required ? { pattern: REQUIRED_VALIDATION_REGEXP } : '')}
-            />
-            <label className="label-control" htmlFor={id}>
-                {label} {required && <span className="text-error">*</span>}
-            </label>
-            {errors && errors[name] && (
-                <div className="text-error caption">{errors[name].message}</div>
-            )}
-        </div>
-    );
-};
-
-export default NameField;
+import { FC, useId } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+};
+
+const NameField: FC<Props> = ({
+    name = 'name',
+    required = false,
+    readOnly = false,
+    label = 'Name',
+}) => {
+    const { register, getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    const id = useId();
+
+    return (
+        <Field data-invalid={!!error} data-testid={`sdk-${name}-field-id`}>
+            <FieldLabel htmlFor={id}>
+                <span>
+                    {label}
+                    {required && (
+                        <span aria-hidden="true" className="text-destructive">
+                            {' '}
+                            *
+                        </span>
+                    )}
+                </span>
+            </FieldLabel>
+            <Input
+                id={id}
+                autoComplete="name"
+                readOnly={readOnly}
+                className="read-only:cursor-not-allowed read-only:bg-input/50"
+                aria-invalid={!!error}
+                aria-required={required}
+                required={required}
+                {...register(name)}
+            />
+            <FieldError errors={[error]} />
+        </Field>
+    );
+};
+
+export default NameField;

package/src/components/FormFields/PhoneField.tsx

@@ -1,58 +1,53 @@
-import { FC } from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import { uuidv4 } from '../../utils/helper';
-
-type Props = {
-    name: string;
-    required: boolean;
-    readOnly: boolean;
-    label?: string;
-    errorReqMsg?: string;
-    errorInvalidPhoneMsg?: string;
-    errors?: {
-        [key: string]: {
-            message?: string;
-        };
-    };
-};
-
-const PhoneFiled: FC<Props> = ({
-    name = 'phoneNumber',
-    required = false,
-    readOnly = false,
-    label = 'Phone number',
-    errorReqMsg = 'This field is required!',
-    errorInvalidPhoneMsg = 'Invalid phone address!',
-    errors,
-}) => {
-    const { register } = useFormContext();
-    const id = uuidv4();
-    return (
-        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
-            <input
-                id={id}
-                autoComplete="tel"
-                className={`input-control ${readOnly ? 'read-only' : ''}`}
-                placeholder=" "
-                readOnly={readOnly}
-                type="tel"
-                {...register(name, {
-                    required: required ? errorReqMsg : false,
-                    pattern: {
-                        value: /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]{6,14}$/g,
-                        message: errorInvalidPhoneMsg,
-                    },
-                })}
-            />
-            <label className="label-control" htmlFor={id}>
-                {label} {required && <span className="text-error">*</span>}
-            </label>
-            {errors && errors[name] && (
-                <div className="text-error caption">{errors[name].message}</div>
-            )}
-        </div>
-    );
-};
-
-export default PhoneFiled;
+import { FC, useId } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+};
+
+const PhoneField: FC<Props> = ({
+    name = 'phoneNumber',
+    required = false,
+    readOnly = false,
+    label = 'Phone number',
+}) => {
+    const { register, getFieldState, formState } = useFormContext();
+    const { error } = getFieldState(name, formState);
+    const id = useId();
+
+    return (
+        <Field data-invalid={!!error} data-testid={`sdk-${name}-field-id`}>
+            <FieldLabel htmlFor={id}>
+                <span>
+                    {label}
+                    {required && (
+                        <span aria-hidden="true" className="text-destructive">
+                            {' '}
+                            *
+                        </span>
+                    )}
+                </span>
+            </FieldLabel>
+            <Input
+                id={id}
+                type="tel"
+                autoComplete="tel"
+                readOnly={readOnly}
+                className="read-only:cursor-not-allowed read-only:bg-input/50"
+                aria-invalid={!!error}
+                aria-required={required}
+                required={required}
+                {...register(name)}
+            />
+            <FieldError errors={[error]} />
+        </Field>
+    );
+};
+
+export default PhoneField;