@redneckz/wildless-cms-uni-blocks 0.2.91 → 0.2.94

package/src/components/TextBlock/TextBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
@@ -54,7 +54,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pr-4`}>
+    <div className={`pt-1.5 pl-1 pr-4`}>
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );

package/src/components/TextBlock/TextBlockContent.ts

@@ -18,9 +18,8 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 export interface TextBlockContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Описание */
   description?: string;
-  blockVersion?: TextBlockVersion;
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
+  blockVersion?: TextBlockVersion;
 }

package/src/components/Tile/Tile.example.json

@@ -6,7 +6,9 @@
     "format": "webp",
     "size": {
       "width": 300
-    }
+    },
+    "alt": "Описание картинки",
+    "title": "Подсказка"
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
@@ -14,5 +16,6 @@
       "text": "Подробнее",
       "version": "primary"
     }
-  ]
+  ],
+  "version": "primary"
 }

package/src/components/Tile/Tile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BaseTile } from '../BaseTile/BaseTile';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { TileContent } from '../Tile/TileContent';
 import type { UniBlockProps } from '../../types';
 import { getColSpan } from '../../utils/getColSpan';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { TileContent } from '../Tile/TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -17,16 +17,16 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+      className={`font-sans p-9 box-border ${className || ''} ${
         tileStyleMap[version]
-      } ${getContainerPaddingRight(className)} `}
+      } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
     >
       <BaseTile {...props}>{children}</BaseTile>
     </section>
   );
 });
 
-function getContainerPaddingRight(className: string = '') {
+function getContainerPaddingRight(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 6) {
     return 'pr-9';
@@ -36,3 +36,14 @@ function getContainerPaddingRight(className: string = '') {
     return 'pr-[9.4rem]';
   }
 }
+
+function getContainerMinHeight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'min-h-[300px]';
+  } else if (colSpan <= 8) {
+    return 'min-h-[320px]';
+  } else {
+    return 'min-h-[360px]';
+  }
+}

package/src/content-page-repository/ContentPageRepository.ts

@@ -8,6 +8,7 @@ import { transformContentPage } from './transformContentPage';
 const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
 
+// eslint-disable-next-line max-lines-per-function
 export function ContentPageRepository({
   contentDir = 'content',
   publicDir = 'public',

package/src/hooks/useComparisonTableScroll.ts

@@ -0,0 +1,21 @@
+export const useComparisonTableScroll = <ColData>({
+  colData,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  colData: ColData[];
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}) => {
+  const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = colData?.length && colData.length > colsLengthForScroll;
+  const showNextButton =
+    isScrollAvailable && colData?.length - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+  return { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton };
+};

package/src/hooks/useLink.ts

@@ -2,7 +2,7 @@ import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageC
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref, isURL } from '../utils/url';
 
-const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 
 export function useLink(
   {

package/src/model/TableVersion.ts

@@ -0,0 +1 @@
+export type TableVersion = 'comparison' | 'tariff';

package/src/types.ts

@@ -15,6 +15,15 @@ export interface BlockDef {
   };
 }
 
+export interface Slot {
+  style?: string[];
+  blocks?: BlockDef[];
+}
+
+export interface SlotsMap {
+  header?: Slot;
+}
+
 export interface ContentPageMeta {
   title: string;
   slug: string;
@@ -26,7 +35,8 @@ export interface ContentPageMeta {
 
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
-  blocks?: BlockDef[];
+  blocks?: BlockDef[]; //! for compatibility
+  slots?: SlotsMap;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }

package/src/ui-kit/BlockItem/BlockItem.fixture.tsx

@@ -2,4 +2,11 @@ import '../../setup-fixture';
 
 import { BlockItem } from './BlockItem';
 
-export default <BlockItem text="Совершайте любые личные покупки" />;
+export default {
+  primary: <BlockItem text="Совершайте любые личные покупки" />,
+  'primary without dot': <BlockItem text="Совершайте любые личные покупки" isDotted={false} />,
+  secondary: <BlockItem text="Совершайте любые личные покупки" version="secondary" />,
+  'secondary without dot': (
+    <BlockItem text="Совершайте любые личные покупки" isDotted={false} version="secondary" />
+  ),
+};

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

@@ -1,33 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-type BlockItemVersion = 'primary' | 'secondary';
-export interface BlockItemContent {
-  text?: string;
-}
-
-export interface BlockItemProps extends BlockItemContent {
-  className?: string;
-  version?: BlockItemVersion;
-}
+import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const listStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
+  primary: 'bg-primary-main w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2 rounded-full',
+  secondary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
 };
 
 const textStyleMap: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-white',
+  secondary: 'text-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className, text, children, version = 'primary' }) => {
+  ({ className, isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`inline-block flex ${className || ''}`} role="listitem">
-        <div
-          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
-        ></div>
-        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+        {isDotted && <div className={`inline-block mr-3 ${listStyleMap[version]}`} />}
+        <span className={`text-base font-normal font-sans mr-3 ${textStyleMap[version]}`}>
           {text || children}
         </span>
       </div>

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -0,0 +1,22 @@
+/**
+ * @title Версия списка
+ */
+export type BlockItemVersion = 'primary' | 'secondary';
+
+/**
+ * @title Содержимое элемента блока
+ */
+export interface BlockItemContent {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Параметры элемента блока
+ */
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+  /** @title Маркер */
+  isDotted?: boolean;
+}

package/src/ui-kit/Icon/IconProps.ts

@@ -4,29 +4,45 @@
 export enum IconMap {
   'ActualBalanceIcon',
   'AppleIcon',
+  'CalendarCircleIcon',
   'CalendarIcon',
+  'CardIcon',
+  'CardPosIcon',
+  'CardTickIcon',
   'ClockIcon',
   'ComfortableCompIcon',
   'DiscountShape',
   'DocIcon',
   'DocumentText',
   'DollarIcon',
+  'EmptyWalletChangeIcon',
   'EmptyWalletIcon',
   'EuroIcon',
   'GlassIcon',
   'GridIcon',
+  'JCBIcon',
   'LoupeIcon',
+  'MasterCardIcon',
   'MinusIcon',
+  'MirIcon',
+  'MoneyIcon',
+  'MonitorMobileIcon',
   'NewDocIcon',
   'OkIcon',
   'PassSendIcon',
   'PercentageSquareIcon',
   'PlayMarketIcon',
   'PlusIcon',
+  'Profile2UserIcon',
   'ProfileIcon',
+  'ShieldTickIcon',
   'SignDocsIcon',
   'TelegramIcon',
+  'UnionPayIcon',
+  'UserIcon',
+  'VisaIcon',
   'VKIcon',
+  'WalletIcon',
 }
 
 /**
@@ -34,29 +50,45 @@ export enum IconMap {
  * @enumNames [
  *    "Деньги",
  *    "Лого «Apple»",
+ *    "Скруглённый календарь",
  *    "Календарь",
+ *    "Кред. карта",
+ *    "Кред. карта под наклоном",
+ *    "Кред. карта с галочкой",
  *    "Часы",
  *    "Кресло",
  *    "Скидка",
  *    "Документ",
  *    "Документ с текстом",
  *    "Доллар",
- *    "Кошелек",
+ *    "Пустой кошелёк с возвратом",
+ *    "Пустой кошелёк",
  *    "Евро",
  *    "Зеркало",
  *    "Сетка",
+ *    "JCB",
  *    "Лупа",
+ *    "MasterCard",
  *    "Минус",
+ *    "МИР",
+ *    "Деньги",
+ *    "Монитор и мобильный",
  *    "Новый документ",
  *    "Лого «Одноклассники»",
  *    "Бизнес",
  *    "Проценты",
  *    "Лого «PlayMarket»",
  *    "Плюс",
+ *    "Профиль, 2 персоны",
  *    "Профиль",
+ *    "Безопасность",
  *    "Подписанные документы",
  *    "Лого «Telegram»",
- *    "Лого «VK»"
+ *    "UnionPay",
+ *    "Пользователь",
+ *    "Visa",
+ *    "Лого «VK»",
+ *    "Кошелёк",
  *  ]
  */
 export type IconName = keyof typeof IconMap;

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

@@ -24,7 +24,7 @@ export const InputRange = JSX<InputRangeProps>(
 
     return (
       <div className={className}>
-        <div className="relative">
+        <label className="block relative">
           {title ? (
             <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
               {title}
@@ -50,7 +50,7 @@ export const InputRange = JSX<InputRangeProps>(
               style={inputStyle}
             />
           </div>
-        </div>
+        </label>
         <div className="flex justify-between mt-3 mb-4">
           {items.map((item, i) => (
             <span key={String(i)} className="text-xs text-secondary-text pl-4">

package/src/ui-kit/SearchBar.tsx

@@ -4,6 +4,7 @@ import { Icon } from './Icon/Icon';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+  const [inputHasFocus, setInputHasFocus] = context.useState<boolean>(false);
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
@@ -11,22 +12,31 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           <Icon name="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
-          <span className="font-sans font-normal text-base text-secondary-text">
+          <label
+            htmlFor="search-bar-input"
+            className="font-sans font-normal text-base text-secondary-text"
+          >
             Поиск по сайту
-          </span>
+          </label>
         )}
       </div>
       <input
-        className="pl-12 w-full font-sans font-normal text-base text-black border border-solid border-main-divider rounded h-full box-border outline-none pr-[6%]"
+        id="search-bar-input"
+        className={`${
+          inputHasFocus ? 'border-primary-text' : ''
+        } pr-32 h-12 pl-12 w-full font-sans font-normal text-base text-black border border-solid border-main-divider rounded h-full box-border outline-none pr-[6%]`}
         value={term}
         onChange={(e) => setTerm(e.target.value)}
+        onFocus={(e) => setInputHasFocus(true)}
+        onBlur={(e) => setInputHasFocus(false)}
         type="text"
-        name="s"
+        name="search-bar-input"
       />
-      {term && (
+      {inputHasFocus && (
         <button
           type="submit"
-          className="absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 py-2 rounded top-1 right-1 outline-none"
+          version="primary"
+          className="absolute font-sans font-normal cursor-pointer text-sm hover:bg-primary-hover active:bg-primary-active border-none px-9 py-[9px] rounded top-1 right-1 outline-none text-secondary-text text-white bg-primary-main"
           onClick={(e) => {
             e.preventDefault();
             console.log('click');