@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.8

package/mobile/src/components/Tabs/Tabs.tsx

@@ -3,14 +3,20 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
 import type { TabData, TabsContent } from './TabsContent';
 
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
+interface RenderTabsProps extends TabsBlockProps {
+  currentTab?: TabData;
+  onClick: (tab: TabData) => void;
+}
+
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+  const { className = '', tabs, isSticky, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,28 +47,24 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
       role="tablist"
       {...rest}
     >
-      {tabsMode === 'scrollable' ? (
-        <ScrollableTabs
-          tabs={tabs}
-          onClick={handleClick}
-          currentTab={currentTab}
-          showCounter={showCounter}
-          {...rest}
-        />
-      ) : (
-        tabs?.map(
-          renderTab({
-            onClick: handleClick,
-            currentTab,
-            showCounter,
-            ...rest,
-          }),
-        )
-      )}
+      {renderTabs({ tabs, onClick: handleClick, currentTab, ...rest })}
     </BlockWrapper>
   );
 });
 
+const renderTabs = ({ tabsMode, tabs, ...rest }: RenderTabsProps) => {
+  switch (tabsMode) {
+    case 'wideScreen':
+      return tabs?.map(renderTab({ tabsMode, ...rest }));
+    case 'centered':
+      return <CenteredTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+    case 'scrollable':
+      return <ScrollableTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+  }
+
+  return null;
+};
+
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -31,10 +31,11 @@ export type TabData = GroupTabData | LinkTabData;
 /**
  * @enumNames [
  *   "По ширине экрана",
- *   "С прокруткой"
+ *   "С прокруткой",
+ *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable';
+export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
 
 /**
  * @title Вкладки

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,12 +1,12 @@
-import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
   INACTIVE_TEXT_CLASSES,
   TEXT_CLASSES,
   WHITE_ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
 } from './tabItemClasses';
+import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,7 +27,7 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, isScrollable)}
+        className={getGroupTabClassName('div', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
@@ -36,21 +36,22 @@ export const renderGroupTab =
           className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
             'text',
             active,
-            isScrollable,
+            tabsMode,
           )}`}
         >
-          {renderTitle(tab.title, active, isScrollable)}
+          {renderTitle(tab.title, active, tabsMode)}
           {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
   const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName = isScrollable
-    ? `${TEXT_CLASSES} ${activeClassName}`
-    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+  const titleClassName =
+    tabsMode === 'scrollable'
+      ? `${TEXT_CLASSES} ${activeClassName}`
+      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
 
   return title ? <h3 className={titleClassName}>{title}</h3> : null;
 };

package/mobile/src/components/Tabs/renderTab.tsx

@@ -2,18 +2,18 @@ import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { LinkTab } from './LinkTab';
 import { renderGroupTab } from './renderGroupTab';
-import type { TabData } from './TabsContent';
+import type { TabData, TabsMode } from './TabsContent';
 
 export interface RenderTabProps {
   page?: ContentPageDef;
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
-  isScrollable?: boolean;
+  tabsMode?: TabsMode;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, showCounter, ...rest }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -23,17 +23,9 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
       case 'link': {
-        return (
-          <LinkTab
-            key={String(i)}
-            tab={tab}
-            currentTab={currentTab}
-            isScrollable={isScrollable}
-            onClick={onClick}
-          />
-        );
+        return <LinkTab key={String(i)} tab={tab} {...rest} />;
       }
       default:
         assertUnreachable(type);

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -1,3 +1,5 @@
+import type { TabsMode } from './TabsContent';
+
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
@@ -17,7 +19,11 @@ const GROUP_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
     },
@@ -27,7 +33,11 @@ const GROUP_TAB_CLASSES = {
       active: `h-full border-0 border-b-2`,
       default: ``,
     },
-    default: {
+    centered: {
+      active: '',
+      default: '',
+    },
+    wideScreen: {
       active: '',
       default: '',
     },
@@ -39,7 +49,11 @@ const LINK_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
@@ -49,23 +63,27 @@ const LINK_TAB_CLASSES = {
       active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+    wideScreen: {
       active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+  return GROUP_TAB_CLASSES[type][mode][styleActive];
 };
 
-export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][styleType][styleActive];
+  return LINK_TAB_CLASSES[type][mode][styleActive];
 };

package/mobile/src/hooks/useForm.ts

@@ -32,22 +32,25 @@ export const useForm = <FormState extends Record<string, any>>(
 
   const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
 
-  const field: FormFieldRegisterer<FormState> = (fieldName) => {
-    if (!handlersMap.current) {
-      handlersMap.current = {};
-    }
+  const field: FormFieldRegisterer<FormState> = useCallback(
+    (fieldName) => {
+      if (!handlersMap.current) {
+        handlersMap.current = {};
+      }
 
-    handlersMap.current[fieldName] ||= (value) => {
-      setFormState((prev) => ({ ...prev, [fieldName]: value }));
-      setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
-    };
+      handlersMap.current[fieldName] ||= (value) => {
+        setFormState((prev) => ({ ...prev, [fieldName]: value }));
+        setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+      };
 
-    return {
-      value: formState[fieldName],
-      isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
-      onChange: handlersMap.current[fieldName],
-    };
-  };
+      return {
+        value: formState[fieldName],
+        isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+        onChange: handlersMap.current[fieldName],
+      };
+    },
+    [formState, isDirtyForm, dirtyFieldsMap],
+  );
 
   const reset = useCallback(() => {
     setFormState(initialState);

package/mobile/src/hooks/useLink.ts

@@ -23,7 +23,7 @@ export function useLink(params: UseLinkParams = {}) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+    href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });

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

@@ -18,10 +18,14 @@ export const Checkbox = JSX<CheckboxProps>(
   ({ className, value, text, disabled, isRadio, onChange }) => {
     const handleChange = useCallback(
       (e: PreventableEvent) => {
+        if (disabled) {
+          return;
+        }
+
         e.preventDefault();
         onChange && onChange(!value);
       },
-      [onChange, value],
+      [onChange, disabled, value],
     );
 
     const icon = isRadio ? (

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

@@ -1,60 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
 import type { InputRangeProps } from './InputRangeProps';
+import { parseDecimal } from './parseDecimal';
+import { renderRangeWithTicks } from './renderRangeWithTicks';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 
+const DEFAULT_MIN = 1;
+const DEFAULT_MAX = 100;
+
 export const InputRange = JSX<InputRangeProps>(
   ({
     className,
     title,
     items = [],
-    min = 1,
-    max = 100,
+    list = [],
+    min = list.length ? 0 : DEFAULT_MIN,
+    max = list.length ? list.length - 1 : DEFAULT_MAX,
     step = 1,
-    value = min,
+    value = list[0] || min,
     disabled = false,
     onChange,
   }) => {
-    const handleChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
+    const [isFocused, setFocused] = useState(false);
+
+    const handleChange = useCallback(
+      (e: { target?: { value?: string } }) => {
+        onChange && onChange(parseDecimal(e.target?.value));
+      },
+      [onChange],
+    );
 
-      onChange(clamp(Number(getSanitizedValue(e.target.value as string)), min, max));
-    };
+    const handleFocus = useCallback(() => {
+      setFocused(true);
+    }, []);
 
-    const inputStyle = {
-      backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-    };
+    const handleBlur = useCallback(() => {
+      setFocused(false);
+      onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
+    }, [onChange, value]);
 
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
+          {title ? (
+            <Text size="text-m" font="font-light" color="text-primary-text">
+              {title}
+            </Text>
+          ) : null}
           <input
-            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`}
-            value={addSpacesBetweenNumbers(value)}
+            className={style(
+              'm-0 mt-2 font-sans text-h3 w-full h-14',
+              'border border-solid border-gray rounded-md outline-none',
+              'p-0 pl-4 box-border',
+              'text-primary-text hover:border-primary-hover focus:border-primary-text',
+              DISABLED_INPUT_CLASSES,
+            )}
+            value={isFocused ? value : addSpacesBetweenNumbers(value)}
             disabled={disabled}
-            onChange={handleChange}
-            onBlur={handleChange}
+            onInput={handleChange as any}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
-            <input
-              className="box-border w-full m-0 cursor-pointer slider"
-              type="range"
-              min={min}
-              max={max}
-              step={step}
-              value={value}
-              disabled={disabled}
-              onChange={handleChange}
-              style={inputStyle}
-            />
-          </div>
+          {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
         </label>
         {renderRangeCaption(items)}
       </div>
@@ -62,14 +74,15 @@ export const InputRange = JSX<InputRangeProps>(
   },
 );
 
-function renderRangeCaption(items: string[]) {
-  return (
-    <div className="flex justify-between my-2">
-      {items.map((item, i) => (
-        <span key={String(i)} className="text-s-light text-secondary-text">
-          {item}
-        </span>
-      ))}
-    </div>
-  );
-}
+const closestValue = (list: number[]) => (_: number) =>
+  list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
+
+const renderRangeCaption = (items: string[]) => (
+  <div className="flex justify-between my-2">
+    {items.map((item, i) => (
+      <Text key={String(i)} size="text-s-light" color="text-secondary-text">
+        {item}
+      </Text>
+    ))}
+  </div>
+);

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -5,6 +5,7 @@ export interface InputRangeProps extends ListContent {
   items?: string[];
   min?: number;
   max?: number;
+  list?: number[];
   step?: number;
   value?: number;
   title?: string;

package/mobile/src/ui-kit/InputRange/parseDecimal.ts

@@ -0,0 +1,6 @@
+export function parseDecimal(value?: string) {
+  const rawValue = (value || '').replace(/\D/g, '');
+  const unsafeDecimal = parseInt(rawValue, 10);
+
+  return Number.isNaN(unsafeDecimal) ? 0 : unsafeDecimal;
+}

package/mobile/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -0,0 +1,62 @@
+import { parseDecimal } from './parseDecimal';
+
+interface RangeWithTicksProps {
+  list: number[];
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+export function renderRangeWithTicks({
+  list = [],
+  min,
+  max,
+  step,
+  value = list[0] || min,
+  disabled,
+  onChange,
+}: RangeWithTicksProps) {
+  const rangeValue = list.length ? list.indexOf(value) : value;
+  const inputStyle = {
+    backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+  };
+
+  return (
+    <div>
+      {list.length ? (
+        <div className="absolute w-full flex justify-between -bottom-[3px] px-4">
+          {list.map((_, i) => (
+            <div
+              key={String(i)}
+              className={`w-2 h-2 rounded-full ${
+                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'
+              }`}
+            />
+          ))}
+        </div>
+      ) : null}
+      <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
+        <input
+          className="box-border w-full m-0 cursor-pointer slider relative z-10"
+          style={inputStyle}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={rangeValue}
+          disabled={disabled}
+          onInput={
+            ((e: { target?: { value?: string } }) => {
+              const rawValue = parseDecimal(e.target?.value);
+              const newValue = list.length ? list[rawValue] : rawValue;
+              onChange && onChange(newValue || 0);
+            }) as any
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/mobile/src/utils/getSanitizedValue.ts

@@ -1 +1 @@
-export const getSanitizedValue = (_: string): string => _.split(/\s+/).join('');
+export const getSanitizedValue = (_: string): string => _.replace(/\s/g, '');

package/mobile/src/wlc.json

@@ -3,6 +3,5 @@
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
   "SITEMAP": "sayt-rshb",
-  "CHAT_BOT": "personal",
-  "BASE_PATH": "/natural/"
+  "CHAT_BOT": "personal"
 }

package/package.json

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

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -39,7 +39,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   }, []);
 
   return (
-    <BlockWrapper className={style('font-sans bg-white p-12 pb-9', className)} {...rest}>
+    <BlockWrapper className={style('font-sans bg-white p-default pb-9', className)} {...rest}>
       <div className="container max-w-[978px]">
         {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
         {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,7 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { Carousel } from './Carousel/Carousel';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -17,6 +20,8 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
+  Carousel,
+  CarouselTariffsCard,
   ComparisonTable,
   Footer,
   Header,
@@ -33,4 +38,5 @@ export const Blocks: BlocksRegistry = {
   RichTextBlock,
   RollupItem,
   VerticalLayout,
+  CarouselRecommendationCard,
 };