@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/mobile/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,41 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getHash } from '../../utils/url';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { NavigatorTabItem } from './NavigatorTabItem';
-import type { NavigatorTabsContent } from './NavigatorTabsContent';
-
-export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
-
-export const NavigatorTabs = JSX<TabsBlockProps>(
-  ({ className = '', navigatorTabs, context, ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
-        {...rest}
-      >
-        {navigatorTabs ? navigatorTabs.map(renderTab(context)) : null}
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderTab = (context: ContentPageContext) => (tab: LinkProps, i: number) => {
-  const { handlerDecorator, useRouter } = context;
-
-  const router = useRouter();
-  const hash = getHash(router.href);
-  const active = hash ? tab.href === hash : i === 0;
-
-  return (
-    <NavigatorTabItem
-      key={tab.text}
-      active={active}
-      {...useLink({ router, handlerDecorator }, tab)}
-    />
-  );
-};

package/mobile/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -1,12 +0,0 @@
-import type { LinkProps } from '../../model/LinkProps';
-
-/**
- * @title Блок табов
- */
-export interface NavigatorTabsContent {
-  /**
-   * @title Список табов
-   * @minItems 3
-   */
-  navigatorTabs?: LinkProps[];
-}

package/mobile/src/hooks/useSafeDepositRental.ts

@@ -1,25 +0,0 @@
-import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-
-const SAFE_DEPOSIT_RENTAL_URL = '/api/v1/safe-deposit-rental.json';
-
-export function useSafeDepositRental() {
-  const { data } = useAsyncData(SAFE_DEPOSIT_RENTAL_URL, fetchSafeDepositRental);
-
-  const result = data || [];
-
-  return result;
-}
-
-async function fetchSafeDepositRental(): Promise<any | undefined> {
-  try {
-    const response = await fetch(SAFE_DEPOSIT_RENTAL_URL, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    return await response.json();
-  } catch (err) {
-    console.error(err);
-  }
-}

package/src/components/GroupBlock/BlocksTypeProps.ts

@@ -1,39 +0,0 @@
-import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import type { ProductBlockContent } from '../../components/ProductBlock/ProductBlockContent';
-import type { ProductTileContent } from '../../components/ProductTile/ProductTileContent';
-import type { EmptyOption } from '../../model/EmptyOptionType';
-
-export interface ActiveHandler {
-  context: ContentPageContext;
-  blocks?: GroupBlockDef[];
-  initialState?: boolean;
-}
-
-export interface GroupBlockCommonProps {
-  /**
-   * @title Стиль
-   * @default ["col-span-12"]
-   */
-  style?: string[];
-  /** @title Теги */
-  tags?: string[];
-}
-
-/**
- * @title Продуктовый блок
- * @default {"blockType": "ProductBlock"}
- */
-export type ProductBlockDef = ProductBlockContent &
-  GroupBlockCommonProps & { blockType: 'ProductBlock' };
-
-/**
- * @title Продуктовая плитка
- * @default {"blockType": "ProductTile"}
- */
-export type ProductTileDef = ProductTileContent &
-  GroupBlockCommonProps & { blockType: 'ProductTile' };
-
-/**
- * @title Содержимое блока
- */
-export type GroupBlockDef = EmptyOption | ProductBlockDef | ProductTileDef;

package/src/components/GroupBlock/EmbeddableGroupBlocks.tsx

@@ -1,7 +0,0 @@
-import { ProductBlock } from '../ProductBlock/ProductBlock';
-import { ProductTile } from '../ProductTile/ProductTile';
-
-export const EmbeddableGroupBlocks = {
-  ProductBlock,
-  ProductTile,
-};

package/src/components/GroupBlock/GroupBlock.example.json

@@ -1,97 +0,0 @@
-{
-  "tabs": [
-    { "title": "Таб 1", "index": 0 },
-    { "title": "Таб 2", "index": 1, "tag": "tag1" },
-    { "title": "Таб 3", "index": 2, "tag": "tag2" }
-  ],
-  "isShowCounter": true,
-  "blocks": [
-    {
-      "blockType": "ProductBlock",
-      "title": "Продуктовый блок",
-      "description": "Описание текстового блока",
-      "tags": ["tag2"],
-      "backwardButton": {
-        "text": "Кнопка возврата",
-        "icon": { "icon": "ArrowLeftIcon" }
-      },
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 234,
-          "height": 234
-        }
-      }
-    },
-    {
-      "blockType": "ProductTile",
-      "title": "Продуктовая плитка",
-      "description": "Описание текстового блока",
-      "tags": ["tag1"],
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 300
-        }
-      },
-      "version": "primary",
-      "benefits": [
-        {
-          "label": "Преимущество 1",
-          "description": "Описание"
-        },
-        {
-          "label": "Преимущество 2",
-          "description": "Описание"
-        },
-        {
-          "label": "Преимущество 3",
-          "description": "Описание"
-        }
-      ],
-      "buttons": [
-        {
-          "text": "Кнопка",
-          "version": "primary"
-        }
-      ]
-    },
-    {
-      "blockType": "ProductBlock",
-      "title": "Продуктовый блок",
-      "description": "Описание текстового блока",
-      "tags": ["tag2"],
-      "headingType": "h2",
-      "backwardButton": {
-        "text": "Кнопка возврата",
-        "icon": { "icon": "ArrowLeftIcon" }
-      },
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 234,
-          "height": 234
-        }
-      },
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-      "isDotted": true,
-      "buttons": [
-        {
-          "text": "Кнопка",
-          "version": "secondary"
-        }
-      ],
-      "version": "primary",
-      "benefits": [
-        {
-          "label": "Преимущество №1",
-          "icon": {"icon": "ClockIcon"}
-        },
-        {
-          "label": "Преимущество №2",
-          "icon": {"icon": "SignDocsIcon"}
-        }
-      ]
-    }
-  ]
-}

package/src/components/GroupBlock/GroupBlock.fixture.tsx

@@ -1,67 +0,0 @@
-import { context } from '../../react/setup-fixture';
-import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import type { ProductBlockDef, ProductTileDef } from './BlocksTypeProps';
-import { GroupBlock } from './GroupBlock';
-import groupBlockExample from './GroupBlock.example.json';
-
-const PRODUCT_TILE_GROUP_BLOCK: ProductTileDef = {
-  blockType: 'ProductTile',
-  tags: ['tag2'],
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
-
-const PRODUCT_TILE_GROUP_BLOCK2: ProductTileDef = {
-  blockType: 'ProductTile',
-  tags: ['tag2'],
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
-
-const PRODUCT_BLOCK_GROUP_BLOCK: ProductBlockDef = {
-  blockType: 'ProductBlock',
-  tags: ['tag1'],
-  style: ['col-span-12'],
-  ...PRODUCT_BLOCK,
-};
-
-const PRODUCT_BLOCK_GROUP_BLOCK2: ProductBlockDef = {
-  blockType: 'ProductBlock',
-  style: ['col-span-12'],
-  ...PRODUCT_BLOCK,
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <GroupBlock
-        context={context}
-        className="col-span-12"
-        tabs={groupBlockExample.tabs}
-        isShowCounter={true}
-        groupBlocks={[
-          PRODUCT_TILE_GROUP_BLOCK,
-          PRODUCT_TILE_GROUP_BLOCK2,
-          PRODUCT_BLOCK_GROUP_BLOCK,
-          PRODUCT_BLOCK_GROUP_BLOCK2,
-        ]}
-      />
-    </div>
-  ),
-  'without-counter': (
-    <div className="container grid grid-cols-12">
-      <GroupBlock
-        context={context}
-        className="col-span-12"
-        tabs={groupBlockExample.tabs}
-        groupBlocks={[
-          PRODUCT_TILE_GROUP_BLOCK,
-          PRODUCT_TILE_GROUP_BLOCK2,
-          PRODUCT_BLOCK_GROUP_BLOCK,
-          PRODUCT_BLOCK_GROUP_BLOCK2,
-        ]}
-      />
-    </div>
-  ),
-};

package/src/components/GroupBlock/GroupBlock.tsx

@@ -1,50 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { filterBlocksByTag } from './filterBlocksByTag';
-import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
-import { GroupBlocksItem } from './GroupBlocksItem';
-import { GroupBlockTabs } from './GroupBlockTabs';
-
-export interface TabsItemProps extends GroupBlockTab {
-  count?: number;
-}
-
-export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
-  tabs?: TabsItemProps[];
-}
-
-export const GroupBlock = JSX<GroupBlockProps>(
-  ({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
-    const [currentTag, setCurrentTag] = useState(tabs?.[0]?.tag);
-
-    const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
-
-    const tabsNewMap = tabs?.map((tab) => {
-      const count = tab.tag
-        ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag as string)).length
-        : groupBlocks.length;
-
-      return { ...tab, count };
-    });
-
-    return (
-      <BlockWrapper context={context} className={`box-border ${className}`} {...rest}>
-        {tabsNewMap?.length ? (
-          <GroupBlockTabs
-            currentTag={currentTag}
-            onTabClick={setCurrentTag}
-            tabs={tabsNewMap}
-            isShowCounter={isShowCounter}
-          />
-        ) : null}
-        {groupBlocks.length ? (
-          <div className="mt-1">
-            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
-);

package/src/components/GroupBlock/GroupBlockContent.ts

@@ -1,23 +0,0 @@
-import type { GroupBlockDef } from './BlocksTypeProps';
-
-/**
- *  @title Таб
- */
-export interface GroupBlockTab {
-  /** @title Tег */
-  tag?: string;
-  /** @title Название */
-  title?: string;
-}
-
-/**
- * @title Блок-группировки
- */
-export interface GroupBlockContent {
-  /** @title Блоки */
-  groupBlocks?: GroupBlockDef[];
-  /** @title Табы */
-  tabs?: GroupBlockTab[];
-  /** @title Показывать счетчик блоков во вкладках */
-  isShowCounter?: boolean;
-}

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -1,55 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { TabsItemProps } from './GroupBlock';
-
-export interface GroupBlockTabsProps {
-  className?: string;
-  currentTag?: string;
-  tabs?: TabsItemProps[];
-  isShowCounter?: boolean;
-  onTabClick: (tag?: string) => void;
-}
-
-export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
-
-  return (
-    <div className={`box-border flex gap-x-1 h-14 ${className}`} role="tablist">
-      {tabs?.map(renderTab({ currentTag, isShowCounter, onTabClick }))}
-    </div>
-  );
-});
-
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-
-const renderTab =
-  ({ currentTag, isShowCounter, onTabClick }: GroupBlockTabsProps) =>
-  (tab: TabsItemProps, i: number) => {
-    const isActive = currentTag === tab.tag;
-
-    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-
-    const tabText = `text-m-light ${
-      isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
-    }`;
-    const counterBlockStyle = `${badgeStyle}
-      ${
-        isActive
-          ? 'bg-white/30 text-white'
-          : 'bg-main-divider text-secondary-text group-hover:text-primary-main'
-      }`;
-
-    return (
-      <div
-        key={String(i)}
-        className={`flex-1 flex items-center justify-center cursor-pointer m-1 ${tabBg}`}
-        role="tab"
-        onClick={() => onTabClick(tab.tag)}
-        aria-selected={isActive}
-      >
-        {tab?.title ? <div className={tabText}>{tab.title}</div> : null}
-        {isShowCounter ? (
-          <div className={`flex items-center justify-center ${counterBlockStyle}`}>{tab.count}</div>
-        ) : null}
-      </div>
-    );
-  };

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,31 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import { style2className } from '../../utils/style2className';
-import type { JSXBlock } from '../ContentPage/ContentPage';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import type { GroupBlockDef } from './BlocksTypeProps';
-import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
-import { GroupBlockContent } from './GroupBlockContent';
-
-export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
-
-export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
-  return (
-    <div className="grid grid-cols-12 gap-1 box-border">
-      {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
-    </div>
-  );
-});
-
-export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDef, i: number) => {
-  const type = block?.blockType;
-  if (!type || !(type in EmbeddableGroupBlocks)) {
-    return null;
-  }
-  const classNameBlock = style2className(block?.style);
-  const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
-
-  return (
-    <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
-  );
-};

package/src/components/GroupBlock/filterBlocksByTag.ts

@@ -1,5 +0,0 @@
-import { GroupBlockDef } from './BlocksTypeProps';
-
-export const filterBlocksByTag = (blocks: GroupBlockDef[], tag?: string) => {
-  return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
-};

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -1,34 +0,0 @@
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import { style2className } from '../../utils/style2className';
-import type { GroupBlockDef } from './BlocksTypeProps';
-import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
-
-type EmbeddableBlocksProps = {
-  groupBlocks?: GroupBlockDef[];
-  context: ContentPageContext;
-  className?: string;
-};
-
-export const renderBlock =
-  ({ context, className }: EmbeddableBlocksProps) =>
-  (block: GroupBlockDef, i: number) => {
-    if (!block) {
-      return null;
-    }
-
-    const { style, blockType: type, ...rest } = block;
-
-    if (!type || !(type in EmbeddableGroupBlocks)) {
-      return null;
-    }
-
-    const classNameBlock = style2className(style);
-    const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
-
-    return (
-      <div className={className} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...rest} className={classNameBlock} />
-      </div>
-    );
-  };

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -1,31 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
-
-export interface NavigatorTabItemProps extends LinkProps {
-  active?: boolean;
-  className?: string;
-  onClick?: () => void;
-}
-
-const TEXT_CLASSES = 'font-sans text-m';
-const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
-
-export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', text, active, onClick, href, target = '_self', children }) => (
-    <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
-      <span className={getTextClasses(active)}>{text || children}</span>
-    </a>
-  ),
-);
-
-const getLinkClasses = (className: string, active = false) => {
-  const classes = active ? 'bg-primary-main' : 'group bg-white';
-
-  return `${classes} ${LINK_CLASSES} ${className}`;
-};
-
-const getTextClasses = (active = false) => {
-  const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
-
-  return `${classes} ${TEXT_CLASSES}`;
-};

package/src/components/NavigatorTabs/NavigatorTabs.example.json

@@ -1,7 +0,0 @@
-{
-  "navigatorTabs": [
-    { "text": "Таб 1", "href": "", "target": "_self" },
-    { "text": "Таб 2", "href": "", "target": "_self" },
-    { "text": "Таб 3", "href": "", "target": "_self" }
-  ]
-}

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,16 +0,0 @@
-import { context } from '../../react/setup-fixture';
-import { NavigatorTabs } from './NavigatorTabs';
-import tabsExample from './NavigatorTabs.example.json';
-import type { NavigatorTabsContent } from './NavigatorTabsContent';
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <NavigatorTabs
-        context={context}
-        className="col-span-12"
-        {...(tabsExample as NavigatorTabsContent)}
-      />
-    </div>
-  ),
-};

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,41 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
-import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getHash } from '../../utils/url';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { NavigatorTabItem } from './NavigatorTabItem';
-import type { NavigatorTabsContent } from './NavigatorTabsContent';
-
-export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
-
-export const NavigatorTabs = JSX<TabsBlockProps>(
-  ({ className = '', navigatorTabs, context, ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
-        {...rest}
-      >
-        {navigatorTabs ? navigatorTabs.map(renderTab(context)) : null}
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderTab = (context: ContentPageContext) => (tab: LinkProps, i: number) => {
-  const { handlerDecorator, useRouter } = context;
-
-  const router = useRouter();
-  const hash = getHash(router.href);
-  const active = hash ? tab.href === hash : i === 0;
-
-  return (
-    <NavigatorTabItem
-      key={tab.text}
-      active={active}
-      {...useLink({ router, handlerDecorator }, tab)}
-    />
-  );
-};

package/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -1,12 +0,0 @@
-import type { LinkProps } from '../../model/LinkProps';
-
-/**
- * @title Блок табов
- */
-export interface NavigatorTabsContent {
-  /**
-   * @title Список табов
-   * @minItems 3
-   */
-  navigatorTabs?: LinkProps[];
-}

package/src/hooks/useSafeDepositRental.ts

@@ -1,25 +0,0 @@
-import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-
-const SAFE_DEPOSIT_RENTAL_URL = '/api/v1/safe-deposit-rental.json';
-
-export function useSafeDepositRental() {
-  const { data } = useAsyncData(SAFE_DEPOSIT_RENTAL_URL, fetchSafeDepositRental);
-
-  const result = data || [];
-
-  return result;
-}
-
-async function fetchSafeDepositRental(): Promise<any | undefined> {
-  try {
-    const response = await fetch(SAFE_DEPOSIT_RENTAL_URL, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    return await response.json();
-  } catch (err) {
-    console.error(err);
-  }
-}