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

package/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/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/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/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/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/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/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/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/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/src/ui-kit/Button/Button.tsx

@@ -1,93 +1,48 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import { ButtonInner } from './ButtonInner';
 import type { ButtonWithIconProps } from './ButtonProps';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 import { getRegularButtonClasses } from './getRegularButtonClasses';
 
-export const Button = JSX<ButtonWithIconProps>(
-  ({
-    aboveText,
-    appendLeft,
-    appendRight,
-    ariaLabel,
-    children,
-    className,
-    disabled,
-    href,
-    onClick,
-    rel,
-    rounded,
-    target,
-    text,
-    version,
-  }) => {
-    const buttonInner = children ?? (
-      <ButtonInner
-        aboveText={aboveText}
-        appendLeft={appendLeft}
-        appendRight={appendRight}
-        rounded={rounded}
-        text={text}
-        version={version}
-      />
-    );
+export const Button = JSX<ButtonWithIconProps>(({ disabled, children, ...rest }) => {
+  const link = useLink();
+  const adjustedProps = link(rest);
+  const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
 
-    return disabled ? (
-      <DisabledButton
-        ariaLabel={ariaLabel}
-        className={className}
-        rounded={rounded}
-        version={version}
-      >
-        {buttonInner}
-      </DisabledButton>
-    ) : (
-      <RegularButton
-        ariaLabel={ariaLabel}
-        className={className}
-        href={href}
-        onClick={onClick}
-        rel={rel}
-        rounded={rounded}
-        target={target}
-        version={version}
-      >
-        {buttonInner}
-      </RegularButton>
-    );
-  },
-);
+  return disabled ? (
+    <DisabledButton {...adjustedProps}>{buttonInner}</DisabledButton>
+  ) : (
+    <RegularButton {...adjustedProps}>{buttonInner}</RegularButton>
+  );
+});
 
 const RegularButton = JSX<ButtonWithIconProps>(
-  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, rel }) => {
-    return (
-      <a
-        className={getRegularButtonClasses({ className, version, rounded })}
-        href={href}
-        target={target}
-        onClick={onClick}
-        aria-label={ariaLabel}
-        role={href ? 'link' : 'button'}
-        rel={rel}
-      >
-        {children}
-      </a>
-    );
-  },
+  ({ 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>
+  ),
 );
 
 const DisabledButton = JSX<ButtonWithIconProps>(
-  ({ className, children, ariaLabel, version, rounded }) => {
-    return (
-      <div
-        role="button"
-        aria-disabled="true"
-        aria-label={ariaLabel}
-        tabIndex={-1}
-        className={getDisabledButtonClasses({ className, rounded, version })}
-      >
-        {children}
-      </div>
-    );
-  },
+  ({ className, ariaLabel, version, rounded, children }) => (
+    <div
+      role="button"
+      aria-disabled="true"
+      aria-label={ariaLabel}
+      tabIndex={-1}
+      className={getDisabledButtonClasses({ className, rounded, version })}
+    >
+      {children}
+    </div>
+  ),
 );

package/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(' ');
 };
 

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

@@ -1,30 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
-export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
+export interface ButtonSectionProps extends ButtonContent {
+  className?: string;
+}
 
 interface RenderButtonProps {
   button: ButtonWithIconProps;
   buttonClassName?: string;
   index?: number;
 }
-export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
-  const { handlerDecorator } = context;
-  const router = context.useRouter();
-
-  return buttons && buttons?.length ? (
+export const ButtonSection = JSX<ButtonSectionProps>(({ className = '', buttons }) =>
+  buttons && buttons?.length ? (
     <div className={className}>
-      {buttons.map((button, index) =>
-        renderButton({ button: useLink({ router, handlerDecorator }, button), index }),
-      )}
+      {buttons.map((button, index) => renderButton({ button, index }))}
     </div>
-  ) : null;
-});
+  ) : null,
+);
 
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
   const { icon, iconRight, version, ...rest } = button;
@@ -36,11 +31,11 @@ export function renderButton({ button, buttonClassName, index }: RenderButtonPro
 
   return (
     <Button
+      key={index ? String(index) : ''}
       className={buttonClassName}
       appendLeft={leftIcon}
       appendRight={rightIcon}
       version={version}
-      key={index ? String(index) : ''}
       {...rest}
     />
   );

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

@@ -21,9 +21,7 @@ export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio,
         ${checked ? 'border-black' : 'border-main-stroke'}
         checked:border-primary-main m-0`}
           type="checkbox"
-          onChange={(e) => {
-            onChange(e.target.checked as boolean);
-          }}
+          onChange={(e) => onChange && onChange(e.target.checked as boolean)}
           checked={checked}
         />
         {isRadio ? (

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,7 +1,7 @@
 export interface CheckboxProps {
   text?: string;
-  checked: boolean;
+  checked?: boolean;
   className?: string;
   isRadio?: boolean;
-  onChange: (value: boolean) => void;
+  onChange?: (value: boolean) => void;
 }

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { TopItemProps } from '../TopItem/TopItem';
 
@@ -6,28 +7,23 @@ const TEXT_CLASSES = 'font-sans text-l-light';
 const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<TopItemProps>(
-  ({
-    className = '',
-    text,
-    href,
-    target,
-    active,
-    bgColor = 'bg-white',
-    dataItemName,
-    children,
-    onClick,
-  }) => (
-    <a
-      className={`relative inline-block bg-transparent text-center no-underline ${className}`}
-      href={href}
-      target={target}
-      data-item-name={dataItemName}
-      onClick={onClick}
-    >
-      <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-      {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
-    </a>
-  ),
+  ({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {
+    const link = useLink();
+    const { href, target, text, onClick } = link(rest);
+
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${className}`}
+        href={href}
+        target={target}
+        data-item-name={dataItemName}
+        onClick={onClick}
+      >
+        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
+        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+      </a>
+    );
+  },
 );
 
 const getTextClasses = (bgColor: BgColorVersion, active = false) => {

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

@@ -1,19 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTariffsInnerTableData } from '../../hooks/useTariffsInnerTableData';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import type { TableFetchData, TariffsTableInnerContent } from './InnerTableProps';
 
-export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps {
-  onClick: () => void;
+export interface InnerTableProps extends TariffsTableInnerContent {
+  onClick?: () => void;
 }
 
 const EMPTY_DATA = 'Данных нет';
 
-export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl, onClick }) => {
+export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) => {
   const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
 
   const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -29,13 +28,13 @@ export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl, onCl
         setActiveTabIndex={setActiveTabIndex}
         linkToPDF={pdfUrl} //TODO: need link to service
       />
-      <InnerTableBody context={context} activeTabIndex={activeTabIndex} items={items} />
-      <TableInnerButton context={context} onClick={onClick} isOpen />
+      <InnerTableBody activeTabIndex={activeTabIndex} items={items} />
+      <TableInnerButton onClick={onClick} isOpen />
     </div>
   ) : (
     <div className="my-5 text-h6 text-center">
       <p>{EMPTY_DATA}</p>
-      <TableInnerButton context={context} onClick={onClick} isOpen />
+      <TableInnerButton onClick={onClick} isOpen />
     </div>
   );
 });

package/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -1,16 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';
 
-export interface InnerTableBodyProps extends UniBlockProps {
+export interface InnerTableBodyProps {
   activeTabIndex: number;
   items: DataItem[];
 }
 
-export const InnerTableBody = JSX<InnerTableBodyProps>(({ context, activeTabIndex, items }) => {
+export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
   const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
 
   const toggleTable = (key: string) => {
@@ -42,7 +41,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ context, activeTabInde
               }`}
             >
               <div className="relative">
-                <InnerTableBodyItem context={context} rows={_.rowsData} />
+                <InnerTableBodyItem rows={_.rowsData} />
               </div>
             </div>
           </div>

package/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 
 const COLUMN_WIDTH = 140;
 
-export interface InnerTableBodyItemProps extends UniBlockProps {
+export interface InnerTableBodyItemProps {
   rows?: RowsData[][];
 }
 

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerEvent } from './InnerTableProps';
 
-export interface TableInnerButtonProps extends TariffsTableInnerEvent, UniBlockProps {
+export interface TableInnerButtonProps extends TariffsTableInnerEvent {
   onClick?: () => void;
   isOpen?: boolean;
 }

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { RadioButtonGroup } from './RadioButtonGroup';
 
 const items = [
@@ -16,10 +16,9 @@ export default {
   default: (
     <div>
       <RadioButtonGroup
-        context={context}
         items={items}
         checkedItem={'Аннуитетный'}
-        onChangeCheckedItem={(text) => console.log('Выбран пункт меню: ', text)}
+        onChange={(text) => console.log('Выбран пункт меню: ', text)}
       />
     </div>
   ),

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

@@ -1,32 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Checkbox } from '../Checkbox/Checkbox';
 
 export interface RadioButtonItem {
   id: string;
-  text: string;
+  text?: string;
 }
 
-interface RadioButtonGroupProps extends UniBlockProps {
-  items: RadioButtonItem[];
+interface RadioButtonGroupProps {
+  items?: RadioButtonItem[];
   checkedItem?: string;
-  onChangeCheckedItem: (id: string) => void;
+  onChange?: (id: string) => void;
 }
 
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
-  ({ items, checkedItem, onChangeCheckedItem }) => {
-    return (
-      <div className="flex flex-col gap-3">
-        {items?.map(({ id, text }) => (
-          <Checkbox
-            key={id}
-            isRadio
-            text={text}
-            checked={checkedItem === id}
-            onChange={() => onChangeCheckedItem(id)}
-          />
-        ))}
-      </div>
-    );
-  },
+  ({ items, checkedItem, onChange: onChangeCheckedItem }) => (
+    <div className="flex flex-col gap-3">
+      {items?.map(({ id, text }) => (
+        <Checkbox
+          key={String(id)}
+          isRadio
+          text={text}
+          checked={checkedItem === id}
+          onChange={() => onChangeCheckedItem && onChangeCheckedItem(id)}
+        />
+      ))}
+    </div>
+  ),
 );

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

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { SearchBarInner } from './SearchBarInner';
+import { SearchBarInner, SearchBarInnerProps } from './SearchBarInner';
 
-export const SearchBar = JSX<UniBlockProps>(({ className = '' }) => {
-  return <SearchBarInner className={className} isMobile={true} />;
-});
+export const SearchBar = JSX<SearchBarInnerProps>((props) => (
+  <SearchBarInner {...props} isMobile={true} />
+));

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

@@ -1,7 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { SearchBarInner } from './SearchBarInner';
+import { SearchBarInner, SearchBarInnerProps } from './SearchBarInner';
 
-export const SearchBar = JSX<UniBlockProps>(({ className = '' }) => {
-  return <SearchBarInner className={className} />;
-});
+export const SearchBar = JSX<SearchBarInnerProps>((props) => <SearchBarInner {...props} />);