@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/mobile/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -1,75 +1,44 @@
-import type { CreditFormState } from './ApplicationFormCredit';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import type { CreditFormState } from './CreditFormState';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
-import { validate } from './validate';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
-interface RenderCreditDataOrganizationProps extends DataOrganization<CreditFormState> {
-  fullName: string;
-  inn: string;
-  name: string;
-  phone: string;
-  mail: string;
-  annualRevenue: string;
-}
-
-export const renderCreditDataOrganization = ({
-  fullName,
-  inn,
-  name,
-  phone,
-  mail,
-  annualRevenue,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderCreditDataOrganizationProps) => (
+export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Наименование организации"
-        value={fullName}
-        onChange={(value) => handleChange({ fullName: value })}
+        {...field('fullName')}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="ИНН"
-        error={errors['inn']}
-        value={inn}
-        onChange={(value) => handleChange({ inn: value })}
-        onBlur={(value) => handleChangeErrors({ inn: validate('inn', value) })}
+        {...withValidator(field('inn'), innValidator)}
       />
-      <InputControl
+      <PhoneInputControl
         className="shrink-0 text-l w-full mb-3"
         label="Телефон"
-        error={errors['phone']}
-        value={phone}
-        onChange={(value) => handleChange({ phone: value })}
-        onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+        {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
     <div className="w-1/2">
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Годовая выручка, ₽"
-        error={errors['annualRevenue']}
-        value={annualRevenue}
-        onChange={(value) => handleChange({ annualRevenue: value })}
-        onBlur={(value) => handleChangeErrors({ annualRevenue: validate('annualRevenue', value) })}
+        {...withValidator(field('annualRevenue'), defaultValidator)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Контактное лицо"
-        error={errors['name']}
-        value={name}
-        onChange={(value) => handleChange({ name: value })}
-        onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+        {...withValidator(field('name'), nameValidator)}
       />
       <InputControl
         className="shrink-0 text-l w-full mb-3"
         label="Электронная почта"
-        value={mail}
-        onChange={(value) => handleChange({ mail: value })}
+        {...field('mail')}
       />
     </div>
   </div>

package/mobile/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -1,4 +1,7 @@
-import type { CreditFormState } from './ApplicationFormCredit';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CreditFormState } from './CreditFormState';
 import {
   ITEMS_CREDIT_AMOUNT,
   ITEMS_CREDIT_TERM,
@@ -7,36 +10,30 @@ import {
   MIN_CREDIT_AMOUNT,
   MIN_CREDIT_TERM,
 } from './CreditParameters';
-import type { HandleFormStateChange } from './models';
-import { renderInputRange } from './renderInputRange';
 
-interface RenderCreditParametersProps {
-  amount: number;
-  term: number;
-  handleChange: HandleFormStateChange<CreditFormState>;
-}
-
-export const renderCreditParameters = ({
-  amount,
-  term,
-  handleChange,
-}: RenderCreditParametersProps) => (
+export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
   <div className="flex justify-between gap-5 mb-7">
-    {renderInputRange({
-      label: 'Сумма кредита, ₽',
-      value: amount,
-      onChange: (value) => handleChange({ amount: value }),
-      min: MIN_CREDIT_AMOUNT,
-      max: MAX_CREDIT_AMOUNT,
-      items: ITEMS_CREDIT_AMOUNT,
-    })}
-    {renderInputRange({
-      label: 'Срок кредита, месяцев',
-      value: term,
-      onChange: (value) => handleChange({ term: value }),
-      min: MIN_CREDIT_TERM,
-      max: MAX_CREDIT_TERM,
-      items: ITEMS_CREDIT_TERM,
-    })}
+    <div className="w-1/2">
+      <label>
+        <Text size="text-m-light">Сумма кредита, ₽</Text>
+      </label>
+      <InputRange
+        items={ITEMS_CREDIT_AMOUNT}
+        min={MIN_CREDIT_AMOUNT}
+        max={MAX_CREDIT_AMOUNT}
+        {...field('amount')}
+      />
+    </div>
+    <div className="w-1/2">
+      <label>
+        <Text size="text-m-light">Срок кредита, месяцев</Text>
+      </label>
+      <InputRange
+        items={ITEMS_CREDIT_TERM}
+        min={MIN_CREDIT_TERM}
+        max={MAX_CREDIT_TERM}
+        {...field('term')}
+      />
+    </div>
   </div>
 );

package/mobile/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,45 +1,26 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import type { WedFormState } from './ApplicationFormWed';
-import type { HandleFormStateChange } from './models';
+import type { WedFormState } from './WedFormState';
 
-interface RenderQuestionsInterestedProps {
-  currencyControl: boolean;
-  documentaryOperations: boolean;
-  conversionOperations: boolean;
-  text: string;
-  handleChange: HandleFormStateChange<WedFormState>;
-}
+export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormState>) => {
+  const textField = field('text');
 
-export const renderQuestionsInterested = ({
-  currencyControl,
-  documentaryOperations,
-  conversionOperations,
-  text,
-  handleChange,
-}: RenderQuestionsInterestedProps) => (
-  <div className="mb-6">
-    <div className="flex items-center mb-4 gap-6">
-      <Checkbox
-        text="Валютный контроль"
-        checked={currencyControl}
-        onChange={(value) => handleChange({ currencyControl: value })}
-      />
-      <Checkbox
-        text="Документарные операции"
-        checked={documentaryOperations}
-        onChange={(value) => handleChange({ documentaryOperations: value })}
-      />
-      <Checkbox
-        text="Конверсионные операции"
-        checked={conversionOperations}
-        onChange={(value) => handleChange({ conversionOperations: value })}
+  return (
+    <div className="mb-6">
+      <div className="flex items-center mb-4 gap-6">
+        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
+        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
+        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+      </div>
+      <textarea
+        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+        className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
+        value={textField.value}
+        onInput={
+          ((e: { target?: { value?: string } }) =>
+            textField.onChange && textField.onChange(e.target?.value || '')) as any
+        }
       />
     </div>
-    <textarea
-      placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-      className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
-      value={text}
-      onChange={(e) => handleChange({ text: e.target.value })}
-    />
-  </div>
-);
+  );
+};

package/mobile/src/components/ApplicationForm/renderRegion.tsx

@@ -1,35 +1,23 @@
-import { BusinessCardFormState } from './ApplicationFormBusinessCard';
-import { HandleFormStateChange, Select } from './models';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { BusinessCardFormState } from './BusinessCardFormState';
+import { Select } from './models';
 import { SelectControl } from './SelectControl';
-import { validate } from './validate';
+import { defaultValidator } from './validators';
 
-interface RenderRegionProps {
+interface RegionProps {
   regions: Select[];
-  region: string;
-  handleChange: HandleFormStateChange<BusinessCardFormState>;
-  errors: Record<string, string>;
-  handleChangeErrors: (state: any) => void;
+  field: FormFieldRegisterer<BusinessCardFormState>;
 }
 
-export const renderRegion = ({
-  regions,
-  region,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderRegionProps) => (
+export const renderRegion = ({ regions, field }: RegionProps) => (
   <div className="flex justify-between gap-5 mb-5">
     <div className="w-full">
       <SelectControl
-        data={regions}
-        fieldValue="code"
-        fieldLabel="name"
-        error={errors['region']}
-        selected={region}
-        setSelected={(value) => handleChange({ region: value })}
-        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
         label="Регион"
         placeholder="Выберите регион"
+        options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+        {...withValidator(field('region'), defaultValidator)}
       />
     </div>
   </div>

package/mobile/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -1,53 +1,36 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
 import type { Branch } from '../SafeDepositRental/useSafeBoxes';
-import type { CreditFormState } from './ApplicationFormCredit';
-import type { HandleFormStateChange, Select } from './models';
+import type { CreditFormState } from './CreditFormState';
+import type { Select } from './models';
 import { SelectControl } from './SelectControl';
-import { validate } from './validate';
+import { defaultValidator } from './validators';
 
-interface RenderRegionDepartmentProps {
+interface RegionDepartmentProps {
   regions: Select[];
-  region: string;
   branches: Branch[];
-  department: string;
-  handleChange: HandleFormStateChange<CreditFormState>;
-  errors: Record<string, string>;
-  handleChangeErrors: (state: any) => void;
+  field: FormFieldRegisterer<CreditFormState>;
 }
 
-export const renderRegionDepartment = ({
-  regions,
-  region,
-  branches,
-  department,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderRegionDepartmentProps) => (
+export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <SelectControl
-        data={regions}
-        fieldValue="code"
-        fieldLabel="name"
-        error={errors['region']}
-        selected={region}
-        setSelected={(value) => handleChange({ region: value, department: '' })}
-        onValidate={(value) => handleChangeErrors({ region: validate('region', value) })}
         label="Регион"
         placeholder="Выберите регион"
+        options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+        {...withValidator(field('region'), defaultValidator)}
       />
     </div>
     <div className="w-1/2">
       <SelectControl
-        data={branches}
-        fieldValue="branchCode"
-        fieldLabel="address"
-        error={errors['department']}
-        selected={department}
-        setSelected={(value) => handleChange({ department: value })}
-        onValidate={(value) => handleChangeErrors({ department: validate('department', value) })}
         label="Адрес"
         placeholder="Выберите адрес"
+        options={branches.map(({ branchCode = '', address = '' }) => ({
+          key: branchCode,
+          text: address,
+        }))}
+        {...withValidator(field('department'), defaultValidator)}
       />
     </div>
   </div>

package/mobile/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -1,28 +1,10 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
-import type { AcquiringFormState } from './ApplicationFormAcquiring';
-import type { HandleFormStateChange } from './models';
+import type { AcquiringFormState } from './AcquiringFormState';
 
-type SlideCheckboxesProps = {
-  onlineСheckout: boolean;
-  posTerminal: boolean;
-  handleChange: HandleFormStateChange<AcquiringFormState>;
-};
-
-export const renderSlideCheckboxes = ({
-  onlineСheckout,
-  posTerminal,
-  handleChange,
-}: SlideCheckboxesProps) => (
+export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
   <div className="mb-5">
-    <SlideCheckbox
-      value={onlineСheckout}
-      text="Хочу купить онлайн-кассу"
-      onChange={() => handleChange({ onlineСheckout: !onlineСheckout })}
-    />
-    <SlideCheckbox
-      value={posTerminal}
-      text="Хочу купить POS-терминал"
-      onChange={() => handleChange({ posTerminal: !posTerminal })}
-    />
+    <SlideCheckbox text="Хочу купить онлайн-кассу" {...field('onlineCheckout')} />
+    <SlideCheckbox text="Хочу купить POS-терминал" {...field('posTerminal')} />
   </div>
 );

package/mobile/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -1,4 +1,5 @@
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { style } from '../../utils/style';
 import type { SubmitButtonProps } from './ApplicationFormContent';
 
 export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => {
@@ -8,7 +9,7 @@ export const renderSubmitButton = (button?: SubmitButtonProps, className?: strin
   });
 
   return (
-    <button type="submit" className={`p-4 ${buttonStyle} ${className}`}>
+    <button type="submit" className={style('p-4', buttonStyle, className)}>
       {button?.text ? button.text : 'Отправить заявку'}
     </button>
   );

package/mobile/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -1,66 +1,41 @@
-import type { WedFormState } from './ApplicationFormWed';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
-import { validate } from './validate';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+import type { WedFormState } from './WedFormState';
 
-interface RenderWedDataOrganizationProps extends DataOrganization<WedFormState> {
-  fullName: string;
-  name: string;
-  phone: string;
-  mail: string;
-}
-
-export const renderWedDataOrganization = ({
-  fullName,
-  name,
-  phone,
-  mail,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderWedDataOrganizationProps) => (
+export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
   <div>
     <div className="flex justify-between gap-5">
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="Наименование организации"
-          error={errors['fullName']}
-          value={fullName}
-          onChange={(value) => handleChange({ fullName: value })}
-          onBlur={(value) => handleChangeErrors({ fullName: validate('fullName', value) })}
+          {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="ФИО"
-          error={errors['name']}
-          value={name}
-          onChange={(value) => handleChange({ name: value })}
-          onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+          {...withValidator(field('name'), nameValidator)}
         />
       </div>
     </div>
     <div className="flex justify-between gap-5 mb-7">
       <div className="w-1/2">
-        <InputControl
+        <PhoneInputControl
           className="shrink-0 text-l w-full mb-3"
           label="Телефон"
-          error={errors['phone']}
-          value={phone}
-          onChange={(value) => handleChange({ phone: value })}
-          onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+          {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="Электронная почта"
-          error={errors['mail']}
-          value={mail}
-          onChange={(value) => handleChange({ mail: value })}
-          onBlur={(value) => handleChangeErrors({ mail: validate('mail', value) })}
+          {...withValidator(field('mail'), defaultValidator)}
         />
       </div>
     </div>

package/mobile/src/components/ApplicationForm/validators.ts

@@ -0,0 +1,17 @@
+import { pattern } from '../../validation/pattern';
+import { required } from '../../validation/required';
+import { validator } from '../../validation/validator';
+
+const ERROR_MESSAGE = 'Некорректно заполненное поле';
+
+export const defaultValidator = required(ERROR_MESSAGE);
+
+export const nameValidator = validator((_) => typeof _ === 'string' && _.length > 1)(ERROR_MESSAGE);
+
+export const innValidator = validator(
+  (_) => typeof _ === 'string' && (_.length === 10 || _.length === 12),
+)(ERROR_MESSAGE);
+
+export const phoneValidator = pattern(
+  /^(\+7)?[\s-]?\(?[0-9]{3}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/,
+)(ERROR_MESSAGE);

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -15,7 +15,7 @@ interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
+    <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
       {title ? (
         <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}

package/mobile/src/components/Blocks.ts

@@ -1,13 +1,17 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { Carousel } from './Carousel/Carousel';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -15,18 +19,22 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
+  Carousel,
+  CarouselTariffsCard,
   ComparisonTable,
   Footer,
   Header,
   Headline,
+  ImgBlock,
   LinkDocs,
   LinkList,
   MobileAppTile,
+  Placeholder,
   ProductBlock,
   StepsBlock,
   TariffsTable,
   TextBlock,
-  Placeholder,
+  RichTextBlock,
   RollupItem,
   VerticalLayout,
 };

package/mobile/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -24,7 +24,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
+      className={`font-sans text-primary-text bg-white p-default flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />

package/mobile/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}