@redneckz/wildless-cms-uni-blocks 0.2.75 → 0.2.78

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -0,0 +1,43 @@
+import type { LinkContent } from '../../model/LinkContent';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+export type Row = {
+  header: RowHeader;
+  data: CellData[][];
+};
+
+export type RowData = Row[] | undefined;
+
+export interface CellData {
+  label?: string;
+  description?: string;
+  icons?: IconName[];
+  image?: Picture;
+  buttons?: ButtonProps[];
+}
+
+export interface ColumnHeader {
+  title?: string;
+  icon?: IconName;
+  image?: Picture;
+  link?: LinkContent;
+}
+export interface Column {
+  header?: ColumnHeader;
+  data?: CellData[][];
+}
+
+export interface RowHeader {
+  title?: string;
+  icon?: IconName;
+}
+
+export interface ComparisonTableContent {
+  title?: string;
+  rowHeaders?: RowHeader[];
+  columns?: Column[];
+  visibleRowLength?: number;
+  isColoredFirstColumn?: boolean;
+}

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../../model/LinkContent';
+import type { Picture } from '../../model/Picture';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import { BORDER_CLASSES, GRADIENT } from './constants';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  link?: LinkContent;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
+  <div
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`}
+    role="columnheader"
+    scope="col"
+  >
+    {icon && !image?.src && (
+      <Icon
+        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+        name={icon}
+        width="63"
+        height="63"
+      />
+    )}
+    {image?.src && <Img className="mb-4" image={image} />}
+    {title && (
+      <Title size="S" className="font-medium m-0 text-center text-white">
+        {title}
+      </Title>
+    )}
+    {link?.text && (
+      <div className="mt-auto w-full">
+        <Button
+          href={link.href}
+          target={link.target}
+          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+        >
+          <div className="text-xs py-[11px]">{link.text}</div>
+        </Button>
+      </div>
+    )}
+  </div>
+));

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -0,0 +1,58 @@
+import { context, mobileContext } from '../../setup-fixture';
+
+import { Blocks } from '../Blocks';
+import { BlockDecorator, ContentPage } from './ContentPage';
+import { MobileBlocks } from '../MobileBlocks';
+import { toMobilePage } from './toMobilePage';
+import type { ContentPageDef } from '../../types';
+
+const data = require('./ContentPage.page.json');
+
+const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
+  <div
+    key={i}
+    className={`relative flex items-stretch ${blockClassName}`}
+    onClick={() => console.log('Edit', block)}
+  >
+    {render({ block, blockClassName: `${blockClassName} w-full` })}
+    <button
+      className="absolute w-8 h-8 top-4 right-4 border rounded-full"
+      onClick={(e) => {
+        console.log('Delete', block);
+        e.stopPropagation();
+      }}
+    >
+      ╳
+    </button>
+  </div>
+);
+
+export default {
+  default: (
+    <ContentPage
+      className="bg-main"
+      context={context}
+      blocksRegistry={Blocks}
+      data={data as ContentPageDef}
+    />
+  ),
+  mobile: (
+    <ContentPage
+      className="bg-secondary-text"
+      context={mobileContext}
+      blocksRegistry={MobileBlocks}
+      data={toMobilePage(data as ContentPageDef)}
+    />
+  ),
+  editor: (
+    <div style={{ background: "url('grid.svg')", height: '100%' }}>
+      <ContentPage
+        className="bg-transparent"
+        context={context}
+        blocksRegistry={Blocks}
+        data={data as ContentPageDef}
+        blockDecorator={blockDecorator}
+      />
+    </div>
+  ),
+};

package/src/components/ContentPage/ContentPage.tsx

@@ -0,0 +1,88 @@
+import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { BlockContent } from '../BlockContent';
+import { LikeControl } from '../LikeControl/LikeControl';
+import { Placeholder } from '../Placeholder/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 {
+  blocksRegistry: Record<
+    string,
+    (props: PropsWithChildren<UniBlockProps & BlockContent, any>, context?: any) => any
+  >;
+  data: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+}
+
+const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });
+
+export const ContentPage = JSX<ContentPageProps>(
+  ({
+    className,
+    context,
+    blocksRegistry,
+    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    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 blocksRegistry)) {
+        console.warn(`No block with "${type}" is registered`);
+      }
+
+      const BlockComponent = blocksRegistry[type] || 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/components/ContentPage/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/components/ContentPage/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/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -0,0 +1,4 @@
+import { CreditCalculator } from './CreditCalculator';
+import { context } from '../../setup-fixture';
+
+export default <CreditCalculator context={context} />;

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -0,0 +1,106 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+export interface CreditCalculatorProps extends UniBlockProps {}
+
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+
+const MONTHS_IN_YEAR = 12;
+
+export const CreditCalculator = JSX<CreditCalculatorProps>(({ context, className }) => {
+  const [moneyValue, setMoneyValue] = context.useState(350000);
+  const [monthsValue, setMonthsValue] = context.useState(12);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const handleButtonClick = (value: number) => {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+  };
+
+  return (
+    <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
+      <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
+        <div className="flex justify-between">
+          <div className="grow mr-11">
+            <InputRange
+              title="Желаемая сумма кредита, ₽"
+              items={['От 50 000 рублей', 'До 3 000 000 рублей']}
+              min={MIN_MONEY}
+              max={MAX_MONEY}
+              step={STEP_MONEY}
+              value={moneyValue}
+              onChange={setMoneyValue}
+            />
+            <InputRange
+              title="Срок кредита, месяцев"
+              items={['Или выберите из предложенных вариантов ниже']}
+              min={MIN_MONTHS}
+              max={MAX_MONTHS}
+              step={STEP_MONTHS}
+              value={monthsValue}
+              onChange={setMonthsValue}
+            />
+            <div className="flex mb-7">
+              {CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mb-4"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          <div className="p-9 bg-primary-main rounded-md text-white">
+            <div className="text-base mb-5">Наше предложение</div>
+            <div className="text-sm opacity-60">Ежемесячный платёж</div>
+            <div className="text-lg mb-3">26 827 ₽</div>
+            <div className="text-sm opacity-60">Ставка</div>
+            <div className="text-lg">16,9 %</div>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+          <div
+            className="w-80 text-xxs leading-4 text-secondary-text"
+            aria-label="Соглашение на обработку персональных данных"
+          >
+            Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+            требованиям ФЗ «О персональных данных»
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+const renderButton = (number: number, i: number, handleClick: (number: number) => void) => (
+  <div
+    key={String(i)}
+    className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer"
+    role="button"
+    onClick={() => handleClick(number)}
+  >
+    <span className="font-medium text-sm">
+      {number} {number > 4 ? 'лет' : 'года'}
+    </span>
+  </div>
+);

package/src/components/ExchangeRateTile/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/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -0,0 +1,80 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+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 buttons: ButtonProps[] = [
+  {
+    text: 'Все показатели',
+    href: 'https://cbr.ru/currency_base/daily/',
+    version: 'secondary',
+  },
+];
+
+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 || 'Курсы обмена валют'}
+      buttons={buttons}
+    >
+      <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">
+                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
+                    <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/components/Footer/Contacts.tsx

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { useLink } from '../../hooks/useLink';
+import type { ContactInfo } from './FooterContent';
+
+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
+          version="primary"
+          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, '');