@redneckz/wildless-cms-uni-blocks 0.12.14 → 0.13.1

package/mobile/lib/components/Tabs/renderTab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAkB,EAAE,EAAE,CACnD,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,cAAc,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAChE,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,KAAC,OAAO,IAAiB,GAAG,EAAE,GAAG,KAAM,IAAI,IAA7B,MAAM,CAAC,CAAC,CAAC,CAAwB,CAAC;SACxD;QACD;YACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/mobile/lib/components/Tabs/tabItemClasses.d.ts

@@ -1,11 +0,0 @@
-import type { TabsMode } from './TabsContent';
-export declare const LINK_CLASSES = "h-12 flex-1 flex items-center justify-center cursor-pointer";
-export declare const ACTIVE_LINK_CLASSES = "bg-primary-main";
-export declare const INACTIVE_LINK_CLASSES = "group/btn bg-white";
-export declare const SCROLLABLE_ACTIVE_LINK_CLASSES = "bg-white text-primary-main";
-export declare const WIDESCREEN_ACTIVE_LINK_CLASSES = "bg-primary-main text-white";
-export declare const TEXT_CLASSES = "font-sans text-m text-center";
-export declare const ACTIVE_TEXT_CLASSES = "text-white";
-export declare const INACTIVE_TEXT_CLASSES = "text-secondary-text sm:group-hover/btn:text-primary-main";
-export declare const WHITE_ACTIVE_TEXT_CLASSES = "text-primary-main";
-export declare const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string;

package/mobile/lib/components/Tabs/tabItemClasses.js

@@ -1,45 +0,0 @@
-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/btn bg-white';
-export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
-export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
-export const TEXT_CLASSES = 'font-sans text-m text-center';
-export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
-export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-const TAB_CLASSES = {
-    block: {
-        scrollable: {
-            active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-            default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-        },
-        centered: {
-            active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-            default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-        },
-        wideScreen: {
-            active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-            default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
-        },
-    },
-    text: {
-        scrollable: {
-            active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
-            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-        },
-        centered: {
-            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-        },
-        wideScreen: {
-            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
-            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
-        },
-    },
-};
-export const getTabClassName = (type, active, tabsMode) => {
-    const styleActive = active ? 'active' : 'default';
-    const mode = tabsMode || 'wideScreen';
-    return TAB_CLASSES[type][mode][styleActive];
-};
-//# sourceMappingURL=tabItemClasses.js.map

package/mobile/lib/components/Tabs/tabItemClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,6DAA6D,CAAC;AAC1F,MAAM,CAAC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAC3E,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,8BAA8B,CAAC;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAChD,MAAM,CAAC,MAAM,qBAAqB,GAAG,0DAA0D,CAAC;AAEhG,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAE7D,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,mBAAmB,YAAY,IAAI,8BAA8B,oBAAoB;YAC7F,OAAO,EAAE,mBAAmB,YAAY,6CAA6C;SACtF;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,IAAI,8BAA8B,oBAAoB;YAC7E,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,oBAAoB;SACtE;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,+CAA+C;YACtE,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,EAAE;YAChD,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,8DAA8D;YAC5G,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,kBAAkB;SACpE;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAmE,CAC7F,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,EAAE;IACF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAClD,MAAM,IAAI,GAAG,QAAQ,IAAI,YAAY,CAAC;IAEtC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAC9C,CAAC,CAAC"}

package/mobile/lib/ui-kit/BaseTile/getTileRightPadding.d.ts

@@ -1 +0,0 @@
-export declare function getTileRightPadding(className?: string): "pr-9" | "pr-[4.75rem]" | "pr-[9.4rem]";

package/mobile/lib/ui-kit/BaseTile/getTileRightPadding.js

@@ -1,14 +0,0 @@
-import { getColSpan } from '../../utils/getColSpan.js';
-export function getTileRightPadding(className = '') {
-    const colSpan = getColSpan(className);
-    if (colSpan <= 6) {
-        return 'pr-9';
-    }
-    else if (colSpan <= 8) {
-        return 'pr-[4.75rem]';
-    }
-    else {
-        return 'pr-[9.4rem]';
-    }
-}
-//# sourceMappingURL=getTileRightPadding.js.map

package/mobile/lib/ui-kit/BaseTile/getTileRightPadding.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTileRightPadding.js","sourceRoot":"","sources":["../../../src/ui-kit/BaseTile/getTileRightPadding.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,UAAU,mBAAmB,CAAC,SAAS,GAAG,EAAE;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,OAAO,MAAM,CAAC;KACf;SAAM,IAAI,OAAO,IAAI,CAAC,EAAE;QACvB,OAAO,cAAc,CAAC;KACvB;SAAM;QACL,OAAO,aAAa,CAAC;KACtB;AACH,CAAC"}

package/mobile/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -1,2 +0,0 @@
-export const cardTitleFont = 'font-light';
-export const cardDescriptionColor = '';

package/mobile/src/components/Tabs/CenteredTabs.tsx

@@ -1,12 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { RenderTabProps } from './renderTab';
-import { renderTab } from './renderTab';
-import type { TabData } from './TabsContent';
-
-interface CenteredTabsProps extends RenderTabProps {
-  tabs?: TabData[];
-}
-
-export const CenteredTabs = JSX<CenteredTabsProps>(({ tabs, ...rest }) => (
-  <div className="flex p-1 m-auto bg-main-gray rounded-md">{tabs?.map(renderTab({ ...rest }))}</div>
-));

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,47 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import { style } from '../../utils/style';
-import { getTabClassName } from './tabItemClasses';
-import type { LinkTabData, TabData, TabsMode } from './TabsContent';
-
-interface LinkTabProps {
-  tab: LinkTabData;
-  currentTab?: TabData;
-  onClick: (tab: TabData) => void;
-  tabsMode?: TabsMode;
-}
-
-export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick, tabsMode } = props;
-  const active = currentTab?.type === 'link' && currentTab.href === tab.href;
-
-  const link = useLink();
-  const adjustedProps = link(tab);
-
-  const handleClick = (ev?: { preventDefault: () => void }) => {
-    adjustedProps.onClick(ev);
-    onClick(tab);
-  };
-
-  return (
-    <div
-      className={getTabClassName('block', active, tabsMode)}
-      role="tab"
-      aria-selected={active}
-      onClick={() => onClick(tab)}
-    >
-      <a
-        role="tab"
-        className={style(
-          'flex flex-1 items-center justify-center h-full',
-          getTabClassName('text', active, tabsMode),
-        )}
-        target={tab.target}
-        href={adjustedProps.href}
-        onClick={handleClick}
-      >
-        <span>{tab.text}</span>
-      </a>
-    </div>
-  );
-});

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -1,46 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import type { RenderTabProps } from './renderTab';
-import { renderTab } from './renderTab';
-import type { TabData } from './TabsContent';
-
-interface ScrollableTabsProps extends RenderTabProps {
-  tabs?: TabData[];
-}
-
-export type IsScrollButtonsShown = boolean[];
-
-const scrollButtonStyle = 'absolute z-40 top-0';
-
-export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
-  const { tabs, ...rest } = props;
-
-  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-    itemCount: tabs?.length || 0,
-  });
-
-  return (
-    <div className="relative max-w-full m-auto">
-      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
-        <SwipeListContainer
-          containerRef={containerRef}
-          snapAlign="snap-start"
-          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-        >
-          {tabs?.map(renderTab({ ...rest }))}
-        </SwipeListContainer>
-      </div>
-      {scroll.canScrollLeft ? (
-        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
-      ) : null}
-      {scroll.canScrollRight ? (
-        <ScrollRightButton
-          className={`${scrollButtonStyle} rotate-180 right-6`}
-          onClick={scroll.scrollRight}
-        />
-      ) : null}
-    </div>
-  );
-});

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,53 +0,0 @@
-import { style } from '../../utils/style';
-import type { RenderTabProps } from './renderTab';
-import { getTabClassName } from './tabItemClasses';
-import type { GroupTabData, TabsMode } from './TabsContent';
-
-const BADGE_CLASSES =
-  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
-const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
-const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
-
-export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
-  (tab: GroupTabData, i: number) => {
-    const active = currentTab === tab;
-
-    const count =
-      tab.ref && page?.blocks
-        ? page.blocks.filter((block) => block?.labels?.includes(tab.ref as string)).length
-        : 0;
-
-    return (
-      <div
-        key={`group-${String(i)}`}
-        className={getTabClassName('block', active, tabsMode)}
-        role="tab"
-        aria-selected={active}
-        onClick={() => onClick(tab)}
-      >
-        <div
-          className={style(
-            'flex flex-1 items-center justify-center h-full',
-            getTabClassName('text', active, tabsMode),
-          )}
-        >
-          <span>{tab.title}</span>
-          {showCounter && count ? renderCount(tabsMode, count, active) : null}
-        </div>
-      </div>
-    );
-  };
-
-const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
-  return (
-    <div
-      className={style(
-        BADGE_CLASSES,
-        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
-      )}
-    >
-      {count}
-    </div>
-  );
-};

package/mobile/src/components/Tabs/renderTab.tsx

@@ -1,35 +0,0 @@
-import type { ContentPageDef } from '../../model/ContentPageDef';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import { LinkTab } from './LinkTab';
-import { renderGroupTab } from './renderGroupTab';
-import type { TabData, TabsMode } from './TabsContent';
-
-export interface RenderTabProps {
-  page?: ContentPageDef;
-  currentTab?: TabData;
-  showCounter?: boolean;
-  onClick: (tab: TabData) => void;
-  tabsMode?: TabsMode;
-}
-
-export const renderTab =
-  ({ page, showCounter, ...rest }: RenderTabProps) =>
-  (tab: TabData, i: number) => {
-    const type = tab.type;
-
-    if (!(type === 'group' || type === 'link')) {
-      return null;
-    }
-
-    switch (type) {
-      case 'group':
-        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
-      case 'link': {
-        return <LinkTab key={String(i)} tab={tab} {...rest} />;
-      }
-      default:
-        assertUnreachable(type);
-    }
-
-    return null;
-  };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -1,56 +0,0 @@
-import type { TabsMode } from './TabsContent';
-
-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/btn bg-white';
-
-export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
-export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
-
-export const TEXT_CLASSES = 'font-sans text-m text-center';
-export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
-
-export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-
-const TAB_CLASSES = {
-  block: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-    },
-    centered: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-    },
-    wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
-    },
-  },
-};
-
-export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
-  type,
-  active,
-  tabsMode,
-) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return TAB_CLASSES[type][mode][styleActive];
-};

package/mobile/src/ui-kit/BaseTile/getTileRightPadding.ts

@@ -1,12 +0,0 @@
-import { getColSpan } from '../../utils/getColSpan';
-
-export function getTileRightPadding(className = '') {
-  const colSpan = getColSpan(className);
-  if (colSpan <= 6) {
-    return 'pr-9';
-  } else if (colSpan <= 8) {
-    return 'pr-[4.75rem]';
-  } else {
-    return 'pr-[9.4rem]';
-  }
-}

package/src/components/CarouselProgramsCard/programCardStyles.mobile.ts

@@ -1,2 +0,0 @@
-export const cardTitleFont = 'font-light';
-export const cardDescriptionColor = '';

package/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -1,2 +0,0 @@
-export const cardTitleFont = 'font-normal';
-export const cardDescriptionColor = 'text-secondary-text';

package/src/components/Tabs/CenteredTabs.tsx

@@ -1,12 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { RenderTabProps } from './renderTab';
-import { renderTab } from './renderTab';
-import type { TabData } from './TabsContent';
-
-interface CenteredTabsProps extends RenderTabProps {
-  tabs?: TabData[];
-}
-
-export const CenteredTabs = JSX<CenteredTabsProps>(({ tabs, ...rest }) => (
-  <div className="flex p-1 m-auto bg-main-gray rounded-md">{tabs?.map(renderTab({ ...rest }))}</div>
-));

package/src/components/Tabs/LinkTab.tsx

@@ -1,47 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import { style } from '../../utils/style';
-import { getTabClassName } from './tabItemClasses';
-import type { LinkTabData, TabData, TabsMode } from './TabsContent';
-
-interface LinkTabProps {
-  tab: LinkTabData;
-  currentTab?: TabData;
-  onClick: (tab: TabData) => void;
-  tabsMode?: TabsMode;
-}
-
-export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick, tabsMode } = props;
-  const active = currentTab?.type === 'link' && currentTab.href === tab.href;
-
-  const link = useLink();
-  const adjustedProps = link(tab);
-
-  const handleClick = (ev?: { preventDefault: () => void }) => {
-    adjustedProps.onClick(ev);
-    onClick(tab);
-  };
-
-  return (
-    <div
-      className={getTabClassName('block', active, tabsMode)}
-      role="tab"
-      aria-selected={active}
-      onClick={() => onClick(tab)}
-    >
-      <a
-        role="tab"
-        className={style(
-          'flex flex-1 items-center justify-center h-full',
-          getTabClassName('text', active, tabsMode),
-        )}
-        target={tab.target}
-        href={adjustedProps.href}
-        onClick={handleClick}
-      >
-        <span>{tab.text}</span>
-      </a>
-    </div>
-  );
-});

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,46 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import type { RenderTabProps } from './renderTab';
-import { renderTab } from './renderTab';
-import type { TabData } from './TabsContent';
-
-interface ScrollableTabsProps extends RenderTabProps {
-  tabs?: TabData[];
-}
-
-export type IsScrollButtonsShown = boolean[];
-
-const scrollButtonStyle = 'absolute z-40 top-0';
-
-export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
-  const { tabs, ...rest } = props;
-
-  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-    itemCount: tabs?.length || 0,
-  });
-
-  return (
-    <div className="relative max-w-full m-auto">
-      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
-        <SwipeListContainer
-          containerRef={containerRef}
-          snapAlign="snap-start"
-          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-        >
-          {tabs?.map(renderTab({ ...rest }))}
-        </SwipeListContainer>
-      </div>
-      {scroll.canScrollLeft ? (
-        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
-      ) : null}
-      {scroll.canScrollRight ? (
-        <ScrollRightButton
-          className={`${scrollButtonStyle} rotate-180 right-6`}
-          onClick={scroll.scrollRight}
-        />
-      ) : null}
-    </div>
-  );
-});

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,53 +0,0 @@
-import { style } from '../../utils/style';
-import type { RenderTabProps } from './renderTab';
-import { getTabClassName } from './tabItemClasses';
-import type { GroupTabData, TabsMode } from './TabsContent';
-
-const BADGE_CLASSES =
-  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
-const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
-const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
-
-export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
-  (tab: GroupTabData, i: number) => {
-    const active = currentTab === tab;
-
-    const count =
-      tab.ref && page?.blocks
-        ? page.blocks.filter((block) => block?.labels?.includes(tab.ref as string)).length
-        : 0;
-
-    return (
-      <div
-        key={`group-${String(i)}`}
-        className={getTabClassName('block', active, tabsMode)}
-        role="tab"
-        aria-selected={active}
-        onClick={() => onClick(tab)}
-      >
-        <div
-          className={style(
-            'flex flex-1 items-center justify-center h-full',
-            getTabClassName('text', active, tabsMode),
-          )}
-        >
-          <span>{tab.title}</span>
-          {showCounter && count ? renderCount(tabsMode, count, active) : null}
-        </div>
-      </div>
-    );
-  };
-
-const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
-  return (
-    <div
-      className={style(
-        BADGE_CLASSES,
-        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
-      )}
-    >
-      {count}
-    </div>
-  );
-};

package/src/components/Tabs/renderTab.tsx

@@ -1,35 +0,0 @@
-import type { ContentPageDef } from '../../model/ContentPageDef';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import { LinkTab } from './LinkTab';
-import { renderGroupTab } from './renderGroupTab';
-import type { TabData, TabsMode } from './TabsContent';
-
-export interface RenderTabProps {
-  page?: ContentPageDef;
-  currentTab?: TabData;
-  showCounter?: boolean;
-  onClick: (tab: TabData) => void;
-  tabsMode?: TabsMode;
-}
-
-export const renderTab =
-  ({ page, showCounter, ...rest }: RenderTabProps) =>
-  (tab: TabData, i: number) => {
-    const type = tab.type;
-
-    if (!(type === 'group' || type === 'link')) {
-      return null;
-    }
-
-    switch (type) {
-      case 'group':
-        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
-      case 'link': {
-        return <LinkTab key={String(i)} tab={tab} {...rest} />;
-      }
-      default:
-        assertUnreachable(type);
-    }
-
-    return null;
-  };

package/src/components/Tabs/tabItemClasses.ts

@@ -1,56 +0,0 @@
-import type { TabsMode } from './TabsContent';
-
-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/btn bg-white';
-
-export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
-export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
-
-export const TEXT_CLASSES = 'font-sans text-m text-center';
-export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
-
-export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-
-const TAB_CLASSES = {
-  block: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-    },
-    centered: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-    },
-    wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
-    },
-  },
-};
-
-export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
-  type,
-  active,
-  tabsMode,
-) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return TAB_CLASSES[type][mode][styleActive];
-};

package/src/ui-kit/BaseTile/getTileRightPadding.ts

@@ -1,12 +0,0 @@
-import { getColSpan } from '../../utils/getColSpan';
-
-export function getTileRightPadding(className = '') {
-  const colSpan = getColSpan(className);
-  if (colSpan <= 6) {
-    return 'pr-9';
-  } else if (colSpan <= 8) {
-    return 'pr-[4.75rem]';
-  } else {
-    return 'pr-[9.4rem]';
-  }
-}