@redneckz/wildless-cms-uni-blocks 0.14.752 → 0.14.753

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

@@ -1,77 +1,93 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { handlerDecorator } from '../../external/handlerDecorator';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type ColorPalette } from '../../model/ContentPageBase';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
-import { Loader } from '../Loader/Loader';
 import { type PreventableEvent } from '../PreventableEvent';
-import { useButton } from './useButton';
 
 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',
-};
-
-const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
   primary: style(
+    'justify-center px-9 py-4',
+    'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-primary-main group-data-secondary:bg-white',
     'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
   secondary: style(
+    'justify-center px-9 py-4',
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-white group-data-secondary:bg-white/20',
     'group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
 };
 
+const embeddedStyle = style(
+  'group/btn-embedded',
+  'justify-between p-0',
+  'bg-transparent border border-transparent outline-none',
+);
+
 export interface ButtonProps extends ControlStateProps, ARIAProps {
   className?: string;
-  version?: ButtonVersion;
   type?: 'button' | 'submit' | 'reset';
+  version?: ButtonVersion;
+  embedded?: boolean;
   rounded?: boolean;
-  isLoading?: boolean;
   role?: string;
-  onClick?: (ev?: PreventableEvent) => void;
+  data?: AspectsDef[];
+  dataTheme?: ColorPalette;
+  onClick?: (ev: PreventableEvent) => void;
 }
 
-export const Button = JSX<ButtonProps>(({ children, ...props }) => {
-  const button = useButton();
-
-  const {
+export const Button = JSX<ButtonProps>(
+  ({
     className,
-    version = 'primary',
-    active,
-    disabled,
-    isLoading,
     type = 'button',
+    version = 'primary',
+    embedded,
     rounded = true,
+    disabled,
     role,
+    data,
+    dataTheme,
+    children,
     onClick,
-  } = button(props);
+  }) => {
+    const handleClick = useCallback(
+      handlerDecorator((ev: PreventableEvent) => {
+        !disabled && onClick?.(ev);
+      }),
+      [disabled, onClick],
+    );
+    const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
 
-  return (
-    <button
-      className={style(
-        'font-sans px-9 py-4',
-        'flex justify-center items-center gap-xs relative',
-        {
-          'text-white bg-primary-active': active,
-          'bg-main-gray text-main-disabled cursor-not-allowed': disabled || isLoading,
-          'rounded-md': rounded,
-        },
-        !active && !disabled && !isLoading
-          ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
-          : '',
-        className,
-      )}
-      type={type}
-      role={role}
-      onClick={onClick}
-    >
-      {isLoading ? <Loader blur={true} size="small" /> : null}
-      {children}
-    </button>
-  );
-});
+    return (
+      <button
+        className={style(
+          'font-sans flex items-center gap-xs relative',
+          !disabled && !embedded && buttonStyleMap[version],
+          {
+            [embeddedStyle]: embedded,
+            'rounded-md': rounded,
+            'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          },
+          className,
+        )}
+        type={type}
+        role={role}
+        data-theme={dataTheme}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...aspectsAttrs}
+        onClick={handleClick}
+      >
+        {children}
+      </button>
+    );
+  },
+);

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+interface ButtonTitleProps {
+  className?: string;
+}
+
+export const ButtonTitle = JSX<ButtonTitleProps>(({ className, children }) => (
+  <span
+    className={style(
+      'inline-flex items-center text-start gap-s group-hover/btn-embedded:text-primary-main',
+      className,
+    )}
+  >
+    {children}
+  </span>
+));

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

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Loader } from '../Loader/Loader';
+import { Button, type ButtonProps } from './Button';
+
+export interface SubmitButtonProps extends ButtonProps {
+  isLoading?: boolean;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(({ isLoading, disabled, children, ...rest }) => (
+  <Button type="submit" disabled={isLoading || disabled} {...rest}>
+    {isLoading ? <Loader blur={true} size="small" /> : null}
+    {children}
+  </Button>
+));

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

@@ -4,6 +4,7 @@ import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { checkCaptcha } from '../../api/RetailAPI/checkCaptcha';
 import { createCaptcha } from '../../api/RetailAPI/createCaptcha';
 import { Button } from '../Button/Button';
+import { SubmitButton } from '../Button/SubmitButton';
 import { Dialog } from '../DialogManager/Dialog';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
@@ -50,12 +51,9 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
       <div className="flex flex-col gap-lg items-center rounded-md">
         <div className="flex h-36 w-72">
           <img className="grow" src={captcha}></img>
-          <div
-            onClick={handleCreateCaptcha}
-            className="flex w-8 items-center justify-center cursor-pointer"
-          >
+          <Button className="w-8" embedded onClick={handleCreateCaptcha}>
             <Icon iconVersion="normal" name="RefreshIcon" />
-          </div>
+          </Button>
         </div>
         <Input
           className="w-[300px]"
@@ -65,12 +63,12 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
         />
         {hasError ? <div className="text-error">Неверный код</div> : null}
         <div className="flex w-[310px] justify-between">
-          <Button onClick={close} version="secondary">
+          <Button version="secondary" onClick={close}>
             Вернуться
           </Button>
-          <Button type="submit" disabled={!code} onClick={handleCheckCaptcha} version="secondary">
+          <SubmitButton version="secondary" disabled={!code} onClick={handleCheckCaptcha}>
             Отправить
-          </Button>
+          </SubmitButton>
         </div>
         {isLoading ? <Loader blur={false} /> : null}
       </div>

package/mobile/src/ui-kit/ControlStateProps.ts

@@ -1,4 +1,3 @@
 export interface ControlStateProps {
-  active?: boolean;
   disabled?: boolean;
 }

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -1,59 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ColorPalette } from '../../model/ContentPageBase';
 import { style } from '../../utils/style';
-import { type IconName } from '../Icon/IconProps';
-import { Img } from '../Img/Img';
-import { Text } from '../Text/Text';
-import { TextWithIcon } from '../TextWithIcon/TextWithIcon';
-import { type FoldablePartProps } from './FoldablePartProps';
+import { Button, type ButtonProps } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { ToggleIcon } from '../Icon/ToggleIcon';
 
-interface DefaultFoldButtonProps {
-  className?: string;
-  label: string;
-  icon: IconName;
-  dataTheme?: ColorPalette;
-  disabled?: boolean;
-  onClick?: () => void;
+interface DefaultFoldButtonProps extends ButtonProps {
+  isUnfolded?: boolean;
+  label?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = 'pc', disabled = false, onClick }) => (
-    <TextWithIcon
-      tag="button"
-      onClick={onClick}
-      disabled={disabled}
-      data-theme={dataTheme}
-      justifyContent="center"
-      role="button"
-      className={style(
-        'py-4 border border-transparent outline-none focus:border-primary-text space-x-s',
-        disabled
-          ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-          : 'bg-primary-main text-white hover:bg-primary-hove',
-        className,
-      )}
-      textNode={<Text size="text-h4">{label}</Text>}
-      iconNode={
-        icon ? (
-          <Img
-            image={{
-              icon,
-              iconVersion: 'white',
-            }}
-            className="my-auto"
-            width="20"
-            height="20"
-          />
-        ) : null
-      }
-    />
+  ({ className, isUnfolded, label = isUnfolded ? 'Скрыть' : 'Развернуть', embedded, ...rest }) => (
+    <Button
+      className={style({ 'text-h4': !embedded }, className)}
+      rounded={false}
+      embedded={embedded}
+      {...rest}
+    >
+      <ButtonTitle>{label}</ButtonTitle>
+      <ToggleIcon isUnfolded={isUnfolded} iconVersion={embedded ? 'color' : ''} />
+    </Button>
   ),
 );
-
-export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => (
-  <DefaultFoldButton
-    icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-    label={isUnfolded ? 'Скрыть' : 'Развернуть'}
-    onClick={onToggle}
-  />
-);

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

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
+import { type ARIAProps } from '../ARIAProps';
 
-export interface FoldableProps {
+export interface FoldableProps extends ARIAProps {
   className?: string;
 }
 
 // TODO Не особо полезно, в итоге
-export const Foldable = JSX<FoldableProps>(({ className, children }) => (
-  <div className={style(className)} role="group">
+export const Foldable = JSX<FoldableProps>(({ className, role = 'group', children }) => (
+  <div className={style(className)} role={role}>
     {children}
   </div>
 ));

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

@@ -8,7 +8,7 @@ import { style } from '../../utils/style';
 import { joinPath } from '../../utils/url';
 import { type IconProps } from './IconProps';
 
-const svgUseStyleMap: Record<IconVersion, string> = {
+const iconVersionStyle: Record<IconVersion, string> = {
   '': '',
   normal: '',
   color: 'text-primary-main',
@@ -17,6 +17,13 @@ const svgUseStyleMap: Record<IconVersion, string> = {
   gray: 'text-gray',
 };
 
+const sizeStyle: Record<NonNullable<IconProps['size']>, string> = {
+  small: '16',
+  medium: '24',
+  large: '48',
+  xl: '78',
+};
+
 export const Icon = JSX<IconProps>(
   ({
     className = '',
@@ -25,24 +32,26 @@ export const Icon = JSX<IconProps>(
     alt = `Иконка ${name}`,
     title = alt,
     iconVersion = 'color',
-    width,
-    height,
+    size,
+    width = size && sizeStyle[size],
+    height = width,
   }) => {
     const router = useRouter();
     const iconName = iconVersion === 'normal' ? `${name}.svg` : `sprites.svg#${name}`;
     const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons/', iconName));
+
     if (iconVersion === 'normal') {
       // fix svg gradient color
       return (
         <img
           className={className}
+          style={getInlineStyle(className, height)}
           src={href}
           alt={alt}
           title={title}
           aria-hidden="true"
           width={width}
           height={height}
-          style={getInlineStyle(className, height)}
         />
       );
     }
@@ -51,9 +60,9 @@ export const Icon = JSX<IconProps>(
       <Background className={className}>
         <svg
           className={style(
-            getSvgSize(width),
-            svgUseStyleMap[iconVersion],
+            iconVersionStyle[iconVersion],
             {
+              'w-full h-full': !width,
               invert: iconVersion === 'white',
             },
             imageClassName,
@@ -71,16 +80,13 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInlineStyle = (className?: string, height?: string) => {
-  if (className?.includes('h-')) {
-    return {};
-  }
-
-  return { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
-};
-
-const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');
+// TODO Что то совсем не очень
+const getInlineStyle = (className?: string, height?: string) =>
+  className?.includes('h-')
+    ? {}
+    : { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 
+// TODO И это тоже
 const Background = JSX<{ className?: string }>(({ className, children }) =>
   className ? (
     <div role="img" className={className}>

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -14,11 +14,24 @@ export type { IconName };
  */
 export type IconBgVersion = '' | 'primary' | 'secondary' | 'opacity';
 
+/**
+ * @title Размер иконки
+ * @enumNames [
+ *    "Мелкая",
+ *    "Средняя",
+ *    "Большая",
+ *    "Гигантская"
+ * ]
+ */
+export type IconSize = 'small' | 'medium' | 'large' | 'xl';
+
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
   alt?: string;
   /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Размер */
+  size?: IconSize;
   /** @title Ширина */
   width?: string;
   /** @title Высота */

package/mobile/src/ui-kit/Icon/RoundedIcon.tsx

@@ -32,7 +32,7 @@ export const RoundedIcon = JSX<RoundedIconProps>(
           className,
         )}
       >
-        <Icon {...rest} width="54%" height="54%" name={icon} />
+        <Icon {...rest} width="54%" name={icon} />
       </div>
     ) : null;
   },

package/mobile/src/ui-kit/Icon/ToggleIcon.tsx

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from './Icon';
+import { type IconProps } from './IconProps';
+
+interface ToggleIconProps extends IconProps {
+  isUnfolded?: boolean;
+}
+
+export const ToggleIcon = JSX<ToggleIconProps>(({ isUnfolded, ...rest }) => (
+  <Icon name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} size="small" iconVersion="" {...rest} />
+));

package/mobile/src/ui-kit/Input/InputPopup.tsx

@@ -1,26 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { style } from '../../utils/style';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
 
 export interface InputPopupProps {
-  options?: Array<DaDataSuggestion>;
+  options: Array<DaDataSuggestion>;
+  container: HTMLDivElement;
   onChange: (e: DaDataSuggestion) => void;
   value?: string;
 }
 
-export const InputPopup = JSX<InputPopupProps>(({ options, onChange }) => (
-  <div
-    className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
-    role="list"
-  >
-    {options?.map((item, key) => (
-      <div
-        key={key.toString()}
-        className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-        role="listitem"
-        onMouseDown={() => onChange(item)}
-      >
-        <span className="min-h-6">{item.processedValue}</span>
-      </div>
-    ))}
-  </div>
-));
+const ARROW_DOWN_KEYBOARD_KEY_CODE = 'ArrowDown';
+const ARROW_UP_KEYBOARD_KEY_CODE = 'ArrowUp';
+const ENTER_KEYBOARD_KEY_CODE = 'Enter';
+const INITIAL_LIST_ITEM_ACTIVE = -1;
+
+export const InputPopup = JSX<InputPopupProps>(({ options, container, onChange }) => {
+  const [listItemActive, setListItemActive] = useState<number>(INITIAL_LIST_ITEM_ACTIVE);
+
+  const onKeyDownHandler = (ev: PreventableEventWithTarget & { key: string }): void => {
+    const hintsListMaxIndex = options.length - 1;
+
+    if (ev.key === ARROW_DOWN_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive < hintsListMaxIndex ? listItemActive + 1 : 0);
+    } else if (ev.key === ARROW_UP_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive > 0 ? listItemActive - 1 : hintsListMaxIndex);
+    } else if (ev.key === ENTER_KEYBOARD_KEY_CODE && options[listItemActive]) {
+      ev.preventDefault();
+      onChange(options[listItemActive]);
+    }
+  };
+
+  useEffect(() => {
+    container.addEventListener('keydown', onKeyDownHandler);
+
+    return () => container.removeEventListener('keydown', onKeyDownHandler);
+  }, [listItemActive]);
+
+  return (
+    <div
+      className="bg-white text-l overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
+      role="list"
+    >
+      {options?.map((item, key) => (
+        <div
+          key={key.toString()}
+          className={style('flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative', {
+            'bg-main-divider': listItemActive === key,
+          })}
+          role="listitem"
+          onMouseDown={() => onChange(item)}
+        >
+          <span className="min-h-6">{item.processedValue}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/mobile/src/ui-kit/Input/useInputPopup.tsx

@@ -15,6 +15,7 @@ interface InputPopupOptions {
   onDaDataChange?: (e: DaDataSuggestion) => void;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export function useInputPopup({
   isOpen,
   value,
@@ -39,8 +40,8 @@ export function useInputPopup({
     (option: DaDataSuggestion) => {
       close();
       currentInputValue.current = option.processedValue;
-      onChange && onChange(option.processedValue);
-      onDaDataChange && onDaDataChange(option);
+      onChange?.(option.processedValue);
+      onDaDataChange?.(option);
     },
     [close, onChange],
   );
@@ -87,7 +88,14 @@ export function useInputPopup({
     }
 
     popup.open({
-      popup: <InputPopup options={hintsList} value={value} onChange={handleChange} />,
+      popup: (
+        <InputPopup
+          options={hintsList}
+          container={inputElement}
+          value={value}
+          onChange={handleChange}
+        />
+      ),
       top: top + globalThis.scrollY + height,
       left,
       width,

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

@@ -18,7 +18,7 @@ export const Loader = JSX<LoaderProps>(
     >
       <div
         className={style(
-          'inline-block ',
+          'inline-block',
           'animate-spin rounded-full',
           'border-solid border-current',
           'border-r-transparent',

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

@@ -1,7 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LinkList } from '../../components/Footer/LinkList';
-import { RollupItem } from '../../components/RollupItem/RollupItem';
 import { type TopMenuItemProps } from '../../data/NavigationData';
+import { style } from '../../utils/style';
+import { Button } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
+import { Foldable } from '../Foldable/Foldable';
+import { FoldableSection } from '../Foldable/FoldableSection';
+import { RoundedIcon } from '../Icon/RoundedIcon';
+import { ToggleIcon } from '../Icon/ToggleIcon';
+import { Text } from '../Text/Text';
 import { type SitemapProps } from './SitemapProps';
 
 export const Sitemap = JSX<SitemapProps>(({ navigationItems }) => (
@@ -14,13 +22,37 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
   topItems
     ?.filter((_) => _.icon?.icon)
     .map((item, i) => (
-      <RollupItem
+      <MobileTopItem
         key={String(i)}
-        foldButtonVersion="accordion"
-        label={item?.text}
-        labelIcon={item?.icon}
-        role="menuitem"
+        className="w-full border-0 border-b border-solid border-main-divider last:border-b-0"
+        item={item}
+      />
+    ));
+
+const MobileTopItem = JSX<{ className?: string; item: TopMenuItemProps }>(({ className, item }) => {
+  const [isUnfolded, { toggle }] = useBool(false);
+
+  return (
+    <Foldable className={className} role="menuitem">
+      <Button
+        className={style('w-full', item.icon?.icon ? 'py-xs' : 'py-lg')}
+        embedded
+        onClick={toggle}
+      >
+        <ButtonTitle>
+          <RoundedIcon className="shrink-0" {...item.icon} />
+          <Text size="text-h6" font="font-normal">
+            {item.text}
+          </Text>
+        </ButtonTitle>
+        <ToggleIcon iconVersion="color" size="medium" isUnfolded={isUnfolded} />
+      </Button>
+      <FoldableSection
+        className="flex flex-wrap gap-lg group-last:last:pb-0"
+        isUnfolded={isUnfolded}
       >
         {item.items ? <LinkList items={item.items} /> : null}
-      </RollupItem>
-    ));
+      </FoldableSection>
+    </Foldable>
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.752",
+  "version": "0.14.753",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/RetailAPI/doRequest.ts

@@ -1,4 +1,5 @@
 import { RETAIL_API_BASE_URI } from '../apiBaseUrl';
+import { getTraceId } from './getTraceId';
 
 export const fetchRetailJSON = async <R>(
   url: string,
@@ -21,10 +22,15 @@ export async function doRequest(
   method: 'POST' | 'GET' | 'PUT',
   body?: any,
 ): Promise<Response> {
+  const traceId = getTraceId();
+
   return globalThis?.fetch?.(`${RETAIL_API_BASE_URI}${url}`, {
     method,
     headers: {
       'Content-Type': 'application/json',
+      'X-B3-Sampled': '1',
+      'X-B3-Spanid': traceId,
+      'X-B3-Traceid': traceId,
       ...getAuthorizationHeaders(),
     },
     credentials: 'include',