@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.11

package/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
   data: Record<string, any>[];
@@ -13,25 +13,20 @@ interface WrapperSelectProps {
 }
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
-  ({ data, fieldLabel, fieldValue, selected, placeholder, setSelected, label }) => {
+  ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+    const dataFormat: OptionProps[] = data
+      .filter(Boolean)
+      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+    const selectedObj = dataFormat.find((_) => _.key === selected);
+
     return (
-      <div>
-        <span className="block text-m-light mb-2">{label}</span>
-        <Select
-          className={`h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${
-            !selected ? 'text-secondary-text' : ''
-          }`}
-          value={selected}
-          onChange={(_) => setSelected(_)}
-        >
-          {placeholder ? <SelectOption value="">{placeholder}</SelectOption> : null}
-          {data.map((_, i) => (
-            <SelectOption key={String(i)} value={_?.[fieldValue || fieldLabel]}>
-              {_?.[fieldLabel]}
-            </SelectOption>
-          ))}
-        </Select>
-      </div>
+      <Select
+        options={dataFormat}
+        label={label}
+        placeholder={placeholder || selected}
+        onChange={(_) => setSelected(_.key as Currency)}
+        value={selectedObj}
+      />
     );
   },
 );

package/src/components/StepsBlock/StepsBlock.ui.json

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

package/src/components/Tabs/Tabs.tsx

@@ -11,13 +11,32 @@ export interface TabActivationEvent {
   label?: string;
 }
 
+export interface AnchorClickScrollingEvent {
+  isScrolling?: boolean;
+  label?: string;
+}
+
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { context, className, tabs, page, showCounter } = props;
+  const { context, className = '', tabs, page, showCounter, isSticky } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
+  useEffect(
+    () =>
+      EventBus.inst.subscribe('tab', (event) => {
+        if (!tabs) {
+          return;
+        }
+        const tab = tabs.find(checkTab(event));
+        if (event.type === 'link' && tab) {
+          setCurrentTab(tab);
+        }
+      }),
+    [tabs],
+  );
+
   useEffect(() => {
     if (currentTab?.type === 'group') {
       return EventBus.inst.subject('tab', { label: currentTab.ref });
@@ -29,17 +48,20 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   const handleClick = (selectedTab: Tab) => {
     if (selectedTab?.type === 'group') {
       EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-      setCurrentTab(selectedTab);
     }
+    setCurrentTab(selectedTab);
   };
 
   return (
     <BlockWrapper
       context={context}
-      className={`mb-2 box-border flex gap-x-1 ${className}`}
+      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
       role="tablist"
     >
       {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context }))}
     </BlockWrapper>
   );
 });
+
+const checkTab = (event: TabActivationEvent) => (_: Tab) =>
+  _.type === 'link' && _.href === `#${event.label}`;

package/src/components/Tabs/Tabs.ui.json

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

package/src/components/Tabs/TabsContent.ts

@@ -33,6 +33,8 @@ export type Tab = GroupTab | LinkTab;
 export interface TabsContent {
   /** @title Табы */
   tabs?: Tab[];
+  /** @title Закрепить сверху */
+  isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
 }

package/src/components/Tabs/renderLinkTab.tsx

@@ -1,25 +1,41 @@
 import type { LinkProps } from '../../model/LinkProps';
 import {
+  ACTIVE_LINK_CLASSES,
+  ACTIVE_TEXT_CLASSES,
   INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
   LINK_CLASSES,
   TEXT_CLASSES,
 } from './tabItemClasses';
+import type { Tab } from './TabsContent';
 
 export interface RenderLinkTabProps extends LinkProps {
-  active?: boolean;
   onClick?: () => void;
   i: number;
+  currentTab?: Tab;
 }
 
-export const renderLinkTab = ({ text, onClick, href, target = '_self', i }: RenderLinkTabProps) => (
-  <a
-    key={String(i)}
-    className={`${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`}
-    target={target}
-    href={href}
-    onClick={onClick}
-  >
-    <span className={`${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`}>{text}</span>
-  </a>
-);
+export const renderLinkTab = ({
+  text,
+  currentTab,
+  onClick,
+  href,
+  target = '_self',
+  i,
+}: RenderLinkTabProps) => {
+  const active = currentTab?.type === 'link' && currentTab.href === href;
+
+  return (
+    <a
+      key={String(i)}
+      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      target={target}
+      href={href}
+      onClick={onClick}
+    >
+      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
+        {text}
+      </span>
+    </a>
+  );
+};

package/src/components/Tabs/renderTab.tsx

@@ -1,3 +1,4 @@
+import { EventBus } from '../../EventBus/EventBus';
 import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -31,11 +32,21 @@ export const renderTab =
     switch (type) {
       case 'group':
         return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
-      case 'link':
+      case 'link': {
+        const link = useLink({ router, handlerDecorator }, tab);
+        const linkClick = link.onClick;
+
         return renderLinkTab({
-          ...useLink({ router, handlerDecorator }, tab),
+          ...link,
+          onClick: (ev?: { preventDefault: () => void }) => {
+            linkClick(ev);
+            onClick(tab);
+            EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
+          },
+          currentTab,
           i,
         });
+      }
       default:
         assertUnreachable(type);
     }

package/src/components/TariffsTable/TariffsTable.ui.json

@@ -0,0 +1,33 @@
+{
+  "content": {
+    "tariffsColumns": {
+      "items": {
+        "data": {
+          "items": {
+            "items": {
+              "tableCellType": {
+                "ui:widget": "hidden"
+              },
+              "image": {
+                "ui:field": "picture"
+              },
+              "buttons": {
+                "items": {
+                  "icon": {
+                    "ui:field": "icon"
+                  },
+                  "iconRight": {
+                    "ui:field": "icon"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "hiddenRowsNum": {
+      "ui:field": "number"
+    }
+  }
+}

package/src/components/TextBlock/TextBlock.ui.json

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

package/src/components/Tile/Tile.ui.json

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

package/src/react/IntersectionObserverTag.tsx

@@ -12,12 +12,19 @@ export const IntersectionObserverTag: IntersectionObserverComponent = (props) =>
   } = props;
 
   const intersectionObserver = useRef<IntersectionObserver>();
+
   const ref = useCallback(
     (tag: HTMLElement | null | undefined) => {
-      if (tag && !intersectionObserver.current) {
-        intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.current.observe(tag);
+      if (!tag) {
+        return;
+      }
+
+      if (intersectionObserver.current) {
+        intersectionObserver.current.disconnect();
       }
+
+      intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+      intersectionObserver.current.observe(tag);
     },
     [observerCallback, observerOptions],
   );

package/src/ui-kit/BlockWrapper.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
 import type { UniBlockProps } from '../model/ContentPageDef';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
@@ -12,26 +13,44 @@ interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   tag?: keyof HTMLElementTagNameMap;
 }
 
+const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
+const THRESHOLD_ARRAY_LENGTH = 18;
+const THRESHOLD_ARRAY_START_VALUE =
+  (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ anchor, className, context, children, tag = 'section', labels }) => {
     const Tag: any = tag;
 
     const { IntersectionObserverTag } = context;
+
     const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+    const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('tab', (event) => {
-          if (event.type === 'group') {
-            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
-          } else {
-            setShouldRenderBlock(true);
-            scrollToBlock(event.label);
-          }
-        }),
-      [labels],
+    const observerCallback = useMemo(
+      () => changeHashOnObserve({ anchor, anchorClickRef }),
+      [anchor, anchorClickRef],
     );
 
+    useEffect(() => {
+      const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+        anchorClickRef.current = e;
+      });
+      const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
+        if (event.type === 'group') {
+          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+        } else {
+          changeHash(event.label);
+          setShouldRenderBlock(true);
+        }
+      });
+
+      return () => {
+        anchorClickCleanup();
+        tabCleanup();
+      };
+    }, [anchorClickRef]);
+
     if (!shouldRenderBlock) {
       return null;
     }
@@ -40,8 +59,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       <IntersectionObserverTag
         tag={tag}
         className={className}
-        observerCallback={changeHashOnObserve}
-        observerOptions={{ threshold: 1 }} // Lower threshold when hash change needed
+        observerCallback={observerCallback}
+        observerOptions={{
+          threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
+        }}
         anchor={anchor}
       >
         {children}
@@ -52,8 +73,14 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function scrollToBlock(label?: string) {
-  setTimeout(() =>
-    globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }),
-  );
+function getIntersectionThreshold(_: number, i: number): number {
+  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
+
+  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
+}
+
+function changeHash(label?: string) {
+  if (label) {
+    globalThis.document.location.hash = label;
+  }
 }

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

@@ -1,46 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
+import { adjustValue } from './adjustValue ';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Input } from '../Input/Input';
 import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({
-    className = '',
-    label,
-    onChange,
-    value = '',
-    minValue = 0,
-    maxValue = 300000,
-    ...inputProps
-  }) => {
-    const handleChange = (e: any) => {
-      if (!onChange) {
-        return;
-      }
-
-      const newValue =
-        e.target.value === '' ? '' : String(clamp(e.target.value as number, minValue, maxValue));
-
-      onChange(newValue);
-    };
+  ({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+    const handleChange = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        const adjustedVal = adjustValue(inputValue);
+        const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
+        onChange(String(clampVal));
+      },
+      [onChange],
+    );
 
     return (
-      <div className={className}>
-        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
-        <div className="h-[56px] relative flex items-center">
-          <input
-            type="number"
-            className={
-              'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-            }
-            onChange={handleChange}
-            value={value}
-            min={minValue}
-            max={maxValue}
-            {...inputProps}
-          />
-          <span className="text-xl-light absolute right-4">₽</span>
-        </div>
-      </div>
+      <Input className={className} inputClassName="w-full" onChange={handleChange} {...inputProps}>
+        <span className="text-xl-light absolute right-4 bottom-4">₽</span>
+      </Input>
     );
   },
 );
+
+const getClampValue = (val: string, clampVal) =>
+  Number(val) === clampVal ? val : String(clampVal);

package/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -1,10 +1,6 @@
-export type CurrencyInputProps = {
-  className?: string;
-  label?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  value?: string;
-  placeholder?: string;
+import type { InputProps } from '../Input/InputProps';
+
+export type CurrencyInputProps = InputProps & {
   minValue?: number;
   maxValue?: number;
 };

package/src/ui-kit/CurrencyInput/adjustValue .ts

@@ -0,0 +1,17 @@
+export const adjustValue = (val: string) => onlyOneDot(setZeroStart(replaceCommaToDot(val)));
+
+const onlyOneDot = (val: string): string => {
+  const matches = val.match(/\./g) || [];
+
+  return matches.length > 1 ? val.slice(0, val.lastIndexOf('.')) : val;
+};
+
+const setZeroStart = (val: string): string => {
+  const isZeroStart = val.indexOf('0') === 0 && val.length === 2;
+  const newVal = isZeroStart ? val.replace('0', '0.') : val;
+
+  return newVal.startsWith('.') ? newVal.replace('.', '0.') : newVal;
+};
+
+const replaceCommaToDot = (val: string): string =>
+  String(val.replace(',', '.').replace(/[^.\d]/g, ''));

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

@@ -1,24 +1,45 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputProps } from './InputProps';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
-  ({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
-    const handleChange = (e) => {
-      const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-      onChange(validInputValue);
-    };
+  ({
+    className = '',
+    inputClassName = '',
+    id,
+    name,
+    type = 'text',
+    label,
+    value = '',
+    children,
+    onChange,
+    ...inputProps
+  }) => {
+    const handleChange = useCallback(
+      (e) => {
+        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
+        onChange(validInputValue);
+      },
+      [onChange],
+    );
+
+    const paddingStyle = children ? 'pr-8' : '';
 
     return (
-      <input
-        className={`border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text text-primary-text outline-none ${className}`}
-        id={id}
-        name={name || id}
-        type={type}
-        pattern={pattern}
-        placeholder={placeholder}
-        value={value}
-        onChange={handleChange}
-      />
+      <div className={`relative ${className}`}>
+        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
+        <input
+          className={`w-full border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text
+          focus:border-primary-text text-primary-text outline-none p-4 ${paddingStyle} ${inputClassName}`}
+          id={id}
+          name={name || id}
+          type={type}
+          value={value}
+          onChange={handleChange}
+          {...inputProps}
+        />
+        {children}
+      </div>
     );
   },
 );

package/src/ui-kit/Input/InputProps.ts

@@ -1,12 +1,15 @@
 import type { InputTypes } from '../../model/InputTypes';
+import type { LabelProps } from '../../model/HeadlineType';
 
-export interface InputProps {
+export type InputProps = LabelProps & {
   className?: string;
+  label?: string;
+  inputClassName?: string;
   id?: string;
   name?: string;
   type?: InputTypes;
   placeholder?: string;
   pattern?: string;
-  value: string;
+  value?: string;
   onChange: (value: string) => void;
-}
+};

package/src/ui-kit/{SelectCustom/SelectCustom.fixture.tsx → Select/Select.fixture.tsx}

@@ -1,4 +1,4 @@
-import { SelectCustom } from './SelectCustom';
+import { Select } from './Select';
 
 const rates = [
   { text: 'USD', key: '1' },
@@ -9,7 +9,7 @@ const rates = [
 export default {
   default: (
     <div className="w-[1280px] ml-10 flex flex-col">
-      <SelectCustom options={rates} label="Заголовок" onChange={(_) => console.log(_)} />
+      <Select options={rates} label="Заголовок" onChange={(_) => console.log(_)} />
     </div>
   ),
 };