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

package/src/StepsBlock.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
+import type { UniBlockProps } from './types';
+import { joinList } from './utils/joinList';
+
+const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
+export interface Step {
+  label: string;
+  description?: string;
+  icon?: keyof typeof ICONS;
+}
+
+export interface StepsBlockContent {
+  title?: string;
+  steps?: Step[];
+}
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      {steps?.length ? (
+        <div>
+          <div className="flex mt-9 items-center px-[88px]">
+            {joinList(<div className="h-0.5 w-full bg-secondary-light"></div>)(
+              steps.map((step, i) => renderStepIcon(step, i)),
+            )}
+          </div>
+          <div className="flex mt-9 justify-between gap-x-24">{steps.map(renderStepTitle)}</div>
+        </div>
+      ) : null}
+    </section>
+  );
+});
+
+const renderStepIcon = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative">
+      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+        {(step.icon && ICONS[step.icon]?.({ width: 48, height: 48 })) || (
+          <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const renderStepTitle = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative w-[276px]">
+      <div className="max-w-min">
+        <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
+        {step.description && (
+          <div className="font-normal text-sm text-secondary-text mt-2">{step.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Tile.fixture.tsx

@@ -0,0 +1,124 @@
+import { context } from './setup-fixture';
+
+import { Tile } from './Tile';
+import { Picture } from './types';
+
+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 млн ₽',
+          'Кредиты наличными на любые цели',
+          'Получите деньги без залога и поручителей',
+        ]}
+        button={{
+          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 %'
+        }
+        button={{
+          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% от покупок']}
+        button={{
+          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={
+          'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
+        }
+        button={{
+          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={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={image4}
+      />
+    </div>
+  ),
+};

package/src/Tile.tsx

@@ -0,0 +1,89 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from './Img';
+import type { BlockVersion, Picture, UniBlockProps } from './types';
+import { BlockItem } from './ui-kit/BlockItem';
+import type { ButtonProps } from './ui-kit/Button';
+import { Button } from './ui-kit/Button';
+import { useLink } from './useLink';
+
+export interface TileContent {
+  title?: string;
+  description?: string;
+  image?: Picture;
+  items?: string[];
+  button?: ButtonProps;
+  version?: BlockVersion;
+}
+
+export interface TileProps extends TileContent, UniBlockProps {}
+
+const tileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
+
+export const Tile = JSX<TileProps>(
+  ({
+    className,
+    context,
+    title,
+    description,
+    children,
+    button,
+    image,
+    items,
+    version = 'primary',
+  }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <section
+        className={`flex flex-col font-sans p-9 ${className || ''} ${tileStyleMap[version]}`}
+      >
+        {title && renderTitle(title, className)}
+        <div className="grow flex justify-between mt-6">
+          <div className="flex flex-col justify-between items-start">
+            {description || children ? (
+              <div className="font-normal text-base max-w-[600px]">{description || children}</div>
+            ) : (
+              renderItems(items, version)
+            )}
+            {button?.text && (
+              <Button
+                className="mt-6"
+                {...useLink({ router, handlerDecorator }, button)}
+                version="secondary"
+              />
+            )}
+          </div>
+          {image?.src && <Img className="mt-auto h-[220px] w-[220px]" image={image} />}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderTitle(title: string, className: string = '') {
+  const colSpanPrefix = 'col-span-';
+  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+  const colSpan = colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+  if (colSpan <= 4) {
+    return <h3 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h3>;
+  } else if (colSpan <= 8) {
+    return <h3 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h3>;
+  } else {
+    return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
+  }
+}
+
+function renderItems(items?: string[], version?: BlockVersion) {
+  return items?.length ? (
+    <section className="max-w-[600px]" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
+      ))}
+    </section>
+  ) : null;
+}

package/src/api/LikeAPI.ts

@@ -0,0 +1,141 @@
+interface UserData {
+  token: string;
+  name: string;
+}
+export interface LikeData {
+  node_id: string;
+  value: number;
+}
+
+const AUTH_PREFIX = 'guest';
+const STORAGE_KEY = 'likesToken';
+
+export function LikeAPI(projectId: string, baseURL: string) {
+  async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
+    if (!nodeIds.length) {
+      return [];
+    }
+
+    const { token: Authorization } = await auth();
+
+    try {
+      const response = await fetch(`/assist/v1/public/projects/${projectId}/nodes/likes`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: { 'Content-Type': 'application/json', Authorization },
+        body: JSON.stringify({
+          node_ids: nodeIds,
+        }),
+      });
+
+      const { likes } = await response.json();
+
+      return likes || [];
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
+  }
+
+  async function like(nodeId: string): Promise<number> {
+    if (!nodeId) {
+      return 0;
+    }
+
+    const { token: Authorization, name } = await auth();
+
+    try {
+      const response = await fetch(`${baseURL}/assist/v1/public/projects/${projectId}/nodes/like`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization,
+          UserID: name,
+        },
+        body: JSON.stringify({
+          node_id: nodeId,
+          user_name: name,
+        }),
+      });
+      const { likes } = await response.json();
+
+      return likes || 0;
+    } catch (e) {
+      console.error(e);
+      return 0;
+    }
+  }
+
+  async function dislike(nodeId: string): Promise<number> {
+    if (!nodeId) {
+      return 0;
+    }
+
+    const { token: Authorization, name } = await auth();
+
+    try {
+      const response = await fetch(
+        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/unlike`,
+        {
+          method: 'POST',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization,
+            UserID: name,
+          },
+          body: JSON.stringify({
+            node_id: nodeId,
+            user_name: name,
+          }),
+        },
+      );
+      const { likes } = await response.json();
+
+      return likes || 0;
+    } catch (e) {
+      console.error(e);
+      return 0;
+    }
+  }
+
+  async function auth(): Promise<UserData> {
+    try {
+      const userData: UserData = JSON.parse(globalThis.localStorage.getItem(STORAGE_KEY) || '');
+      if (userData?.token) {
+        return userData;
+      }
+    } catch (e) {
+      // do nothing
+    }
+
+    try {
+      const response = await fetch(`${baseURL}/assist/v1/public/auth`, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          prefix: AUTH_PREFIX,
+        }),
+      });
+
+      const { token, name } = await response.json();
+
+      globalThis.localStorage.setItem(STORAGE_KEY, JSON.stringify({ token, name }));
+
+      return { token, name } as UserData;
+    } catch (e) {
+      console.error(e);
+      return {} as UserData;
+    }
+  }
+
+  return {
+    getLikeCount,
+    like,
+    dislike,
+  };
+}

package/src/common.css

@@ -0,0 +1,39 @@
+@import '../fonts/ubuntu/ubuntu.css';
+
+/* Private clients | Green */
+[data-theme='pc'] {
+  --color-primary-main: #42ab44;
+  --color-primary-hover: #248341;
+  --color-primary-active: #245f34;
+  --color-secondary-hover: #c5e2c6;
+  --color-secondary-active: #d8f2d9;
+}
+/* Business clients | Light-Green */
+[data-theme='bc'] {
+  --color-primary-main: #83b83e;
+  --color-primary-hover: #5c921d;
+  --color-primary-active: #3c5e10;
+  --color-secondary-hover: #e8f4d9;
+  --color-secondary-active: #d8e3ca;
+}
+/* Ecosystem own | Yellow */
+[data-theme='eo'] {
+  --color-primary-main: #ddb63d;
+  --color-primary-hover: #bb9727;
+  --color-primary-active: #7e630c;
+  --color-secondary-hover: #f1ecdd;
+  --color-secondary-active: #e5dec7;
+}
+
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .-translate-x-full {
+    transform: translateX(-100%);
+  }
+}

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

@@ -0,0 +1,38 @@
+import glob from 'glob';
+import util from 'util';
+import type { ContentPageDef } from '../types';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformContentPage } from './transformContentPage';
+
+const find = util.promisify(glob);
+
+export function ContentPageRepository({
+  contentDir = 'content',
+  publicDir = 'public',
+}: Partial<TransformationOptions> = {}) {
+  async function getAllContentPages(): Promise<ContentPageDef[]> {
+    const pagePaths = await find(`${contentDir}/**/*.page.json`);
+    return await Promise.all(pagePaths.map(readPage));
+  }
+
+  async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
+    const pages = await getAllContentPages();
+    return pages.find((content) => content.slug === slug);
+  }
+
+  const cache: Record<string, ContentPageDef> = {};
+  async function readPage(filePath: string): Promise<ContentPageDef> {
+    if (!(filePath in cache)) {
+      cache[filePath] = await transformContentPage(filePath, {
+        contentDir,
+        publicDir,
+      });
+    }
+    return cache[filePath];
+  }
+
+  return {
+    getAllContentPages,
+    getContentPageBySlug,
+  };
+}

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

@@ -0,0 +1,4 @@
+export interface TransformationOptions {
+  contentDir: string;
+  publicDir: string;
+}

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

@@ -0,0 +1 @@
+export { ContentPageRepository } from './ContentPageRepository';

package/src/content-page-repository/mapJSON.spec.ts

@@ -0,0 +1,28 @@
+import { mapJSON } from './mapJSON';
+
+describe('mapJSON', () => {
+  it('should map scalars', async () => {
+    const mapper = (_: any) => (typeof _ === 'string' ? '<MAPPED>' : _);
+    expect(await mapJSON('foo', mapper)).toBe('<MAPPED>');
+  });
+
+  it('should map arrays', async () => {
+    const mapper = (_: any) => (Array.isArray(_) ? _.map((item) => item.toUpperCase()) : _);
+    expect(await mapJSON(['foo', 'bar', 'baz'], mapper)).toEqual(['FOO', 'BAR', 'BAZ']);
+  });
+
+  it('should map objects', async () => {
+    const mapper = (_: any) => ('bar' in _ ? { ..._, bar: '<MAPPED>' } : _);
+    expect(await mapJSON({ foo: { bar: 'baz' } }, mapper)).toEqual({ foo: { bar: '<MAPPED>' } });
+  });
+
+  it('should support async mappers', async () => {
+    const mapper = (_: any) => ('bar' in _ ? Promise.resolve({ ..._, bar: '<MAPPED>' }) : _);
+    expect(await mapJSON({ foo: { bar: 'baz' } }, mapper)).toEqual({ foo: { bar: '<MAPPED>' } });
+  });
+
+  it('should map nil values as is', async () => {
+    const mapper = (_: any) => (!_ ? '<EMPTY>' : _);
+    expect(await mapJSON([null, undefined, ''], mapper)).toEqual([null, undefined, '<EMPTY>']);
+  });
+});

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

@@ -0,0 +1,23 @@
+export async function mapJSON<T>(
+  data: T,
+  mapper: <In, Out = In>(value: In, key: string[]) => Promise<Out>,
+  key: string[] = [],
+): Promise<T> {
+  if (data === null || data === undefined) return data;
+
+  const mappedData = await mapper(data, key);
+  if (mappedData !== data) return mappedData as T;
+
+  if (Array.isArray(data)) {
+    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(key)));
+    return Promise.all(values) as any;
+  } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
+    const subKeys = Object.keys(data as any);
+    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(key)));
+    const pairs = (await Promise.all(values)).map((_, i) => ({
+      [subKeys[i]]: _,
+    }));
+    return Object.assign({}, ...pairs);
+  }
+  return mapper<T>(data, key);
+}

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

@@ -0,0 +1,26 @@
+import fs from 'fs';
+import util from 'util';
+import type { ContentPageDef, Picture } from '../types';
+import { mapJSON } from './mapJSON';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformMarkdown } from './transformMarkdown';
+import { transformPicture } from './transformPicture';
+
+const readFile = util.promisify(fs.readFile);
+
+export async function transformContentPage(
+  pagePath: string,
+  options: TransformationOptions,
+): Promise<ContentPageDef> {
+  const content = await readFile(pagePath, 'utf8');
+  return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
+    const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
+    const isPicture = value && value.src && typeof value.src === 'string';
+    if (isMarkdown) {
+      return await transformMarkdown(value);
+    } else if (isPicture) {
+      return await transformPicture(pagePath, value as Picture, options);
+    }
+    return value;
+  });
+}

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

@@ -0,0 +1,10 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkHtml from 'remark-html';
+
+export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
+  if (!markdown) return '';
+
+  const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
+  return result.toString('utf-8');
+}

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

@@ -0,0 +1,61 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+import util from 'util';
+import type { ImgSource, Picture } from '../types';
+import type { TransformationOptions } from './TransformationOptions';
+
+const mkdir = util.promisify(fs.mkdir);
+
+export async function transformPicture(
+  pagePath: string,
+  picture: Picture,
+  options: TransformationOptions,
+): Promise<Picture> {
+  const sources = picture.sources || [];
+  const [transformedPicture, ...transformedSources] = await Promise.all(
+    [picture].concat(sources).map((_) => transformImg(pagePath, picture.src, { ...options, ..._ })),
+  );
+  return {
+    ...picture,
+    src: transformedPicture,
+    sources: transformedSources.map((_, i) => ({
+      ...sources[i],
+      src: _,
+    })),
+  };
+}
+
+async function transformImg(
+  pagePath: string,
+  src: string,
+  transformationOptions: TransformationOptions & ImgSource,
+): Promise<string> {
+  const { contentDir, publicDir, format, options, size } = transformationOptions;
+
+  const imgPath = `${path.dirname(pagePath)}/${src}`;
+  let chain = sharp(imgPath);
+  if (size) chain = chain.resize(size);
+  if (format) chain = chain.toFormat(format, options);
+
+  const transformedSrc = transformSrc(src, transformationOptions);
+  const transformedImgPath = `${publicDir}/${path.relative(
+    contentDir,
+    `${path.dirname(pagePath)}/${transformedSrc}`,
+  )}`;
+
+  await mkdir(path.dirname(transformedImgPath), { recursive: true });
+  await chain.toFile(transformedImgPath);
+
+  return transformedSrc;
+}
+
+function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
+  const noTransform = !format && !size;
+  if (noTransform) return src;
+
+  const suffix = [size?.width, size?.height].filter(Boolean).join('-');
+  return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${
+    String(format) || path.extname(src)
+  }`;
+}

package/src/cosmos.decorator.tsx

@@ -0,0 +1,19 @@
+export default ({ children }) => {
+  document.querySelector(':root')?.setAttribute('lang', 'ru'); // for lighthouse accessibility metrics
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'rgba(51, 51, 51, 0.07)',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+      }}
+      data-theme="pc"
+    >
+      {children}
+    </div>
+  );
+};