@redneckz/wildless-cms-uni-blocks 0.6.41 → 0.6.43

package/src/components/TextBlock/TextBlock.tsx

@@ -3,51 +3,43 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockStyleMaps: Record<
-  TextBlockVersion,
-  { background: string; icon: string; title: string; description: string }
-> = {
-  primary: {
-    background: 'bg-white',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    icon: 'bg-white text-primary-main',
-    title: 'text-white',
-    description: 'text-white',
-  },
-  'secondary-light': {
-    background: 'bg-primary-main/10',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
+const textBlockBack: Record<TextBlockVersion, string> = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+  'secondary-light': 'bg-primary-main/10',
 };
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
-    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+  ({
+    className = '',
+    title,
+    description,
+    blockVersion = 'primary',
+    iconVersion,
+    image,
+    ...rest
+  }) => {
+    const isSecondaryBlock = blockVersion === 'secondary';
 
     return (
       <BlockWrapper
-        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+        className={`px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`}
         {...rest}
       >
-        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'small' ? (
+          <div className="mt-1">{renderIcon(isSecondaryBlock)}</div>
+        ) : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5">
-          {title ? (
-            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          ) : null}
+        <div>
+          {title ? renderTitle(title, isSecondaryBlock) : null}
           {description ? (
-            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
+            <div className="mt-1">{renderDescription(description, isSecondaryBlock)}</div>
           ) : null}
         </div>
       </BlockWrapper>
@@ -55,14 +47,30 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-function renderIcon(className: string) {
-  return (
-    <div className="pt-1.5 pl-1 pr-4">
-      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
-    </div>
-  );
-}
+const renderIcon = (isSecondaryBlock: boolean) => (
+  <div
+    className={`rounded-full h-4 w-4 text-center text-xs-light ${
+      isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'
+    }`}
+  >
+    i
+  </div>
+);
 
-function renderImage(image?: Picture) {
-  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
-}
+const renderImage = (image?: Picture) => (image?.src ? <Img image={image} /> : null);
+
+const renderTitle = (title: string, isSecondaryBlock: boolean) => (
+  <Text
+    size="text-l"
+    font="font-medium"
+    color={isSecondaryBlock ? 'text-white' : 'text-primary-text'}
+  >
+    {title}
+  </Text>
+);
+
+const renderDescription = (description: string, isSecondaryBlock: boolean) => (
+  <Paragraph size="text-s" color={isSecondaryBlock ? 'text-white' : 'text-secondary-text'}>
+    {description}
+  </Paragraph>
+);

package/src/content-page-repository/transformImg.ts

@@ -1,13 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import util from 'util';
-import sharp from 'sharp';
 import type { ResizeOptions, Sharp } from 'sharp';
+import sharp from 'sharp';
+import util from 'util';
 import type { ImageSize } from '../model/ImageSize';
-import type { TransformationOptions } from './TransformationOptions';
 import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
-import { transformSrc } from './transformSrc';
 import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformSrc } from './transformSrc';
 
 const mkdir = util.promisify(fs.mkdir);
 
@@ -126,20 +126,12 @@ function getCompositionResizeSize(
   const { width, height } = size;
   const { width: containerWidth, height: containerHeight } = containerSize;
 
-  let widthRatio = 0;
-  let heightRatio = 0;
-
   if (!(width || height)) {
     return undefined;
   }
 
-  if (width) {
-    widthRatio = containerWidth / width;
-  }
-
-  if (height) {
-    heightRatio = containerHeight / height;
-  }
+  const widthRatio = width ? containerWidth / width : 0;
+  const heightRatio = height ? containerHeight / height : 0;
 
   return widthRatio > heightRatio
     ? { width: Math.min(Number(width), containerWidth) }

package/src/content-page-repository/transformMarkdown.ts

@@ -1,6 +1,6 @@
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +9,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8');
+  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
 }

package/src/hooks/useCachedAsyncData.ts

@@ -0,0 +1,37 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { AsyncDataResponse, Fetcher } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+
+const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
+
+export function useCachedAsyncData<Data = any>(
+  key: string,
+  fetcher: Fetcher<Data, string>,
+  storage: any = globalThis?.localStorage,
+): AsyncDataResponse<Data> {
+  const cachedFetcher: typeof fetcher = useCallback(
+    async (...args) => {
+      const storageKey = `async:${key}`;
+      const storageData: string = storage.getItem(storageKey);
+
+      const cachedData = getParsedData(storageData);
+      if (cachedData) {
+        return cachedData;
+      }
+
+      const data = await fetcher(...args);
+      storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
+
+      return data;
+    },
+    [key, fetcher],
+  );
+
+  return useAsyncData(key, cachedFetcher);
+}
+
+function getParsedData(storageData: string) {
+  const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
+
+  return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
+}

package/src/hooks/useLocation.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
+import { useCachedAsyncData } from './useCachedAsyncData';
+
+const REGION_URL = '/api/v1/region';
+
+export interface RegionData {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+interface LocationStorageData {
+  manual?: boolean;
+  region: RegionData;
+}
+
+const localStorageLocation = globalThis?.localStorage.getItem('location');
+const currentLocation: LocationStorageData | null = localStorageLocation
+  ? JSON.parse(localStorageLocation)
+  : null;
+
+export function useLocation(
+  defaultLocation: string,
+): [RegionData, (newLocation: RegionData) => void] {
+  const [location, setLocation] = useState<RegionData>(
+    currentLocation?.region ?? { name: defaultLocation },
+  );
+  const { data } = useCachedAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
+
+  useEffect(() => {
+    setLocation(
+      currentLocation?.region && currentLocation?.manual
+        ? currentLocation.region
+        : data || { name: defaultLocation },
+    );
+  }, [data]);
+
+  const onChangeLocation = useCallback(
+    (region: RegionData) => {
+      globalThis?.localStorage.setItem('location', JSON.stringify({ manual: true, region }));
+      setLocation(region);
+    },
+    [setLocation],
+  );
+
+  return [location, onChangeLocation];
+}

package/src/hooks/useRegions.ts

@@ -0,0 +1,16 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
+
+const REGIONS_URL = '/api/v1/regions';
+
+export interface Region {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export function useRegions(): Region[] {
+  const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
+
+  return data || [];
+}

package/src/services/sitemap/SitemapProps.ts

@@ -20,10 +20,19 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
+/**
+ * @title Представительства за рубежом
+ * @required ["text", "href"]
+ */
+export interface ForeignOffice extends LinkProps {
+  icon?: Picture;
+}
+
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
   logo?: LogoType;
+  foreignOffices?: ForeignOffice[];
   defaultLocation?: string;
   officesLink?: string;
 }

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

@@ -0,0 +1,81 @@
+import { Picture } from '../../model/Picture';
+import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
+import '../../setup-fixture';
+import { Location } from './Location';
+
+const belarus: Picture = {
+  src: 'belarus.png',
+  format: 'webp',
+  size: {
+    width: 24,
+    height: 24,
+  },
+};
+
+const kazakhstan: Picture = {
+  src: 'kazakhstan.png',
+  format: 'webp',
+  size: {
+    width: 24,
+    height: 24,
+  },
+};
+
+const armenia: Picture = {
+  src: 'armenia.png',
+  format: 'webp',
+  size: {
+    width: 24,
+    height: 24,
+  },
+};
+
+const china: Picture = {
+  src: 'china.png',
+  format: 'webp',
+  size: {
+    width: 24,
+    height: 24,
+  },
+};
+
+const FOREIGN_OFFICES: ForeignOffice[] = [
+  {
+    text: 'Республика Беларусь',
+    href: '#',
+    icon: belarus,
+  },
+  {
+    text: 'Республика Казахстан',
+    href: '#',
+    icon: kazakhstan,
+  },
+  {
+    text: 'Республика Армения',
+    href: '#',
+    icon: armenia,
+  },
+  {
+    text: 'Китайская Народная Республика',
+    href: '#',
+    icon: china,
+  },
+];
+
+const close = () => ({});
+const onChangeLocation = () => ({});
+
+const currentLocation = {
+  name: 'Москва',
+};
+
+export default {
+  default: (
+    <Location
+      close={close}
+      onChangeLocation={onChangeLocation}
+      currentLocation={currentLocation}
+      foreignOffices={FOREIGN_OFFICES}
+    />
+  ),
+};

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

@@ -0,0 +1,168 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useLink } from '../../hooks/useLink';
+import type { Region } from '../../hooks/useRegions';
+import { useRegions } from '../../hooks/useRegions';
+import { useSearch } from '../../hooks/useSearch';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
+import { Text } from '../../ui-kit/Text/Text';
+import { groupBy } from '../../utils/groupBy';
+import { Img } from '../Img/Img';
+import { SearchBar } from './SearchBar';
+
+const SEARCH_TERM_MIN_LENGTH = 3;
+
+interface RegionLinkProps {
+  onChangeLocation?: (region: Region) => void;
+}
+
+interface CloseButtonProps {
+  close?: () => void;
+}
+
+interface CurrentLocationProps {
+  currentLocation?: Region;
+}
+
+interface ForeignOfficeProps {
+  foreignOffices?: ForeignOffice[];
+}
+
+export type LocationProps = ForeignOfficeProps &
+  CloseButtonProps &
+  RegionLinkProps &
+  CurrentLocationProps &
+  UniBlockProps;
+
+export const Location = JSX<LocationProps>(
+  ({ currentLocation, onChangeLocation, close, foreignOffices }) => {
+    const { term, setTerm } = useSearch();
+
+    const handleSearch = useCallback((_: string) => setTerm(_), []);
+
+    const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
+      a.name.localeCompare(b.name),
+    );
+    const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
+
+    return (
+      <div className="absolute h-full w-full inset-0 bg-white text-l-light z-50">
+        <CloseButton close={close} />
+        <div className="container py-12">
+          <CurrentLocation currentLocation={currentLocation} />
+          <SearchBar onSearch={handleSearch} searchTerm={term} className="mb-7" />
+
+          {term && term.length >= SEARCH_TERM_MIN_LENGTH ? (
+            <div>
+              {regions
+                .filter((region) => region.name?.startsWith(term))
+                .map(renderRegion({ onChangeLocation, close }))}
+            </div>
+          ) : (
+            <div className="columns-5">
+              {Array.from(regionsGroupByLetter.entries()).map(
+                renderRegionGroup({ onChangeLocation, close }),
+              )}
+            </div>
+          )}
+
+          <ForeignOffices foreignOffices={foreignOffices} />
+        </div>
+      </div>
+    );
+  },
+);
+
+const regionFirstLetter = (region: Region) => region.name?.charAt(0) || '';
+
+const cleanUpRegions = (regions: Region[]) =>
+  regions.map((region) => ({
+    ...region,
+    name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+  }));
+
+const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
+  currentLocation ? (
+    <div className="mb-4">
+      <Text size="text-l" font="font-light">
+        Сейчас выбран:&nbsp;
+      </Text>
+      <button className="cursor-pointer" onClick={close}>
+        <Text color="text-green">{currentLocation.name}</Text>
+      </button>
+    </div>
+  ) : null,
+);
+
+const CloseButton = JSX<CloseButtonProps>(({ close }) => (
+  <button
+    className="visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
+    onClick={(e) => {
+      e.preventDefault();
+      close && close();
+    }}
+  >
+    <Img image="CloseIcon" width="24" height="24" />
+  </button>
+));
+
+const renderRegionGroup =
+  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ([letter, regions]: [string, Region[]]) =>
+    (
+      <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
+        <div className="mb-2.5">
+          <Text size="text-h6">{letter}</Text>
+        </div>
+        {regions.map(renderRegion({ onChangeLocation, close }))}
+      </div>
+    );
+
+const renderRegion =
+  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  (region: Region) =>
+    (
+      <div key={region.id} className="mb-1">
+        <button
+          className="cursor-pointer hover:text-primary-hover"
+          onClick={() => {
+            onChangeLocation && onChangeLocation(region);
+            close && close();
+          }}
+        >
+          {region.name}
+        </button>
+      </div>
+    );
+
+const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
+  foreignOffices?.length ? (
+    <div className="border-t border-main-divider mt-7 pt-7">
+      <div className="mb-4">
+        <Text size="text-m-light" color="text-secondary-text">
+          Представительства за рубежом:
+        </Text>
+      </div>
+      <div className="flex gap-10">
+        {foreignOffices.map((office, i: number) => (
+          <ForeignOffice key={String(i)} {...office} />
+        ))}
+      </div>
+    </div>
+  ) : null,
+);
+
+const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
+  const link = useLink();
+  const { text, target, href, onClick } = link(rest);
+
+  return (
+    <div className="flex gap-x-3">
+      <Img image={icon} />
+      <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
+        {text}
+      </a>
+    </div>
+  );
+});

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SearchBarInnerProps {
+  className?: string;
+  searchTerm?: string;
+  onSearch: (_: string) => void;
+}
+
+export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSearch }) => {
+  return (
+    <form className={`font-sans relative ${className}`}>
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+        {searchTerm ? null : (
+          <label htmlFor="search-bar-input" className={`text-secondary-text `}>
+            Поиск по филиалам
+          </label>
+        )}
+      </div>
+      <input
+        id="search-bar-input"
+        className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+        value={searchTerm}
+        onChange={(e) => onSearch(e.target.value as string)}
+        type="text"
+        name="location-search-bar-input"
+      />
+    </form>
+  );
+});

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MarkdownTextProps } from './MarkdownTextProps';
+
+export const MarkdownText = JSX<MarkdownTextProps>((props) => {
+  const { md = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html: md }} />;
+});

package/src/ui-kit/MarkdownText/MarkdownTextProps.ts

@@ -0,0 +1,6 @@
+type Markdown = string;
+
+export interface MarkdownTextProps {
+  /** @title Текст */
+  md?: Markdown;
+}

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -29,7 +29,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     className = '',
     containerRef,
     activeIndex,
-    visibleItemCount,
+    visibleItemCount = 0,
     gap = 0,
     padding = 0,
     snapAlign = 'snap-center',
@@ -54,11 +54,15 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       },
       [onVisibleItemsChange, onVisibleIndicesChange],
     );
+    const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
     return (
       <div
         className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        style={{
+          ...getContainerStyle(padding, additionPadding),
+          gap: `${gap}px`,
+        }}
         role="list"
         ref={containerRef}
       >
@@ -83,11 +87,11 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
 );
 
 // Styles used to compensate outer container padding to get rid of clipping effect
-const getContainerStyle = (padding: number): Record<string, string> => ({
+const getContainerStyle = (padding: number, additionalPadding = 0): Record<string, string> => ({
   marginLeft: `${-padding}px`,
   marginRight: `${-padding}px`,
   paddingLeft: `${padding}px`,
-  paddingRight: `${padding}px`,
+  paddingRight: `${padding + additionalPadding}px`,
 });
 
 const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>

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

@@ -8,10 +8,8 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>((props) => {
-  const { size = '', color = '', align = '', font = '', children } = props;
-
-  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-
-  return <span className={textClasses}>{children}</span>;
-});
+export const Text = JSX<TextProps>(({ size, color, align, font, children }) => (
+  <span className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>
+    {children}
+  </span>
+));

package/src/utils/groupBy.ts

@@ -0,0 +1,10 @@
+export const groupBy = <K, V>(list: Array<V>, keyGetter: (input: V) => K): Map<K, Array<V>> => {
+  const map = new Map<K, Array<V>>();
+  list.forEach((item) => {
+    const key = keyGetter(item);
+    const collection = map.get(key);
+    map.set(key, [...(collection || []), item]);
+  });
+
+  return map;
+};

package/bundle/hooks/useGeolocation.d.ts

@@ -1 +0,0 @@
-export declare function useGeolocation(defaultLocation: string): [string, () => void];

package/dist/hooks/useGeolocation.d.ts

@@ -1 +0,0 @@
-export declare function useGeolocation(defaultLocation: string): [string, () => void];