@redneckz/wildless-cms-uni-blocks 0.8.17 → 0.8.19

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -1,15 +1,14 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { Text } from '../../ui-kit/Text/Text';
+import type { CreditFormState } from './ApplicationFormCredit';
 import {
-  CreditFormState,
   ITEMS_CREDIT_AMOUNT,
   ITEMS_CREDIT_TERM,
   MAX_CREDIT_AMOUNT,
   MAX_CREDIT_TERM,
   MIN_CREDIT_AMOUNT,
   MIN_CREDIT_TERM,
-} from './ApplicationFormCredit';
+} from './CreditParameters';
 import type { HandleFormStateChange } from './models';
+import { renderInputRange } from './renderInputRange';
 
 interface RenderCreditParametersProps {
   amount: number;
@@ -41,21 +40,3 @@ export const renderCreditParameters = ({
     })}
   </div>
 );
-
-interface RenderInputRangeProps {
-  label: string;
-  value: number;
-  onChange: (value: number) => void;
-  min: number;
-  max: number;
-  items: string[];
-}
-
-const renderInputRange = (props: RenderInputRangeProps) => (
-  <div className="w-1/2">
-    <label>
-      <Text size="text-m-light">{props.label}</Text>
-    </label>
-    <InputRange {...props} />
-  </div>
-);

package/src/components/ApplicationForm/renderInputRange.tsx

@@ -0,0 +1,20 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface RenderInputRangeProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  items: string[];
+}
+
+export const renderInputRange = (props: RenderInputRangeProps) => (
+  <div className="w-1/2">
+    <label>
+      <Text size="text-m-light">{props.label}</Text>
+    </label>
+    <InputRange {...props} />
+  </div>
+);

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { WedFormState } from './ApplicationFormWed';
-import { HandleFormStateChange } from './models';
+import type { WedFormState } from './ApplicationFormWed';
+import type { HandleFormStateChange } from './models';
 
 interface RenderQuestionsInterestedProps {
   currencyControl: boolean;
@@ -37,7 +37,7 @@ export const renderQuestionsInterested = ({
     </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:border-primary-text focus:border-primary-text"
+      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 })}
     />

package/src/components/ApplicationForm/renderSelects.tsx

@@ -15,7 +15,7 @@ export const renderSelects = ({ acquiringType, regions, region, handleChange }:
     <div className="w-1/2">
       <WrapperSelect
         data={ACQUIRING_TYPES}
-        fieldValue="code"
+        fieldValue="name"
         fieldLabel="name"
         selected={acquiringType}
         setSelected={(value) => handleChange({ acquiringType: value })}
@@ -26,7 +26,7 @@ export const renderSelects = ({ acquiringType, regions, region, handleChange }:
     <div className="w-1/2">
       <WrapperSelect
         data={regions}
-        fieldValue="code"
+        fieldValue="name"
         fieldLabel="name"
         selected={region}
         setSelected={(value) => handleChange({ region: value })}

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import type { ButtonProps } from './ApplicationFormContent';
 
 export const renderSubmitButton = (button?: ButtonProps, className?: string) => {
   const buttonStyle = getRegularButtonClasses({

package/src/components/ApplicationForm/useFormHandlers.ts

@@ -3,30 +3,16 @@ import { Dispatch, SetStateAction } from 'react';
 import type { HandleFormStateChange } from './models';
 
 interface UseFormHandlersProps<T> {
-  formState: Partial<T>;
-  handleSubmit: (data: Partial<T>) => void;
   setFormState: Dispatch<SetStateAction<T>>;
-  typeForm: string;
 }
 
-export const useFormHandlers = <T>({
-  formState,
-  handleSubmit,
-  setFormState,
-  typeForm,
-}: UseFormHandlersProps<T>) => {
+export const useFormHandlers = <T>({ setFormState }: UseFormHandlersProps<T>) => {
   const handleChange: HandleFormStateChange<T> = useCallback(
     (state) => setFormState((oldState) => ({ ...oldState, ...state })),
     [],
   );
 
-  const onSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleSubmit && (await handleSubmit({ ...formState, typeForm }));
-  }, []);
-
   return {
     handleChange,
-    onSubmit,
   };
 };

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -10,7 +10,7 @@ import type { CarouselLinksContent } from './CarouselLinksContent';
 
 export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
 
-const MAX_LINKS_COUNT = 12;
+const MAX_LINKS_COUNT = 10;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({

package/src/components/CarouselLinks/CarouselLinks.ui.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/Video/Video.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "title": "Заголовок блока"
+  }
+}

package/src/components/Video/Video.fixture.tsx

@@ -6,7 +6,7 @@ const VIDEO_CONTENT: VideoContent = {
   previewImg: {
     src: 'video-preview.png',
   },
-  src: 'rshb.webm',
+  url: 'rshb.webm',
 };
 
 export default {

package/src/components/Video/Video.tsx

@@ -1,22 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../hooks/useRouter';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { adjustHref } from '../../utils/adjustHref';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getPaddings } from './getPaddings';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VideoContent } from './VideoContent';
 
 interface VideoProps extends VideoContent, UniBlockProps {}
 
-export const Video = JSX<VideoProps>(({ className, title, src, previewImg, ...rest }) => {
+export const Video = JSX<VideoProps>(({ className, title, url, previewImg, ...rest }) => {
   const router = useRouter();
 
   return (
     <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
       <Headline title={title} headlineVersion="M" />
-      {src ? (
+      {url ? (
         <video
           className="m-auto w-full object-fill"
           preload="metadata"
@@ -24,7 +24,7 @@ export const Video = JSX<VideoProps>(({ className, title, src, previewImg, ...re
           style={{ maxHeight: 524 }}
           controls
         >
-          <source src={adjustHref(router)(src)} />
+          <source src={adjustHref(router)(url)} />
         </video>
       ) : null}
     </BlockWrapper>

package/src/components/Video/Video.ui.json

@@ -6,7 +6,7 @@
   },
   "style": {
     "ui:options": {
-      "minCols": 6
+      "minCols": 3
     }
   }
 }

package/src/components/Video/VideoContent.ts

@@ -1,10 +1,25 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
-/** @title Блок Видео */
+/**
+ * @title Блок Видео
+ * @default {
+ *   "title": "Заголовок блока"
+ * }
+ */
 export interface VideoContent extends TitleProps {
-  /** @title URL */
-  src?: string;
-  /** @title Заставка */
+  /**
+   * @title Ссылка на видео
+   */
+  url?: string;
+  /**
+   * @title Заставка в блоке
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 1004
+   *   },
+   * }
+   */
   previewImg?: Picture;
 }

package/src/hooks/useLink.ts

@@ -1,13 +1,10 @@
 import type { LinkProps } from '../model/LinkProps';
+import type { PreventableEvent } from '../model/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
-interface PreventableEvent {
-  preventDefault: () => void;
-}
-
 interface Clickable {
   onClick(ev?: PreventableEvent): void;
 }

package/src/model/PreventableEvent.ts

@@ -0,0 +1,3 @@
+export interface PreventableEvent {
+  preventDefault: () => void;
+}

package/src/ui-kit/LinkButton/LinkButton.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
   text-l-light bg-white text-primary-text flex w-[316px]
@@ -15,13 +16,12 @@ export type LinkButtonProps = LinkProps & {
 
 export const LinkButton = JSX<LinkButtonProps>(
   ({ text, href = '', target = '', className = '' }) => {
-    if (!text) {
-      return null;
-    }
+    const link = useLink();
+    const adjustedProps = link({ href, target });
 
-    return (
+    return text ? (
       <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
-        <a className={LINK_CLASS_NAME} role="link" href={href} target={target}>
+        <a className={LINK_CLASS_NAME} role="link" {...adjustedProps}>
           <div className="p-0.5">{text}</div>
           <div className="w-6 h-6">
             <Img
@@ -37,6 +37,6 @@ export const LinkButton = JSX<LinkButtonProps>(
         <div className={`${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5`} />
         <div className={`${LINK_BORDER_CLASS_NAME} mt-3 mr-3`} />
       </div>
-    );
+    ) : null;
   },
 );

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -3,7 +3,7 @@ import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
-import type { SwipeListControlType } from './SwipeListControlContent';
+import { getContainerHeight } from './getContainerHeight';
 import type { SwipeContainerProps } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
@@ -22,13 +22,10 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
-  listType?: SwipeListControlType;
 }
 
 const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
 
-const DEFAULT_HEIGHT = '866px';
-
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({
     className = '',
@@ -39,6 +36,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     padding = 0,
     listType = 'horizontal-list',
     snapAlign = 'snap-center',
+    minHeight,
     children,
     onVisibleItemsChange,
     onVisibleIndicesChange,
@@ -67,13 +65,9 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     const isHorizontalList = listType === 'horizontal-list';
     const containerStyle = {
       ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
-      ...(isVerticalList ? { height: DEFAULT_HEIGHT } : {}),
+      ...(isVerticalList ? getContainerHeight(minHeight) : {}),
       gap: `${gap}px`,
     };
-    const itemContainerStyle = {
-      ...(isHorizontalList ? getContainerOffset(padding / 4) : {}),
-      maxHeight: DEFAULT_HEIGHT,
-    };
 
     return (
       <div
@@ -90,7 +84,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
               visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
               isVerticalList ? 'h-full' : '',
             )}
-            style={itemContainerStyle}
+            style={isHorizontalList ? getContainerOffset(padding / 4) : {}}
             activeIndex={activeIndex}
             idx={idx}
             observerOptions={observerOptions}

package/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -20,6 +20,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    minHeight,
     children,
     onVisibleIndicesChange,
     listType = 'horizontal-list',
@@ -42,6 +43,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           padding={padding}
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           listType={listType}
+          minHeight={minHeight}
         >
           {children}
         </SwipeListContainer>

package/src/ui-kit/SwipeListControl/SwipeListControlContent.ts

@@ -1,17 +1,11 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-
-/**
- * @title Вид
- * @enumNames ["Горизонтальный", "Вертикальный"]
- */
-export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+import type { SwipeContainerProps } from './SwipeListControlProps';
 
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlContent {
+export interface SwipeListControlContent extends SwipeContainerProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
-  listType?: SwipeListControlType;
   version?: BlockVersion;
 }

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SwipeListControlType } from './SwipeListControlContent';
+import type { SwipeListControlType } from './SwipeListControlProps';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-5 w-fit',

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,13 +1,24 @@
 import type { SwipeListControlContent } from './SwipeListControlContent';
 
 /**
- * @title Контейнер
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
  */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
+/**
+ * @title Минимальная высота
+ * @enumNames ['Стандартная', 'Маленькая']
+ */
+export type ContainerMinHeight = 866 | 720;
+
 export interface SwipeContainerProps {
-  /** @title Расстояние между элементами */
+  /** @hidden */
   gap?: number;
-  /** @title Отступы */
+  /** @hidden */
   padding?: number;
+  listType?: SwipeListControlType;
+  minHeight?: ContainerMinHeight;
 }
 
 /**

package/src/ui-kit/SwipeListControl/getContainerHeight.ts

@@ -0,0 +1,10 @@
+const HEADER_HEIGHT = 170;
+const FOOTER_HEIGHT = 48;
+const BLOCKS_GAP = 4;
+const PAGE_PADDINGS_X = 20;
+const DEFAULT_HEIGHT = 866;
+
+export const getContainerHeight = (minHeight?: number) => ({
+  height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
+  minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
+});