@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.114

package/mobile/src/api/LikeAPI.ts

@@ -0,0 +1,145 @@
+interface UserData {
+  token: string;
+  name: string;
+}
+export interface LikeData {
+  node_id: string;
+  value: number;
+}
+
+const AUTH_PREFIX = 'guest';
+const STORAGE_KEY = 'likesToken';
+
+// eslint-disable-next-line max-lines-per-function
+export function LikeAPI(projectId: string, baseURL = '') {
+  async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
+    if (!nodeIds.length) {
+      return [];
+    }
+
+    const { token: Authorization } = await auth();
+
+    try {
+      const response = await fetch(
+        `${baseURL}/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/mobile/src/common.css

@@ -0,0 +1,141 @@
+@import '../fonts/ubuntu/ubuntu.css';
+
+/* Private clients | Green */
+[data-theme='pc'] {
+  --color-primary-main: 66, 171, 68;
+  --color-primary-hover: 36, 131, 65;
+  --color-primary-active: 36, 95, 52;
+  --color-secondary-hover: 216, 242, 217;
+  --color-secondary-active: 197, 226, 198;
+  --color-gradient-from: 141, 189, 76;
+  --color-gradient-to: 69, 172, 69;
+}
+/* Business clients | Light-Green */
+[data-theme='bc'] {
+  --color-primary-main: 131, 184, 62;
+  --color-primary-hover: 92, 146, 29;
+  --color-primary-active: 60, 94, 16;
+  --color-secondary-hover: 232, 244, 217;
+  --color-secondary-active: 216, 227, 202;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
+}
+/* Ecosystem own | Yellow */
+[data-theme='eo'] {
+  --color-primary-main: 221, 182, 61;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo2'] {
+  --color-primary-main: 255, 204, 0;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo3'] {
+  --color-primary-main: 225, 186, 30;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo4'] {
+  --color-primary-main: 233, 191, 23;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .-translate-x-full {
+    transform: translateX(-100%);
+  }
+
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .horizontal-list {
+    display: flex;
+    overflow-x: scroll;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
+    scroll-snap-type: x mandatory;
+  }
+
+  .horizontal-list-item {
+    flex-shrink: 0;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    width: 100%;
+  }
+
+  input[type='range'].slider {
+    -webkit-appearance: none;
+    height: 4px;
+    background: transparent;
+    border-radius: 5px;
+    background-image: linear-gradient(#42ab44, #42ab44);
+    background-repeat: no-repeat;
+  }
+
+  input[type='range'].slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-ms-thumb {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+}

package/mobile/src/components/Accordion/Accordion.example.json

@@ -0,0 +1,50 @@
+{
+  "title": "Аккордеон",
+  "accordionItems": [
+    {
+      "label": "Аккордеон 1",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Аккордеон 2",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Аккордеон 3",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    }
+  ]
+}

package/mobile/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Title } from '../../ui-kit/Title/Title';
+import type { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
+
+export interface AccordionProps extends AccordionContent, UniBlockProps {}
+
+export const Accordion = JSX<AccordionProps>(
+  ({ title, description, accordionItems, context, className = '', bordered }) => {
+    return (
+      <section
+        className={`py-6 font-sans bg-white text-primary-text ${
+          bordered ? 'px-4' : ''
+        } ${className}`}
+      >
+        {title ? (
+          <Title className="m-0 mb-2 font-medium text-center" size="M">
+            {title}
+          </Title>
+        ) : null}
+        {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
+        {accordionItems?.length ? (
+          <ul className="list-none m-0 p-0">
+            {accordionItems.map((item, i) => (
+              <AccordionItem
+                key={`AccordionItem${i}`}
+                {...item}
+                context={context}
+                bordered={bordered}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </section>
+    );
+  },
+);

package/mobile/src/components/Accordion/AccordionBlocks.tsx

@@ -0,0 +1,11 @@
+import { Headline } from '../Headline/Headline';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
+import { PictureText } from '../PictureText/PictureText';
+import { TextBlock } from '../TextBlock/TextBlock';
+
+export const AccordionBlocks = {
+  Headline,
+  LinkDocs,
+  TextBlock,
+  PictureText,
+};

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -0,0 +1,91 @@
+import type { HeadlineContent } from '../Headline/HeadlineContent';
+import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+
+/**
+ * @title Тип блока
+ */
+export type AccordionTypeBlock = 'Headline' | 'LinkDocs' | 'TextBlock' | 'PictureText';
+
+/**
+ * @title Заголовок
+ */
+export interface HeadlineAccordionBlock extends HeadlineContent {
+  /** @default Headline */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Список документов
+ */
+export interface LinkDocsAccordionBlock extends LinkDocsContent {
+  /** @default LinkDocs */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Текстовый блок
+ */
+export interface TextBlockAccordionBlock extends TextBlockContent {
+  /** @default TextBlock */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextAccordionBlock extends PictureTextContent {
+  /** @default PictureText */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое аккордеона
+ */
+export type AccordionBlockProps =
+  | EmptyOption
+  | HeadlineAccordionBlock
+  | LinkDocsAccordionBlock
+  | TextBlockAccordionBlock
+  | PictureTextAccordionBlock;
+
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItemCommonProps {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /** @title Блоки */
+  blocks?: AccordionBlockProps[];
+  /**
+   * @title Отображать/скрывать обводку элемента
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+}
+
+/**
+ * @title Аккордеон
+ */
+export interface AccordionContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  accordionItems?: AccordionItemCommonProps[];
+  /** @title Подзаголовок */
+  description?: string; // TODO: только для мобильной версии
+  /**
+   * @title Отображать/скрывать обводку у элемента списка
+   * @default false
+   */
+  bordered?: boolean; // TODO: только для мобильной версии
+}

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { AccordionItemCommonProps } from './AccordionContent';
+import { AccordionItemInner } from './AccordionItemInner';
+import { isActiveHandler } from './utils/isActiveHandler';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
+  const { hasContent, icon, handleToggle } = isActiveHandler({
+    context,
+    blocks,
+  });
+
+  return (
+    <li
+      className={`${
+        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'
+      } border-solid border-main-divider`}
+    >
+      <button
+        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+        ${hasContent ? 'group cursor-pointer' : ''}`}
+        onClick={handleToggle}
+      >
+        <span
+          className={`text-m-title-xs pr-2.5 font-medium ${
+            hasContent ? 'group-hover:text-primary-main' : ''
+          }`}
+        >
+          {label}
+        </span>
+        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+      </button>
+      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+    </li>
+  );
+});

package/mobile/src/components/Accordion/AccordionItemInner.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { AccordionBlocks } from './AccordionBlocks';
+import type { AccordionBlockProps } from './AccordionContent';
+import type { AccordionItemProps } from './AccordionItem';
+
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  return (
+    <div className={`transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}>
+      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
+    return null;
+  }
+
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
+  return (
+    <div className="mb-5 last:mb-0 py-2.5" key={`block_${i}`}>
+      <AccordionBlock context={context} {...block} className="!p-0" />
+    </div>
+  );
+};

package/mobile/src/components/Accordion/utils/isActiveHandler.ts

@@ -0,0 +1,24 @@
+import type { IconName } from '../../../ui-kit/Icon/IconProps';
+
+export const isActiveHandler = ({ context, blocks }) => {
+  const [isActive, setIsActive] = context.useState(false);
+  const hasContent = blocks?.length;
+  const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
+
+  const getContentBlock = ({ target }) =>
+    target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;
+
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return { isActive, hasContent, icon, handleToggle };
+};

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -0,0 +1,53 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Title } from '../../ui-kit/Title/Title';
+import { BaseTileInner } from './BaseTileInner';
+import type { AlignType, BaseTileCommonProps } from './BaseTileProps';
+import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+
+const alignBlock: Record<AlignType, string> = {
+  left: 'items-start',
+  center: 'items-center',
+  right: 'items-end',
+};
+
+export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
+
+const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    context,
+    title,
+    titleSize,
+    description,
+    children,
+    buttons,
+    image,
+    items,
+    version = 'primary',
+    align = 'left',
+  }) => {
+    return (
+      <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
+        {title && (
+          <Title
+            size={titleSize || getTitleSizeByClassName(className)}
+            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          >
+            {title}
+          </Title>
+        )}
+        <BaseTileInner
+          context={context}
+          buttons={buttons}
+          image={image}
+          children={children}
+          description={description}
+          items={items}
+        />
+      </div>
+    );
+  },
+);

package/mobile/src/components/BaseTile/BaseTileInner.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import type { BaseTileMainProps } from './BaseTileProps';
+import { renderButton } from './renderButton';
+import { renderItems } from './renderItems';
+
+export interface BaseTileInnerProps extends BaseTileMainProps, UniBlockProps {}
+
+export const BaseTileInner = JSX<BaseTileInnerProps>(
+  ({ context, description, children, buttons, image, items, version = 'primary' }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <div>
+        {description && <div className={`font-normal text-base mt-3`}>{description}</div>}
+        {children}
+        {items?.length && renderItems(items, version)}
+        {buttons?.length && (
+          <div className="mt-[18px]">
+            {buttons.map((button, index) =>
+              renderButton(useLink({ router, handlerDecorator }, button), index),
+            )}
+          </div>
+        )}
+        {image?.src && <Img className="mt-auto ml-7" image={image} />}
+      </div>
+    );
+  },
+);