@redneckz/wildless-cms-uni-blocks 0.2.93 → 0.2.97

package/src/icons/PercentageSquareWhiteIcon.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M2 13.05V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9M8.32 15.27l6.54-6.54"
+  />
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M8.73 10.37a1.23 1.23 0 1 0 0-2.46 1.23 1.23 0 0 0 0 2.46ZM15.27 16.09a1.23 1.23 0 1 0 0-2.46 1.23 1.23 0 0 0 0 2.46Z"
+  />
+  </svg>

package/src/icons/PlayMarketIcon.svg

@@ -1 +1 @@
-<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M0 21.427V1.576C0 .883.447.284 1.094 0L13.85 11.498 1.089 23a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 0 21.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM3.959.598l13.938 7.253-2.945 2.654L3.958.598Z" fill="#42AB44"/></svg>
+<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M0 21.427V1.576C0 .883.447.284 1.094 0L13.85 11.498 1.089 23a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 0 21.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM3.959.598l13.938 7.253-2.945 2.654L3.958.598Z" fill="currentColor"/></svg>

package/src/model/ButtonVersion.ts

@@ -1,5 +1,6 @@
 /**
  * @title Цвет кнопки
+ * @default primary
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type ButtonVersion = 'primary' | 'secondary';

package/src/model/LinkProps.ts

@@ -1,13 +1,14 @@
 /**
  * @title Таргет (target)
  * @enumNames [
+ *    "",
  *    "self (текущее окно или фрейм)",
  *    "blank (новое окно)",
  *    "parent (фрейм-родитель)",
  *    "top (текущее окно)"
  *  ]
  */
-export type Target = '_blank' | '_self' | '_parent' | '_top';
+export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 
 /**
  * @title Ссылка

package/src/setup-fixture.ts

@@ -1,11 +1,10 @@
 import { setup } from '@redneckz/uni-jsx';
 
-import runtime from 'react/jsx-runtime';
 import { useEffect, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { DaDataAPI } from './api/DaDataAPI';
 import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 
-const { jsx, jsxs } = runtime as any;
 setup(jsx, jsxs);
 
 const TEST_ORIGIN = 'http://localhost:5001';

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.tsx

@@ -2,13 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const listStyleMap: Record<BlockItemVersion, string> = {
-  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',
+  primary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
+  secondary: 'bg-white 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-secondary-text',
+  primary: 'text-secondary-text',
+  secondary: '',
 };
 
 export const BlockItem = JSX<BlockItemProps>(

package/src/ui-kit/Button/ButtonProps.ts

@@ -13,7 +13,10 @@ export interface ButtonAdditionalProps {
 }
 
 export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
-  /** @title Текст */
+  /**
+   * @title Текст
+   * @default Кнопка
+   */
   text?: string;
   version?: ButtonVersion;
 }
@@ -25,4 +28,6 @@ export interface ButtonWithIconProps extends ButtonProps {
   appendLeft?: any;
   /** @hidden */
   rounded?: boolean;
+  /** @hidden */
+  asSVG?: boolean;
 }

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

@@ -15,7 +15,9 @@ export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className
   <div className={className}>
     <label className="flex items-center cursor-pointer relative">
       <input
-        className={`peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`}
+        className={`peer appearance-none w-5 h-5 border-solid border ${
+          checked ? 'border-black' : 'border-main-stroke'
+        } rounded checked:bg-primary-main checked:border-primary-main m-0`}
         type="checkbox"
         onChange={(e) => {
           onChange(e.target.checked);
@@ -24,13 +26,15 @@ export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className
       />
       <SVG
         paths={CHECK_PATHS}
-        className="hidden absolute left-2 ml-px peer-checked:block"
+        className="hidden absolute left-1 ml-px peer-checked:block"
         width="11"
         height="9"
         fill="white"
         viewBox="0 0 11 9"
       />
-      {text ? <span className="font-sans ml-2 text-sm cursor-pointer">{text}</span> : null}
+      {text ? (
+        <span className="font-sans ml-3 text-sm leading-5 cursor-pointer">{text}</span>
+      ) : null}
     </label>
   </div>
 ));

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

@@ -3,7 +3,7 @@ import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
 export const Icon = JSX<IconProps>(
-  ({ className, name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+  ({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {

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

@@ -2,10 +2,12 @@
  * Icons sorted by name
  */
 export enum IconMap {
+  '',
   'ActualBalanceIcon',
   'AppleIcon',
   'CalendarCircleIcon',
   'CalendarIcon',
+  'CalendarWhiteIcon',
   'CardIcon',
   'CardPosIcon',
   'CardTickIcon',
@@ -17,6 +19,7 @@ export enum IconMap {
   'DollarIcon',
   'EmptyWalletChangeIcon',
   'EmptyWalletIcon',
+  'EmptyWalletWhiteIcon',
   'EuroIcon',
   'GlassIcon',
   'GridIcon',
@@ -31,6 +34,7 @@ export enum IconMap {
   'OkIcon',
   'PassSendIcon',
   'PercentageSquareIcon',
+  'PercentageSquareWhiteIcon',
   'PlayMarketIcon',
   'PlusIcon',
   'Profile2UserIcon',
@@ -48,10 +52,12 @@ export enum IconMap {
 /**
  * @title Иконка
  * @enumNames [
+ *    "",
  *    "Деньги",
  *    "Лого «Apple»",
  *    "Скруглённый календарь",
  *    "Календарь",
+ *    "Календарь белый",
  *    "Кред. карта",
  *    "Кред. карта под наклоном",
  *    "Кред. карта с галочкой",
@@ -63,6 +69,7 @@ export enum IconMap {
  *    "Доллар",
  *    "Пустой кошелёк с возвратом",
  *    "Пустой кошелёк",
+ *    "Пустой кошелёк белый",
  *    "Евро",
  *    "Зеркало",
  *    "Сетка",
@@ -77,6 +84,7 @@ export enum IconMap {
  *    "Лого «Одноклассники»",
  *    "Бизнес",
  *    "Проценты",
+ *    "Проценты белые",
  *    "Лого «PlayMarket»",
  *    "Плюс",
  *    "Профиль, 2 персоны",

package/src/ui-kit/Img.tsx

@@ -6,16 +6,29 @@ export interface TextWithImageProps {
   image: Picture;
 }
 
-export const Img = JSX<TextWithImageProps>(({ className, image }) => (
-  <picture className={`${className || ''}`}>
-    {image.sources?.length
-      ? image.sources.map(({ src, format }, index) => (
-          <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-        ))
-      : null}
-    <img src={image.src} alt={image.alt || image.title} title={image.title} {...image?.size} />
-  </picture>
-));
+export const Img = JSX<TextWithImageProps>(({ className, image: { size, ...image } }) => {
+  const style = {
+    width: size?.width ? `${size?.width}px` : '100%',
+    height: size?.height ? `${size?.height}px` : '100%',
+  };
+
+  return (
+    <picture className={`flex-none ${className || ''}`}>
+      {image.sources?.length
+        ? image.sources.map(({ src, format }, index) => (
+            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+          ))
+        : null}
+      <img
+        src={image.src}
+        alt={image.alt || image.title}
+        title={image.title}
+        style={style}
+        {...size}
+      />
+    </picture>
+  );
+});
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;

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

@@ -31,14 +31,15 @@ export const InputRange = JSX<InputRangeProps>(
             </span>
           ) : null}
           <input
-            className={`m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${
-              title ? 'pt-4' : ''
-            }`}
+            className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${
+                          title ? 'pt-4' : ''
+                        }`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 mt-0.5 top-8 px-4">
+          <div className="absolute inset-x-0 top-8 px-4">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -51,9 +52,9 @@ export const InputRange = JSX<InputRangeProps>(
             />
           </div>
         </label>
-        <div className="flex justify-between mt-3 mb-4">
+        <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs text-secondary-text pl-4">
+            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4">
               {item}
             </span>
           ))}

package/src/ui-kit/SearchBar.tsx

@@ -23,8 +23,8 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
       <input
         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%]`}
+          inputHasFocus ? 'border-primary-text' : 'border-main-divider'
+        } h-12 pl-12 w-full font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%]`}
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         onFocus={(e) => setInputHasFocus(true)}
@@ -35,8 +35,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
       {inputHasFocus && (
         <button
           type="submit"
-          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"
+          className="absolute font-sans font-normal cursor-pointer text-sm bg-primary-main 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"
           onClick={(e) => {
             e.preventDefault();
             console.log('click');