@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

package/src/components/OfficeMap/OfficeMapContent.ts

@@ -0,0 +1,38 @@
+import type { IconName } from '../../icons/IconName';
+
+export type WorkSchedule = {
+  workTime: string;
+  lunchHour: string;
+  workTimeSaturday: string;
+  lunchHourSaturday: string;
+  workingMonday: boolean;
+  workingTuesday: boolean;
+  workingWednesday: boolean;
+  workingThursday: boolean;
+  workingFriday: boolean;
+  workingSaturday: boolean;
+  workingSunday: boolean;
+};
+
+export interface OfficeMapProps {
+  name?: string;
+  address: string;
+  workSchedule: WorkSchedule;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+}
+
+export type WorkScheduleWeek = {
+  title?: string;
+  status?: boolean;
+  workTime?: string;
+  lunchHour?: string;
+  description?: string;
+};
+
+export type NearbyOffices = {
+  title?: string;
+  time?: string;
+  distance?: string;
+  icon?: IconName;
+};

package/src/components/OfficeMap/YandexMap.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import ymaps from 'yandex-maps';
+import { renderClusterer } from '../SafeDepositRental/renderClusterer';
+import { useYandexMaps } from '../SafeDepositRental/useYandexMaps';
+
+interface YandexMapProps {
+  point: number[];
+}
+
+export const YandexMap = JSX<YandexMapProps>(({ point }) => {
+  const map = useRef<ymaps.Map | null>(null);
+
+  const yandexMaps = useYandexMaps();
+
+  useEffect(() => {
+    yandexMaps?.ready(() => {
+      map.current = new yandexMaps.Map('map', {
+        center: point,
+        zoom: 10,
+      });
+      renderClusterer(yandexMaps, map.current, [point]);
+    });
+  }, [map, point, yandexMaps]);
+
+  useEffect(() => {
+    if (map.current && point && yandexMaps) {
+      renderClusterer(yandexMaps, map.current, [point]);
+    }
+  }, [map, point, yandexMaps]);
+
+  if (!yandexMaps) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white">
+      <div id="map" className="h-[560px]" />
+    </div>
+  );
+});

package/src/components/OfficeMap/mockOfficeMap.ts

@@ -0,0 +1,79 @@
+export const OFFICE_MAP = {
+  id: 123,
+  branchType: {
+    id: 7,
+    code: '21',
+    name: 'Отделение на балансе филиала',
+  },
+  shortName: 'Ейский ДО',
+  name: 'ДО   №3349/3/05',
+  address: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+  lawAddress: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+  openDate: '2000-12-05',
+  closeDate: null,
+  bik: '040349536',
+  corAcc: '30101810700000000536',
+  registrationNumber: '3349/3/05',
+  phone: '+7(XXX)XXX-XX-XX',
+  fax: '+7(XXX)XXX-XX-XY',
+  okpo: '55105921',
+  ogrn: '1027700342890',
+  kpp: '231002002',
+  inn: '7725114488',
+  branchCode: '0305',
+  upperBranchCode: '0300',
+  timeZone: '+03:00',
+  exchangeRate: {
+    currencies: [
+      {
+        buyExchangeRate: 0.0,
+        saleExchangeRate: 0.0,
+        currency: {
+          id: 3,
+          code: '156',
+          currency: 'CNY',
+          name: 'Китайский юань',
+        },
+      },
+      {
+        buyExchangeRate: 59.15,
+        saleExchangeRate: 69.25,
+        currency: {
+          id: 2,
+          code: '978',
+          currency: 'EUR',
+          name: 'Евро',
+        },
+      },
+      {
+        buyExchangeRate: 58.4,
+        saleExchangeRate: 70.05,
+        currency: {
+          id: 1,
+          code: '840',
+          currency: 'USD',
+          name: 'Американский доллар',
+        },
+      },
+    ],
+    lastUpdate: '2022-11-11 03:56:17',
+  },
+  workSchedule: {
+    id: 413,
+    workTime: '09.00–16.30',
+    lunchHour: 'без перерыва',
+    workTimeSaturday: '09.00–15.00',
+    lunchHourSaturday: 'без перерыва',
+    workingMonday: false,
+    workingTuesday: false,
+    workingWednesday: true,
+    workingThursday: true,
+    workingFriday: true,
+    workingSaturday: true,
+    workingSunday: false,
+  },
+  gpsLatitude: 46.709744,
+  gpsLongitude: 38.260703,
+  range: null,
+  safeBoxCaseVolumes: null,
+};

package/src/components/OfficeMap/renderFunctions.tsx

@@ -0,0 +1,69 @@
+import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
+  const hasTime = /\d+/gi.test(lunchHour as string);
+  const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
+
+  return status ? (
+    <div className="flex">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4">
+        {workTime ? workTime : null}
+      </div>
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden">
+        {lunchHour ? lunchHourText : null}
+      </div>
+    </div>
+  ) : (
+    <div className="flex">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error">
+        Выходной
+      </div>
+    </div>
+  );
+};
+
+export const renderNearbyOffice = ({ icon, title, distance, time }: NearbyOffices, inx: number) => (
+  <div className="flex mr-4" key={`nearbyOffice${inx}`}>
+    <Icon name={icon} width="16" height="16" asSVG className="mr-1" />
+    {title ? <span className="text-m">{title}&nbsp;</span> : null}
+    <span className="text-m-light">
+      {distance ? ` (${distance})` : null}
+      {time ? `, ${time}` : null}
+    </span>
+  </div>
+);
+export const renderDay = (
+  { title, status, workTime, lunchHour, description }: WorkScheduleWeek,
+  inx: number,
+) => (
+  <div
+    className="flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0"
+    key={`day${inx}`}
+  >
+    <div className="flex justify-between items-center w-full pb-1 text-l text-primary-text">
+      <div>{title}</div>
+      {status ? null : <div className="text-m-light text-error">Выходной</div>}
+      {status && workTime ? <div>{workTime}</div> : null}
+    </div>
+    {status && lunchHour ? renderLunchHour(lunchHour) : null}
+    {description ? (
+      <div className="pb-1 text-s-light text-secondary-text">{description}</div>
+    ) : null}
+  </div>
+);
+
+const renderLunchHour = (lunchHour: string) => {
+  const hasTime = /\d+/gi.test(lunchHour);
+
+  return hasTime ? (
+    <div className="flex justify-between items-center w-full pb-1 text-m-light text-error">
+      <div>Перерыв</div>
+      <div>{lunchHour}</div>
+    </div>
+  ) : (
+    <div className="flex justify-between items-center w-full pb-1 text-m-light text-primary-main">
+      <div>{lunchHour}</div>
+    </div>
+  );
+};

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -26,7 +26,7 @@ export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   },
 );
 
-const renderListItems = (itemList: OfficeServicesBlockList, i) => (
+const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
   <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
     {itemList.icon ? (
       <Img

package/src/components/OtherProducts/OtherProducts.example.json

@@ -1,56 +1,3 @@
 {
-  "title": "Другие продукты",
-  "blockItems": [
-    {
-      "label": "Другие продукты 1",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 2",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 3",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    }
-  ]
+  "title": "Другие продукты"
 }

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,156 +1,107 @@
 import { context } from '../../react/setup-fixture';
+import { Gallery } from '../Gallery/Gallery';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { MiniGallery } from '../MiniGallery/MiniGallery';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { OtherProductsItem } from '../OtherProductsItem/OtherProductsItem';
+import { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_PENSION_TILE, PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { Tile } from '../Tile/Tile';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
 import { OtherProducts } from './OtherProducts';
 
-import type {
-  GalleryBlockListDef,
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  MiniGalleryBlockListDef,
-  PictureTextBlockListDef,
-  ProductBlockBlockListDef,
-  ProductTileBlockListDef,
-  TextBlockBlockListDef,
-  TileBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+const TEXT_BLOCK_OTHER_BLOCK = (
+  <TextBlock context={context} className="col-span-12" {...TEXT_BLOCK} />
+);
 
-const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  style: ['col-span-12'],
-  ...TEXT_BLOCK,
-};
+const PRODUCT_BLOCK_OTHER_BLOCK = (
+  <ProductBlock context={context} className="col-span-6" {...PRODUCT_BLOCK} />
+);
 
-const PRODUCT_BLOCK_OTHER_BLOCK: ProductBlockBlockListDef = {
-  blockListType: 'ProductBlock',
-  style: ['col-span-6'],
-  ...PRODUCT_BLOCK,
-};
+const TILES_OTHER_BLOCK = <Tile context={context} className="col-span-12" {...TILE} />;
 
-const TILES_OTHER_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-12'],
-  ...TILE,
-};
+const TILES_PREMIUM_OTHER_BLOCK = (
+  <Tile context={context} className="col-span-6" {...TILE_PREMIUM} />
+);
 
-const TILES_PREMIUM_OTHER_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-6'],
-  ...TILE_PREMIUM,
-};
+const PRODUCT_TILES_OTHER_BLOCK = (
+  <ProductTile context={context} className="col-span-6" {...PRODUCT_TILE} />
+);
 
-const PRODUCT_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
+const PRODUCT_PENSION_TILES_OTHER_BLOCK = (
+  <ProductTile context={context} className="col-span-6" {...PRODUCT_PENSION_TILE} />
+);
 
-const PRODUCT_PENSION_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_PENSION_TILE,
-};
+const HEADLINE_OTHER_BLOCK = <Headline context={context} className="col-span-12" {...HEADLINE} />;
 
-const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  style: ['col-span-12'],
-  ...HEADLINE,
-};
+const PICTURE_TEXT_OTHER_BLOCK = (
+  <PictureText context={context} className="col-span-12" {...PICTURE_TEXT} />
+);
 
-const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
-  blockListType: 'PictureText',
-  style: ['col-span-12'],
-  ...PICTURE_TEXT,
-};
-
-const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  style: ['col-span-12'],
-  ...linkDocsContentExample,
-};
+const LINK_DOCS_OTHER_BLOCK = (
+  <LinkDocs context={context} className="col-span-12" {...linkDocsContentExample} />
+);
 
-const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
-  blockListType: 'Gallery',
-  style: ['col-span-12'],
-  ...GALLERY,
-};
+const GALLERY_OTHER_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
 
-const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
-  blockListType: 'MiniGallery',
-  style: ['col-span-12'],
-  ...MINI_GALLERY,
-};
+const MINI_GALLERY_OTHER_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
 
-const propsBlock: OtherProductsProps = {
-  context,
-  colorPalette: 'pc',
-  blockItems: [
-    {
-      label: 'OtherProducts №1 Tiles',
-      blocks: [
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №2 Product_Tiles',
-      blocks: [
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №3 Product_Block',
-      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №4 Text_Block',
-      blocks: [
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №5 Picture_Text',
-      blocks: [PICTURE_TEXT_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №6 Headline',
-      blocks: [HEADLINE_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №7 Link_Docs',
-      blocks: [LINK_DOCS_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №8 Gallery',
-      blocks: [GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №9 Mini_Gallery',
-      blocks: [MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK],
-    },
-  ],
-};
+export const OTHER_PRODUCTS_ITEM = (
+  <OtherProductsItem context={context} label="OtherProducts №1 Tiles">
+    {[TILES_PREMIUM_OTHER_BLOCK, TILES_PREMIUM_OTHER_BLOCK, TILES_OTHER_BLOCK, TILES_OTHER_BLOCK]}
+  </OtherProductsItem>
+);
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <OtherProducts className="col-span-12" {...propsBlock} />
+      <OtherProducts context={context} className="col-span-12">
+        {OTHER_PRODUCTS_ITEM}
+        <OtherProductsItem context={context} label="OtherProducts №2 Product_Tiles">
+          {[
+            PRODUCT_TILES_OTHER_BLOCK,
+            PRODUCT_TILES_OTHER_BLOCK,
+            PRODUCT_PENSION_TILES_OTHER_BLOCK,
+            PRODUCT_PENSION_TILES_OTHER_BLOCK,
+          ]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №3 Product_Block">
+          {[PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №4 Text_Block">
+          {[
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+          ]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №5 Picture_Text">
+          {[PICTURE_TEXT_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №6 Headline">
+          {[HEADLINE_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №7 Link_Docs">
+          {[LINK_DOCS_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №8 Gallery">
+          {[GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №9 Mini_Gallery">
+          {[MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK]}
+        </OtherProductsItem>
+      </OtherProducts>
     </div>
   ),
 };

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,32 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
-import { OtherProductsItem } from './OtherProductsItem';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
-export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = '', ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`font-sans text-primary-text ${className}`}
-        {...rest}
-      >
-        {blockItems?.length ? (
-          <div className="box-border1">
-            {blockItems.map((item, i) => (
-              <OtherProductsItem
-                key={`BlockItem${i}`}
-                {...item}
-                dataTheme={colorPalette}
-                context={context}
-              />
-            ))}
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
+  ({ context, className = '', children, ...rest }) => (
+    <BlockWrapper
+      context={context}
+      className={`font-sans text-primary-text ${className}`}
+      {...rest}
+    >
+      {children}
+    </BlockWrapper>
+  ),
 );
+
+OtherProducts.childrenTypes = ['OtherProductsItem'];

package/src/components/OtherProducts/OtherProducts.ui.json

@@ -1,76 +1 @@
-{
-  "content": {
-    "blockItems": {
-      "items": {
-        "blocks": {
-          "items": {
-            "blockListType": {
-              "ui:widget": "hidden"
-            },
-            "image": {
-              "ui:field": "picture"
-            },
-            "benefitList": {
-              "items": {
-                "description": {
-                  "benefitType": {
-                    "ui:widget": "hidden"
-                  }
-                },
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "style": {
-              "ui:field": "style"
-            },
-            "benefits": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "buttons": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                },
-                "iconRight": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "icon": {
-              "ui:field": "icon"
-            },
-            "backwardButton": {
-              "icon": {
-                "ui:field": "icon"
-              },
-              "iconRight": {
-                "ui:field": "icon"
-              }
-            },
-            "cards": {
-              "items": {
-                "image": {
-                  "ui:field": "picture"
-                },
-                "button": {
-                  "icon": {
-                    "ui:field": "icon"
-                  },
-                  "iconRight": {
-                    "ui:field": "icon"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+{}