@redneckz/wildless-cms-uni-blocks 0.2.46 → 0.2.49

package/src/ContentPage.tsx

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Blocks } from './Blocks'; // TODO Lazy load
+import { LikeControl } from './LikeControl';
+import { Placeholder } from './Placeholder';
+import type { BlockDef, ContentPageDef, UniBlockProps } from './types';
+
+interface BlockDecoratorProps<VNode> {
+  blockClassName: string;
+  block: BlockDef;
+  render: (props: { blockClassName: string; block: BlockDef }) => VNode;
+}
+
+export type BlockDecorator<VNode = any> = (
+  props: BlockDecoratorProps<VNode>,
+  index?: number | string,
+) => any;
+
+export interface ContentPageProps extends UniBlockProps {
+  data: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+}
+
+const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });
+
+export const ContentPage = JSX<ContentPageProps>(
+  ({
+    className,
+    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    context,
+    blockDecorator = defaultBlockDecorator,
+  }) => {
+    return (
+      <section className="relative" data-theme={colorPalette}>
+        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className}`}>
+          {blocks?.length ? blocks.map(renderBlock) : null}
+        </div>
+        {likeControl && (
+          <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
+            <LikeControl
+              className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
+              context={context}
+            />
+          </div>
+        )}
+      </section>
+    );
+
+    function renderBlock(block: BlockDef, i: number) {
+      const { type } = block;
+      if (!(type in Blocks)) {
+        console.warn(`No block with "${type}" is registered`);
+      }
+
+      const BlockComponent = Blocks[type as keyof typeof Blocks] || Placeholder;
+      return blockDecorator(
+        {
+          blockClassName: style2className(block.style),
+          block,
+          render: (props) => {
+            const { version, content, blocks } = props.block;
+            return (
+              <BlockComponent
+                key={`${type}-${i}`}
+                className={props.blockClassName}
+                version={version}
+                context={context}
+                {...content}
+              >
+                {blocks?.length ? blocks.map(renderBlock) : null}
+              </BlockComponent>
+            );
+          },
+        },
+        `block-${i}`,
+      );
+    }
+  },
+);
+
+function style2className(style: string[] | undefined | null): string {
+  return style ? style.join(' ') : '';
+}

package/src/ContentPageContext.tsx

@@ -0,0 +1,34 @@
+export interface Router {
+  pathname: string;
+  query: Record<string, string | string[] | undefined>;
+  href?: string;
+  basePath?: string;
+  push: (url: string) => void;
+}
+
+export interface LikeService {
+  likeCount: number;
+  like: () => void;
+  dislike: () => void;
+}
+
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent: any) => F;
+
+export interface Search {
+  term: string;
+  setTerm: (t: string) => void;
+}
+
+export type AsyncDataHook = <Data, Error = any>(
+  key: string,
+  fetcher: () => Promise<Data>,
+) => { data?: Data; error?: Error };
+
+export interface ContentPageContext {
+  useRouter: () => Router;
+  useState: <State>(initialState: State) => [State, (_: State) => void];
+  useAsyncData: AsyncDataHook;
+  useLikeService: () => LikeService;
+  useSearch: () => Search;
+  handlerDecorator?: HandlerDecorator;
+}

package/src/ContentPageHead.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageMeta } from './types';
+
+export interface ContentPageHeadProps {
+  HeadComponent: Function;
+  data: ContentPageMeta;
+}
+
+export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
+  const { title, description, keywords, robots, og } = data;
+  return (
+    <HeadComponent>
+      <title>{title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {description && <meta name="description" content={description} />}
+      {keywords && <meta name="keywords" content={keywords.join(',')} />}
+      {robots && <meta name="robots" content={robots.join(',')} />}
+      {og
+        ? Object.entries(og).map(([key, value]) => (
+            <meta key={key} name={`og:${key}`} content={value} />
+          ))
+        : null}
+      {children}
+    </HeadComponent>
+  );
+});

package/src/ExchangeRateTile.fixture.tsx

@@ -0,0 +1,11 @@
+import { context } from './setup-fixture';
+
+import { ExchangeRateTile } from './ExchangeRateTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <ExchangeRateTile context={context} className="col-span-4" />
+    </div>
+  ),
+};

package/src/ExchangeRateTile.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DollarIcon, EuroIcon } from './Icons/index';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+import { ButtonProps } from './ui-kit/Button';
+
+export interface ExchangeRateTileContent {
+  title?: string;
+}
+
+export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
+
+const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
+
+const CURRENCY_CODES = ['USD', 'EUR'];
+const CURRENCY_ICONS_MAP = {
+  USD: DollarIcon,
+  EUR: EuroIcon,
+};
+
+const button: ButtonProps = {
+  text: 'Все показатели',
+  href: 'https://cbr.ru/currency_base/daily/',
+};
+
+export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
+  const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+  return (
+    <Tile
+      className={className}
+      context={context}
+      title={title || 'Курсы обмена валют'}
+      button={button}
+    >
+      <table>
+        <thead>
+          <tr>
+            <CurrencyTH>Валюта</CurrencyTH>
+            <CurrencyTH className="pl-11">Курс</CurrencyTH>
+          </tr>
+        </thead>
+        <tbody>
+          {CURRENCY_CODES.map((code) => {
+            const value = (data?.Valute || {})[code]?.Value;
+            return (
+              <tr key={code}>
+                <CurrencyTD className="pt-4">
+                  <div className="flex items-center">
+                    {CURRENCY_ICONS_MAP[code] ? CURRENCY_ICONS_MAP[code]() : null}
+                    <span className="ml-2">{code}</span>
+                  </div>
+                </CurrencyTD>
+                <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Tile>
+  );
+});
+
+const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
+  <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
+));
+
+const CurrencyTD = JSX<{ className?: string }>(({ className = '', children }) => (
+  <td className={`text-left font-normal text-base text-primary-text ${className}`}>{children}</td>
+));
+
+async function fetchExchangeRate(): Promise<{
+  Valute?: Record<string, { CharCode: string; Name?: string; Value: number; Previous?: number }>;
+}> {
+  const response = await fetch(CBR_EXCHANGE_RATE_URL);
+  return await response.json();
+}
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+
+const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/src/Footer/Contacts.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, ContactInfo } from '../types';
+import { Button } from '../ui-kit/Button';
+import { useLink } from '../useLink';
+
+export interface ContactsProps extends UniBlockProps {
+  items?: ContactInfo[];
+  hasButton?: boolean;
+}
+
+export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  return (
+    <div className={`flex flex-col ${className || ''}`}>
+      {items?.length ? items.map(renderContact) : null}
+      {hasButton ? (
+        <Button
+          className="my-4"
+          {...useLink(
+            { router, handlerDecorator },
+            {
+              text: 'Обратная связь',
+              href: '/',
+              target: '_blank',
+            },
+          )}
+        />
+      ) : null}
+    </div>
+  );
+});
+
+const renderContact = (item: ContactInfo, index: number) => {
+  const { type, text, description } = item;
+
+  return (
+    <div className="mb-4" key={String(index)}>
+      <div>{renderText(type, text)}</div>
+      <div className="font-sans text-sm text-secondary-text">{description}</div>
+    </div>
+  );
+};
+
+const renderText = (type: ContactInfo['type'], text: string) => {
+  switch (type) {
+    case 'tel':
+      return (
+        <a
+          className="font-sans font-medium text-xl text-primary-text no-underline"
+          href={`tel:${formatTel(text)}`}
+        >
+          {text}
+        </a>
+      );
+    case 'email':
+      return (
+        <a
+          className="font-sans font-medium text-xl text-primary-text no-underline"
+          href={`mailto:${text}`}
+        >
+          {text}
+        </a>
+      );
+    default:
+      return <span>{text}</span>;
+  }
+};
+
+const formatTel = (s: string) => s.replaceAll(/(\-|\s|\(|\)|\D+)/g, '');

package/src/Footer/Footer.fixture.tsx

@@ -0,0 +1,265 @@
+import { context } from '../setup-fixture';
+import { Footer } from './Footer';
+
+const DEFAULT_ORIGIN = 'https://rshb.ru/';
+
+export default (
+  <Footer
+    topItems={[
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'Частным клиентам',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредитные карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Дебетовые карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Ипотека',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Вклады и сбережения',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инвестиции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Страхование',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Премиальным клиентам',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Биометрическая регистрация',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Перевод денег',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Обмен денег',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Акции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Тарифы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Архивная информация',
+          },
+        ],
+      },
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'Бизнес клиентам',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'РКО',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Депозиты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Эквайринг',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Банковские карты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'ВЭД',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инвестиции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Обмен валюты',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Страхование',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Партнёрские программы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Онлайн-сервисы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Акции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Тарифы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Архивная информация',
+          },
+        ],
+      },
+      {
+        href: DEFAULT_ORIGIN,
+        text: 'О банке',
+        target: '_blank',
+        items: [
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'О банке',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Новости',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Офисы и отделения',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Карьера в банке',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Пресс-центр',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Кредитным организациям',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Закупки',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Непрофильные/Профильные нецелевые активы',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Инсайдерам',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Противодействие коррупции',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Меры безопасности',
+          },
+          {
+            href: DEFAULT_ORIGIN,
+            text: 'Залоговое имущество',
+          },
+        ],
+      },
+    ]}
+    socialMedia={[{ href: 'https://vk.com' }, { href: 'https://ok.ru' }, { href: 'https://t.me' }]}
+    contacts={[
+      {
+        text: '+7 (495) 787-7-787',
+        description: 'Для звонков из-за границы',
+        type: 'tel',
+      },
+      {
+        text: 'example@example.com',
+        description: 'Для писем',
+        type: 'email',
+      },
+      {
+        text: '7787',
+        description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
+        type: 'tel',
+      },
+    ]}
+    relatedEnterprises={[
+      {
+        text: 'РСХБ Страхование',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Страхование жизни',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Управление активами',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Лизинг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'РСХБ Факторинг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+    ]}
+    documents={[
+      {
+        text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Раскрытие информации',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Удостоверяющий центр',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+      {
+        text: 'Финансовая культура',
+        href: DEFAULT_ORIGIN,
+        target: '_blank',
+      },
+    ]}
+    context={context}
+  />
+);

package/src/Footer/Footer.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Logo } from '../ui-kit/Logo';
+import { SearchBar } from '../ui-kit/SearchBar';
+import { Contacts } from './Contacts';
+import { Sitemap } from './Sitemap';
+import { SocialMedia } from './SocialMedia';
+import { HorizontalNavigation } from './HorizontalNavigation';
+import { TextInformation } from './TextInformation';
+import type { LinkContent, UniBlockProps, ContactInfo, TopMenuItem } from '../types';
+
+const LEFT_COL_WIDTH_FULL_HD = 'w-[280px]';
+const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
+
+export interface FooterContent {
+  documents?: LinkContent[];
+  relatedEnterprises?: LinkContent[];
+  contacts?: ContactInfo[];
+  socialMedia?: Omit<LinkContent, 'text'>[];
+  topItems?: TopMenuItem[];
+}
+
+export interface FooterProps extends FooterContent, UniBlockProps {}
+
+export const Footer = JSX<FooterProps>(
+  ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
+    return (
+      <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
+        <div className="flex items-stretch gap-32 py-8 xl:gap-8">
+          <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
+          <SearchBar context={context} className="grow" />
+        </div>
+        <div className="flex items-stretch gap-32 xl:gap-8">
+          <Contacts
+            className={`${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`}
+            items={contacts}
+            context={context}
+            hasButton
+          />
+          <Sitemap className="pt-[3px]" context={context} items={topItems} />
+        </div>
+        <SocialMedia media={socialMedia} context={context} />
+        <HorizontalNavigation links={relatedEnterprises} context={context} />
+        <TextInformation links={documents} context={context} />
+      </footer>
+    );
+  },
+);

package/src/Footer/FooterLink.ts

@@ -0,0 +1,6 @@
+import type { LinkContent } from '../types';
+import type { UniBlockProps } from '../types';
+
+export interface FooterLink extends UniBlockProps {
+  links?: LinkContent[];
+}

package/src/Footer/HorizontalNavigation.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { FooterLink } from './FooterLink';
+import { useLink } from '../useLink';
+import { LinkContent } from '../types';
+
+export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  return (
+    <div className={`${className || ''}`}>
+      {links?.length ? (
+        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y-1 border-y-main-divider">
+          {links.map((_, i) => (
+            <HorizontalNavigationLink
+              key={String(i)}
+              index={i}
+              {...useLink({ router, handlerDecorator }, _)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+interface HorizontalNavigationLinkProps extends LinkContent {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className, index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className || ''
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);