@redneckz/wildless-cms-uni-blocks 0.10.4 → 0.10.6

package/mobile/src/ui-kit/Select/Select.tsx

@@ -1,58 +1,53 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 
-export interface OptionProps {
+export interface Option {
   key: string;
-  text: string;
+  text?: string;
 }
 
 export type SelectProps = LabelProps & {
   className?: string;
-  value?: OptionProps;
-  onChange: (value: OptionProps) => void;
-  options: OptionProps[];
+  options?: Option[];
+  value?: Option;
+  valid?: boolean;
   isBorder?: boolean;
   placeholder?: string;
-  valid?: boolean;
-  onValidate?: (value: string) => void;
+  onChange?: (value: Option) => void;
 };
 
 export const Select = JSX<SelectProps>(
   ({
     className = '',
-    isBorder = true,
     label,
     options = [],
     value,
-    onChange,
-    placeholder = '',
     valid = true,
-    onValidate,
+    isBorder = true,
+    placeholder = '',
+    onChange,
   }) => {
-    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
-    const [isOpen, setIsOpen] = useState(false);
-    const handleClickOutside = useCallback(() => setIsOpen(false), []);
-    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
-
-    const choiceOption = (option: OptionProps) => {
-      setSelectedItem(option);
-      setIsOpen(false);
-      onChange(option);
-      onValidate && onValidate(option.text);
-    };
+    const [isOpen, { setFalse: close, toggle }] = useBool();
+    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
 
-    const isSelected = (option: OptionProps) => Boolean(option.key === selectedItem.key);
+    const handleChange = useCallback(
+      (option: Option) => {
+        close();
+        onChange && onChange(option);
+      },
+      [onChange],
+    );
 
-    useEffect(() => {
-      setSelectedItem(value || { key: '', text: '' });
-    }, [value]);
+    const isSelected = (option: Option) => option.key === value?.key;
 
     return (
-      <div className={`${className}`} ref={wrapperRef}>
+      <div className={className} ref={wrapperRef}>
         {label ? (
           <div className="mb-2">
             <Text size="text-m" color="text-primary-text" font="font-light">
@@ -60,28 +55,28 @@ export const Select = JSX<SelectProps>(
             </Text>
           </div>
         ) : null}
-        <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
+        <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
-            className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder, valid)}`}
-            onClick={() => setIsOpen(!isOpen)}
+            className={style(
+              'text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer',
+              getBorderStyle(isBorder, valid),
+            )}
+            onClick={toggle}
           >
             <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
-              {selectedItem?.text || placeholder}
+              {formatOption(value) || placeholder}
             </p>
             <Icon
+              className={style('absolute right-3', isOpen ? '' : 'rotate-180')}
               name="ArrowUpIcon"
               width="16"
               height="16"
-              className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`}
             />
           </div>
           {options?.length ? (
-            <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
-              <div
-                className={`bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
-              >
-                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+            <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
+              <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+                {options.map(renderOption(handleChange, isOpen, isSelected))}
               </div>
             </div>
           ) : null}
@@ -91,37 +86,35 @@ export const Select = JSX<SelectProps>(
   },
 );
 
-const renderOptionsStyle = (isOpen: boolean) => (isOpen ? '' : 'overflow-hidden');
-
 const renderOption =
   (
-    choiceOption: (option: OptionProps) => void,
+    handleChange: (option: Option) => void,
     isOpen: boolean,
-    isSelected: (option: OptionProps) => boolean,
+    isSelected: (option: Option) => boolean,
   ) =>
-  (option: OptionProps, i: number) => {
-    return (
+  (option: Option, i: number) =>
+    (
       <div
         key={String(i)}
         onClick={() => {
-          choiceOption(option);
+          handleChange(option);
         }}
         className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative"
       >
-        <span className="min-h-6">{option.text}</span>
+        <span className="min-h-6">{formatOption(option)}</span>
         <Icon
           name="DoneSimpleIcon"
           width="16"
           height="16"
-          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
-            ' ',
-          )}
+          className={style('absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden')}
         />
       </div>
     );
-  };
 
-const getBorderStyle = (isBorder: boolean, valid: boolean) => `
-  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${
-  valid ? ' border-gray' : 'border-error'
-} `;
+const formatOption = (_?: Option): string => _?.text || _?.key || '';
+
+const getBorderStyle = (isBorder: boolean, valid: boolean) =>
+  style(
+    isBorder ? 'border rounded-md hover:border-primary-hover' : '',
+    valid ? ' border-gray' : 'border-error',
+  );

package/mobile/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { Text } from '../Text/Text';
 
 interface SlideCheckboxProps {
@@ -12,25 +13,25 @@ export const SlideCheckbox = JSX<SlideCheckboxProps>(
     <div
       role={type}
       aria-checked={value}
-      className="flex justify-start items-center w-full cursor-pointer mb-4"
+      className="flex justify-start items-center w-full cursor-pointer mb-3"
       onClick={() => onChange && onChange(!value)}
     >
       <div
-        className={`relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${
-          value ? 'bg-primary-main' : 'bg-main-divider'
-        }`}
+        className={style(
+          'relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl',
+          value ? 'bg-primary-main' : 'bg-main-divider',
+        )}
       >
         <div
-          className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${
-            value ? 'left-[50%]' : 'left-[5%]'
-          }`}
+          className={style(
+            'absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full',
+            value ? 'left-[50%]' : 'left-[5%]',
+          )}
         />
       </div>
-      <div>
-        <Text size="text-m" font="font-light" color="text-primary-text">
-          {text}
-        </Text>
-      </div>
+      <Text size="text-l" font="font-light" color="text-primary-text">
+        {text}
+      </Text>
     </div>
   ),
 );

package/mobile/src/validation/and.ts

@@ -0,0 +1,6 @@
+import { ValidationInfo, Validator } from './validator';
+
+export const and =
+  (...validators: Validator[]): Validator =>
+  (data) =>
+    validators.flatMap((_) => _(data)) as ValidationInfo;

package/mobile/src/validation/objectValidator.ts

@@ -0,0 +1,10 @@
+import { ValidationInfo, Validator } from './validator';
+
+export const objectValidator =
+  <VMap extends Record<string, Validator>>(validatorsMap: VMap) =>
+  <O extends Partial<{ [P in keyof VMap]: Parameters<VMap[P]>[0] }>>(o: O): ValidationInfo =>
+    (o &&
+      (Object.entries(validatorsMap).flatMap(([key, validator]) =>
+        validator(o[key]),
+      ) as ValidationInfo)) ||
+    [];

package/mobile/src/validation/pattern.ts

@@ -0,0 +1,4 @@
+import { validator } from './validator';
+
+export const pattern = (regexp: RegExp) =>
+  validator((_) => typeof _ === 'string' && regexp.test(_));

package/mobile/src/validation/required.ts

@@ -0,0 +1,3 @@
+import { validator } from './validator';
+
+export const required = validator((_) => _ !== null && _ !== undefined && _ !== '');

package/mobile/src/validation/validator.ts

@@ -0,0 +1,21 @@
+type ValidationMessage = string;
+
+type ValidationSuccess = [];
+type ValidationErr = [ValidationMessage, ...ValidationMessage[]];
+
+export type ValidationInfo = ValidationSuccess | ValidationErr;
+
+export type Validator<T = any> = (_: T) => ValidationInfo;
+
+export const isValidationSuccess = (info: ValidationInfo): info is ValidationSuccess =>
+  !info?.length;
+export const isValidationErr = (info: ValidationInfo): info is ValidationErr =>
+  Boolean(info?.length);
+
+type Predicate<T = any> = (_: T) => boolean;
+
+export const validator =
+  <T = any>(predicate: Predicate<T>) =>
+  (message: string): Validator<T> =>
+  (_) =>
+    predicate(_) ? [] : [message];

package/mobile/src/validation/withValidator.ts

@@ -0,0 +1,21 @@
+import { ValidationInfo, Validator } from './validator';
+
+interface FieldProps<V> {
+  value?: V;
+  isDirty?: boolean;
+}
+
+export const withValidator = <V, P extends FieldProps<V> = FieldProps<V>>(
+  props: P,
+  validator: Validator<V | undefined>,
+): P & { errors?: ValidationInfo; error?: ValidationInfo[0] } => {
+  const { value, isDirty } = props;
+
+  const errors: ValidationInfo = isDirty ? validator(value) : [];
+
+  return {
+    ...props,
+    errors,
+    error: errors[0],
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -63,8 +63,8 @@
     "bundle",
     "mobile/bundle",
     "fonts",
-    "mobile/src",
     "src",
+    "mobile/src",
     "cosmos-static/icons",
     "tailwind.config.cjs",
     "!**/*.spec.*"

package/src/components/ApplicationForm/AcquiringFormState.ts

@@ -0,0 +1,12 @@
+import type { Option } from '../../ui-kit/Select/Select';
+
+export interface AcquiringFormState {
+  acquiringType?: Option;
+  region?: Option;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  onlineCheckout: boolean;
+  posTerminal: boolean;
+}

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -4,6 +4,7 @@ import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { style } from '../../utils/style';
 import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
 import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import type { ApplicationFormContent } from './ApplicationFormContent';
@@ -26,9 +27,9 @@ const COMPONENTS_MAP = {
 const API = CorporateLeadAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
-  const { className = '', title, typeForm = 'credit', button, link, ...rest } = props;
+  const { className, title, typeForm = 'credit', button, link, ...rest } = props;
 
-  const [responceType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
+  const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
   const handleSubmit = useCallback(async (data: Record<string, string>) => {
     const status = (await API.send(data)) ? 'OK' : 'Fail';
@@ -38,11 +39,11 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   }, []);
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={style('font-sans bg-white p-12 pb-9', className)} {...rest}>
       <div className="container max-w-[978px]">
         {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
-        {COMPONENTS_MAP[typeForm]({ button, link, handleSubmit })}
-        {responceType ? <ResponseNotification responceType={responceType} /> : null}
+        {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}
+        {responseType ? <ResponseNotification responseType={responseType} /> : null}
       </div>
     </BlockWrapper>
   );

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -1,101 +1,73 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import { AcquiringFormState } from './AcquiringFormState';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import { renderAcquiringDataOrganization } from './renderAcquiringDataOrganization';
 import { renderAcquiringRegion } from './renderAcquiringRegion';
 import { renderSlideCheckboxes } from './renderSlideCheckboxes';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-export interface AcquiringFormState {
-  acquiringType: string;
-  region: string;
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-  onlineСheckout: boolean;
-  posTerminal: boolean;
-}
-
-const initialFormState = {
-  acquiringType: 'Торговый эквайринг',
-  region: '',
+const initialFormState: AcquiringFormState = {
+  acquiringType: { key: 'Торговый эквайринг' },
   fullName: '',
   inn: '',
   name: '',
   phone: '',
-  onlineСheckout: false,
+  onlineCheckout: false,
   posTerminal: false,
 };
 
-const errorsInitialState = {
-  acquiringType: '',
-  region: '',
-  fullName: '',
-  inn: '',
-  name: '',
-  phone: '',
-};
+const acquiringValidator = objectValidator({
+  acquiringType: defaultValidator,
+  region: defaultValidator,
+  fullName: defaultValidator,
+  inn: innValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+});
 
 export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
-
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-    useForm<AcquiringFormState>({
-      initialFormState,
-      errorsInitialState,
-      handleSubmit,
-    });
+  const { button, link, onSubmit } = props;
 
-  const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } =
-    formState;
+  const handleSubmit = useCallback(
+    (formState: AcquiringFormState) => {
+      const { acquiringType, region, fullName, inn, name, phone, onlineCheckout, posTerminal } =
+        formState;
 
-  const regions = useGetRegions();
+      isValidationSuccess(acquiringValidator(formState)) &&
+        onSubmit({
+          typeForm: 'acqr',
+          region: region?.text || '',
+          partnerComments: `Вид эквайринга=${
+            acquiringType?.key || ''
+          }/Онлайн касса=${onlineCheckout}/POS-терминал=${posTerminal}`,
+          fullName,
+          inn,
+          name,
+          phone,
+        });
+    },
+    [onSubmit],
+  );
 
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
-    sendForm({
-      typeForm: 'acqr',
-      region: regions.find((_) => _.code === region)?.name || '',
-      partnerComments: `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`,
-      fullName,
-      inn,
-      name,
-      phone,
-    });
-  };
+  const regions = useGetRegions();
 
   return (
-    <form onSubmit={onSubmit} className="container">
+    <form className="container" onSubmit={formProps.onSubmit}>
       <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
-      {renderAcquiringRegion({
-        acquiringType,
-        regions,
-        region,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
+      {renderAcquiringRegion({ regions, field })}
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
-      {renderAcquiringDataOrganization({
-        fullName,
-        inn,
-        name,
-        phone,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
-      {renderSlideCheckboxes({
-        onlineСheckout,
-        posTerminal,
-        handleChange,
-      })}
+      {renderAcquiringDataOrganization(field)}
+      {renderSlideCheckboxes(field)}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />
     </form>

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -1,74 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { BusinessCardFormState } from './BusinessCardFormState';
 import { Footnote } from './Footnote';
 import { renderBusinessCardDataOrganization } from './renderBusinessCardDataOrganization';
 import { renderRegion } from './renderRegion';
 import { renderSubmitButton } from './renderSubmitButton';
-import { useForm } from './useForm';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-export interface BusinessCardFormState {
-  region: string;
-  name: string;
-  phone: string;
-  inn: string;
-  mail: string;
-}
-
-const initialFormState = {
-  region: '',
+const initialFormState: BusinessCardFormState = {
   name: '',
   phone: '',
   inn: '',
   mail: '',
 };
 
-export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, handleSubmit } = props;
+const businessCardValidator = objectValidator({
+  region: defaultValidator,
+  name: nameValidator,
+  phone: phoneValidator,
+  inn: innValidator,
+  mail: defaultValidator,
+});
 
-  const { formState, errors, handleChange, handleChangeErrors, sendForm } =
-    useForm<BusinessCardFormState>({
-      initialFormState,
-      errorsInitialState: initialFormState,
-      handleSubmit,
-    });
+export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: BusinessCardFormState) => {
+      const { region, name, phone, inn, mail } = formState;
+
+      isValidationSuccess(businessCardValidator(formState)) &&
+        onSubmit({
+          typeForm: 'bcrd',
+          region: region?.text || '',
+          name,
+          phone,
+          inn,
+          mail,
+        });
+    },
+    [onSubmit],
+  );
 
-  const { region, name, phone, inn, mail } = formState;
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   const regions = useGetRegions();
 
-  const onSubmit = (e: PreventableEvent) => {
-    e.preventDefault();
-
-    sendForm({
-      typeForm: 'bcrd',
-      region: regions.find((_) => _.code === region)?.name || '',
-      name,
-      phone,
-      inn,
-      mail,
-    });
-  };
-
   return (
-    <form onSubmit={onSubmit} className="container">
-      {renderRegion({
-        regions,
-        region,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
-      {renderBusinessCardDataOrganization({
-        name,
-        phone,
-        inn,
-        mail,
-        handleChange,
-        errors,
-        handleChangeErrors,
-      })}
+    <form className="container" onSubmit={formProps.onSubmit}>
+      {renderRegion({ regions, field })}
+      {renderBusinessCardDataOrganization(field)}
       {renderSubmitButton(button, 'mb-4')}
       <Footnote link={link} />
     </form>