@redneckz/wildless-cms-uni-blocks 0.12.13 → 0.13.0

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/hooks/useCachedAsyncData.ts

@@ -1,37 +0,0 @@
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import type { AsyncDataResponse, Fetcher } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-
-const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
-
-export function useCachedAsyncData<Data = any>(
-  key: string,
-  fetcher: Fetcher<Data, string>,
-  storage: any = globalThis?.localStorage,
-): AsyncDataResponse<Data> {
-  const cachedFetcher: typeof fetcher = useCallback(
-    async (...args) => {
-      const storageKey = `async:${key}`;
-      const storageData: string = storage.getItem(storageKey);
-
-      const cachedData = getParsedData(storageData);
-      if (cachedData) {
-        return cachedData;
-      }
-
-      const data = await fetcher(...args);
-      storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
-
-      return data;
-    },
-    [key, fetcher],
-  );
-
-  return useAsyncData(key, cachedFetcher);
-}
-
-function getParsedData(storageData: string) {
-  const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
-
-  return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
-}

package/src/model/Button.ts

@@ -1,16 +0,0 @@
-import type { ButtonProps, ButtonWithIconProps } from '../ui-kit/Button/ButtonProps';
-
-/**
- * @title Блок Кнопка
- */
-export interface ButtonCommonProps {
-  /** @title Кнопка */
-  button?: ButtonProps;
-}
-/**
- * @title Блок Кнопка
- */
-export interface ButtonCommonIconProps {
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-}

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]';
-  }
-}

package/src/ui-kit/Dialog/Dialog.tsx

@@ -1,46 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import type { VNode } from '../../model/VNode';
-import { style } from '../../utils/style';
-import { CloseButton } from './CloseButton';
-
-export interface DialogProps {
-  className?: string;
-  isOpened?: boolean;
-  head?: VNode;
-  onClose?: () => void;
-}
-
-export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, onClose }) => {
-  useEffect(() => {
-    const handleEscape = ({ key }: { key: string }) => {
-      if (key === 'Escape') {
-        onClose && onClose();
-      }
-    };
-
-    globalThis.document?.addEventListener('keydown', handleEscape);
-
-    return () => {
-      globalThis.document?.removeEventListener('keydown', handleEscape);
-    };
-  }, [onClose]);
-
-  return isOpened ? (
-    <div
-      className={style(
-        'fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
-        className,
-      )}
-      role="dialog"
-    >
-      <div className="relative container pb-6xl min-h-full">
-        <div className="sticky bg-white pt-xl top-0">
-          <CloseButton className="absolute top-0 -right-6xl" onClick={onClose} />
-          {head}
-        </div>
-        {children}
-      </div>
-    </div>
-  ) : null;
-});

package/src/ui-kit/Dialog/DialogAction.ts

@@ -1,14 +0,0 @@
-export type DialogAction = DialogOpenAction | DialogCloseAction;
-
-export interface DialogInitialParams {
-  id: string;
-  message?: string;
-}
-
-interface DialogOpenAction extends DialogInitialParams {
-  type: 'open';
-}
-
-interface DialogCloseAction {
-  type: 'close';
-}

package/src/ui-kit/Dialog/useDialog.ts

@@ -1,6 +0,0 @@
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-
-export const useDialog = (id = '') => ({
-  open: (message?: string) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
-  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-});

package/src/ui-kit/Dialog/useDialogHandlers.ts

@@ -1,28 +0,0 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import type { DialogInitialParams } from './DialogAction';
-
-export interface DialogHandlers {
-  onOpen?: (params: DialogInitialParams) => void;
-  onClose?: () => void;
-}
-
-export function useDialogHandlers({ onOpen, onClose }: DialogHandlers = {}) {
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('dialog', (action) => {
-        switch (action.type) {
-          case 'open':
-            onOpen && onOpen(action);
-            break;
-          case 'close':
-            onClose && onClose();
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [onOpen, onClose],
-  );
-}

package/src/ui-kit/Dialog/useDialogProps.ts

@@ -1,48 +0,0 @@
-import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { useBool } from '../../hooks/useBool';
-import type { DialogProps } from './Dialog';
-import type { DialogInitialParams } from './DialogAction';
-import { useDialogHandlers } from './useDialogHandlers';
-
-export function useDialogProps(
-  id: string,
-  isOpenedOnInit = false,
-): DialogProps & DialogInitialParams & { wasOpened: boolean; open: () => void; close: () => void } {
-  const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
-  const [params, setParams] = useState<DialogInitialParams>({ id });
-
-  const wasOpened = useRef(isOpened);
-  wasOpened.current ||= isOpened;
-
-  const handleOpen = useCallback(
-    (_: DialogInitialParams) => {
-      if (_.id === id) {
-        setParams(_);
-        open();
-      } else {
-        close();
-      }
-    },
-    [id],
-  );
-
-  const handleClose = useCallback(() => {
-    close();
-    defaultEventBus.fire('dialog', { type: 'close' });
-  }, []);
-
-  useDialogHandlers({
-    onOpen: handleOpen,
-    onClose: close,
-  });
-
-  return {
-    ...params,
-    isOpened,
-    wasOpened: wasOpened.current,
-    open,
-    close,
-    onClose: handleClose,
-  };
-}

package/src/ui-kit/LocationDialog/LocationDialogProps.ts

@@ -1,21 +0,0 @@
-import type { Region } from '../../hooks/useRegions';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { ForeignOffice } from '../../services/sitemap/SitemapData';
-
-export interface RegionLinkProps {
-  onChangeLocation?: (region: Region) => void;
-}
-
-export interface CurrentLocationProps {
-  currentLocation?: Region;
-  onChangeLocation?: (region: Region) => void;
-}
-
-export interface ForeignOfficeProps {
-  foreignOffices?: ForeignOffice[];
-}
-
-export type LocationDialogProps = ForeignOfficeProps &
-  RegionLinkProps &
-  CurrentLocationProps &
-  UniBlockProps;