@redneckz/wildless-cms-uni-blocks 0.13.9 → 0.13.10

package/src/components/StickyBottomMenu/StickyBottomMenu.fixture.mobile.tsx

@@ -0,0 +1,36 @@
+import '../../setup-fixture';
+import { StickyBottomMenu } from './StickyBottomMenu';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import type { MenuItem } from './StickyBottomMenuContent';
+
+const MENU_ITEMS: MenuItem[] = [
+  {
+    title: 'Кредиты',
+    url: '#EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
+  },
+  {
+    title: 'Карты',
+    url: '#CardIcon',
+    icon: { icon: 'CardIcon' },
+  },
+  {
+    title: 'Вклады',
+    url: '#SafeIcon',
+    icon: { icon: 'SafeIcon' },
+  },
+  {
+    title: 'Инвестиции',
+    url: '#ChartIcon',
+    icon: { icon: 'ChartIcon' },
+  },
+];
+
+export default {
+  default: (
+    <div>
+      <StickyBottomMenu menuItems={MENU_ITEMS} />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/StickyBottomMenu/StickyBottomMenu.fixture.tsx

@@ -0,0 +1,36 @@
+import '../../setup-fixture';
+import { StickyBottomMenu } from './StickyBottomMenu';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import type { MenuItem } from './StickyBottomMenuContent';
+
+export const MENU_ITEMS: MenuItem[] = [
+  {
+    title: 'Кредиты',
+    url: '#EmptyWalletIcon',
+    icon: { icon: 'EmptyWalletIcon' },
+  },
+  {
+    title: 'Карты',
+    url: '#CardIcon',
+    icon: { icon: 'CardIcon' },
+  },
+  {
+    title: 'Вклады',
+    url: '#SafeIcon',
+    icon: { icon: 'SafeIcon' },
+  },
+  {
+    title: 'Инвестиции',
+    url: '#ChartIcon',
+    icon: { icon: 'ChartIcon' },
+  },
+];
+
+export default {
+  default: (
+    <div>
+      <StickyBottomMenu menuItems={MENU_ITEMS} />
+      <DialogManager />
+    </div>
+  ),
+};

package/src/components/StickyBottomMenu/StickyBottomMenu.mobile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { BurgerMenuDialog } from './BurgerMenuDialog';
+import { useBurgerMenuDialog } from './useBurgerMenuDialog';
+import type { MenuItemProps, StickyBottomMenuProps } from './StickyBottomMenuProps';
+import { useSWRResource } from '../../hooks/useSWRResource';
+import { projectSettings } from '../../ProjectSettings';
+import { renderMenuItems } from './renderMenuItems';
+
+export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
+  const { menuItems = [] } = useSWRResource<StickyBottomMenuProps>(
+    projectSettings.STICKY_MOBILE_MENU || 'stickyBottomMenu',
+    rest.options?.page?.fallback,
+  );
+
+  const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog();
+
+  const burgerMenu = {
+    title: 'Меню',
+    icon: {
+      icon: 'BurgerIcon',
+      iconVersion: isBurgerMenuDialogOpen ? 'color' : 'black',
+    },
+    isActive: isBurgerMenuDialogOpen,
+  };
+  const middleIdx = Math.floor(menuItems.length / 2);
+  const menuItemsWithButton = useMemo(
+    () =>
+      [
+        ...menuItems.slice(0, middleIdx),
+        burgerMenu,
+        ...menuItems.slice(middleIdx),
+      ] as MenuItemProps[],
+    [menuItems, middleIdx, burgerMenu],
+  );
+
+  return (
+    <div className="contents">
+      {renderMenuItems(menuItemsWithButton, toggle)}
+      {isBurgerMenuDialogOpen ? <BurgerMenuDialog /> : null}
+    </div>
+  );
+});

package/src/components/StickyBottomMenu/StickyBottomMenu.tsx

@@ -0,0 +1,4 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { StickyBottomMenuProps } from './StickyBottomMenuProps';
+
+export const StickyBottomMenu = JSX<StickyBottomMenuProps>(() => <div></div>); // DO not remove "<div></div>". Required to pass tests. With "null" it's falling.

package/src/components/StickyBottomMenu/StickyBottomMenu.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "menuItems": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/StickyBottomMenu/StickyBottomMenuContent.ts

@@ -0,0 +1,24 @@
+import { Picture } from '../../model/Picture';
+
+/**
+ * @title Пункт меню
+ */
+export interface MenuItem {
+  /** @title Название */
+  title?: string;
+  /** @title Адрес */
+  url?: string;
+  /** @title Иконка */
+  icon?: Picture;
+}
+
+/**
+ * @title Кнопки меню
+ */
+export interface StickyBottomMenuContent {
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  menuItems?: MenuItem[];
+}

package/src/components/StickyBottomMenu/StickyBottomMenuProps.tsx

@@ -0,0 +1,10 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { MenuItem, StickyBottomMenuContent } from './StickyBottomMenuContent';
+
+export interface MenuItemProps extends MenuItem {
+  isActive?: boolean;
+}
+
+export interface StickyBottomMenuProps extends StickyBottomMenuContent, UniBlockProps {
+  menuItems?: MenuItemProps[];
+}

package/src/components/StickyBottomMenu/TopItemMobile.tsx

@@ -0,0 +1,32 @@
+import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { style } from '../../utils/style';
+import { useLink } from '../../hooks/useLink';
+
+interface TopItemProps {
+  item: TopMenuItemProps;
+  i: number;
+  isActive: boolean;
+}
+
+export const TopItemMobile = ({ item, i, isActive }: TopItemProps) => {
+  const link = useLink();
+  const { href, target, onClick } = link(item);
+
+  return (
+    <a
+      key={String(i)}
+      href={href}
+      target={target}
+      onClick={onClick}
+      className="relative"
+      aria-label={item.text}
+    >
+      <span className={style('whitespace-nowrap', isActive ? 'text-primary-main' : '')}>
+        {item.text}
+      </span>
+      {isActive ? (
+        <div className="absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" />
+      ) : null}
+    </a>
+  );
+};

package/src/components/StickyBottomMenu/renderMenuItems.tsx

@@ -0,0 +1,32 @@
+import type { MenuItemProps } from './StickyBottomMenuProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { Img } from '../../ui-kit/Img/Img';
+
+export const renderMenuItems = (menuItems: MenuItemProps[], onClick?: () => void) => (
+  <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
+    <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
+      {menuItems.map((_, i) => renderItem(_, i, onClick))}
+    </div>
+  </BlockWrapper>
+);
+
+const renderItem = (_: MenuItemProps, idx: number, onClick?: () => void) => (
+  <div
+    key={`menuItems-${String(idx)}`}
+    className={style(
+      _.isActive ? 'text-primary-main' : 'text-primary-text',
+      `w-10 m-4 flex justify-center items-center flex-col text-[10px] cursor-pointer`,
+    )}
+    onClick={() => (_?.icon?.icon === 'BurgerIcon' && onClick ? onClick() : undefined)}
+  >
+    <Img
+      className="w-6 h-6"
+      image={{
+        icon: _.icon?.icon,
+        iconVersion: _.icon?.iconVersion || 'black',
+      }}
+    />
+    {_.title}
+  </div>
+);

package/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -0,0 +1,34 @@
+import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
+import { BurgerMenuDialog } from './BurgerMenuDialog';
+import { useDialogsList } from '../../ui-kit/DialogManager/useDialogsList';
+import { isDialogOpen } from '../../ui-kit/DialogManager/isDialogOpen';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+
+export const BURGER_MENU_DIALOG_ID = 'burgerMenuDialog';
+
+export const useBurgerMenuDialog = (): [
+  boolean | undefined,
+  {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+  },
+] => {
+  const { open: openDialog, closeAll, close } = useDialogManager();
+
+  const dialogs = useDialogsList();
+  const isBurgerMenuOpen = isDialogOpen(BURGER_MENU_DIALOG_ID, dialogs);
+  const open = useCallback(
+    () => openDialog(<BurgerMenuDialog />, { id: BURGER_MENU_DIALOG_ID }),
+    [],
+  );
+  const toggle = useCallback(() => {
+    if (isBurgerMenuOpen) {
+      closeAll();
+    } else {
+      open();
+    }
+  }, [isBurgerMenuOpen]);
+
+  return [Boolean(isBurgerMenuOpen), { open, close, toggle }];
+};

package/src/hooks/useActiveRoute.ts

@@ -0,0 +1,12 @@
+import { useRouter } from './useRouter';
+import { isTopItemActive } from '../components/Header/isTopItemActive';
+import type { TopMenuItemProps } from '../services/sitemap/SitemapData';
+
+export function useActiveRoute(
+  items: TopMenuItemProps[] | undefined = [],
+): [number, TopMenuItemProps] {
+  const router = useRouter();
+  const activeIndex = items.findIndex(isTopItemActive(router));
+
+  return [activeIndex, items[activeIndex]];
+}

package/src/hooks/useSWRResource.ts

@@ -3,13 +3,15 @@ import type { Fallback } from '../model/Fallback';
 import { fetchJSONUnsafe } from '../utils/fetchJSON';
 
 const EMPTY_VALUE = {};
+const DEFAULT_FOLDER_NAME = 'wcms-resources';
 
 export function useSWRResource<Data>(
   filename: string | null | undefined,
   fallback: Fallback = EMPTY_VALUE,
+  folderName: string = DEFAULT_FOLDER_NAME,
 ): Data {
   const { data } = useAsyncData<Data, any, string | null>(
-    filename ? `/wcms-resources/${filename}.json` : null,
+    filename ? `/${folderName}/${filename}.json` : null,
     fetchJSONUnsafe,
     { fallback },
   );

package/src/icons/BurgerIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Бургер" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 6H21" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
-  <path d="M9.49023 12H21.0002" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
-  <path d="M3 12H5.99" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
-  <path d="M3 18H21" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M9.49023 12H21.0002" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 12H5.99" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </svg>

package/src/icons/ChartIcon.svg

@@ -0,0 +1,7 @@
+<svg title="Инвестиции" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 22H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 13.0028V18.0028C3 18.5528 3.45 19.0028 4 19.0028H5.59998C6.14998 19.0028 6.59998 18.5528 6.59998 18.0028V9.38281C6.59998 8.83281 6.14998 8.38281 5.59998 8.38281H4C3.45 8.38281 3 8.83281 3 9.38281" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7999 5.1875H11.2C10.65 5.1875 10.2 5.6375 10.2 6.1875V17.9975C10.2 18.5475 10.65 18.9975 11.2 18.9975H12.7999C13.3499 18.9975 13.7999 18.5475 13.7999 17.9975V6.1875C13.7999 5.6375 13.3499 5.1875 12.7999 5.1875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 3C21 2.45 20.55 2 20 2H18.4C17.85 2 17.4 2.45 17.4 3V18C17.4 18.55 17.85 19 18.4 19H20C20.55 19 21 18.55 21 18V7.13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>