@redneckz/wildless-cms-uni-blocks 0.3.89 → 0.3.90

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

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { EventBus } from '../EventBus/EventBus';
+import type { UniBlockProps } from '../types';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
 
-interface BlockWrapperProps {
+interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   context: ContentPageContext;
   className?: string;
   anchor?: string;
@@ -10,10 +12,23 @@ interface BlockWrapperProps {
 }
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, tag = 'section' }) => {
+  ({ anchor, className, context, children, tag = 'section', labels }) => {
+    const Tag: any = tag;
+
     const { IntersectionObserverTag } = context;
+    const [shouldRenderBlock, setShouldRenderBlock] = context.useState(true);
 
-    const Tag: any = tag;
+    context.useEffect(
+      () =>
+        EventBus.inst.subscribe('tab', (event) => {
+          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+        }),
+      [labels],
+    );
+
+    if (!shouldRenderBlock) {
+      return null;
+    }
 
     return anchor ? (
       <IntersectionObserverTag

package/package.json

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

package/src/EventBus/EventBus.ts

@@ -0,0 +1,38 @@
+import type { EventMap } from './EventMap';
+
+type Subscriber = (ev: EventMap[keyof EventMap]) => void;
+
+export class EventBus {
+  public static readonly inst = new EventBus();
+
+  private subscribers: Partial<Record<keyof EventMap, Subscriber[]>> = {};
+  private subjectsStateMap: Partial<EventMap> = {};
+
+  subscribe<T extends keyof EventMap>(type: T, listener: (event: EventMap[T]) => void) {
+    this.subscribers[type] ||= [];
+    this.subscribers[type]?.push(listener);
+
+    const latestEvent = this.subjectsStateMap[type];
+
+    if (latestEvent) {
+      listener(latestEvent as EventMap[T]);
+    }
+
+    return () => {
+      this.unsubscribe(type, listener);
+    };
+  }
+
+  private unsubscribe<T extends keyof EventMap>(type: T, listener: (event: EventMap[T]) => void) {
+    this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+  }
+
+  fire<T extends keyof EventMap>(type: T, event: EventMap[T]) {
+    this.subjectsStateMap[type] = event;
+    this.subscribers[type]?.forEach((s) => s(event));
+  }
+
+  subject<T extends keyof EventMap>(type: T, event: EventMap[T]) {
+    this.subjectsStateMap[type] = event;
+  }
+}

package/src/EventBus/EventMap.ts

@@ -0,0 +1,5 @@
+import type { TabActivationEvent } from '../components/Tabs/Tabs';
+
+export interface EventMap {
+  tab: TabActivationEvent;
+}

package/src/components/Blocks.spec.tsx

@@ -1,6 +1,6 @@
 import { setup } from '@redneckz/uni-jsx';
 import { render } from '@testing-library/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import runtime from 'react/jsx-runtime';
 import { Blocks } from './Blocks';
 import type { ContentPageContext } from './ContentPage/ContentPageContext';
@@ -15,6 +15,7 @@ const emptyFn = () => {
 
 const context: ContentPageContext = {
   useState,
+  useEffect,
   useRouter: () => ({
     pathname: '/credits',
     query: {},

package/src/components/Blocks.ts

@@ -28,6 +28,7 @@ import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
@@ -66,4 +67,5 @@ export const Blocks = {
   Placeholder,
   GroupBlock,
   BonusBenefitsBlock,
+  Tabs,
 };

package/src/components/ContentPage/ContentPage.tsx

@@ -32,6 +32,7 @@ export interface ContentPageProps extends UniBlockProps {
 
 export interface RenderBlockFunc {
   block: BlockDef;
+  page: ContentPageDef;
   blockDecorator: BlockDecorator;
   blocksRegistry: BlocksRegistry;
   context: ContentPageContext;
@@ -59,7 +60,7 @@ export const ContentPage = JSX<ContentPageProps>(
         {header?.blocks?.length ? (
           <div className={`${style2className(header?.style)}`}>
             {header.blocks.map((block, i) =>
-              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+              renderBlock({ block, page: data, blockDecorator, blocksRegistry, context }, i),
             )}
           </div>
         ) : null}
@@ -67,7 +68,7 @@ export const ContentPage = JSX<ContentPageProps>(
         {blocks?.length ? (
           <div className="container grid grid-cols-12 gap-1">
             {blocks.map((block, i) =>
-              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+              renderBlock({ block, blockDecorator, blocksRegistry, context, page: data }, i),
             )}
           </div>
         ) : null}
@@ -87,7 +88,7 @@ export const ContentPage = JSX<ContentPageProps>(
 );
 
 function renderBlock(
-  { block, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  { block, blockDecorator, blocksRegistry, context, page }: RenderBlockFunc,
   i: number,
 ) {
   const { type } = block;
@@ -101,7 +102,7 @@ function renderBlock(
       blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
-        const { version, content, anchor } = props.block;
+        const { version, content, anchor, labels } = props.block;
 
         return (
           <BlockComponent
@@ -109,7 +110,9 @@ function renderBlock(
             className={props.blockClassName}
             version={version}
             context={context}
+            page={page}
             anchor={anchor}
+            labels={labels}
             {...content}
           />
         );

package/src/components/ContentPage/ContentPageContext.tsx

@@ -53,6 +53,7 @@ export interface ContentPageContext {
   useGeolocation: GeolocationHook;
   useLikeService: () => LikeService;
   useSearch: () => Search;
+  useEffect: <Deps extends any[]>(effect: () => (() => void) | void, deps?: Deps) => void;
   handlerDecorator?: HandlerDecorator;
   IntersectionObserverTag: IntersectionObserverComponent;
 }

package/src/components/Tabs/Tabs.example.json

@@ -0,0 +1,17 @@
+{
+  "showCounter": true,
+  "tabs": [
+    {
+      "id": "tab1",
+      "text": "Вкладка 1"
+    },
+    {
+      "id": "tab2",
+      "text": "Вкладка 2"
+    },
+    {
+      "id": "tab3",
+      "text": "Вкладка 3"
+    }
+  ]
+}

package/src/components/Tabs/Tabs.fixture.tsx

@@ -0,0 +1,18 @@
+import { context } from '../../react/setup-fixture';
+import { Tabs } from './Tabs';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        context={context}
+        className="col-span-12"
+        tabs={[
+          { id: 'tab1', title: 'Вкладка 1' },
+          { id: 'tab2', title: 'Вкладка 2' },
+          { id: 'tab3', title: 'Вкладка 3' },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { EventBus } from '../../EventBus/EventBus';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderTab } from './renderTab';
+import type { Tab, TabsContent } from './TabsContent';
+
+export interface TabActivationEvent {
+  label?: string;
+}
+
+export interface TabsProps extends TabsContent, UniBlockProps {}
+
+export const Tabs = JSX<TabsProps>((props) => {
+  const { context, className, tabs, page, showCounter } = props;
+
+  const [currentTab, setCurrentTab] = context.useState(tabs ? tabs[0] : undefined);
+
+  context.useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+
+  const handleClick = (selectedTab: Tab) => {
+    EventBus.inst.fire('tab', { label: selectedTab.id });
+    setCurrentTab(selectedTab);
+  };
+
+  return (
+    <BlockWrapper
+      context={context}
+      className={`mb-2 box-border flex gap-x-1 ${className}`}
+      role="tablist"
+    >
+      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter }))}
+    </BlockWrapper>
+  );
+});

package/src/components/Tabs/TabsContent.ts

@@ -0,0 +1,19 @@
+/**
+ *  @title Таб
+ */
+export interface Tab {
+  /** @title Tег */
+  id?: string;
+  /** @title Название */
+  title?: string;
+}
+
+/**
+ * @title Вкладки
+ */
+export interface TabsContent {
+  /** @title Табы */
+  tabs?: Tab[];
+  /** @title Показывать счетчик блоков во вкладках */
+  showCounter?: boolean;
+}

package/src/components/Tabs/renderTab.tsx

@@ -0,0 +1,51 @@
+import type { ContentPageDef } from '../../types';
+import type { Tab } from './TabsContent';
+
+interface RenderTabProps {
+  onClick: OnTabClick;
+  currentTab?: Tab;
+  page?: ContentPageDef;
+  showCounter?: boolean;
+}
+
+type OnTabClick = (tab: Tab) => void;
+
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+
+export const renderTab =
+  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  (tab: Tab, i: number) => {
+    const isActive = currentTab === tab;
+
+    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+    const tabText = `text-m ${
+      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'
+      }`;
+
+    const count = tab.id
+      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id as string)).length
+      : page?.blocks?.length;
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex h-12 w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        role="tab"
+        aria-selected={isActive}
+        onClick={() => onClick(tab)}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
+          {showCounter ? (
+            <div className={`flex items-center justify-center ${counterBlockStyle}`}>{count}</div>
+          ) : null}
+        </div>
+      </div>
+    );
+  };

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -821,6 +821,12 @@ exports[`Blocks StepsBlock should render block "StepsBlock" without content 1`]
 />
 `;
 
+exports[`Blocks Tabs should render block "Tabs" without content 1`] = `
+<section
+  class="mb-2 box-border flex gap-x-1 undefined"
+/>
+`;
+
 exports[`Blocks TariffsTable should render block "TariffsTable" without content 1`] = `
 <section
   class="bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative "

package/src/react/setup-fixture.ts

@@ -83,6 +83,7 @@ export const context: ContentPageContext = {
       setTerm: (text: string) => setTerm(text),
     };
   },
+  useEffect,
   IntersectionObserverTag,
 };
 

package/src/types.ts

@@ -15,6 +15,7 @@ export interface BaseBlockDef {
   version?: BlockVersion;
   hidden?: boolean;
   anchor?: string;
+  labels?: string[];
 }
 
 export interface BlockDef extends BaseBlockDef {
@@ -56,6 +57,8 @@ export interface ContentPageDef extends ContentPageMeta {
 export interface UniBlockProps {
   className?: string;
   context: ContentPageContext;
+  page?: ContentPageDef;
+  labels?: string[];
   anchor?: string;
 }
 

package/src/ui-kit/BlockWrapper.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { EventBus } from '../EventBus/EventBus';
+import type { UniBlockProps } from '../types';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
 
-interface BlockWrapperProps {
+interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   context: ContentPageContext;
   className?: string;
   anchor?: string;
@@ -10,10 +12,23 @@ interface BlockWrapperProps {
 }
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, tag = 'section' }) => {
+  ({ anchor, className, context, children, tag = 'section', labels }) => {
+    const Tag: any = tag;
+
     const { IntersectionObserverTag } = context;
+    const [shouldRenderBlock, setShouldRenderBlock] = context.useState(true);
 
-    const Tag: any = tag;
+    context.useEffect(
+      () =>
+        EventBus.inst.subscribe('tab', (event) => {
+          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+        }),
+      [labels],
+    );
+
+    if (!shouldRenderBlock) {
+      return null;
+    }
 
     return anchor ? (
       <IntersectionObserverTag