@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.11

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

@@ -38,7 +38,7 @@ export const Input = JSX<InputProps>(
       <div className={style('relative', className)}>
         <label>
           {label ? (
-            <div className="mb-2">
+            <div className="mb-xs">
               <Text size="text-m" font="font-light">
                 {label}
               </Text>

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

@@ -51,7 +51,7 @@ export const InputRange = JSX<InputRangeProps>((props) => {
         ) : null}
         <input
           className={style(
-            'm-0 mt-2 font-sans text-h3 w-full h-14',
+            'm-0 mt-xs font-sans text-h3 w-full h-14',
             'border border-solid border-gray rounded-md outline-none',
             'p-0 pl-4 box-border',
             'text-primary-text hover:border-primary-hover focus:border-primary-text',

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

@@ -3,7 +3,7 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
 
-const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
+const LINK_CLASS_NAME = `absolute border border-primary-main ml-s px-xl py-lg
   text-l font-light bg-white text-primary-text flex w-[316px]
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
@@ -22,7 +22,7 @@ export const LinkButton = JSX<LinkButtonProps>(
     return text ? (
       <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
         <a className={LINK_CLASS_NAME} role="link" {...adjustedProps}>
-          <div className="p-0.5">{text}</div>
+          <div className="p-3xs">{text}</div>
           <div className="w-6 h-6">
             <Img
               className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"

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

@@ -6,22 +6,22 @@ const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];
 
 export default {
   'primary dotted (default)': (
-    <div className="bg-white p-default">
+    <div className="bg-white p-6xl">
       <List items={items} listItemSize="L" />
     </div>
   ),
   'primary w/o dots': (
-    <div className="bg-white p-default">
+    <div className="bg-white p-6xl">
       <List items={items} isDotted={false} />
     </div>
   ),
   'secondary dotted': (
-    <div className="group bg-primary-main p-default" data-ver="secondary">
+    <div className="group bg-primary-main p-6xl" data-ver="secondary">
       <List items={items} />
     </div>
   ),
   'secondary w/o dots': (
-    <div className="bg-primary-main p-default" data-ver="secondary">
+    <div className="bg-primary-main p-6xl" data-ver="secondary">
       <List items={items} isDotted={false} />
     </div>
   ),

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

@@ -11,9 +11,9 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
-  S: 'ml-2',
-  M: 'ml-3',
-  L: 'ml-4',
+  S: 'ml-xs',
+  M: 'ml-s',
+  L: 'ml-m',
 };
 
 export const List = JSX<ListProps>(
@@ -21,7 +21,7 @@ export const List = JSX<ListProps>(
     items?.length ? (
       <section
         className={style(
-          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          'flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
           TEXT_SIZE_MAP[listItemSize],
           hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
           className,

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

@@ -13,9 +13,9 @@ export interface ListItemProps {
 }
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 mr-4',
-  M: 'w-1.5 h-1.5 mr-3',
-  S: 'w-1 h-1 mr-2',
+  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',
 };
 
 export const ListItem = JSX<ListItemProps>(

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

@@ -106,8 +106,8 @@ const renderRegionGroup =
   (onChangeLocation?: (region: Region) => void) =>
   ([letter, regions]: [string, Region[]]) =>
     (
-      <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
-        <div className="mb-2.5">
+      <div key={letter} className="break-inside-avoid mb-2xl w-[224px]">
+        <div className="mb-s">
           <Text size="text-h6">{letter}</Text>
         </div>
         {regions.map(renderRegion(onChangeLocation))}
@@ -116,7 +116,7 @@ const renderRegionGroup =
 
 const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
   (
-    <div key={region.id} className="mb-1">
+    <div key={region.id} className="mb-2xs">
       <button
         className="cursor-pointer hover:text-primary-hover"
         onClick={() => {
@@ -130,8 +130,8 @@ const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: R
 
 const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (
-    <div className="border-t border-main-divider mt-7 pt-7">
-      <div className="mb-4">
+    <div className="border-t border-main-divider mt-2xs pt-2xs">
+      <div className="mb-m">
         <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>

package/src/ui-kit/Logo/renderTitle.tsx

@@ -8,7 +8,7 @@ const TEXT_COLOR: Record<BgColorVersion, string> = {
 
 export const renderTitle = (title: VNode, bgColor: string, className?: string) => {
   return (
-    <span className={`${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`}>
+    <span className={`${TEXT_COLOR[bgColor]} ml-s font-medium ${className || ''}`}>
       {title || 'Россельхозбанк'}
     </span>
   );

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

@@ -8,7 +8,7 @@ const ComponentWithInput = ({ fractionDigits = 0 }: { fractionDigits?: number })
 
   return (
     <NumberInput
-      className="col-span-2 mt-2"
+      className="col-span-2 mt-xs"
       label="Числовое поле"
       fractionDigits={fractionDigits}
       value={value}

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

@@ -23,7 +23,7 @@ const HTML = `
 
 export default {
   default: (
-    <section className="p-default">
+    <section className="p-6xl">
       <RichText __html={HTML} />
     </section>
   ),

package/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -22,7 +22,7 @@ export const SearchInput = JSX<SearchInputProps>(
 
     return (
       <div className={style('font-sans relative', className)} role="form">
-        <div className="absolute h-full flex items-center pl-4 pointer-events-none">
+        <div className="absolute h-full flex items-center pl-m pointer-events-none">
           <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         <input

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

@@ -49,7 +49,7 @@ export const Select = JSX<SelectProps>(
     return (
       <div className={className} ref={wrapperRef}>
         {label ? (
-          <div className="mb-2">
+          <div className="mb-xs">
             <Text size="text-m" color="text-primary-text" font="font-light">
               {label}
             </Text>

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

@@ -5,7 +5,7 @@ import { Tags } from './Tags';
 const tags = ['Tag #1', 'Tag #2', 'Tag #3', 'Tag #4'];
 
 export default (
-  <div className="bg-white p-default">
+  <div className="bg-white p-6xl">
     <Tags tags={tags} />
   </div>
 );

package/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -1,6 +1,7 @@
 import ymaps from 'yandex-maps';
 import { Icon } from '../Icon/Icon';
 import type { MockPoints } from './mockPoints';
+
 const styles = {
   border: 'border border-transparent rounded-md',
   position: 'relative flex items-center',
@@ -31,7 +32,7 @@ export const renderSearchField = (
   };
 
   return (
-    <div className={`${Object.values(styles).join(' ')} bg-white py-3 pl-11 pr-4 w-full`}>
+    <div className={`${Object.values(styles).join(' ')} bg-white py-s pl-5xl pr-m w-full`}>
       <Icon
         name="LoupeIcon"
         iconVersion="black"

package/src/utils/formatBytes.ts

@@ -0,0 +1,12 @@
+const KILO = 1024;
+const KILO_SIZES = ['байт', 'Кб', 'Мб', 'Гб', 'Тб', 'Пб'];
+
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) {
+    return '';
+  }
+
+  const i = Math.floor(Math.log(bytes) / Math.log(KILO));
+
+  return `${parseFloat((bytes / Math.pow(KILO, i)).toFixed(decimals))} ${KILO_SIZES[i]}`;
+};

package/tailwind.config.cjs

@@ -33,20 +33,23 @@ module.exports = {
     },
     extend: {
       spacing: {
-        xxl: '3rem', // 48px
-        xl: '2.5rem', // 40px
-        lg: '2rem', // 32px
-        m: '1.5rem', // 24px
-        s: '1rem', // 16px
-        xs: '0.5rem', // 8px
-        text: '0.75rem', // 12px
+        '6xl': '3rem', // 48px
+        '5xl': '2.5rem', // 40px
+        '4xl': '2.25rem', // 36px
+        '3xl': '2rem', // 32px
+        '2xl': '1.75rem', // 28px
+        'xl': '1.5rem', // 24px
+        'lg': '1.25rem', // 20px
+        'm': '1rem', // 16px
+        's': '0.75rem', // 12px
+        'xs': '0.5rem', // 8px
+        '2xs': '0.25rem', // 4px
+        '3xs': '0.125rem', // 2px
       },
       padding: {
-        default: '3rem', // 48px
-        lg: '3rem', // 48px
-        m: '2.25rem', // 36px
-        s: '1.5rem', // 24px
-        xs: '0.75rem', // 12px
+        '6xl': '3rem', // 48px
+        '5xl': '2.5rem', // 40px
+        '4xl': '2.25rem', // 36px
       },
       transitionProperty: {
         height: 'height',