@redneckz/wildless-cms-uni-blocks 0.2.45 → 0.2.48

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

@@ -0,0 +1,113 @@
+import '../setup-fixture';
+
+import { Button } from './Button';
+
+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>
+  ),
+  '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.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../types';
+
+type ButtonVersion = 'primary' | 'secondary';
+export interface ButtonProps extends LinkContent {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+  version?: ButtonVersion;
+  ariaLabel?: string;
+  disabled?: Boolean;
+}
+
+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 rounded-md px-9 py-3.5 text-center font-sans';
+
+export const Button = JSX<ButtonProps>(
+  ({
+    className,
+    text,
+    href,
+    target,
+    onClick,
+    children,
+    disabled,
+    version = 'primary',
+    ariaLabel,
+  }) => {
+    if (disabled) {
+      return (
+        <div
+          role="button"
+          aria-disabled="true"
+          aria-label={ariaLabel}
+          tabindex="-1"
+          className={`${styleButton} select-none ${buttonDisabledStyleMap[version]} ${
+            className || ''
+          }`}
+        >
+          <span className="text-sm font-medium">{text || children}</span>
+        </div>
+      );
+    }
+
+    return (
+      <a
+        className={`${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+      >
+        <span className="text-sm font-medium">{text || children}</span>
+      </a>
+    );
+  },
+);

package/src/ui-kit/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.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TopItemProps } from './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/LikeButton.fixture.tsx

@@ -0,0 +1,6 @@
+import { LikeButton } from './LikeButton';
+
+export default {
+  default: <LikeButton />,
+  rotate: <LikeButton className="rotate-180" />,
+};

package/src/ui-kit/LikeButton.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface LikeButtonProps {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+  ariaLabel?: string;
+}
+
+export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel }) => (
+  <button
+    type="button"
+    className={`border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`}
+    onClick={onClick}
+    aria-label={ariaLabel}
+  >
+    {renderLikeIcon()}
+  </button>
+));
+
+const renderLikeIcon = () => {
+  const params = {
+    stroke: '#292D32',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  };
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <path
+        {...params}
+        strokeMiterlimit="10"
+        d="M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77"
+      />
+      <path
+        {...params}
+        d="M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,5 @@
+import '../setup-fixture';
+
+import { Logo } from './Logo';
+
+export default <Logo href="https://www.rshb.ru/" />;

package/src/ui-kit/Logo.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SVG } from './SVG';
+
+export interface LogoProps {
+  className: string;
+  href: string;
+  targetBlank: boolean;
+}
+
+const LOGO_PATHS = [
+  'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
+  'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
+  'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
+  'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
+  'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
+];
+
+export const Logo = JSX<Partial<LogoProps>>(({ className, href, children, targetBlank }) => {
+  return (
+    <a
+      className={`inline-flex items-center font-sans no-underline ${className || ''}`}
+      href={href || 'https://rshb.ru/'}
+      target={targetBlank ? '_blank' : '_self'}
+    >
+      <SVG
+        className="text-primary-main w-10"
+        viewBox="0 0 40 45"
+        paths={LOGO_PATHS.map((d) => ({ d }))}
+      />
+      <span className="text-black text-base font-medium ml-2.5">
+        {children || 'Россельхозбанк'}
+      </span>
+    </a>
+  );
+});

package/src/ui-kit/SVG.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+interface SVGPathOptions {
+  fill?: string;
+  stroke?: string;
+  strokeLinecap?: string;
+  strokeLinejoin?: string;
+  strokeWidth?: string;
+  strokeMiterlimit?: string;
+}
+
+interface SVGPath extends SVGPathOptions {
+  d: string;
+}
+
+export interface SVGProps extends SVGPathOptions {
+  className?: string;
+  viewBox?: string;
+  paths: SVGPath[];
+}
+
+export const SVG = JSX<SVGProps>(
+  ({ className, viewBox, fill = 'none', paths, ...commonOptions }) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox={viewBox} fill={fill}>
+        {paths.map(({ d, fill, ...options }, i) => (
+          <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
+        ))}
+      </svg>
+    );
+  },
+);

package/src/ui-kit/SearchBar.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../types';
+import { LoupeIcon } from '../Icons/index';
+
+export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
+  const search = context.useSearch();
+  return (
+    <form className={`relative ${className || ''}`}>
+      <div className="absolute rounded-l-full h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5">
+        <div className="w-[24px] h-[24px]">{LoupeIcon()}</div>
+        <span className="font-sans font-normal text-sm text-secondary-text">Поиск по сайту</span>
+      </div>
+      <input
+        className="pl-[170px] w-full font-sans font-normal text-sm border border-solid border-main-divider rounded-full h-full box-border outline-none"
+        value={search.term}
+        onChange={(e) => search.setTerm(e.target.value)}
+        type="text"
+        placeholder="Поиск по сайту"
+        name="s"
+      />
+      <button
+        type="submit"
+        className="absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 rounded-r-full h-full top-0 right-0 outline-none"
+        onClick={(e) => {
+          e.preventDefault();
+          console.log('click');
+        }}
+      >
+        Найти
+      </button>
+    </form>
+  );
+});

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

@@ -0,0 +1,8 @@
+import '../setup-fixture';
+
+import { TopItem } from './TopItem';
+
+export default {
+  default: <TopItem href="https://www.rshb.ru/" target="_blank" text="Экосистема Своё" />,
+  active: <TopItem href="https://www.rshb.ru/" target="_blank" text="Экосистема Своё" active />,
+};

package/src/ui-kit/TopItem.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../types';
+
+export interface TopItemContent extends LinkContent {
+  active?: boolean;
+}
+
+export interface TopItemProps extends TopItemContent {
+  className?: string;
+  flat?: boolean;
+  ariaLabel?: string;
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export const TopItem = JSX<TopItemProps>(
+  ({ className, text, href, target, active, flat, onClick, children, ariaLabel }) => {
+    const linkStyle = active ? 'border-primary-main rounded-3xl' : 'border-transparent';
+    const textStyle = active
+      ? 'text-primary-main'
+      : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+
+    return (
+      <a
+        className={`inline-block border border-solid bg-transparent text-center no-underline ${
+          flat ? '' : 'px-4 py-2'
+        } ${linkStyle} ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        rel="noopener noreferrer"
+        aria-label={ariaLabel}
+      >
+        <span className={`font-sans font-normal text-sm ${textStyle}`}>{text || children}</span>
+      </a>
+    );
+  },
+);

package/src/useLink.ts

@@ -0,0 +1,28 @@
+import { HandlerDecorator, Router } from './ContentPageContext';
+import type { LinkContent } from './types';
+import { isURL, toRelativeHref } from './utils/url';
+
+const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+
+export function useLink(
+  {
+    router,
+    handlerDecorator = defaultHandlerDecorator,
+  }: { router: Router; handlerDecorator?: HandlerDecorator },
+  link: Partial<LinkContent>,
+) {
+  const href = toRelativeHref(link.href, router.href);
+  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/useSitemap.ts

@@ -0,0 +1,17 @@
+import type { AsyncDataHook } from './ContentPageContext';
+import type { HeaderContent } from './Header/index';
+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/utils/url.ts

@@ -0,0 +1,22 @@
+export const isURL = (href?: string) => href?.includes('//');
+
+export const withoutQuery = (href?: string) => (href || '').replace(/\/?\?.*/, '');
+
+export const getOrigin = (href?: string) => {
+  if (isURL(href)) {
+    const url = href!;
+    const protoSeparator = '://';
+    const endOfProto = url.indexOf(protoSeparator);
+    const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
+    return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
+  }
+  return undefined;
+};
+
+export const toRelativeHref = (href?: string, baseURL?: string) => {
+  if (!href) {
+    return href;
+  }
+  const origin = getOrigin(baseURL);
+  return origin ? href.replace(origin, '') || '/' : href;
+};