@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.0

package/src/ui-kit/DialogManager/useDialogsList.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useList } from '@redneckz/uni-jsx/lib/hooks/useList';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { useList } from '../../hooks/useList';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { DialogOpenAction } from './DialogAction';
 

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

@@ -4,6 +4,7 @@ import { style } from '../../utils/style';
 import type { IconName } from '../Icon/IconProps';
 import { Img } from '../Img/Img';
 import type { FoldablePartProps } from './FoldablePartProps';
+import { TextWithIcon } from '../TextWithIcon/TextWithIcon';
 
 interface DefaultFoldButtonProps {
   className?: string;
@@ -15,35 +16,36 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-    return (
-      <button
-        className={style(
-          'flex justify-center w-full py-4 border border-transparent outline-none focus:border-primary-text',
-          disabled
-            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-            : 'bg-primary-main text-white hover:bg-primary-hove',
-          className,
-        )}
-        onClick={onClick}
-        disabled={disabled}
-        data-theme={dataTheme}
-      >
-        <span className="text-h4 pr-s">{label}</span>
-        {icon ? (
+  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (
+    <TextWithIcon
+      tag="button"
+      onClick={onClick}
+      disabled={disabled}
+      data-theme={dataTheme}
+      justifyContent="center"
+      className={style(
+        'py-4 border border-transparent outline-none focus:border-primary-text',
+        disabled
+          ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+          : 'bg-primary-main text-white hover:bg-primary-hove',
+        className,
+      )}
+      textNode={<span className="text-h4 pr-s">{label}</span>}
+      iconNode={
+        icon ? (
           <Img
             image={{
               icon,
               iconVersion: 'white',
             }}
-            className="flex-shrink-0 my-auto"
+            className="my-auto"
             width="20"
             height="20"
           />
-        ) : null}
-      </button>
-    );
-  },
+        ) : null
+      }
+    />
+  ),
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {

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

@@ -0,0 +1,11 @@
+import '../../setup-fixture';
+
+import { InnerTable } from './InnerTable';
+
+export default {
+  default: (
+    <div className="p-m bg-white">
+      <InnerTable pdfUrl="#" dataUrl="tariffs-inner-table-data" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,11 @@
+import '../../setup-fixture';
+
+import { InnerTable } from './InnerTable';
+
+export default {
+  default: (
+    <div className="p-m bg-white">
+      <InnerTable pdfUrl="#" dataUrl="tariffs-inner-table-data" />
+    </div>
+  ),
+};

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

@@ -28,10 +28,10 @@ export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) =>
         linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody activeTabIndex={activeTabIndex} items={items} />
-      <TableInnerButton onClick={onClick} isOpen />
+      <TableInnerButton className="mt-xl" onClick={onClick} isOpen />
     </div>
   ) : (
-    <div className="my-lg text-h6 text-center">
+    <div className="my-lg space-y-m text-h6 text-center">
       <p>{EMPTY_DATA}</p>
       <TableInnerButton onClick={onClick} isOpen />
     </div>

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

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';
 
@@ -11,39 +9,19 @@ export interface InnerTableBodyProps {
 }
 
 export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
-  const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
-
-  const toggleTables = useCallback(
-    (key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })),
-    [],
-  );
-
   return (
     <div>
       {items.map((_, tableIdx) => {
         const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
 
         return (
-          <div key={key} className="w-full">
-            <div
-              className="flex p-m bg-gray text-center justify-center cursor-pointer relative"
-              onClick={() => toggleTables(key)}
-            >
+          <div key={key} className="w-full @container">
+            <div className="flex p-m bg-white @4xl:bg-gray text-center justify-center relative">
               <Text size="text-xl" font="font-light">
                 {_.title}
               </Text>
-              <Img
-                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
-                className="absolute right-6"
-                width="24"
-                height="24"
-              />
             </div>
-            <div
-              className={`w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out ${
-                hiddenTables[key] ? 'h-0' : ''
-              }`}
-            >
+            <div className="w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out">
               <div className="relative">
                 <InnerTableBodyItem rows={_.rowsData} />
               </div>

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

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
+import type { RowsData } from './InnerTableProps';
+import { renderInnerTableRow } from './renderInnerTableRow';
+
+export interface InnerTableBodyItemProps {
+  rows?: RowsData[][];
+}
+
+export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => (
+  <SwipeListContainer visibleItemCount={0} snapAlign="snap-start">
+    <div>{rows?.map(renderInnerTableRow(0))}</div>
+  </SwipeListContainer>
+));

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

@@ -2,9 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
-import { style } from '../../utils/style';
-
-const COLUMN_WIDTH = 140;
+import { renderInnerTableRow } from './renderInnerTableRow';
 
 export interface InnerTableBodyItemProps {
   rows?: RowsData[][];
@@ -20,7 +18,7 @@ export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
 
   return (
     <div>
-      {rows?.map(renderRow(activeIndex))}
+      {rows?.map(renderInnerTableRow(activeIndex))}
       {renderArrows({
         ...controls,
         btnClass: ['left-3 top-20', 'right-3 top-20'],
@@ -29,61 +27,3 @@ export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
     </div>
   );
 });
-
-const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
-  if (!rowData?.length) {
-    return null;
-  }
-
-  const [headerColumn, ...columns] = rowData;
-
-  const transform = [...Array(activeColumnIndex).keys()].reduce(
-    (res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res,
-    0,
-  );
-
-  const columnsClassName = [
-    'flex duration-1000 text-center',
-    rowIdx !== 0 ? 'font-normal' : 'font-light',
-  ].join(' ');
-
-  return (
-    <div
-      key={String(rowIdx)}
-      className="flex border-main-divider border border-t-0 border-x-0 border-solid"
-    >
-      {headerColumn?.data ? (
-        <div className={`text-xl font-light w-52 py-lg `}>{headerColumn.data}</div>
-      ) : null}
-      <div className="flex flex-grow overflow-hidden">
-        <div
-          className={columnsClassName}
-          style={{
-            transform: `translateX(-${transform}px)`,
-          }}
-        >
-          {columns?.map((_, i) => (
-            <div
-              key={`row${i}`}
-              className="flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider"
-            >
-              {_?.data ? <div className="text-xl font-light">{_.data}</div> : null}
-              {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const renderCols = (cols: string[], rowIndex: number) =>
-  cols?.length > 0 ? (
-    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
-      {cols.map((data, i) => (
-        <div key={String(i)} className={`w-20 text-h6 mx-lg`}>
-          {data}
-        </div>
-      ))}
-    </div>
-  ) : null;

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

@@ -0,0 +1,11 @@
+import '../../setup-fixture';
+
+import { TableInnerButton } from './InnerTableButton';
+
+export default {
+  default: (
+    <div className="px-4 py-5 bg-white">
+      <TableInnerButton />
+    </div>
+  ),
+};

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

@@ -1,31 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Button } from '../Button/Button';
-import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerContent } from './InnerTableProps';
+import { Img } from '../Img/Img';
+import { Button } from '../Button/Button';
 
-export interface TableInnerButtonProps
+export interface InnerTableButtonProps
   extends Partial<TariffsTableCellIndexProps>,
     TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
+  className?: string;
 }
 
-export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick }) => {
-  return (
+export const TableInnerButton = JSX<InnerTableButtonProps>(
+  ({ className = '', isOpen, onClick }) => (
     <Button
-      version="primary"
+      className={className}
+      appendRight={
+        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />
+      }
+      text={isOpen ? 'Скрыть' : 'Показать'}
+      version="gray"
       onClick={onClick}
-      className="w-full flex items-center justify-center rounded-none py-lg"
-    >
-      <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать'}</div>
-      <Icon
-        name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-        className="ml-s"
-        iconVersion="white"
-        width="20"
-        height="20"
-      />
-    </Button>
-  );
-});
+    />
+  ),
+);

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
   currencies?: string[];
@@ -11,13 +12,13 @@ export interface InnerTableHeaderProps {
 
 export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
-    <div className="flex justify-between w-full px-s">
+    <div className="flex justify-between items-center w-full py-lg">
       {currencies && currencies.length > 1 ? (
         <div className="flex bg-secondary-light p-2xs rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={`rounded-md text-xl font-light px-m py-s cursor-pointer ${
+              className={`rounded-md text-xl font-light px-4 py-3 cursor-pointer ${
                 idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
               }`}
               onClick={() => setActiveTabIndex(idx)}
@@ -29,8 +30,9 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
       ) : null}
       {linkToPDF ? (
         <Button
+          className="text-primary-main"
           href={linkToPDF}
-          version="secondary"
+          version={linkButtonVersion}
           target="_blank"
           appendLeft={
             <Icon

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

@@ -0,0 +1,7 @@
+import type { RowsData } from './InnerTableProps';
+import { sum } from '../../utils/sum';
+
+const COLUMN_WIDTH = 140;
+
+export const getHorizontalShift = (columns: RowsData[], activeColumnIndex: number) =>
+  sum(columns.slice(0, activeColumnIndex).map((_) => _?.cols?.length ?? 1)) * COLUMN_WIDTH;

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

@@ -0,0 +1 @@
+export const linkButtonVersion = 'link';

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

@@ -0,0 +1 @@
+export const linkButtonVersion = 'secondary';

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

@@ -0,0 +1,54 @@
+import type { RowsData } from './InnerTableProps';
+import { style } from '../../utils/style';
+import { getHorizontalShift } from './getHorizontalShift';
+
+export const renderInnerTableRow =
+  (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
+    if (!rowData?.length) {
+      return null;
+    }
+
+    const [headerColumn, ...columns] = rowData;
+
+    const columnsStyle = style(
+      'flex duration-1000 text-center',
+      rowIdx !== 0 ? 'font-normal' : 'font-light',
+    );
+
+    return (
+      <div key={String(rowIdx)} className="flex border-main-divider border-b border-solid h-full">
+        {headerColumn?.data ? (
+          <div className="text-xl font-light min-w-56 py-lg">{headerColumn.data}</div>
+        ) : null}
+        <div className="flex flex-grow overflow-hidden">
+          <div
+            className={columnsStyle}
+            style={{
+              transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
+            }}
+          >
+            {columns?.map((_, i) => (
+              <div
+                key={`row${i}`}
+                className="flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider"
+              >
+                {_?.data ? <div className="text-xl font-light">{_.data}</div> : null}
+                {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+const renderCols = (cols: string[], rowIndex: number) =>
+  cols?.length > 0 ? (
+    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
+      {cols.map((data, i) => (
+        <div key={String(i)} className="w-20 text-h6 mx-lg">
+          {data}
+        </div>
+      ))}
+    </div>
+  ) : null;

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

@@ -4,16 +4,16 @@ import { useLocation } from '../../hooks/useLocation';
 import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { groupBy } from '../../utils/groupBy';
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { Dialog } from '../DialogManager/Dialog';
 import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Text } from '../Text/Text';
+import { SearchBar } from './SearchBar';
 import { renderForeignOffices } from './renderForeignOffices';
 import { renderRegion } from './renderRegion';
 import { renderRegionGroup } from './renderRegionGroup';
-import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 

package/src/ui-kit/PopupManager/PopupAction.ts

@@ -0,0 +1,18 @@
+import type { VNode } from '../../model/VNode';
+
+export type PopupAction = PopupOpenAction | PopupCloseAction;
+
+export interface PopupOptions {
+  top: number;
+  left: number;
+  width?: number;
+}
+
+export interface PopupOpenAction extends PopupOptions {
+  type: 'open' | 'update';
+  popup: VNode;
+}
+
+export interface PopupCloseAction {
+  type: 'close';
+}

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

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import { PopupOpenAction } from './PopupAction';
+
+export const PopupManager = JSX(() => {
+  const [popup, setPopup] = useState<PopupOpenAction | null>(null);
+
+  const close = useCallback(() => {
+    setPopup(null);
+  }, []);
+
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('popup', (action) => {
+        switch (action.type) {
+          case 'open':
+          case 'update':
+            setPopup(action);
+            break;
+          case 'close':
+            close();
+            break;
+          default:
+            assertUnreachable(action);
+        }
+      }),
+    [],
+  );
+
+  const escapeHandler = useCallback(
+    ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        close();
+      }
+    },
+    [close],
+  );
+
+  useEventListener(globalThis.document, 'keydown', escapeHandler);
+
+  return popup ? (
+    <div
+      className="absolute z-50"
+      style={{
+        left: `${popup.left}px`,
+        top: `${popup.top}px`,
+        ...(popup.width ? { width: `${popup.width}px` } : {}),
+      }}
+      role="dialog"
+    >
+      {popup.popup}
+    </div>
+  ) : null;
+});

package/src/ui-kit/PopupManager/usePopupManager.tsx

@@ -0,0 +1,11 @@
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import type { VNode } from '../../model/VNode';
+import type { PopupOptions } from './PopupAction';
+
+export const usePopupManager = () => ({
+  open: (popup: VNode, options: PopupOptions) =>
+    defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
+  update: (popup: VNode, options: PopupOptions) =>
+    defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
+  close: () => defaultEventBus.fire('popup', { type: 'close' }),
+});

package/src/ui-kit/Select/Option.ts

@@ -0,0 +1,4 @@
+export interface Option {
+  key: string;
+  text?: string;
+}

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

@@ -1,17 +1,35 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import '../../setup-fixture';
 
-import { Select } from './Select';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import type { Option } from './Option';
+import { Select, SelectProps } from './Select';
 
-const rates = [
+const currencies = [
   { text: 'USD', key: '1' },
   { text: 'EUR', key: '2' },
   { text: 'Other', key: '3' },
 ];
 
+const CurrencySelect = (props: SelectProps) => {
+  const [value, setValue] = useState<Option>();
+
+  return (
+    <Select options={currencies} label="Заголовок" value={value} onChange={setValue} {...props} />
+  );
+};
+
 export default {
   default: (
-    <div className="w-[1280px]flex flex-col">
-      <Select options={rates} label="Заголовок" onChange={(_) => console.log(_)} />
+    <div className="container">
+      <CurrencySelect />
+      <PopupManager />
+    </div>
+  ),
+  search: (
+    <div className="container">
+      <CurrencySelect isSearch={true} />
+      <PopupManager />
     </div>
   ),
 };