@redneckz/wildless-cms-uni-blocks 0.3.95 → 0.4.0

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -3,26 +3,19 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title QR код
- */
-export interface QRCode {
-  /** @title QR код */
-  src?: string;
-  /** @title Ссылка */
-  href?: string;
-}
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Мобильное приложение
  */
 export type MobileAppTileContent = HeadlineCommonProps &
+  HeadingCommonProps &
   ButtonContent &
   ListContent &
   ImageContent & {
     // TODO: description для мобильной версии
-    qr?: QRCode;
+    qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
     version?: BlockVersion;

package/mobile/src/components/Navigation/Navigation.tsx

@@ -23,7 +23,7 @@ export const Navigation = JSX<NavigationProps>(
         }`}
         {...rest}
       >
-        <h2 className="font-medium text-xl-light m-0">{title}</h2>
+        <h2 className="text-xl font-medium m-0">{title}</h2>
         {buttons?.length ? (
           <div className="flex rounded-md overflow-hidden bg-white">
             {buttons

package/mobile/src/components/Navigation/NavigationItem.tsx

@@ -4,7 +4,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 export const NavigationItem = JSX<ButtonProps & { isActive: boolean }>(
   ({ className, text, onClick, href, target, isActive }) => (
     <a
-      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${
+      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-s border border-solid hover:text-primary-main ${
         className || ''
       } ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`}
       onClick={onClick}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -57,18 +57,12 @@ function renderBenefit(benefit: PictureTextBenefit, i: number, version: string)
       ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit?.label ? (
-          <div
-            className={`font-medium text-xl-light m-0 ${
-              version === 'primary' ? 'text-primary-text' : ''
-            }`}
-          >
+          <div className={`text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`}>
             {benefit.label}
           </div>
         ) : null}
         {benefit?.description ? (
-          <div
-            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
-          >
+          <div className={`text-s ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {benefit.description}
           </div>
         ) : null}

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import type { PlaceholderContent } from './PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
@@ -30,7 +30,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           description={description}
           headlineVersion={getTileHeadingType(className)}
         />
-        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -108,5 +108,7 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return (
+    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+  );
 }

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -59,7 +59,7 @@ export const PromoTile = JSX<PromoTileProps>(
           }
         >
           <div className="mt-1.5">
-            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
             <div className="text-l">{description}</div>
           </div>
         </BaseTile>

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -14,7 +15,7 @@ export interface RecommendationProps extends RecommendationContent, UniBlockProp
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ context, recommendations = [], className = '', title, version, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const blockClassName =
       version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -16,7 +16,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
@@ -36,7 +36,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
+              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
@@ -72,18 +73,18 @@ const DATA = {
 
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ context, className = '', ...rest }) => {
-    const [days, setDays] = context.useState(DEFAULT_DAYS);
+    const [days, setDays] = useState(DEFAULT_DAYS);
     const data = DATA;
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
         <div className="flex justify-between align-top mb-6">
           {data?.cities?.length ? (
-            <SafeDepositRentalForm {...data} days={days} setDays={setDays} context={context} />
+            <SafeDepositRentalForm {...data} days={days} setDays={setDays} />
           ) : null}
           <SafeDepositRentalTotal days={days} />
         </div>
-        <p className="text-button font-light text-secondary-text">
+        <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки
         </p>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,3 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
@@ -7,32 +9,29 @@ import { SelectOption } from '../../ui-kit/Select/SelectOption';
 
 export type SafeDepositRentalFormProps = UniBlockProps;
 
-export const SafeDepositRentalForm = ({
-  cities,
-  cellDimensions,
-  cellOptions,
-  days,
-  setDays,
-  context,
-}) => {
-  return (
-    <div className="flex-1 mr-9">
-      {cities.length ? renderCitiesOffices(cities, context) : null}
-      {renderRentalPeriod(days, setDays)}
-      {cellDimensions.length && cellOptions.length
-        ? renderDimensionsOptions(cellDimensions, cellOptions, context)
-        : null}
-      <span className="text-secondary-text font-light">Тип договора</span>
-      <div className="flex justify-between items-center mt-5">
-        {renderRadioButtons(context)}
-        <Button text="Офисы на карте" version="primary" />
+// TODO: Добавить типизацию
+
+export const SafeDepositRentalForm = JSX<any>(
+  ({ cities, cellDimensions, cellOptions, days, setDays }) => {
+    return (
+      <div className="flex-1 mr-9">
+        {cities.length ? <CitiesOffices cities={cities} /> : null}
+        {renderRentalPeriod(days, setDays)}
+        {cellDimensions.length && cellOptions.length ? (
+          <DimensionsOptions cellDimensions={cellDimensions} cellOptions={cellOptions} />
+        ) : null}
+        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <div className="flex justify-between items-center mt-5">
+          <RadioButtons />
+          <Button text="Офисы на карте" version="primary" />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
-const renderCitiesOffices = (cities, context) => {
-  const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+const CitiesOffices = JSX<any>(({ cities }) => {
+  const [selectedCity, setSelectedCity] = useState(cities[0].city);
 
   const setSelected = (_) => setSelectedCity(_);
 
@@ -64,11 +63,11 @@ const renderCitiesOffices = (cities, context) => {
       </div>
     </div>
   );
-};
+});
 
-const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
-  const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
-  const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+const DimensionsOptions = JSX<any>(({ cellDimensions, cellOptions }) => {
+  const [selectedDimension, setSelectedDimension] = useState(cellDimensions[0].dimension);
+  const [selectedOption, setSelectedOption] = useState(cellOptions[0].option);
 
   return (
     <div className="flex justify-between mb-6">
@@ -96,7 +95,7 @@ const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
       </div>
     </div>
   );
-};
+});
 
 interface SelectProps {
   data: any[];
@@ -111,9 +110,9 @@ const renderSelect = (props: SelectProps) => {
 
   return (
     <div>
-      <span className="block font-light text-m mb-2">{label}</span>
+      <span className="block text-m-light mb-2">{label}</span>
       <Select
-        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        className="h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
         value={selected}
         onChange={(_) => setSelected(_)}
       >
@@ -132,14 +131,15 @@ export const renderRentalPeriod = (days, setDays) => {
 
   return (
     <div className="mb-6">
-      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <span className="block text-m-light mb-[3px]">Срок аренды</span>
       <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
     </div>
   );
 };
 
-const renderRadioButtons = (context) => {
-  const [selected, setSelected] = context.useState('option1');
+// TODO: В качестве компонента не годится
+const RadioButtons = JSX<any>(() => {
+  const [selected, setSelected] = useState('option1');
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
 
   return (
@@ -161,4 +161,4 @@ const renderRadioButtons = (context) => {
       />
     </div>
   );
-};
+});

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
 
-        <span className="font-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
 const renderTotal = (label, total, className = '') => {
   return (
     <div className={className}>
-      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="block text-m-light mb-1">{label}</span>
       <span className="text-h3">{total}</span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
@@ -41,7 +41,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
@@ -68,7 +68,7 @@ const renderStepTitle =
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden">
-            {renderIconArea(size, version)}
+            {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
                 className={`min-h-8 h-full w-[2px] ${
@@ -81,7 +81,7 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
+              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
               <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>

package/mobile/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -14,9 +15,9 @@ export interface TabsProps extends TabsContent, UniBlockProps {}
 export const Tabs = JSX<TabsProps>((props) => {
   const { context, className, tabs, page, showCounter } = props;
 
-  const [currentTab, setCurrentTab] = context.useState(tabs ? tabs[0] : undefined);
+  const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  context.useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
     EventBus.inst.fire('tab', { label: selectedTab.id });

package/mobile/src/components/Tabs/renderTab.tsx

@@ -10,7 +10,7 @@ interface RenderTabProps {
 
 type OnTabClick = (tab: Tab) => void;
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
 
 export const renderTab =
   ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
@@ -18,7 +18,7 @@ export const renderTab =
     const isActive = currentTab === tab;
 
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m ${
+    const tabText = `text-m-light ${
       isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
     }`;
     const counterBlockStyle = `${badgeStyle}

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -25,7 +25,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {title ? (
           <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
         ) : null}
-        {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
+        {description ? <div className="mb-5 text-center text-m">{description}</div> : null}
         {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}
       </section>
     );

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -31,8 +31,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
     )}
-    {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
-    {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
+    {label ? <div className="text-xl m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={image} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -41,7 +41,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -18,7 +18,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
     return (
       <TableRowContainer>
         <div
-          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+          className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
             !isLastRow ? 'border-solid' : ''
           }`}
         >

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -28,10 +28,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
     )}
-    {label ? <div className="text-m-sm m-0">{label}</div> : null}
-    {description ? (
-      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
-    ) : null}
+    {label ? <div className="text-s m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text mt-[3px]">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -40,7 +38,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-m-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -50,14 +50,14 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title ? (
-            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
           ) : null}
           {description ? (
-            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
           {items?.length ? (
             <List
-              className="mt-1 text-m-md"
+              className="mt-1 text-m"
               items={items}
               isDotted={isDotted}
               version={listBlockVersion}
@@ -72,7 +72,7 @@ export const TextBlock = JSX<TextBlockProps>(
 function renderIcon(className: string) {
   return (
     <div className="mb-3">
-      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
     </div>
   );
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -83,11 +83,6 @@ function renderList(items, version, isDotted: boolean) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      itemClassName="text-h6 font-light mt-2"
-      version={listVersion}
-    />
+    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
   ) : null;
 }