@redneckz/wildless-cms-uni-blocks 0.13.4 → 0.13.5

package/src/components/Carousel/Carousel.fixture.tsx

@@ -187,6 +187,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -203,6 +204,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({

package/src/components/Carousel/Carousel.tsx

@@ -26,6 +26,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     showDots,
     arrowsPadded = true,
     isGap = true,
+    cardSize = 'normal',
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
@@ -55,7 +56,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderCarouselCards({ noCardBorder, activeIndex, ...rest })}
+            {renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}

package/src/components/Carousel/CarouselContent.ts

@@ -1,5 +1,11 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
 
+/**
+ * @title Размер карточек
+ * @enumNames ["Нормальный", "Большой"]
+ */
+export type CardSizeMode = 'normal' | 'big';
+
 /**
  * @title Карусель
  */
@@ -17,4 +23,5 @@ export type CarouselContent = UniBlockContent & {
   isGap?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
+  cardSize?: CardSizeMode;
 };

package/src/components/Carousel/renderCarouselCards.tsx

@@ -5,14 +5,21 @@ import type { BlockDef } from '../../model/ContentPageDef';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { style } from '../../utils/style';
 import { renderCardHighlight } from './renderCardHighlight';
+import type { CardSizeMode } from './CarouselContent';
 
 const cardBaseStyle = 'relative h-full';
 
+const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
+  normal: 'sm:min-w-96',
+  big: 'sm:min-w-[515px]',
+};
+
 export const renderCarouselCards = ({
   noCardBorder,
   activeIndex,
+  cardSize = 'normal',
   ...rest
-}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number }) => {
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number; cardSize?: CardSizeMode }) => {
   const { blocks: childBlocks } = rest.block || {};
   const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
 
@@ -21,7 +28,11 @@ export const renderCarouselCards = ({
     renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) => (
       <div className={cardWrapperStyle(block, { someCardsHighlighted })}>
         {renderBlock(block, options, {
-          className: cardStyle(block, { someCardsHighlighted, showBorder: !noCardBorder }),
+          className: cardStyle(block, {
+            someCardsHighlighted,
+            showBorder: !noCardBorder,
+            cardSize,
+          }),
           blockIndex,
           isActive: blockIndex === activeIndex,
         })}
@@ -44,11 +55,16 @@ const cardWrapperStyle = (
 
 const cardStyle = (
   _: BlockDef | undefined,
-  { someCardsHighlighted, showBorder }: { someCardsHighlighted?: boolean; showBorder?: boolean },
+  {
+    someCardsHighlighted,
+    showBorder,
+    cardSize = 'normal',
+  }: { someCardsHighlighted?: boolean; showBorder?: boolean; cardSize?: CardSizeMode },
 ) =>
   style(
     cardBaseStyle,
-    'min-w-80 sm:min-w-96',
+    'min-w-80',
+    CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
     someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
     showBorder &&
       'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -21,14 +21,17 @@ const MAX_LINKS_COUNT = 10;
 
 export default {
   default: (
-    <CarouselLinks
-      links={links}
-      title="О Банке"
-      description={description}
-      additionalDescription={additionalDescription}
-      maxLinksCount={MAX_LINKS_COUNT}
-      version="secondary"
-      block={{ type: 'Carousel', blocks: new Array(1).fill(link).flat() }}
-    />
+    <div className="container grid grid-cols-12">
+      <CarouselLinks
+        links={links}
+        title="О Банке"
+        description={description}
+        additionalDescription={additionalDescription}
+        maxLinksCount={MAX_LINKS_COUNT}
+        version="secondary"
+        className="col-span-12"
+        block={{ type: 'Carousel', blocks: new Array(1).fill(link).flat() }}
+      />
+    </div>
   ),
 };

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -53,7 +53,7 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="sm:w-2/3 w-full p-0 sm:p-xs"
+      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -89,7 +89,7 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   description: 'Описание',
   align: 'text-left',
   icon,
-  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
   version: 'secondary',
   socialMedia: socialMediaWithoutText,
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -9,6 +7,8 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -27,20 +27,20 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative group-data-gray:bg-main-divider/50 space-y-m', className)}
-        defaultPadding="p-6xl"
+        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        defaultPadding="p-3xl"
         {...rest}
       >
-        <LinkWrapper href={href} target={target}>
+        <LinkWrapper href={href} target={target} className={'space-y-lg'}>
           <Headline
             title={title}
             description={description}
-            headlineVersion="S"
+            headlineVersion="XS"
             isEmbedded={true}
             align={align}
           />
           {items.length ? (
-            <List className="flex flex-col gap-xs" items={items} listItemSize="S" />
+            <List className="flex flex-col gap-xs" items={items} listItemSize="XS" />
           ) : null}
           {renderIcon(icon)}
           {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}

package/src/components/Headline/headlineVersionStyles.ts

@@ -43,7 +43,7 @@ export const headlineVersionStyles: Record<
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l',
+    descriptionSize: 'text-m',
     descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },

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

@@ -68,7 +68,7 @@ const renderImageContainer = (
   { className, imageAlign }: { className?: string; imageAlign?: Align },
 ) => {
   //TODO Спорное решение
-  const fullWidth = image?.props?.image.size?.width > 400;
+  const fullWidth = image?.props?.image?.size?.width > 400;
 
   return image ? (
     <div

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

@@ -21,6 +21,7 @@ export const Input = JSX<InputProps>(
     onFocus,
     onBlur,
     pattern,
+    autoFocus = false,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -61,6 +62,7 @@ export const Input = JSX<InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             pattern={pattern}
+            autoFocus={autoFocus}
           />
         </label>
         {children}

package/src/ui-kit/Input/InputProps.ts

@@ -14,4 +14,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   onBlur?: () => void;
   valid?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
 }

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

@@ -5,12 +5,14 @@ import { ListItem } from './ListItem';
 import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  XS: 'text-m font-light',
   S: 'text-l font-light',
   M: 'text-h6',
   L: 'text-h5',
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
+  XS: 'ml-2xs',
   S: 'ml-xs',
   M: 'ml-s',
   L: 'ml-m',

package/src/ui-kit/List/ListContent.ts

@@ -1,8 +1,8 @@
 /**
  * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
+ * @enumNames ["Очень маленький", "Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'S' | 'M' | 'L';
+export type ListItemSize = 'XS' | 'S' | 'M' | 'L';
 
 export interface ListContent {
   /** @title Список */

package/src/ui-kit/List/ListItem.tsx

@@ -16,6 +16,7 @@ const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
   M: 'w-1.5 h-1.5 mr-s',
   S: 'w-1 h-1 mr-xs',
+  XS: 'w-1 h-1 mr-xs',
 };
 
 export const ListItem = JSX<ListItemProps>(

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

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
+import { Input } from '../Input/Input';
 
 export interface Option {
   key: string;
@@ -20,6 +22,7 @@ export type SelectProps = LabelProps & {
   isBorder?: boolean;
   placeholder?: string;
   onChange?: (value: Option) => void;
+  isSearch?: boolean;
 };
 
 export const Select = JSX<SelectProps>(
@@ -32,13 +35,19 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     onChange,
+    isSearch = false,
   }) => {
     const [isOpen, { setFalse: close, toggle }] = useBool();
-    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
+    const [searchValue, setSearchValue] = useState('');
+    const reset = useCallback(() => {
+      close();
+      setSearchValue('');
+    }, []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(reset);
 
     const handleChange = useCallback(
       (option: Option) => {
-        close();
+        reset();
         onChange && onChange(option);
       },
       [onChange],
@@ -48,17 +57,11 @@ export const Select = JSX<SelectProps>(
 
     return (
       <div className={className} ref={wrapperRef}>
-        {label ? (
-          <div className="mb-xs">
-            <Text size="text-m" color="text-primary-text" font="font-light">
-              {label}
-            </Text>
-          </div>
-        ) : null}
+        {renderLabel(label)}
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
             className={style(
-              'text-l flex justify-between items-center text-primary-text cursor-pointer',
+              'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
             onClick={toggle}
@@ -73,10 +76,13 @@ export const Select = JSX<SelectProps>(
               height="16"
             />
           </div>
+          {isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null}
           {options?.length ? (
             <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))}
+                {getFilteredOptions(options, searchValue).map(
+                  renderOption(handleChange, isOpen, isSelected),
+                )}
               </div>
             </div>
           ) : null}
@@ -86,6 +92,34 @@ export const Select = JSX<SelectProps>(
   },
 );
 
+const renderLabel = (label?: string) =>
+  label ? (
+    <div className="mb-xs">
+      <Text size="text-m" color="text-primary-text" font="font-light">
+        {label}
+      </Text>
+    </div>
+  ) : null;
+
+const getFilteredOptions = (options: Option[], searchValue: string) => {
+  return searchValue
+    ? options.filter(
+        (_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6,
+      )
+    : options;
+};
+
+const renderSearch = (
+  isOpen: boolean,
+  searchValue: string,
+  setSearchValue: (value: string) => void,
+) =>
+  isOpen ? (
+    <div className={style('absolute top-0 w-full h-full z-20')}>
+      <Input type="text" autoFocus value={searchValue} onChange={setSearchValue} />
+    </div>
+  ) : null;
+
 const renderOption =
   (
     handleChange: (option: Option) => void,

package/bundle/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/Footer/buttonSizeStyles.mobile.js

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonSizeStyles = void 0;
-exports.buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/dist/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":";;AAEa,QAAA,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/lib/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/lib/components/Footer/buttonSizeStyles.mobile.js

@@ -1,5 +0,0 @@
-export const buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/lib/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/src/components/Footer/buttonSizeStyles.mobile.ts

@@ -1,6 +0,0 @@
-import { ButtonSize } from './MediaButton';
-
-export const buttonSizeStyles: { [key in ButtonSize]: string } = {
-  default: 'w-24 h-14',
-  stretched: 'flex-1 h-14',
-};