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

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>
+  );
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+export type { ProjectSettings } from './ProjectSettings';
+export { projectSettings } from './ProjectSettings';
+
+export type { BlockDef, ContentPageMeta, ContentPageDef, Img, ImgSource, Picture } from './types';
+export type {
+  ContentPageContext,
+  Router,
+  LikeService,
+  Search,
+  HandlerDecorator,
+} from './ContentPageContext';
+
+export { ContentPageHead } from './ContentPageHead';
+export { ContentPage } from './ContentPage';
+
+export { Blocks } from './Blocks';
+export { LikeAPI } from './api/LikeAPI';
+
+export * as url from './utils/url';

package/src/mergeTopItems.spec.ts

@@ -0,0 +1,20 @@
+import { mergeTopItems } from './mergeTopItems';
+
+describe('mergeTopItems', () => {
+  it('should return original items if no extra items provided', () => {
+    const items = [{ href: '/' }];
+    expect(mergeTopItems(items)).toEqual(items);
+  });
+
+  it('should append extra items to original ones', () => {
+    const items = [{ href: '/' }];
+    const extraItems = [{ href: '/foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(items.concat(extraItems));
+  });
+
+  it('should replace original items with duplicating extra items (by href)', () => {
+    const items = [{ href: '/foo' }];
+    const extraItems = [{ href: '/foo', text: 'foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(extraItems);
+  });
+});

package/src/mergeTopItems.ts

@@ -0,0 +1,13 @@
+import type { TopMenuItem } from './types';
+
+const cmp = (a?: TopMenuItem) => (b?: TopMenuItem) => a?.href === b?.href;
+
+const substitute = (items?: TopMenuItem[], substitution?: TopMenuItem[]) =>
+  (items || []).map((_) => substitution?.find(cmp(_)) || _);
+
+const subtract = (minuend?: TopMenuItem[], subtrahend?: TopMenuItem[]) =>
+  (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
+
+export function mergeTopItems(left?: TopMenuItem[], right?: TopMenuItem[]): TopMenuItem[] {
+  return substitute(left, right).concat(subtract(right, left));
+}

package/src/setup-fixture.ts

@@ -0,0 +1,49 @@
+import { setup } from '@redneckz/uni-jsx';
+import runtime from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import type { ContentPageContext } from './ContentPageContext';
+
+const { jsx, jsxs } = runtime as any;
+setup(jsx, jsxs);
+
+const TEST_ORIGIN = 'http://localhost:5001';
+
+export const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    href: `${TEST_ORIGIN}/credits`,
+    pathname: '/credits',
+    query: {},
+    push: (url: string) => {
+      console.log(url);
+    },
+  }),
+  useAsyncData: (key, fetcher) => {
+    const [data, setData] = useState();
+    useEffect(() => {
+      fetcher().then((_) => {
+        setData(_);
+      });
+    }, [key, fetcher]);
+    return { data };
+  },
+  useLikeService: () => ({
+    likeCount: 0,
+    like: () => {
+      console.log('like');
+    },
+    dislike: () => {
+      console.log('dislike');
+    },
+  }),
+  handlerDecorator:
+    (handler, targetContent): any =>
+    (ev) => {
+      ev.preventDefault();
+      console.log(ev.target, ev, targetContent);
+    },
+  useSearch: () => ({
+    term: 'кредит',
+    setTerm: (text: string) => console.log(text),
+  }),
+};

package/src/types.ts

@@ -0,0 +1,109 @@
+import type {
+  AvifOptions,
+  FormatEnum,
+  GifOptions,
+  HeifOptions,
+  JpegOptions,
+  PngOptions,
+  ResizeOptions,
+  TiffOptions,
+  WebpOptions,
+} from 'sharp';
+import type { BenefitsBlockContent } from './BenefitsBlock';
+import type { ContentPageContext } from './ContentPageContext';
+import type { HeaderContent } from './Header/index';
+import type { PlaceholderContent } from './Placeholder';
+import type { ProductBlockInnerContent } from './ProductBlockInner';
+import type { ProductGalleryContent } from './ProductGallery';
+import type { StepsBlockContent } from './StepsBlock';
+import type { TileContent } from './Tile';
+
+export type BlockVersion = 'primary' | 'secondary';
+
+export type ColorPalette = 'pc' | 'bc' | 'eo';
+
+export type BlockContent =
+  | HeaderContent
+  | PlaceholderContent
+  | ProductBlockInnerContent
+  | TileContent
+  | StepsBlockContent
+  | BenefitsBlockContent
+  | ProductGalleryContent;
+
+export interface BlockDef {
+  type: string;
+  style?: string[];
+  version?: BlockVersion;
+  content?: BlockContent;
+  blocks?: BlockDef[];
+}
+
+export interface ContentPageMeta {
+  title: string;
+  slug: string;
+  description?: string;
+  keywords?: string[];
+  robots?: string[];
+  og?: Record<string, string>;
+}
+
+export interface ContentPageDef extends ContentPageMeta {
+  style?: string[];
+  blocks?: BlockDef[];
+  likeControl?: boolean;
+  colorPalette?: ColorPalette;
+}
+
+export interface Img {
+  src: string;
+  alt?: string;
+  title?: string;
+}
+
+export interface ImgSource {
+  src: string;
+  format?: keyof FormatEnum;
+  options?:
+    | JpegOptions
+    | PngOptions
+    | WebpOptions
+    | AvifOptions
+    | HeifOptions
+    | GifOptions
+    | TiffOptions;
+  size?: ResizeOptions;
+}
+
+export interface Picture extends Img, ImgSource {
+  sources?: ImgSource[];
+}
+
+export interface UniBlockProps {
+  className?: string;
+  context: ContentPageContext;
+}
+
+export interface ContactInfo {
+  text: string;
+  type: 'tel' | 'email';
+  description: string;
+}
+
+export interface LinkContent {
+  text?: string;
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top' | string;
+}
+
+export type NavMenuItem = LinkContent;
+
+export interface TopMenuItem extends NavMenuItem {
+  items?: NavMenuItem[];
+}
+
+export interface Benefit {
+  label: string;
+  description?: string;
+  icon?: string;
+}

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

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

package/src/ui-kit/BlockItem.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+type BlockItemVersion = 'primary' | 'secondary';
+export interface BlockItemContent {
+  text?: string;
+}
+
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+}
+
+const listStyleMap: Record<BlockItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const textStyleMap: Record<BlockItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+
+export const BlockItem = JSX<BlockItemProps>(
+  ({ className, text, children, version = 'primary' }) => {
+    return (
+      <div className={`inline-block flex ${className || ''}`} role="listitem">
+        <div
+          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
+        ></div>
+        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+          {text || children}
+        </span>
+      </div>
+    );
+  },
+);

package/src/ui-kit/Breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../types';
+
+export interface BreadcrumbProps extends LinkContent {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export const Breadcrumb = JSX<BreadcrumbProps>(
+  ({ text, href, target, onClick, className, children }) => {
+    if (href) {
+      return (
+        <a
+          className={`no-underline ${className || ''}`}
+          href={href}
+          target={target}
+          onClick={onClick}
+        >
+          <span className={`${className || ''}`}>{text || children}</span>
+        </a>
+      );
+    } else {
+      return <span className={`${className || ''}`}>{text || children}</span>;
+    }
+  },
+);