@redneckz/wildless-cms-uni-blocks 0.3.21 → 0.3.24

package/mobile/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -8,6 +8,13 @@ import type { ProductTileContent } from '../../components/ProductTile/ProductTil
 import type { TextBlockContent } from '../../components/TextBlock/TextBlockContent';
 import type { TileContent } from '../../components/Tile/TileContent';
 import type { LinkListContent } from '../../components/LinkList/LinkListContent';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  blocks?: BlockDef[];
+  initialState?: boolean;
+}
 
 /**
  * @title Количество колонок
@@ -15,74 +22,65 @@ import type { LinkListContent } from '../../components/LinkList/LinkListContent'
  */
 export type ColumnsCount = 1 | 2;
 
-/**
- * @title Тип блока
- */
-export type BlockDefType =
-  | 'Headline'
-  | 'LinkDocs'
-  | 'TextBlock'
-  | 'PictureText'
-  | 'Tile'
-  | 'ProductTile'
-  | 'ProductBlock'
-  | 'Gallery'
-  | 'MiniGallery'
-  | 'LinkList';
-
-interface BaseBlockDef {
-  blockListType: BlockDefType;
-}
-
 /**
  * @title Заголовок
+ * @default {"blockListType": "Headline"}
  */
-export type HeadlineBlockListDef = HeadlineContent & BaseBlockDef;
+export type HeadlineBlockListDef = HeadlineContent & { blockListType: 'Headline' };
 
 /**
  * @title Список документов
+ * @default {"blockListType": "LinkDocs"}
  */
-export type LinkDocsBlockListDef = LinkDocsContent & BaseBlockDef;
+export type LinkDocsBlockListDef = LinkDocsContent & { blockListType: 'LinkDocs' };
 
 /**
  * @title Текстовый блок
+ * @default {"blockListType": "TextBlock"}
  */
-export type TextBlockBlockListDef = TextBlockContent & BaseBlockDef;
+export type TextBlockBlockListDef = TextBlockContent & { blockListType: 'TextBlock' };
 
 /**
  * @title Картинка с текстом
+ * @default {"blockListType": "PictureText"}
  */
-export type PictureTextBlockListDef = PictureTextContent & BaseBlockDef;
+export type PictureTextBlockListDef = PictureTextContent & { blockListType: 'PictureText' };
 
 /**
  * @title Продуктовый блок
+ * @default {"blockListType": "ProductBlock"}
  */
-export type ProductBlockBlockListDef = ProductBlockContent & BaseBlockDef;
+export type ProductBlockBlockListDef = ProductBlockContent & { blockListType: 'ProductBlock' };
 
 /**
  * @title Плитка
+ * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & BaseBlockDef;
+export type TileBlockListDef = TileContent & { blockListType: 'Tile' };
 
 /**
  * @title Продуктовая плитка
+ * @default {"blockListType": "ProductTile"}
  */
-export type ProductTileBlockListDef = ProductTileContent & BaseBlockDef;
+export type ProductTileBlockListDef = ProductTileContent & { blockListType: 'ProductTile' };
 
 /**
  * @title Галлерея
+ * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & BaseBlockDef;
+export type GalleryBlockListDef = GalleryContent & { blockListType: 'Gallery' };
 
 /**
  * @title Мини-галлерея
+ * @default {"blockListType": "MiniGallery"}
  */
-export type MiniGalleryBlockListDef = MiniGalleryContent & BaseBlockDef;
+export type MiniGalleryBlockListDef = MiniGalleryContent & { blockListType: 'MiniGallery' };
 
 /**
  * @title Список ссылок
+ * @default {"blockListType": "LinkList"}
  */
-export type LinkListBlockListDef = LinkListContent & BaseBlockDef;
+export type LinkListBlockListDef = LinkListContent & { blockListType: 'LinkList' };
 
 /**
  * @title Выберите блок

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,19 +2,27 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
+import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
+  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
+export const renderBlocksList = ({
+  blocks,
+  context,
+  className,
+  columns,
+  version,
+}: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
 
 export const renderBlock =
-  ({ context, columns, className }: EmbeddableBlocksProps) =>
+  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -24,7 +32,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
       </div>
     );
   };

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

@@ -1,17 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { projectSettings } from '../../ProjectSettings';
 import type { IconColor, IconProps } from './IconProps';
+import { IconTitleMap } from '../../icons/IconName';
 
 const svgColorsMap: Record<IconColor, string> = {
   none: '',
   primary: 'text-primary-main',
+  secondary: 'text-primary-text',
 };
 
 export const Icon = JSX<IconProps>(
   ({
     className = '',
     name,
-    alt = `Icon ${name}`,
+    alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,
     color = 'primary',
@@ -21,7 +23,12 @@ export const Icon = JSX<IconProps>(
 
     if (asSVG) {
       return (
-        <svg className={`${svgColorsMap[color]} ${className}`} {...imgProps} aria-hidden="true">
+        <svg
+          className={`${svgColorsMap[color]} ${className}`}
+          {...imgProps}
+          aria-hidden="true"
+          style={color === 'secondary' ? { filter: 'invert(1)' } : null}
+        >
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

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

@@ -4,9 +4,9 @@ export type { IconName };
 
 /**
  * @title Цвет иконки (svg)
- * @enumNames ["Нет", "Основной"]
+ * @enumNames ["Нет", "Основной", "Второстепенный"]
  */
-export type IconColor = 'none' | 'primary';
+export type IconColor = 'none' | 'primary' | 'secondary';
 
 export interface IconProps {
   className?: string;

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

@@ -1,12 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import { ListProps } from './ListProps';
+import type { ListProps, ListItemVersion } from './ListProps';
+
+const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
+};
 
 export const List = JSX<ListProps>((props) => {
-  const { className = '', itemClassName, isDotted, items, version } = props;
+  const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
 
   return (
-    <section className={`${className}`} role="list">
+    <section className={`${TEXT_STYLE_MAP[version]} ${className}`} role="list">
       {items?.length
         ? items.map((_, i) => (
             <ListItem

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ListItemVersion } from './ListProps';
+import type { ListItemVersion } from './ListProps';
 
 /**
  * @title Параметры элемента списка
@@ -13,13 +13,7 @@ export interface ListItemProps {
 
 const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
 
-const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-  gray: 'text-secondary-text',
-};
-
-const LIST_STYLE_MAP: Record<ListItemVersion, string> = {
+const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-main',
   secondary: 'bg-white',
   gray: 'bg-secondary-text',
@@ -30,14 +24,13 @@ export const ListItem = JSX<ListItemProps>(
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
-        <span className={`text-m-md ${TEXT_STYLE_MAP[version]}`}>{children}</span>
+        <span>{children}</span>
       </div>
     );
   },
 );
 
 const getListStyle = (version: ListItemVersion) => {
-  const size =
-    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
-  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
+  const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
 };

package/mobile/src/ui-kit/List/ListProps.ts

@@ -2,6 +2,7 @@ import type { ListContent } from './ListContent';
 
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
 export type ListItemVersion = 'primary' | 'secondary' | 'gray';
 
@@ -10,6 +11,7 @@ export type ListItemVersion = 'primary' | 'secondary' | 'gray';
  */
 export interface ListProps extends ListContent {
   className?: string;
+  /** @title Буллиты */
   isDotted?: boolean;
   version?: ListItemVersion;
   itemClassName?: string;

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

@@ -31,7 +31,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
         placeholder="some search"
       />
       <button
-        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer"
+        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
         onClick={(e) => {
           e.preventDefault();
           setTerm('');

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -6,17 +7,29 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
-  return (
-    <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
-      {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
-      {accordionItems?.length ? (
-        <ul className="list-none m-0 p-0">
-          {accordionItems.map((item, i) => (
-            <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
-          ))}
-        </ul>
-      ) : null}
-    </section>
-  );
-});
+const accordionStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Accordion = JSX<AccordionProps>(
+  ({ title, accordionItems, context, className = '', version = 'primary' }) => {
+    return (
+      <section className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}>
+        {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {accordionItems?.length ? (
+          <ul className="list-none m-0 p-0">
+            {accordionItems.map((item, i) => (
+              <AccordionItem
+                key={`AccordionItem${i}`}
+                {...item}
+                version={version}
+                context={context}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,5 @@
 import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
-
+import type { BlockVersion } from '../../model/BlockVersion';
 /**
  * @title Элемент списка
  */
@@ -9,6 +9,10 @@ export interface AccordionItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -16,6 +20,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+  version?: BlockVersion;
+
   columns?: ColumnsCount;
 }
 
@@ -25,9 +31,10 @@ export interface AccordionItemCommonProps {
 export interface AccordionContent {
   /** @title Заголовок */
   title?: string;
+  version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
-  /** @title Подзаголовок */
+  /** @title Описание */
   description?: string; // TODO: только для мобильной версии
   /**
    * @title Отображать/скрывать обводку у элемента списка

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -3,7 +3,7 @@ import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 

package/src/components/Accordion/AccordionItem.tsx

@@ -1,37 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, columns, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+const buttonStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
 
-  return (
-    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-      <button
-        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
+const buttonHoverStyleMap: Record<BlockVersion, string> = {
+  primary: 'group-hover:text-primary-main',
+  secondary: 'group-hover:text-white',
+};
+
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
+    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+      initialState: isExpanded,
+    });
+
+    return (
+      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+        <button
+          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
+            buttonStyleMap[version]
+          }
         ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-xl pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? (
-        <AccordionItemInner columns={columns} blocks={blocks} context={context} />
-      ) : null}
-    </li>
-  );
-});
+          <span
+            className={`text-xl pr-2.5 font-medium ${
+              hasContent ? buttonHoverStyleMap[version] : ''
+            }`}
+          >
+            {label}
+          </span>
+          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? (
+          <AccordionItemInner
+            isExpanded={isActive}
+            columns={columns}
+            blocks={blocks}
+            version={version}
+            context={context}
+          />
+        ) : null}
+      </li>
+    );
+  },
+);

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -2,12 +2,14 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
-  const className = 'mb-5 last:mb-0 first:mt-2';
-  const columns = 1;
-  return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-      {renderBlocksList({ context, className, columns, blocks })}
-    </div>
-  );
-});
+export const AccordionItemInner = JSX<AccordionItemProps>(
+  ({ blocks, context, version = 'primary' }) => {
+    const className = 'mb-5 last:mb-0 first:mt-2';
+    const columns = 1;
+    return (
+      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+        {renderBlocksList({ context, className, columns, blocks, version })}
+      </div>
+    );
+  },
+);

package/src/components/Accordion/AccordionItemInner.tsx

@@ -2,11 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, columns = 1, context }) => {
-  const className = 'mb-5 last:mb-0 pb-5';
-  return (
-    <div className="transition-all duration-300 max-h-0 overflow-hidden">
-      {renderBlocksList({ context, className, columns, blocks })}
-    </div>
-  );
-});
+export const AccordionItemInner = JSX<AccordionItemProps>(
+  ({ blocks, columns = 1, context, version = 'primary' }) => {
+    const className = 'mb-5 last:mb-0 pb-5';
+    return (
+      <div className="transition-all duration-300 max-h-0 overflow-hidden">
+        {renderBlocksList({ context, className, columns, blocks, version })}
+      </div>
+    );
+  },
+);

package/src/components/Accordion/{utils/useActiveHandler.ts → useActiveHandler.ts}

@@ -1,7 +1,8 @@
-import type { IconName } from '../../../icons/IconName';
+import type { IconName } from '../../icons/IconName';
+import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
 
-export const useActiveHandler = ({ context, blocks }) => {
-  const [isActive, setIsActive] = context.useState(false);
+export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
 

package/src/components/ComparisonTable/ComparisonTable.fixture.mobile.tsx

@@ -143,7 +143,7 @@ export default {
         isColoredFirstColumn={true}
         context={context}
         rowHeaders={rowHeaders}
-        useSwiper={true}
+        useSwiper={'horizontal'}
         columns={Array(2).fill(columns).flat()}
         visibleRowLength={2}
       />

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -16,7 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
-    useSwiper = false,
+    useSwiper = 'horizontal',
   }) => {
     const tableData =
       columns?.map(({ data, header }) => ({
@@ -65,41 +65,62 @@ const renderColumns = ({
   isColoredFirstColumn,
   columnsViewState,
   handleToggleColumn,
-  useSwiper,
+  useSwiper = 'horizontal',
   setColumnsViewState,
 }) => (
   <div role="table">
-    {tableData?.length ? (
-      useSwiper ? (
-        <SwipeListControl
-          context={context}
-          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-        >
-          {tableData.map(
-            renderColumn({
-              context,
-              visibleRowLength,
-              isColoredFirstColumn,
-              columnsViewState,
-              handleToggleColumn,
-            }),
-          )}
-        </SwipeListControl>
-      ) : (
-        tableData.map(
-          renderColumn({
-            context,
-            visibleRowLength,
-            isColoredFirstColumn,
-            columnsViewState,
-            handleToggleColumn,
-          }),
-        )
-      )
-    ) : null}
+    {tableData?.length
+      ? renderInnerTable({
+          useSwiper,
+          context,
+          columnsViewState,
+          setColumnsViewState,
+          tableData,
+          visibleRowLength,
+          isColoredFirstColumn,
+          handleToggleColumn,
+        })
+      : null}
   </div>
 );
 
+const renderInnerTable = ({
+  useSwiper,
+  context,
+  columnsViewState,
+  setColumnsViewState,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  handleToggleColumn,
+}) =>
+  useSwiper === 'horizontal' ? (
+    tableData.map(
+      renderColumn({
+        context,
+        visibleRowLength,
+        isColoredFirstColumn,
+        columnsViewState,
+        handleToggleColumn,
+      }),
+    )
+  ) : (
+    <SwipeListControl
+      context={context}
+      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+    >
+      {tableData.map(
+        renderColumn({
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+        }),
+      )}
+    </SwipeListControl>
+  );
+
 const renderColumn =
   ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
   (columnData, i) =>