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

package/src/components/Tile/Tile.fixture.tsx

@@ -0,0 +1,134 @@
+import { context } from '../../setup-fixture';
+
+import { Tile } from './Tile';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+};
+
+const image2: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+};
+
+const image3: Picture = {
+  src: 'column-1.png',
+  format: 'webp',
+};
+
+const image4: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+};
+
+export default {
+  credit: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-8"
+        title="Кредиты"
+        items={[
+          'Кредитный лимит до 10 млн ₽',
+          'Кредиты наличными на любые цели',
+          'Получите деньги без залога и поручителей',
+        ]}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
+  ),
+  mortgage: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        version="secondary"
+        className="col-span-4"
+        title="Ипотека"
+        description={
+          'Широкий выбор ипотечных программ с государственной поддержкой. Специальные предложения от 12,2 %'
+        }
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Банковские пластиковые карты"
+        items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image2}
+      />
+    </div>
+  ),
+  premium: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Премиальные продукты"
+        description={
+          'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
+        }
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image3}
+      />
+    </div>
+  ),
+  ecosystem: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-12 pr-28"
+        title="Экосистема «СВОЕ», созданная для людей"
+        items={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image4}
+      />
+    </div>
+  ),
+};

package/src/components/Tile/Tile.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { TileContent } from '../Tile/TileContent';
+import type { UniBlockProps } from '../../types';
+import { getColSpan } from '../../utils/getColSpan';
+
+export interface TileProps extends TileContent, UniBlockProps {}
+
+const tileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Tile = JSX<TileProps>((props) => {
+  const { children, className, version = 'primary' } = props;
+
+  return (
+    <section
+      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+        tileStyleMap[version]
+      } ${getContainerPaddingRight(className)} `}
+    >
+      <BaseTile {...props}>{children}</BaseTile>
+    </section>
+  );
+});
+
+function getContainerPaddingRight(className: string = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'pr-9';
+  } else if (colSpan <= 8) {
+    return 'pr-[4.75rem]';
+  } else {
+    return 'pr-[9.4rem]';
+  }
+}

package/src/components/Tile/TileContent.ts

@@ -0,0 +1,3 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+
+export type TileContent = BaseTileContent;

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

@@ -1,6 +1,6 @@
 import glob from 'glob';
 import util from 'util';
-import { toMobilePage } from '../toMobilePage';
+import { toMobilePage } from '../components/ContentPage/toMobilePage';
 import type { ContentPageDef } from '../types';
 import type { TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';

package/src/cosmos.decorator.tsx

@@ -1,5 +1,11 @@
 export default ({ children }) => {
   document.querySelector(':root')?.setAttribute('lang', 'ru'); // for lighthouse accessibility metrics
+  if (!document.querySelector('meta[name=description]')) {
+    const meta = document.createElement('meta');
+    meta.name = 'description';
+    meta.content = 'description';
+    document.getElementsByTagName('head')[0].appendChild(meta);
+  }
 
   return (
     <div

package/src/hooks/useLink.ts

@@ -0,0 +1,28 @@
+import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageContext';
+import type { LinkContent } from '../model/LinkContent';
+import { adjustHref, isURL } from '../utils/url';
+
+const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+
+export function useLink(
+  {
+    router,
+    handlerDecorator = defaultHandlerDecorator,
+  }: { router: Router; handlerDecorator?: HandlerDecorator },
+  link: Partial<LinkContent & { className: string }>,
+) {
+  const href = adjustHref(link.href, router);
+  return {
+    ...link,
+    href,
+    ariaLabel: link.text,
+    onClick: handlerDecorator((ev: MouseEvent) => {
+      const isLocalHref = href && !isURL(href);
+      const isLocalTarget = !link.target || link.target === '_self';
+      if (isLocalHref && isLocalTarget) {
+        ev.preventDefault();
+        router.push(href);
+      }
+    }, link),
+  };
+}

package/src/hooks/useSitemap.ts

@@ -0,0 +1,17 @@
+import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import type { HeaderContent } from '../components/Header/HeaderContent';
+import { projectSettings } from '../ProjectSettings';
+
+export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
+  const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+  return data || {};
+}
+
+async function fetchSitemap(): Promise<HeaderContent> {
+  const response = await fetch(sitemapURL());
+  return await response.json();
+}
+
+function sitemapURL() {
+  return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
+}

package/src/index.ts

@@ -18,16 +18,16 @@ export type {
   LikeService,
   HandlerDecorator,
   Search,
-} from './ContentPageContext';
+} from './components/ContentPage/ContentPageContext';
 
-export { ContentPageHead } from './ContentPageHead';
-export type { BlockDecorator } from './ContentPage';
-export { ContentPage } from './ContentPage';
-export { toMobilePage } from './toMobilePage';
+export { ContentPageHead } from './components/ContentPage/ContentPageHead';
+export type { BlockDecorator } from './components/ContentPage/ContentPage';
+export { ContentPage } from './components/ContentPage/ContentPage';
+export { toMobilePage } from './components/ContentPage/toMobilePage';
 
-export { Blocks } from './Blocks';
-export type { BlockContent } from './BlockContent';
-export { MobileBlocks } from './MobileBlocks';
+export { Blocks } from './components/Blocks';
+export type { BlockContent } from './components/BlockContent';
+export { MobileBlocks } from './components/MobileBlocks';
 
 export * as url from './utils/url';
 export { joinList } from './utils/joinList';

package/src/setup-fixture.ts

@@ -3,7 +3,7 @@ import { setup } from '@redneckz/uni-jsx';
 import runtime from 'react/jsx-runtime';
 import { useEffect, useState } from 'react';
 import { DaDataAPI } from './api/DaDataAPI';
-import type { ContentPageContext } from './ContentPageContext';
+import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 
 const { jsx, jsxs } = runtime as any;
 setup(jsx, jsxs);

package/src/types.ts

@@ -1,5 +1,5 @@
-import type { BlockContent } from './BlockContent';
-import type { ContentPageContext } from './ContentPageContext';
+import type { BlockContent } from './components/BlockContent';
+import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 import type { BlockVersion } from './model/BlockVersion';
 
 export type ColorPalette = 'pc' | 'bc' | 'eo';

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

@@ -0,0 +1,5 @@
+import '../../setup-fixture';
+
+import { BlockItem } from './BlockItem';
+
+export default <BlockItem text="Совершайте любые личные покупки" />;

package/src/ui-kit/Button/ArrowButton.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from './Button';
+import { ButtonProps } from './ButtonProps';
+import { SVG } from '../SVG';
+
+const ARROW_PATHS = [
+  {
+    d: 'm9 12 4-4-4-4',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    fill: 'none',
+  },
+  {
+    d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+  },
+];
+
+export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
+  <Button
+    rounded
+    className={`shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+      disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'
+    } ${className || ''}`}
+    disabled={disabled}
+    {...rest}
+  >
+    <SVG paths={ARROW_PATHS} viewBox="0 0 16 16" fill="none" width="16" height="16" />
+  </Button>
+));

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

@@ -0,0 +1,163 @@
+import '../../setup-fixture';
+
+import { Button } from './Button';
+import { Icon } from '../Icon/Icon';
+
+export default {
+  all: (
+    <div className="font-sans overflow-hidden">
+      <div>
+        <p>Private clients</p>
+        <div className="flex gap-6" data-theme="pc">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Business clients</p>
+        <div className="flex gap-6" data-theme="bc">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Ecosystem own</p>
+        <div className="flex gap-6" data-theme="eo">
+          <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Disabled</p>
+        <div className="flex gap-6">
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Primary"
+            version="primary"
+            disabled
+          />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            text="Secondary"
+            version="secondary"
+            disabled
+          />
+        </div>
+      </div>
+      <div>
+        <p>With Icon</p>
+        <div className="flex gap-6" data-theme="pc">
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            aboveText="Доступно в"
+            appendLeft={
+              /** Div need for perfect pixel */
+              <div>
+                <Icon name="PlayMarketIcon" width="24" height="24" />
+              </div>
+            }
+            text="Google Play"
+            version="secondary"
+          />
+          <Button
+            href="https://www.rshb.ru/"
+            target="_blank"
+            aboveText="Загрузите в"
+            appendLeft={
+              <div>
+                <Icon name="AppleIcon" width="24" height="24" />
+              </div>
+            }
+            text="App Store"
+            version="secondary"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Rounded with only Icon</p>
+        <div className="flex gap-6" data-theme="pc">
+          <Button
+            rounded
+            href="https://www.rshb.ru/"
+            target="_blank"
+            version="secondary"
+            appendLeft={<Icon name="PlayMarketIcon" width="20" height="21" />}
+          />
+          <Button
+            rounded
+            href="https://www.rshb.ru/"
+            target="_blank"
+            version="secondary"
+            appendLeft={<Icon name="AppleIcon" width="18" height="20" />}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  'primary (Private clients)': (
+    <div data-theme="pc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Private clients)': (
+    <div data-theme="pc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (Business clients)': (
+    <div data-theme="bc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Business clients)': (
+    <div data-theme="bc">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (Ecosystem own)': (
+    <div data-theme="eo">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+    </div>
+  ),
+  'secondary (Ecosystem own)': (
+    <div data-theme="eo">
+      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+    </div>
+  ),
+  'primary (disabled)': (
+    <Button
+      href="https://www.rshb.ru/"
+      target="_blank"
+      text="Сайт РСХБ"
+      version="primary"
+      disabled
+    />
+  ),
+  'secondary (disabled)': (
+    <Button
+      href="https://www.rshb.ru/"
+      target="_blank"
+      text="Сайт РСХБ"
+      version="secondary"
+      disabled
+    />
+  ),
+};

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

@@ -0,0 +1,90 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonInnerProps, ButtonProps } from './ButtonProps';
+
+const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+};
+
+const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+};
+
+const styleButton = 'inline-block text-center font-sans select-none';
+
+export const Button = JSX<ButtonProps>(
+  ({
+    className,
+    text,
+    aboveText,
+    appendLeft,
+    href,
+    target,
+    onClick,
+    children,
+    disabled,
+    rounded,
+    version = 'none',
+    ariaLabel,
+    ...rest
+  }) => {
+    const buttonInner = children ?? (
+      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+    );
+
+    if (disabled) {
+      return (
+        <div
+          role="button"
+          aria-disabled="true"
+          aria-label={ariaLabel}
+          tabIndex="-1"
+          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+            rounded ? 'rounded-full' : 'rounded-md'
+          } ${className || ''}`}
+        >
+          {buttonInner}
+        </div>
+      );
+    }
+
+    return (
+      <a
+        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
+          rounded ? 'rounded-full' : 'rounded-md'
+        } ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        role={!href ? 'button' : 'link'}
+        {...rest}
+      >
+        {buttonInner}
+      </a>
+    );
+  },
+);
+
+export const ButtonInner = JSX<ButtonInnerProps>(({ text, aboveText, appendLeft, rounded }) => {
+  const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+  const buttonInnerClasses = `flex items-center justify-center ${
+    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+  } ${rounded ? 'rounded-full' : ''}`;
+
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {!withoutText ? (
+        <div>
+          <div className="text-xxs text-left">{aboveText}</div>
+          <div className="text-sm font-medium text-left">{text}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+});

package/src/ui-kit/Button/ButtonProps.ts

@@ -0,0 +1,24 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { LinkContent } from '../../model/LinkContent';
+import { IconName } from '../Icon/IconProps';
+
+export interface ButtonInnerProps {
+  text?: string;
+  aboveText?: string;
+  appendLeft?: any;
+  rounded?: boolean;
+}
+
+export interface ButtonProps extends LinkContent, ButtonInnerProps {
+  className?: string;
+  version?: ButtonVersion;
+  disabled?: boolean;
+  rel?: string;
+  ariaLabel?: string;
+  /** @hidden */
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export interface ButtonWithIconProps extends ButtonProps {
+  icon?: IconName;
+}

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

@@ -0,0 +1,8 @@
+import '../../setup-fixture';
+
+import { HeaderItem } from './HeaderItem';
+
+export default {
+  default: <HeaderItem href="https://www.rshb.ru/" target="_blank" text="Россельхозбанк" />,
+  active: <HeaderItem href="https://www.rshb.ru/" target="_blank" text="Россельхозбанк" active />,
+};

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TopItemProps } from '../TopItem/TopItem';
+
+export type HeaderItemProps = TopItemProps;
+
+export const HeaderItem = JSX<HeaderItemProps>(
+  ({ className, text, href, target, active, onClick, children }) => {
+    const textStyle = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${
+          className || ''
+        }`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        <span className={`font-sans font-normal text-base ${textStyle}`}>{text || children}</span>
+        {active ? (
+          <div className="absolute left-0 -bottom-2 w-full h-[2px] bg-primary-main" />
+        ) : null}
+      </a>
+    );
+  },
+);

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

@@ -0,0 +1,22 @@
+import '../../setup-fixture';
+import { Icon } from './Icon';
+
+import { IconMap } from './IconProps';
+import type { IconName } from './IconProps';
+
+export default {
+  all: (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-6 gap-8">
+        {(Object.keys(IconMap) as Array<IconName>)
+          .filter((v) => isNaN(Number(v)))
+          .map((icon, i) => (
+            <div key={String(i)} className="flex flex-col items-center gap-3">
+              <div>{icon}</div>
+              <Icon name={icon} width="64" />
+            </div>
+          ))}
+      </div>
+    </div>
+  ),
+};