@redneckz/wildless-cms-uni-blocks 0.2.52 → 0.2.55

package/src/ProductBlockInner.tsx

@@ -1,78 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
+import type { UniBlockProps, Benefit } from './types';
+import { BaseTile } from './BaseTile';
+import type { BaseTileContent } from './BaseTile';
 import { Img } from './Img';
-import type { Picture, UniBlockProps, Benefit } from './types';
-import { BlockItem } from './ui-kit/BlockItem';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
-import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
-import { useLink } from './useLink';
-import { joinList } from './utils/joinList';
 
 const ICONS = { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon };
 
-export interface ProductBlockInnerContent {
-  title?: string;
-  description?: string;
-  breadcrumbs?: BreadcrumbProps[];
-  image?: Picture;
+export interface ProductBlockInnerContent extends BaseTileContent {
   benefits?: Benefit[];
-  items?: string[];
-  buttons?: ButtonProps[];
 }
 
 export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
-  ({ className, context, title, description, breadcrumbs, benefits, buttons, image, items }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
+  ({ className, context, title, description, benefits, buttons, image, items }) => {
     return (
-      <div className={`font-sans flex justify-between items-stretch ${className || ''}`}>
-        <div className="flex flex-col">
-          {breadcrumbs?.length ? (
-            <div className="text-xs mb-6">
-              {joinList(<span className="text-secondary-text mx-2">/</span>)(
-                breadcrumbs.map((breadcrumb, i) => (
-                  <Breadcrumb
-                    key={String(i)}
-                    {...useLink(
-                      { router, handlerDecorator },
-                      { className: 'text-secondary-text', ...breadcrumb },
-                    )}
-                  />
-                )),
-              )}
-            </div>
-          ) : null}
+      <div className={`flex justify-between items-stretch ${className || ''}`}>
+        <div className={'flex flex-col'}>
           {title && (
             <h1 className="font-medium text-title-lg m-0 whitespace-pre-wrap max-w-[600px]">
               {title}
             </h1>
           )}
-          {description && (
-            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
-          )}
-          {benefits?.length ? (
-            <div className="flex gap-6 mt-7">{benefits.map(renderBenefit)}</div>
-          ) : null}
-          {items?.length ? (
-            <section className="mt-5" role="list">
-              {items.map((_, i) => (
-                <BlockItem className="mb-2" key={String(i)} text={_} />
-              ))}
-            </section>
-          ) : null}
-          {buttons?.length ? (
-            <div className="flex mt-auto gap-4">
-              {buttons.map((button, index) =>
-                renderButton(useLink({ router, handlerDecorator }, button), index),
-              )}
-            </div>
-          ) : null}
+          <BaseTile context={context} description={description} items={items} buttons={buttons}>
+            {benefits?.length ? (
+              <div className="flex gap-6 mt-6 mb-12">{benefits.map(renderBenefit)}</div>
+            ) : null}
+          </BaseTile>
         </div>
-        {image?.src && <Img image={image} className="mt-auto" />}
+        {image?.src && <Img className="mt-auto" image={image} />}
       </div>
     );
   },
@@ -95,17 +52,3 @@ function renderBenefit(benefit: Benefit, i: number) {
     </div>
   );
 }
-
-function renderButton(button: ButtonProps, i: number) {
-  return button?.text ? (
-    <Button key={String(i)} {...button} className="mt-8" version={button.version} />
-  ) : null;
-}
-
-function join<E>(sep: E): (list: E[]) => E[] {
-  return (list) =>
-    list.reduce(
-      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
-      [] as E[],
-    );
-}

package/src/ProductTile.fixture.tsx

@@ -43,11 +43,13 @@ export default {
             description: 'до 5 лет',
           },
         ]}
-        button={{
-          text: 'Подробнее',
-          href: '/credit-cards',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
         image={cardWithMoney}
       />
     </div>
@@ -73,12 +75,14 @@ export default {
             description: 'до 3 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={letterWithMoney}
       />
     </div>
@@ -104,12 +108,14 @@ export default {
             description: 'до 10 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={building}
       />
     </div>
@@ -135,12 +141,14 @@ export default {
             description: 'до 5 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),

package/src/ProductTile.tsx

@@ -1,79 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ContentPageContext } from './ContentPageContext';
-import { Img } from './Img';
-import { BlockVersion, Picture } from './types';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
-import { useLink } from './useLink';
-import type { Benefit } from './types';
+import type { UniBlockProps, Benefit } from './types';
+import { BlockVersion } from './types';
+import { Tile } from './Tile';
+import type { BaseTileContent } from './BaseTile';
 
-export interface ProductTileContent {
-  title?: string;
-  description?: string;
+export interface ProductTileContent extends BaseTileContent {
   benefits?: Benefit[];
-  image?: Picture;
-  button?: ButtonProps;
-  version?: BlockVersion;
 }
 
-export interface ProductTileProps extends ProductTileContent {
-  className?: string;
-  context: ContentPageContext;
-}
-
-const productTileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
+export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
-export const ProductTile = JSX<ProductTileProps>(
-  ({ className, context, title, description, button, image, benefits, version = 'primary' }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-    return (
-      <section className={`font-sans p-9 ${className || ''} ${productTileStyleMap[version]}`}>
-        <div className="flex flex-col w-full">
-          {title && (
-            <h3 className="font-medium text-title-sm m-0 whitespace-pre-wrap max-w-[600px]">
-              {title}
-            </h3>
-          )}
-          {description && (
-            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
-          )}
-          <div className="flex mt-5">
-            <div className="grow flex flex-col">
-              <div className="flex">
-                {benefits?.length ? (
-                  <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
-                ) : null}
-                {benefits?.length ? (
-                  <div className="pt-1">
-                    {benefits.map((_, i) => renderBenefitLabel(_, i, version))}
-                  </div>
-                ) : null}
-              </div>
-              {button?.text && (
-                <div className="mt-auto">
-                  <Button
-                    className="mt-8"
-                    {...useLink({ router, handlerDecorator }, button)}
-                    version="secondary"
-                  />
-                </div>
-              )}
-            </div>
-            {image && (
-              <div className="mt-auto flex-none h-[220px] w-[220px]">
-                <Img image={image} />
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-    );
-  },
-);
+export const ProductTile = JSX<ProductTileProps>((props) => {
+  const { benefits, version } = props;
+  return (
+    <Tile {...props}>
+      <div className="flex mt-5 mb-10">
+        {benefits?.length ? (
+          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
+        ) : null}
+        {benefits?.length ? (
+          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+        ) : null}
+      </div>
+    </Tile>
+  );
+});
 
 function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
   const labelStyleMap: Record<BlockVersion, string> = {

package/src/Tile.fixture.tsx

@@ -35,11 +35,13 @@ export default {
           'Кредиты наличными на любые цели',
           'Получите деньги без залога и поручителей',
         ]}
-        button={{
-          text: 'Подробнее',
-          href: '/credit-cards',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
         image={image}
       />
     </div>
@@ -54,12 +56,14 @@ export default {
         description={
           'Широкий выбор ипотечных программ с государственной поддержкой. Специальные предложения от 12,2 %'
         }
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),
@@ -70,12 +74,14 @@ export default {
         className="col-span-6"
         title="Банковские пластиковые карты"
         items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={image2}
       />
     </div>
@@ -89,12 +95,14 @@ export default {
         description={
           'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
         }
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={image3}
       />
     </div>
@@ -111,12 +119,14 @@ export default {
           'Площадки для создания комфортной жизни за городом',
           'Подробная база вакансий для жителей сельской местности',
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={image4}
       />
     </div>

package/src/Tile.tsx

@@ -1,89 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from './Img';
 import type { BlockVersion, Picture, UniBlockProps } from './types';
-import { BlockItem } from './ui-kit/BlockItem';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
-import { useLink } from './useLink';
+import { BaseTile } from './BaseTile';
+import type { BaseTileContent } from './BaseTile';
 
-export interface TileContent {
-  title?: string;
-  description?: string;
-  image?: Picture;
-  items?: string[];
-  button?: ButtonProps;
-  version?: BlockVersion;
-}
-
-export interface TileProps extends TileContent, UniBlockProps {}
+export interface TileProps extends BaseTileContent, UniBlockProps {}
 
 const tileStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
 };
 
-const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
-
-export const Tile = JSX<TileProps>(
-  ({
-    className,
-    context,
-    title,
-    description,
-    children,
-    button,
-    image,
-    items,
-    version = 'primary',
-  }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-    return (
-      <section
-        className={`flex flex-col font-sans p-9 ${className || ''} ${tileStyleMap[version]}`}
-      >
-        {title && renderTitle(title, className)}
-        <div className="grow flex justify-between mt-6">
-          <div className="flex flex-col justify-between items-start">
-            {description || children ? (
-              <div className="font-normal text-base max-w-[600px]">{description || children}</div>
-            ) : (
-              renderItems(items, version)
-            )}
-            {button?.text && (
-              <Button
-                className="mt-6"
-                {...useLink({ router, handlerDecorator }, button)}
-                version="secondary"
-              />
-            )}
-          </div>
-          {image?.src && <Img className="mt-auto h-[220px] w-[220px]" image={image} />}
-        </div>
-      </section>
-    );
-  },
-);
-
-function renderTitle(title: string, className: string = '') {
-  const colSpanPrefix = 'col-span-';
-  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-  const colSpan = colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-  if (colSpan <= 4) {
-    return <h3 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h3>;
-  } else if (colSpan <= 8) {
-    return <h3 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h3>;
-  } else {
-    return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
-  }
-}
-
-function renderItems(items?: string[], version?: BlockVersion) {
-  return items?.length ? (
-    <section className="max-w-[600px]" role="list">
-      {items.map((_, i) => (
-        <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
-      ))}
+export const Tile = JSX<TileProps>((props) => {
+  const { children, className, version = 'primary' } = props;
+  return (
+    <section className={`font-sans p-9 ${className || ''} ${tileStyleMap[version]}`}>
+      <BaseTile {...props}>{children}</BaseTile>
     </section>
-  ) : null;
-}
+  );
+});

package/src/api/DaDataAPI.ts

@@ -0,0 +1,34 @@
+import { getCurrentPosition } from '../utils/getCurrentPosition';
+
+import type { DaDataResult } from '../types';
+
+export function DaDataAPI(baseURL = '') {
+  async function getFetcherAddress() {
+    if (!('geolocation' in navigator)) {
+      return null;
+    }
+
+    try {
+      const coords = await getCurrentPosition();
+      const response = await fetch(`${baseURL}/geolocate`, {
+        method: 'POST',
+        mode: 'cors',
+        body: JSON.stringify({
+          lat: coords.latitude,
+          lon: coords.longitude,
+          count: 1,
+        }),
+      });
+
+      const data = (await response.json()) as DaDataResult;
+      return data?.suggestions?.[0]?.data?.city;
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  }
+
+  return {
+    getFetcherAddress,
+  };
+}

package/src/api/LikeAPI.ts

@@ -10,7 +10,7 @@ export interface LikeData {
 const AUTH_PREFIX = 'guest';
 const STORAGE_KEY = 'likesToken';
 
-export function LikeAPI(projectId: string, baseURL: string) {
+export function LikeAPI(projectId: string, baseURL = '') {
   async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
     if (!nodeIds.length) {
       return [];
@@ -19,14 +19,17 @@ export function LikeAPI(projectId: string, baseURL: string) {
     const { token: Authorization } = await auth();
 
     try {
-      const response = await fetch(`/assist/v1/public/projects/${projectId}/nodes/likes`, {
-        method: 'POST',
-        mode: 'cors',
-        headers: { 'Content-Type': 'application/json', Authorization },
-        body: JSON.stringify({
-          node_ids: nodeIds,
-        }),
-      });
+      const response = await fetch(
+        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/likes`,
+        {
+          method: 'POST',
+          mode: 'cors',
+          headers: { 'Content-Type': 'application/json', Authorization },
+          body: JSON.stringify({
+            node_ids: nodeIds,
+          }),
+        },
+      );
 
       const { likes } = await response.json();
 

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

@@ -1,6 +1,7 @@
 import glob from 'glob';
 import util from 'util';
 import type { ContentPageDef } from '../types';
+import { toMobilePage } from './toMobilePage';
 import type { TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';
 
@@ -20,6 +21,11 @@ export function ContentPageRepository({
     return pages.find((content) => content.slug === slug);
   }
 
+  async function getMobilePageBySlug(slug: string): Promise<ContentPageDef | undefined> {
+    const page = await getContentPageBySlug(slug);
+    return page && toMobilePage(page);
+  }
+
   const cache: Record<string, ContentPageDef> = {};
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
@@ -34,5 +40,6 @@ export function ContentPageRepository({
   return {
     getAllContentPages,
     getContentPageBySlug,
+    getMobilePageBySlug,
   };
 }

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

@@ -0,0 +1,21 @@
+import type { BlockDef, ContentPageDef } from '../types';
+
+export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
+  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  return {
+    ...contentPage,
+    blocks,
+  };
+}
+
+function toMobileBlock(block: BlockDef): BlockDef {
+  const { mobile } = block;
+  if (mobile) {
+    return {
+      ...block,
+      style: mobile.style?.length ? mobile.style : block.style,
+    };
+  } else {
+    return block;
+  }
+}

package/src/setup-fixture.ts

@@ -1,6 +1,8 @@
 import { setup } from '@redneckz/uni-jsx';
+
 import runtime from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
+import { DaDataAPI } from './api/DaDataAPI';
 import type { ContentPageContext } from './ContentPageContext';
 
 const { jsx, jsxs } = runtime as any;
@@ -8,6 +10,8 @@ setup(jsx, jsxs);
 
 const TEST_ORIGIN = 'http://localhost:5001';
 
+const DaData = DaDataAPI('https://10.80.4.9');
+
 export const context: ContentPageContext = {
   useState,
   useRouter: () => ({
@@ -27,6 +31,17 @@ export const context: ContentPageContext = {
     }, [key, fetcher]);
     return { data };
   },
+  useGeolocation: (defaultLocation) => {
+    const [city, setCity] = useState(defaultLocation);
+
+    const getCity = () => {
+      DaData.getFetcherAddress().then((_) => {
+        setCity(_ || defaultLocation);
+      });
+    };
+
+    return [city, getCity];
+  },
   useLikeService: () => ({
     likeCount: 0,
     like: () => {