@redneckz/wildless-cms-uni-blocks 0.14.531 → 0.14.533

package/mobile/src/ui-kit/Button/Button.tsx

@@ -6,10 +6,6 @@ import { type ControlStateProps } from '../ControlStateProps';
 import type { PreventableEvent } from '../PreventableEvent';
 import { useButton } from './useButton';
 
-const activeButtonStyleMap = 'text-white bg-primary-active';
-
-const disabledButtonStyle = 'bg-main-gray text-main-disabled cursor-not-allowed';
-
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
@@ -57,12 +53,14 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
       className={style(
         'font-sans px-9 py-4',
         'flex justify-center items-center gap-xs',
-        active ? activeButtonStyleMap : '',
-        disabled ? disabledButtonStyle : '',
+        {
+          'text-white bg-primary-active': active,
+          'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          'rounded-md': rounded,
+        },
         !active && !disabled
           ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
           : '',
-        rounded ? 'rounded-md' : '',
         className,
       )}
       type={type}

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -82,4 +82,4 @@ const getCursorStyle = (disabled = false) => (disabled ? 'cursor-not-allowed' :
 
 const role = (isRadio = false) => (isRadio ? 'radio' : 'checkbox');
 
-const checkboxStyle = (value = false) => style('rounded border', value ? 'bg-primary-main' : '');
+const checkboxStyle = (value = false) => style('rounded border', { 'bg-primary-main': value });

package/mobile/src/ui-kit/DatePicker/renderCalendarCells.tsx

@@ -71,6 +71,8 @@ const checkIsDisabled = (currentDate: Date, min: Date | undefined, max: Date | u
 const getDayStyles = (isToday: boolean | undefined, isDisabled: boolean | undefined) =>
   style(
     'p-s text-center rounded-md border',
-    isToday ? '' : 'border-transparent hover:bg-gray',
+    {
+      'border-transparent hover:bg-gray': !isToday,
+    },
     isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer',
   );

package/mobile/src/ui-kit/DialogManager/DialogManager.tsx

@@ -46,7 +46,9 @@ export const DialogManager = JSX(() => {
           key={String(id || i)}
           className={style(
             'absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar bg-black/50',
-            i === dialogs.length - 1 ? '' : 'hidden',
+            {
+              hidden: i !== dialogs.length - 1,
+            },
           )}
         >
           {dialog}

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -53,7 +53,9 @@ export const Icon = JSX<IconProps>(
           className={style(
             getSvgSize(width),
             svgUseStyleMap[iconVersion],
-            iconVersion === 'white' ? 'invert' : '',
+            {
+              invert: iconVersion === 'white',
+            },
             imageClassName,
           )}
           width={width}

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -24,10 +24,9 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={style(
-                'rounded-md px-4 py-3 cursor-pointer',
-                idx === activeTabIndex ? 'bg-primary-main' : '',
-              )}
+              className={style('rounded-md px-4 py-3 cursor-pointer', {
+                'bg-primary-main': idx === activeTabIndex,
+              })}
               onClick={() => setActiveTabIndex(idx)}
             >
               <Text size="text-xl" font="font-light" color={TableColor(idx === activeTabIndex)}>

package/mobile/src/ui-kit/InnerTable/renderInnerTableRow.tsx

@@ -47,7 +47,7 @@ export const renderInnerTableRow =
 
 const renderCols = (cols: string[], rowIndex: number) =>
   cols?.length > 0 ? (
-    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
+    <div className={style('flex', { 'text-secondary-text': rowIndex === 0 })}>
       {cols.map((data, i) => (
         <div key={String(i)} className="w-20 mx-lg">
           <Text size="text-h6" font="font-light">

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

@@ -39,7 +39,9 @@ const getButtonStyle = (props: LinkButtonContent) => {
   return style(
     'group/btn items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto',
-    rounded ? 'rounded-full' : '',
+    {
+      'rounded-full': rounded,
+    },
   );
 };
 

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

@@ -86,7 +86,7 @@ export const Select = JSX<SelectProps>(
 
 const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
   <Icon
-    className={style('absolute right-3 flex self-center', isOpen ? '' : 'rotate-180')}
+    className={style('absolute right-3 flex self-center', { 'rotate-180': !isOpen })}
     iconVersion={iconVersion}
     name="ArrowUpIcon"
     width="16"

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

@@ -42,10 +42,9 @@ export const SelectPopup = JSX<SelectPopupProps>(
               width="16"
               height="16"
               iconVersion={iconVersion}
-              className={style(
-                'absolute right-4 pt-3xs',
-                option.key === value?.key ? '' : 'hidden',
-              )}
+              className={style('absolute right-4 pt-3xs', {
+                hidden: option.key !== value?.key,
+              })}
             />
           </div>
         ))}

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

@@ -86,7 +86,9 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
             className={style(
               snapAlign,
               visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
-              isVerticalList ? 'h-full' : '',
+              {
+                'h-full': isVerticalList,
+              },
               itemClassName,
             )}
             style={isHorizontalList ? getContainerOffset(padding / 4) : {}}

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -45,7 +45,9 @@ const getLinkStyle = (active = false, flat = false) =>
     active
       ? 'rounded-md border-primary-main group-data-transparent:border-white'
       : 'border-transparent',
-    flat ? '' : 'px-m py-xs',
+    {
+      'px-m py-xs': !flat,
+    },
   );
 
 const getTextStyle = (active = false, flat = false) => {

package/mobile/src/utils/style.ts

@@ -1,5 +1,3 @@
-import { t0, t1 } from './fp/tuple';
-
 type Falsy = null | undefined | false | 0 | '';
 type Atom = string | Falsy;
 
@@ -8,12 +6,16 @@ type StyleElement = Atom | Atom[] | StyleRecord;
 
 export const style = (...atoms: StyleElement[]): string =>
   atoms
-    .map((_) => (isStyleRecord(_) ? styleRecordToAtoms(_) : _))
+    .map((_) =>
+      isStyleRecord(_)
+        ? Object.entries(_)
+            .filter(([, v]) => v)
+            .map(([k]) => k)
+        : _,
+    )
     .flatMap((_) => _)
     .filter(Boolean)
     .join(' ');
 
-const styleRecordToAtoms = (_: StyleRecord) => Object.entries(_).filter(t1()).map(t0());
-
 const isStyleRecord = (_: StyleElement): _ is StyleRecord =>
   Boolean(_ && typeof _ === 'object' && !Array.isArray(_));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.531",
+  "version": "0.14.533",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -11,11 +11,9 @@ export const renderBonusBenefit =
     (
       <div
         key={String(i)}
-        className={style(
-          'flex flex-col gap-1',
-          bonusBenefitStyles,
-          !description && !title ? 'justify-center' : '',
-        )}
+        className={style('flex flex-col gap-1', bonusBenefitStyles, {
+          'justify-center': !description && !title,
+        })}
       >
         {title ? (
           <Text size="text-h6" font="font-normal" align={cardTextAlign}>

package/src/components/DepositFiltration/isRateRow.ts

@@ -3,6 +3,5 @@ export interface RateRow {
   maxMonths: number;
 }
 
-export const isRateRow = (rateRow: Partial<RateRow> | undefined): rateRow is RateRow => {
-  return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
-};
+export const isRateRow = (rateRow: Partial<RateRow> | undefined): rateRow is RateRow =>
+  typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -56,6 +56,5 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   },
 );
 
-const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) => {
-  return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id as number)) || [];
-};
+const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) =>
+  currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id as number)) || [];

package/src/components/Footer/SocialMedia.tsx

@@ -42,8 +42,11 @@ export const SocialMedia = JSX<SocialMediaProps>(
     });
 
     const buttonClassName = style(
-      'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
-      showButtonText && hasText ? '' : 'basis-auto',
+      'border border-solid hover:border-transparent border-main-divider',
+      'group-data-primary:border-main-divider group-data-gray:border-green group/media',
+      {
+        'basis-auto': !showButtonText && !hasText,
+      },
       getStretchedStyle(stretched),
     );
 

package/src/components/Header/DropdownMenu.tsx

@@ -83,19 +83,12 @@ export const DropdownMenu = JSX<DropdownMenuProps>(
         </button>
         <div
           ref={dropdownRef}
-          className={style(
-            'absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40',
-            isVisible ? '' : 'hidden',
-          )}
+          className={style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', {
+            hidden: !isVisible,
+          })}
           aria-hidden={!isVisible}
         >
-          {items?.map((item, i) => (
-            <DropdownMenuItem
-              key={item?.text ?? String(i)}
-              isActive={item === activeItem}
-              {...item}
-            />
-          ))}
+          {renderDropdownItems(items, activeItem)}
         </div>
       </div>
     );
@@ -108,10 +101,9 @@ export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isAct
 
   return (
     <a
-      className={style(
-        'text-l font-light pb-m hover:text-primary-main',
-        isActive ? 'text-primary-main' : '',
-      )}
+      className={style('text-l font-light pb-m hover:text-primary-main', {
+        'text-primary-main': isActive,
+      })}
       href={href}
       target={target}
       onClick={onClick}
@@ -123,3 +115,8 @@ export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isAct
     </a>
   );
 });
+
+const renderDropdownItems = (items: LinkProps[], activeItem?: LinkProps) =>
+  items?.map((item, i) => (
+    <DropdownMenuItem key={item?.text ?? String(i)} isActive={item === activeItem} {...item} />
+  ));

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -60,7 +60,9 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
       >
         <Img
           image={image}
-          className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
+          className={style('h-full', {
+            'bg-main-divider/20 rounded-full': isRounded,
+          })}
           imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
         />
       </button>

package/src/components/Headline/Headline.tsx

@@ -28,7 +28,7 @@ export const Headline = JSX<HeadlineProps>(
 
     return (
       <BlockWrapper
-        className={style(isEmbedded ? '@container-normal' : '', className)}
+        className={style({ '@container-normal': isEmbedded }, className)}
         defaultPadding={isEmbedded ? '' : 'p-6xl'}
         version={version}
         isTheme={isTheme}

package/src/components/LinkDocs/LinkDocs.tsx

@@ -96,6 +96,4 @@ const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
   ) : null;
 };
 
-const isLinkDoc = (data: LinkDocDef | AttachmentDocDef): data is LinkDocDef => {
-  return 'href' in data;
-};
+const isLinkDoc = (data: LinkDocDef | AttachmentDocDef): data is LinkDocDef => 'href' in data;

package/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -91,11 +91,9 @@ export const renderFoldButton =
     );
   };
 
-const renderBtnInner = (): VNode => {
-  return (
-    <div className="flex items-center">
-      Очистить фильтр
-      <Icon name="CloseIcon" width="16" height="16" className="ml-2xs" />
-    </div>
-  );
-};
+const renderBtnInner = (): VNode => (
+  <div className="flex items-center">
+    Очистить фильтр
+    <Icon name="CloseIcon" width="16" height="16" className="ml-2xs" />
+  </div>
+);

package/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -35,15 +35,13 @@ export const renderRemoteWorkplaceCard = (
       </div>
       <Foldable
         className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              {renderCardContent({
-                workScheduleDescription,
-              })}
-            </FoldableSection>
-          );
-        }}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection isUnfolded={isUnfolded}>
+            {renderCardContent({
+              workScheduleDescription,
+            })}
+          </FoldableSection>
+        )}
         //** TODO: remove styles with refactoring  DefaultFoldButton*/
         renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
       />

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -25,8 +25,10 @@ export function renderBackwardButton({
 
   const bgBackwardButton = version === 'primary' ? 'bg-primary-main' : 'bg-white';
 
+  const visible = alwaysVisible ? 'flex' : 'hidden sm:flex';
+
   return (
-    <div className={style(alwaysVisible ? 'flex' : 'hidden sm:flex', 'items-center gap-s')}>
+    <div className={style(visible, 'items-center gap-s')}>
       <div
         className={style(getRegularButtonClasses({ className, rounded: true }), bgBackwardButton)}
         onClick={handleClick}

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -19,30 +19,28 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     safeBoxCases = [],
     selectedBoxSize,
     onSelectedBoxSize,
-  }) => {
-    return (
-      <div className="flex flex-col @xl:flex-row gap-m order-1">
-        <div className="flex-1 min-w-0">
-          <WrapperSelect
-            data={caseVolumes}
-            fieldLabel="volume"
-            selected={selectedCaseVolume}
-            setSelected={onSelectedCaseVolume}
-            label="Размер"
-            placeholder="Выберите размер"
-          />
-        </div>
-        <div className="flex-1 min-w-0">
-          <WrapperSelect
-            data={safeBoxCases}
-            fieldLabel="safeBoxCasesSize"
-            selected={selectedBoxSize}
-            setSelected={onSelectedBoxSize}
-            label="Параметры ячейки, мм (ВхШхД)"
-            placeholder="Выберите параметр ячейки"
-          />
-        </div>
+  }) => (
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
+        <WrapperSelect
+          data={caseVolumes}
+          fieldLabel="volume"
+          selected={selectedCaseVolume}
+          setSelected={onSelectedCaseVolume}
+          label="Размер"
+          placeholder="Выберите размер"
+        />
       </div>
-    );
-  },
+      <div className="flex-1 min-w-0">
+        <WrapperSelect
+          data={safeBoxCases}
+          fieldLabel="safeBoxCasesSize"
+          selected={selectedBoxSize}
+          setSelected={onSelectedBoxSize}
+          label="Параметры ячейки, мм (ВхШхД)"
+          placeholder="Выберите параметр ячейки"
+        />
+      </div>
+    </div>
+  ),
 );

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -31,43 +31,36 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     caseVolumes,
     onChange,
     onClick,
-  }) => {
-    return (
-      <div className="contents @xl:block flex-1 space-y-xl">
-        <RegionsAndBranches
-          regions={regions}
-          selectedRegion={selectedRegion}
-          onSelectedRegion={(value) => onChange({ selectedRegion: value })}
-          branches={branches}
-          selectedBranch={selectedBranch}
-          onSelectedBranch={onSelectedBranch(onChange)}
-        />
-        <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
-        <SafeBoxCases
-          caseVolumes={caseVolumes}
-          selectedCaseVolume={selectedCaseVolume}
-          onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
-          safeBoxCases={safeBoxCases}
-          selectedBoxSize={selectedBoxSize}
-          onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
-        />
-        <div className="order-4">
-          <Text size="text-l" font="font-light" color="text-secondary-text">
-            Тип договора
-          </Text>
-        </div>
-        <div className="contents @md:flex justify-between items-center gap-m">
-          <RadioButtons />
-          <LinkButton
-            text="Офисы на карте"
-            version="primary"
-            onClick={onClick}
-            className="order-6"
-          />
-        </div>
+  }) => (
+    <div className="contents @xl:block flex-1 space-y-xl">
+      <RegionsAndBranches
+        regions={regions}
+        selectedRegion={selectedRegion}
+        onSelectedRegion={(value) => onChange({ selectedRegion: value })}
+        branches={branches}
+        selectedBranch={selectedBranch}
+        onSelectedBranch={onSelectedBranch(onChange)}
+      />
+      <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
+      <SafeBoxCases
+        caseVolumes={caseVolumes}
+        selectedCaseVolume={selectedCaseVolume}
+        onSelectedCaseVolume={onSelectedCaseVolume(onChange)}
+        safeBoxCases={safeBoxCases}
+        selectedBoxSize={selectedBoxSize}
+        onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
+      />
+      <div className="order-4">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
+          Тип договора
+        </Text>
       </div>
-    );
-  },
+      <div className="contents @md:flex justify-between items-center gap-m">
+        <RadioButtons />
+        <LinkButton text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
+      </div>
+    </div>
+  ),
 );
 
 const onSelectedBranch = (onChange: HandleFormStateChange) => (value: string) => {

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -36,16 +36,14 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
   );
 });
 
-const renderTotal = (label: string, total: string | number) => {
-  return (
-    <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
-      <Text size="text-l" font="font-light" color="text-secondary-text">
-        {label}
-      </Text>
-      <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
-    </div>
-  );
-};
+const renderTotal = (label: string, total: string | number) => (
+  <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
+      {label}
+    </Text>
+    <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
+  </div>
+);
 
 const calculatePrice = (days: number, tariffs: Tariff[]) => {
   const tariffType = getTariffType(days);