@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.28

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -3,12 +3,12 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -17,7 +17,7 @@ export interface TariffsTableRowProps extends UniBlockProps {
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, context, rowIdx }) => {
+  ({ row: { header, data }, activeCardIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
 
@@ -25,9 +25,9 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
 
     return (
       <TariffsTableRowContainer
-        context={context}
         onHideContentClick={onHideContentClick}
         tableInner={tableInner}
+        {...rest}
       >
         <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
@@ -55,11 +55,11 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 cells={cells}
                 rowIdx={rowIdx}
                 cellIdx={i}
-                context={context}
                 setTableInner={setTableInner}
                 tableInner={tableInner}
                 openTableInnerIdx={openTableInnerIdx}
                 setOpenTableInnerIdx={setOpenTableInnerIdx}
+                {...rest}
               />
             ))}
           </TableCarouselContainer>

package/mobile/src/components/TariffsTable/TariffsTableRowContainer.tsx

@@ -1,26 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { VNode } from '../../model/VNode';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
-  children?: VNode;
-  onHideContentClick: () => void;
   tableInner?: TariffsTableInnerContent;
+  onHideContentClick?: () => void;
 }
 
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
-  ({ context, children, tableInner, onHideContentClick }) => {
-    return (
-      <div className="self-start flex flex-col" role="row">
-        <div className="flex">{children}</div>
-        {tableInner ? (
-          <div className="origin-top animate-expansion">
-            <InnerTable context={context} {...tableInner} onClick={onHideContentClick} />
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ children, tableInner, onHideContentClick }) => (
+    <div className="self-start flex flex-col" role="row">
+      <div className="flex">{children}</div>
+      {tableInner ? (
+        <div className="origin-top animate-expansion">
+          <InnerTable {...tableInner} onClick={onHideContentClick} />
+        </div>
+      ) : null}
+    </div>
+  ),
 );

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,45 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 import { EmbeddableCellData } from './EmbeddableCellData';
 import { TableTileHeader } from './TableTileHeader';
 import type { CellDef, TariffsTableTile } from './TariffsTableContent';
 
-export interface TariffsTableTileCellProps {
-  context: ContentPageContext;
-  tile: TariffsTableTile;
+export interface TariffsTableTileCellProps extends UniBlockProps {
+  tile?: TariffsTableTile;
 }
 
-export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ context, tile }) => {
-  return (
-    <div className="rounded-md border-main-stroke h-full box-border border p-4">
-      <TableTileHeader {...tile.header} />
-      {tile.data?.length ? tile.data.map(renderCellInner(context)) : null}
-    </div>
-  );
-});
-
-const renderCellInner = (context: ContentPageContext) => (cell: CellDef, i: number) =>
-  (
-    <div key={String(i)}>
-      {i > 0 ? <div className="h-5" /> : null}
-      {renderCell(cell, context)}
-    </div>
-  );
-
-const renderCell = (cell: CellDef, context: ContentPageContext) => {
-  if (!cell) {
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...rest }) => (
+  <div className="rounded-md border-main-stroke h-full box-border border p-4">
+    <TableTileHeader {...tile?.header} />
+    {tile?.data?.length
+      ? tile.data.map((cell, i) => (
+          <div key={String(i)}>
+            {i > 0 ? <div className="h-5" /> : null}
+            {renderCell(cell, rest)}
+          </div>
+        ))
+      : null}
+  </div>
+));
+
+function renderCell(cell: CellDef, props: UniBlockProps): VNode {
+  if (!cell || !cell.tableCellType || !(cell.tableCellType in EmbeddableCellData)) {
     return null;
   }
 
-  const { tableCellType: type, ...rest } = cell;
+  const EmbeddableCellInner = EmbeddableCellData[cell.tableCellType];
 
-  if (!type || !(type in EmbeddableCellData)) {
-    return null;
-  }
-
-  const EmbeddableCellInner = EmbeddableCellData[type];
-
-  return (
-    <EmbeddableCellInner context={context} displayTable={() => null} {...rest} isVisible={true} />
-  );
-};
+  return <EmbeddableCellInner displayTable={() => null} isVisible={true} {...cell} {...props} />;
+}

package/mobile/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -3,10 +3,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { TariffsTableProps } from './TariffsTableContent';
 import { TariffsTableTileCell } from './TariffsTableTileCell';
 
-export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, context }) => (
-  <div className="flex flex-col gap-3.5">
-    {tiles.map((tile, i) => (
-      <TariffsTableTileCell key={String(i)} tile={tile} context={context} />
-    ))}
-  </div>
-));
+export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
+  tiles?.length ? (
+    <div className="flex flex-col gap-3.5">
+      {tiles.map((tile, i) => (
+        <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
+      ))}
+    </div>
+  ) : null,
+);

package/mobile/src/components/Tile/Tile.tsx

@@ -20,12 +20,10 @@ export interface TileProps extends TileContent, UniBlockProps {
 
 export const Tile = JSX<TileProps>((props) => {
   const {
-    context,
     title,
     headingType = 'h3',
     description,
     items,
-    children,
     buttons,
     image,
     isDotted = true,
@@ -33,20 +31,19 @@ export const Tile = JSX<TileProps>((props) => {
     className = '',
     version = 'primary',
     tags,
+    children,
     ...rest
   } = props;
   const headingClassName = version === 'primary' ? 'text-primary-text' : '';
 
   return (
     <BlockWrapper
-      context={context}
       className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
         VersionStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       {...rest}
     >
       <BaseTile
-        context={context}
         title={
           title ? (
             <Heading
@@ -60,9 +57,9 @@ export const Tile = JSX<TileProps>((props) => {
         buttons={
           buttons?.length ? (
             <ButtonSection
-              context={context}
               buttons={buttons.map((button) => ({ ...button, className: 'min-w-[158px]' }))}
               className="flex mt-8 gap-3"
+              {...rest}
             />
           ) : null
         }

package/mobile/src/components/VerticalLayout/VerticalLayout.example.json

@@ -0,0 +1,17 @@
+{
+  "title": "Вертикальный компоновщик",
+  "version": "transparent",
+  "align": "left",
+  "gap": "",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { AlignType } from '../../model/AlignType';
+import { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { GapVersion, VerticalLayoutContent } from './VerticalLayoutContent';
+
+export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
+
+const alignStyle: Record<AlignType, string> = {
+  left: 'items-start',
+  center: 'items-center',
+  right: 'items-end',
+};
+
+const gapStyleMap: Record<GapVersion, string> = {
+  XXL: 'gap-10',
+  XL: 'gap-8',
+  L: 'gap-4',
+  M: 'gap-3',
+  S: 'gap-2',
+  XS: 'gap-1',
+  '': '',
+};
+
+const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
+  transparent: '',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};
+
+export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
+  ({ className = '', children, gap = '', align = 'left', version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={[
+        'flex flex-col',
+        gapStyleMap[gap],
+        alignStyle[align],
+        backgroundStyleMap[version],
+        className,
+      ].join(' ')}
+      {...rest}
+    >
+      {children}
+    </BlockWrapper>
+  ),
+);
+
+VerticalLayout.childrenTypes = {
+  exclude: ['VerticalLayout'],
+};

package/mobile/src/components/VerticalLayout/VerticalLayout.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -0,0 +1,19 @@
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { ColorPalette } from '../../model/ContentPageDef';
+
+/**
+ * @title Отсуп между компонентами
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
+ */
+export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+
+/**
+ * @title Вертикальный компоновщик
+ */
+export interface VerticalLayoutContent {
+  colorPalette?: ColorPalette;
+  version?: BlockVersionWithTransparent;
+  align?: AlignType;
+  gap?: GapVersion;
+}

package/mobile/src/hooks/handlerDecorator.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent?: any) => F;
+
+export const handlerDecorator: HandlerDecorator & {
+  _impl: HandlerDecorator;
+  setup(impl: HandlerDecorator): void;
+} = (handler, targetContent) => {
+  return handlerDecorator._impl(handler, targetContent);
+};
+
+handlerDecorator._impl = (handler) => handler;
+
+handlerDecorator.setup = (impl) => {
+  handlerDecorator._impl = impl;
+};

package/mobile/src/hooks/useLink.ts

@@ -1,30 +1,34 @@
-import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageContext';
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
 import { isURL } from '../utils/url';
+import { handlerDecorator } from './handlerDecorator';
+import { useRouter } from './useRouter';
 
-export const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
+interface ClickHandler {
+  onClick(ev?: { preventDefault: () => void }): void;
+}
+
+export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
+  props: L,
+) => L & ClickHandler {
+  const router = useRouter();
 
-export function useLink(
-  {
-    router,
-    handlerDecorator = defaultHandlerDecorator,
-  }: { router: Router; handlerDecorator?: HandlerDecorator },
-  link: Partial<LinkProps & { className: string }>,
-) {
-  const href = adjustHref(link.href, router);
+  return (props) => {
+    const href = adjustHref(props.href, router);
 
-  return {
-    ...link,
-    href,
-    'aria-label': link.text,
-    onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
-      const isLocalHref = href && !isURL(href);
-      const isLocalTarget = !link.target || link.target === '_self';
-      if (isLocalHref && isLocalTarget) {
-        ev?.preventDefault();
-        router.push(href);
-      }
-    }, link),
+    return {
+      ...props,
+      href,
+      'aria-label': props.text,
+      onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
+        props.onClick && props.onClick(ev);
+        const isLocalHref = href && !isURL(href);
+        const isLocalTarget = !props.target || props.target === '_self';
+        if (isLocalHref && isLocalTarget) {
+          ev?.preventDefault();
+          router.push(href);
+        }
+      }, props),
+    };
   };
 }

package/mobile/src/hooks/useRouter.ts

@@ -0,0 +1,28 @@
+export interface Router {
+  pathname: string;
+  query: Record<string, string | string[] | undefined>;
+  href?: string;
+  basePath?: string;
+  push: (url: string) => void;
+  replace: (url: string) => void;
+}
+
+export function useRouter(): Router {
+  return useRouter._impl();
+}
+
+useRouter._impl = (): Router => ({
+  href: globalThis.location?.href || '/',
+  pathname: globalThis.location?.pathname || '/',
+  query: {},
+  push: () => {
+    // Do nothing
+  },
+  replace: () => {
+    // Do nothing
+  },
+});
+
+useRouter.setup = (impl: () => Router) => {
+  useRouter._impl = impl;
+};

package/mobile/src/hooks/useTableArrowScrollControl.ts

@@ -1,22 +1,28 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { TableArrowScrollControlProps } from '../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 
 export const useTableArrowScrollControl = ({
   columnsLength,
   colsLengthForScroll,
-  activeCardIndex,
-  setActiveCardIndex,
 }: {
   columnsLength: number;
   colsLengthForScroll: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (_: number) => void;
 }): Required<TableArrowScrollControlProps> => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const [activeCardIndex, setActiveCardIndex] = useState(0);
+
+  const onNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
+  const onPrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
 
   const isScrollAvailable = columnsLength > colsLengthForScroll;
   const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
   const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
 
-  return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
+  return {
+    activeCardIndex,
+    onNextClick,
+    onPrevClick,
+    isScrollAvailable,
+    showNextButton,
+    showPrevButton,
+  };
 };

package/mobile/src/index.ts

@@ -4,7 +4,10 @@ export { DaDataAPI } from './api/DaDataAPI';
 export { LikeAPI } from './api/LikeAPI';
 export { Blocks } from './components/Blocks';
 export { ContentPage } from './components/ContentPage/ContentPage';
+export { handlerDecorator } from './hooks/handlerDecorator';
+export { useRouter } from './hooks/useRouter';
 export { projectSettings } from './ProjectSettings';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';
+
 export const packageVersion = globalThis.process?.env?.UNI_BLOCKS_VERSION;

package/mobile/src/model/BlockVersion.ts

@@ -14,3 +14,9 @@ export const VersionStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
 };
+
+export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
+  transparent: '',
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};

package/mobile/src/model/BlocksRegistry.ts

@@ -1,3 +1,3 @@
 import type { JSXBlock } from './JSXBlock';
 
-export type BlocksRegistry = Record<string, JSXBlock<any>>;
+export type BlocksRegistry = Record<string, JSXBlock>;

package/mobile/src/model/JSXBlock.ts

@@ -1,25 +1,21 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
-import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
 import type { BlockAncestors, SlotName } from './BlockDecorator';
-import type { ContentPageDef } from './ContentPageDef';
+import type { BlockDef, ContentPageDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
-  context: ContentPageContext;
   page?: ContentPageDef;
+  block?: BlockDef;
   ancestors?: BlockAncestors;
-  labels?: string[];
-  anchor?: string;
   slots?: Record<string, VNode>;
 }
 
-export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
-  BlockProps & UniBlockProps,
+export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<
+  BlockProps,
   any,
   VNode | VNode[]
 > & {
-  childrenTypes?: string[];
+  childrenTypes?: string[] | { include?: string[]; exclude?: string[] };
   slots?: (props: BlockProps) => SlotName[];
-  renderChild?: (child: VNode, i: number) => VNode;
 };

package/mobile/src/react/setup-fixture.ts

@@ -1,14 +1,13 @@
 import '@redneckz/uni-jsx/lib/setup.react';
 import { useState } from 'react';
-import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { handlerDecorator } from '../hooks/handlerDecorator';
+import { useRouter } from '../hooks/useRouter';
 import { projectSettings } from '../ProjectSettings';
 import wlc from '../wlc.json';
 
-const TEST_ORIGIN = 'http://localhost:5001';
-
 projectSettings.setup(wlc);
 
-const Router = () => {
+useRouter.setup(() => {
   const [href, setHref] = useState<string>(globalThis.location.href);
 
   return {
@@ -24,29 +23,10 @@ const Router = () => {
       setHref(globalThis.location.href);
     },
   };
-};
-
-export const context: ContentPageContext = {
-  useRouter: Router,
-  handlerDecorator:
-    (handler, targetContent): any =>
-    (ev) => {
-      ev.preventDefault();
-      console.log(ev.target, ev, targetContent);
-    },
-};
+});
 
-export const mobileContext: ContentPageContext = {
-  ...context,
-  useRouter: () => ({
-    href: `${TEST_ORIGIN}/mobile/credits`,
-    pathname: '/mobile/credits',
-    query: {},
-    push: (url: string) => {
-      console.log(url);
-    },
-    replace: (url: string) => {
-      console.log(url);
-    },
-  }),
-};
+handlerDecorator.setup((handler, targetContent): any => (ev) => {
+  ev.preventDefault();
+  console.log(ev.target, ev, targetContent);
+  handler(ev);
+});

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -19,7 +19,7 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
-export interface SitemapProps {
+export interface SitemapDataProps {
   /** @title Основное меню */
   topItems?: TopMenuItem[];
   /** @title Дополнительное меню */

package/mobile/src/services/sitemap/findActiveSubItem.ts

@@ -1,4 +1,4 @@
-import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { Router } from '../../hooks/useRouter';
 import type { LinkProps } from '../../model/LinkProps';
 import { maxBy } from '../../utils/maxBy';
 import { isSubItemActive } from './isSubItemActive';

package/mobile/src/services/sitemap/isHrefActive.ts

@@ -1,5 +1,4 @@
 import { isURL, withoutQuery } from '../../utils/url';
-import { withoutMobilePath } from '../../utils/withoutMobilePath';
 
 export const isHrefActive = (
   href: string | undefined,
@@ -7,8 +6,5 @@ export const isHrefActive = (
   cmp: (targetHref: string, baseHref: string) => boolean = (targetHref, baseHref) =>
     baseHref.startsWith(targetHref),
 ) => {
-  return cmp(
-    withoutQuery(href),
-    withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)),
-  );
+  return cmp(withoutQuery(href), withoutQuery(isURL(href) ? router.href : router.pathname));
 };

package/mobile/src/services/sitemap/isSubItemActive.ts

@@ -1,4 +1,4 @@
-import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { Router } from '../../hooks/useRouter';
 import type { LinkProps } from '../../model/LinkProps';
 import { isHrefActive } from './isHrefActive';
 

package/mobile/src/services/sitemap/isTopItemActive.ts

@@ -1,4 +1,4 @@
-import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { Router } from '../../hooks/useRouter';
 import { checkIsHrefSameOrigin } from './checkIsHrefSameOrigin';
 import { isHrefActive } from './isHrefActive';
 import { isSubItemActive } from './isSubItemActive';

package/mobile/src/services/sitemap/useSWRResource.ts

@@ -0,0 +1,11 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import type { Fallback } from '../../model/Fallback';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export function useSWRResource<Data>(fileName: string, fallback: Fallback = {}): Data {
+  const { data } = useAsyncData<Data>(`/wcms-resources/${fileName}.json`, fetchJSONUnsafe, {
+    fallback,
+  });
+
+  return data || ({} as Data);
+}