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

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);
+}

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -6,9 +6,9 @@ import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
 
-interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
-  anchor?: string;
+interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
+  role?: string;
 }
 
 const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
@@ -21,9 +21,11 @@ const OBSERVER_OPTIONS = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, children, tag = 'section', labels, role }) => {
+  ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
+    const { anchor, labels } = block || {};
+
     const [isVisible, setVisible] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
@@ -45,7 +47,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = labels?.length || anchor;
+            const hasSettings = labels?.length || block?.anchor;
             setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
           } else {
             changeHash(event.label);

package/mobile/src/ui-kit/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../hooks/useLink';
 import type { LinkProps } from '../model/LinkProps';
 
 export interface BreadcrumbProps extends LinkProps {
@@ -6,13 +7,15 @@ export interface BreadcrumbProps extends LinkProps {
   onClick?: () => void;
 }
 
-export const Breadcrumb = JSX<BreadcrumbProps>(
-  ({ text, href, target, onClick, className = '', children }) =>
-    href ? (
-      <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
-        <span className={className}>{text || children}</span>
-      </a>
-    ) : (
+export const Breadcrumb = JSX<BreadcrumbProps>(({ className = '', children, ...props }) => {
+  const link = useLink();
+  const { text, href, target, onClick } = link(props);
+
+  return href ? (
+    <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
       <span className={className}>{text || children}</span>
-    ),
-);
+    </a>
+  ) : (
+    <span className={className}>{text || children}</span>
+  );
+});

package/mobile/src/ui-kit/Button/Button.tsx

@@ -1,87 +1,48 @@
-/* eslint-disable max-lines-per-function */
-/* eslint-disable complexity */
-
 import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonVersion } from '../../model/ButtonVersion';
+import { useLink } from '../../hooks/useLink';
 import { ButtonInner } from './ButtonInner';
 import type { ButtonWithIconProps } from './ButtonProps';
+import { getDisabledButtonClasses } from './getDisabledButtonClasses';
+import { getRegularButtonClasses } from './getRegularButtonClasses';
 
-const buttonStyleMap: Record<ButtonVersion, string> = {
-  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-  secondary:
-    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-  white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
-  link: 'text-primary-main',
-};
-
-const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
-  primary: 'bg-secondary-dark text-secondary-text',
-  secondary: 'bg-secondary-light text-secondary-text',
-  white: 'bg-white text-primary-text',
-  link: '',
-};
+export const Button = JSX<ButtonWithIconProps>(({ disabled, children, ...rest }) => {
+  const link = useLink();
+  const adjustedProps = link(rest);
+  const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
 
-const styleButton = 'w-full text-center font-sans select-none';
+  return disabled ? (
+    <DisabledButton {...adjustedProps}>{buttonInner}</DisabledButton>
+  ) : (
+    <RegularButton {...adjustedProps}>{buttonInner}</RegularButton>
+  );
+});
 
-export const Button = JSX<ButtonWithIconProps>(
-  ({
-    className,
-    text,
-    aboveText,
-    appendLeft,
-    href,
-    target,
-    onClick,
-    children,
-    disabled,
-    rounded,
-    version = 'primary',
-    ariaLabel,
-    ...rest
-  }) => {
-    // It isn't a valid HTML attribute. Must be excluded from "rest"
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { appendRight, ...buttonInnerRest } = rest;
-    const buttonInner = children ?? (
-      <ButtonInner
-        text={text}
-        aboveText={aboveText}
-        appendLeft={appendLeft}
-        rounded={rounded}
-        version={version}
-      />
-    );
-
-    if (disabled) {
-      return (
-        <div
-          role="button"
-          aria-disabled="true"
-          aria-label={ariaLabel}
-          tabIndex={-1}
-          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
-            rounded ? 'rounded-full' : 'rounded-md'
-          } ${className || ''}`}
-        >
-          {buttonInner}
-        </div>
-      );
-    }
+const RegularButton = JSX<ButtonWithIconProps>(
+  ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (
+    <a
+      className={getRegularButtonClasses({ className, version, rounded })}
+      href={href}
+      rel={rel}
+      target={target}
+      aria-label={ariaLabel}
+      role={href ? 'link' : 'button'}
+      onClick={onClick}
+    >
+      {children}
+    </a>
+  ),
+);
 
-    return (
-      <a
-        className={`${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${
-          buttonStyleMap[version] || ''
-        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
-        href={href}
-        target={target}
-        onClick={onClick}
-        aria-label={ariaLabel}
-        role={!href ? 'button' : 'link'}
-        {...buttonInnerRest}
-      >
-        {buttonInner}
-      </a>
-    );
-  },
+const DisabledButton = JSX<ButtonWithIconProps>(
+  ({ className, ariaLabel, version, rounded, children }) => (
+    <div
+      role="button"
+      aria-disabled="true"
+      aria-label={ariaLabel}
+      tabIndex={-1}
+      className={getDisabledButtonClasses({ className, rounded, version })}
+    >
+      {children}
+    </div>
+  ),
 );

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -15,7 +15,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-xs-light text-left">{aboveText}</div>
+          {aboveText ? <div className="text-xs-light text-left">{aboveText}</div> : null}
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
@@ -25,7 +25,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
 });
 
 const getButtonStyle = (props: ButtonInnerProps) => {
-  const { className = '', version, aboveText, rounded } = props;
+  const { version, aboveText, rounded } = props;
 
   if (version === 'link') {
     return '';
@@ -37,7 +37,6 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     'group flex items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
-    className,
   ].join(' ');
 };