@redneckz/wildless-cms-uni-blocks 0.3.22 → 0.3.25

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.22",
+  "version": "0.3.25",
   "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,6 +31,7 @@ export interface AccordionItemCommonProps {
 export interface AccordionContent {
   /** @title Заголовок */
   title?: string;
+  version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @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) =>

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @hidden
@@ -81,6 +82,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
-  /** @title Использовать свайпер (моб.) */
-  useSwiper?: boolean;
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  useSwiper?: ListOrientation;
 }

package/src/components/ContentPage/ContentPage.tsx

@@ -91,7 +91,6 @@ function renderBlock(
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
   }
-
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {

package/src/components/CreditCalculator/CreditCalculator.example.json

@@ -0,0 +1,19 @@
+{
+  "tabs": [
+    {
+      "title": "Вкладка 1",
+      "description": "Описание",
+      "icon": "CardIcon"
+    },
+    {
+      "title": "Вкладка 2",
+      "description": "Описание",
+      "icon": "ChartSquareIcon"
+    },
+    {
+      "title": "Вкладка 3",
+      "description": "Описание",
+      "icon": "DiscountShapeIcon"
+    }
+  ]
+}

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

@@ -3,6 +3,7 @@ import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
 import { Gallery } from './Gallery';
 import { GalleryCard } from './GalleryContent';
+import { ListOrientation } from '../../model/ListOrientation';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -82,7 +83,7 @@ const cards: GalleryCard[] = [
 const defaultProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: false,
+  useSwiper: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };
@@ -90,7 +91,7 @@ const defaultProps = {
 const scrollProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: true,
+  useSwiper: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };

package/src/components/Gallery/Gallery.mobile.tsx

@@ -8,6 +8,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -15,7 +16,7 @@ const blockStyle: Record<BlockVersion, string> = {
 };
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, isScroll = true }) => {
+  ({ context, title, description, cards = [], className, useSwiper = 'horizontal' }) => {
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
@@ -34,14 +35,14 @@ export const Gallery = JSX<GalleryProps>(
             </div>
           ) : null}
         </div>
-        {renderCardsLayout(isScroll, cards, context)}
+        {renderCardsLayout(useSwiper, cards, context)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
-  return isScroll ? (
+function renderCardsLayout(useSwiper: ListOrientation, cards: GalleryCard[], context) {
+  return useSwiper === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import type { GalleryCard } from './GalleryContent';
+import { List } from '../../ui-kit/List/List';
+import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
     const titleStyleClasses = getTitleStyle(version, description, items);
     return (
-      <div>
+      <div className="h-full flex flex-col justify-between">
         <div>
           {image?.src ? (
             <div className="flex justify-center">
@@ -43,21 +43,16 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items, version) {
+function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   return (
-    <section className={`max-w-[308px] mt-2`} role="list">
-      {items
-        .filter((item) => item?.text)
-        .map((item, i) => renderItem(item.text as string, i, version))}
-    </section>
-  );
-}
-
-function renderItem(item: string, i: number, version?: BlockVersion) {
-  return (
-    <BlockItem key={String(i)} version={version ?? 'primary'}>
-      <span className="text-sm">{item}</span>
-    </BlockItem>
+    <List
+      className={`max-w-[308px] mt-2 text-sm ${
+        version === 'primary' ? '!text-secondary-text' : ''
+      }`}
+      itemClassName="mt-1 first:mt-0"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      version={version}
+    />
   );
 }
 

package/src/components/Gallery/GalleryContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Элемент списка
@@ -41,6 +42,6 @@ export interface GalleryContent {
    * @minItems 3
    */
   cards?: GalleryCard[];
-  /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */
-  isScroll?: boolean; //TODO: for mobile
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  useSwiper?: ListOrientation; //TODO: for mobile
 }

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
+      <section
+        className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Отображение списка
@@ -11,15 +12,6 @@ import type { AlignType } from '../BaseTile/BaseTileProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Отображение списка (моб.)
- * @enumNames [
- *    "Вертикально",
- *    "Горизонтально",
- *    ]
- */
-export type LinkListMode = 'vertical' | 'horizontal';
-
 /**
  * @title Элемент списка
  */
@@ -41,7 +33,8 @@ export interface LinkDocsContent {
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  listMode?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -9,6 +9,10 @@ export interface blockItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -17,7 +21,6 @@ export interface blockItemCommonProps {
    */
   bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
-  isActive?: boolean;
 }
 
 /**