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

package/src/components/Tabs/renderGroupTab.tsx

@@ -0,0 +1,51 @@
+import { RenderTabProps } from './renderTab';
+import {
+  ACTIVE_LINK_CLASSES,
+  ACTIVE_TEXT_CLASSES,
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+import { Tab } from './TabsContent';
+
+const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
+const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+
+export const renderGroupTab =
+  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  (tab: Tab, i: number) => {
+    const active = currentTab === tab;
+
+    const count = tab.ref
+      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref as string)).length
+      : page?.blocks?.length;
+
+    return (
+      <div
+        key={String(i)}
+        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        role="tab"
+        aria-selected={active}
+        onClick={() => onClick(tab)}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? renderTitle(tab.title, active) : null}
+          {showCounter && count ? renderCount(count, active) : null}
+        </div>
+      </div>
+    );
+  };
+
+const renderTitle = (title: string, active: boolean) => (
+  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
+    {title}
+  </h3>
+);
+
+const renderCount = (count: number, active: boolean) => (
+  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+    {count}
+  </div>
+);

package/src/components/Tabs/renderLinkTab.tsx

@@ -0,0 +1,25 @@
+import type { LinkProps } from '../../model/LinkProps';
+import {
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+
+export interface RenderLinkTabProps extends LinkProps {
+  active?: boolean;
+  onClick?: () => void;
+  i: number;
+}
+
+export const renderLinkTab = ({ text, onClick, href, target = '_self', i }: RenderLinkTabProps) => (
+  <a
+    key={String(i)}
+    className={`${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`}
+    target={target}
+    href={href}
+    onClick={onClick}
+  >
+    <span className={`${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`}>{text}</span>
+  </a>
+);

package/src/components/Tabs/renderTab.tsx

@@ -1,51 +1,31 @@
+import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../types';
+import { isURL } from '../../utils/url';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { renderGroupTab } from './renderGroupTab';
+import { renderLinkTab } from './renderLinkTab';
 import type { Tab } from './TabsContent';
 
-interface RenderTabProps {
-  onClick: OnTabClick;
+export interface RenderTabProps {
+  onClick: (tab: Tab) => void;
   currentTab?: Tab;
   page?: ContentPageDef;
   showCounter?: boolean;
+  context: ContentPageContext;
 }
 
-type OnTabClick = (tab: Tab) => void;
-
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-
 export const renderTab =
-  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  ({ onClick, currentTab, showCounter, page, context }: RenderTabProps) =>
   (tab: Tab, i: number) => {
-    const isActive = currentTab === tab;
-
-    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'
-      }`;
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
 
-    const count = tab.id
-      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id as string)).length
-      : page?.blocks?.length;
+    if (isURL(tab?.ref)) {
+      return renderLinkTab({
+        ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
+        i,
+      });
+    }
 
-    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>
-    );
+    return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
   };

package/src/components/Tabs/tabItemClasses.ts

@@ -0,0 +1,7 @@
+export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
+export const INACTIVE_LINK_CLASSES = 'group bg-white';
+
+export const TEXT_CLASSES = 'font-sans text-m';
+export const ACTIVE_TEXT_CLASSES = 'text-white';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';

package/src/ui-kit/BlockWrapper.tsx

@@ -22,7 +22,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     useEffect(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
-          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+          if (event.type === 'group') {
+            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+          } else {
+            setShouldRenderBlock(true);
+            scrollToBlock(event.label);
+          }
         }),
       [labels],
     );
@@ -46,3 +51,9 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
   },
 );
+
+function scrollToBlock(label?: string) {
+  setTimeout(() =>
+    globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }),
+  );
+}