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

package/src/types.ts

@@ -4,15 +4,16 @@ import type { BlockVersion } from './model/BlockVersion';
 
 export type ColorPalette = 'pc' | 'bc' | 'eo' | 'eo2' | 'eo3' | 'eo4';
 
-export interface BlockDef {
+export interface BaseBlockDef {
   type: string;
   style?: string[];
   content?: BlockContent;
   version?: BlockVersion;
-  blocks?: BlockDef[];
-  mobile?: Pick<BlockDef, 'content' | 'style'> & {
-    hidden?: boolean;
-  };
+  hidden?: boolean;
+}
+
+export interface BlockDef extends BaseBlockDef {
+  mobile?: BaseBlockDef;
 }
 
 export interface Slot {

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

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
+import type { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-secondary-text',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
 };
 
 const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'bg-primary-main',
-  secondary: 'bg-secondary-text',
+  secondary: 'bg-white',
+  gray: 'bg-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
+  ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version, white)} />}
-        <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}
+        <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );
   },
 );
 
-const getListStyle = (version: BlockVersion, white?: boolean) => {
-  const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
+const getListStyle = (version: BlockItemVersion) => {
   const size =
-    version === 'primary'
-      ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
-      : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
-
-  return `${LIST_STYLE_CLASSES} ${color} ${size}`;
+    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
 };

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -1,7 +1,8 @@
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Белый"]
  */
-export type BlockItemVersion = 'primary' | 'secondary';
+export type BlockItemVersion = 'primary' | 'secondary' | 'gray';
 
 /**
  * @title Содержимое элемента блока
@@ -17,7 +18,6 @@ export interface BlockItemContent {
 export interface BlockItemProps extends BlockItemContent {
   className?: string;
   version?: BlockItemVersion;
-  white?: boolean;
   /** @title Маркер */
   isDotted?: boolean;
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../setup-fixture';
 import { Icon } from '../Icon/Icon';
 import { Button } from './Button';
@@ -71,7 +70,7 @@ export default {
             appendLeft={
               /** Div need for perfect pixel */
               <div>
-                <Icon name="PlayMarketIcon" width="24" height="24" />
+                <Icon name="PlayMarketIcon" width="24" height="24" asSVG />
               </div>
             }
             text="Google Play"
@@ -83,7 +82,7 @@ export default {
             aboveText="Загрузите в"
             appendLeft={
               <div>
-                <Icon name="AppleIcon" width="24" height="24" />
+                <Icon name="AppleIcon" width="24" height="24" asSVG />
               </div>
             }
             text="App Store"
@@ -99,14 +98,14 @@ export default {
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="PlayMarketIcon" width="20" height="21" />}
+            appendLeft={<Icon name="PlayMarketIcon" width="20" height="21" asSVG />}
           />
           <Button
             rounded
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="AppleIcon" width="18" height="20" />}
+            appendLeft={<Icon name="AppleIcon" width="18" height="20" asSVG />}
           />
         </div>
       </div>

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

@@ -4,24 +4,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+import { ButtonInner } from './ButtonInner';
 
 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',
+  link: 'text-primary-main',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
 };
 
 const styleButton = 'w-full text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
-export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
-
 export const Button = JSX<ButtonCommonProps>(
   ({
     className,
@@ -34,12 +35,18 @@ export const Button = JSX<ButtonCommonProps>(
     children,
     disabled,
     rounded,
-    version = 'none',
+    version = 'primary',
     ariaLabel,
     ...rest
   }) => {
     const buttonInner = children ?? (
-      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+      <ButtonInner
+        text={text}
+        aboveText={aboveText}
+        appendLeft={appendLeft}
+        rounded={rounded}
+        version={version}
+      />
     );
 
     if (disabled) {
@@ -75,23 +82,3 @@ export const Button = JSX<ButtonCommonProps>(
     );
   },
 );
-
-export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
-  const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-  const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
-  } ${rounded ? 'rounded-full' : ''}`;
-
-  return (
-    <div className={buttonInnerClasses}>
-      {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
-        <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
-        </div>
-      )}
-    </div>
-  );
-});

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

@@ -1,27 +1,25 @@
-/* eslint-disable max-lines-per-function */
-/* eslint-disable complexity */
-
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { ButtonInner } from './ButtonInner';
 import type { ButtonProps, ButtonWithIconProps } 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',
+  link: '',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
 };
 
 const styleButton = 'text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
-export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
-
 export const Button = JSX<ButtonCommonProps>(
   ({
     className,
@@ -42,56 +40,62 @@ export const Button = JSX<ButtonCommonProps>(
       <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
     );
 
-    if (disabled) {
-      return (
-        <div
-          role="button"
-          aria-disabled="true"
-          aria-label={ariaLabel}
-          tabIndex="-1"
-          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
-            rounded ? 'rounded-full' : 'rounded-md'
-          } ${className || ''}`}
-        >
-          {buttonInner}
-        </div>
-      );
-    }
-
-    return (
-      <a
-        className={`${styleButton} inline-block 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>
-    );
+    return disabled
+      ? renderDisabledButton({ buttonInner, ariaLabel, className, version, rounded })
+      : renderButton({
+          buttonInner,
+          ariaLabel,
+          className,
+          version,
+          rounded,
+          href,
+          target,
+          onClick,
+          rest,
+        });
   },
 );
 
-export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
-  const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-  const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
-  } ${rounded ? 'rounded-full' : ''}`;
+function renderButton({
+  className,
+  buttonInner,
+  ariaLabel,
+  version,
+  rounded,
+  href,
+  target,
+  onClick,
+  rest,
+}) {
+  return (
+    <a
+      className={`${styleButton} inline-block 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>
+  );
+}
 
+function renderDisabledButton({ className, buttonInner, ariaLabel, version, rounded }) {
   return (
-    <div className={buttonInnerClasses}>
-      {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
-        <div>
-          <div className="text-2xs text-left">{aboveText}</div>
-          <div className="text-button font-medium text-left">{text}</div>
-        </div>
-      )}
+    <div
+      role="button"
+      aria-disabled="true"
+      aria-label={ariaLabel}
+      tabIndex="-1"
+      className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+        rounded ? 'rounded-full' : 'rounded-md'
+      } ${className || ''}`}
+    >
+      {buttonInner}
     </div>
   );
-});
+}

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

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonInnerProps extends ButtonWithIconProps {
+  version?: ButtonVersion;
+}
+
+export const ButtonInner = JSX<ButtonInnerProps>(
+  ({ text, aboveText, appendLeft, rounded, version }) => {
+    const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+    const buttonInnerClasses =
+      version !== 'link'
+        ? `flex items-center justify-center
+          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${
+            rounded ? 'rounded-full' : ''
+          }`
+        : null;
+
+    return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
+  },
+);
+
+function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {withoutText ? null : (
+        <div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../Icon/IconProps';
 
 /**
  * @hidden
@@ -22,6 +23,8 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
@@ -31,3 +34,11 @@ export interface ButtonWithIconProps extends ButtonProps {
   /** @hidden */
   asSVG?: boolean;
 }
+
+export interface ButtonContent {
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: ButtonWithIconProps[];
+}

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { UniBlockProps } from '../../types';
+import { Icon } from '../Icon/Icon';
+import { Button } from './Button';
+import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
+
+export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
+
+export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
+  const { handlerDecorator } = context;
+  const router = context.useRouter();
+  return buttons?.length ? (
+    <div className={`${className}`}>
+      {buttons.map((button, index) =>
+        renderButton(useLink({ router, handlerDecorator }, button), index),
+      )}
+    </div>
+  ) : null;
+});
+
+function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      {...button}
+    />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
+}

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DescriptionProps } from './DescriptionProps';
+
+export const Description = JSX<DescriptionProps>((props) => {
+  const { className, description } = props;
+
+  return <div className={`font-normal text-base ${className || ''}`}>{description}</div>;
+});

package/src/ui-kit/Description/DescriptionProps.ts

@@ -0,0 +1,8 @@
+export interface DescriptionContent {
+  /** @title Описание */
+  description?: string;
+}
+
+export interface DescriptionProps extends DescriptionContent {
+  className?: string;
+}

package/src/ui-kit/Heading/Heading.fixture.mobile.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Heading } from './Heading';
+
+export default {
+  all: (
+    <div className="p-2 w-full h-full">
+      <div className="bg-slate-100 w-full h-full">
+        <div className="pb-3">
+          <Heading headingType="h1" title="Копите в нескольких валютах" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h2" title="Копите в нескольких валютах" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h3" title="Дополнительные документы" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h4" title="Вклады в любой валюте" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h5" title="Вклады в любой валюте" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h6" title="Вклады в любой валюте" />
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,28 @@
+import { Heading } from './Heading';
+
+export default {
+  all: (
+    <div className="p-2 w-full h-full">
+      <div className="bg-slate-100 w-full h-full">
+        <div className="pb-3">
+          <Heading headingType="h1" title="«Своя» дебетовая карта" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h2" title="Рефинансирование кредитов" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h3" title="Потребительский кредит" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h4" title="Курсы обмена валют" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h5" title="Своё Родное" />
+        </div>
+        <div className="pb-3">
+          <Heading headingType="h6" title="Своё Родное" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui-kit/Heading/Heading.mobile.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
+
+export interface HeadingProps extends HeadingContent, HeadingTypeContent {
+  className?: string;
+}
+
+const HeadingClass: Record<HeadingType, string> = {
+  h1: 'text-m-title',
+  h2: 'text-m-title',
+  h3: 'text-m-title-md',
+  h4: 'text-m-title-xs',
+  h5: 'text-m-title-xs',
+  h6: 'text-m-title-xs',
+};
+
+export const Heading = JSX<HeadingProps>((props) => {
+  const { className, headingType, title } = props;
+  if (!headingType) {
+    return;
+  }
+  const Tag = headingType;
+
+  return (
+    <Tag className={`font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`}>
+      {title}
+    </Tag>
+  );
+});

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

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
+
+export interface HeadingProps extends HeadingContent, HeadingTypeContent {
+  className?: string;
+}
+
+const HEADING_STYLE_MAP: Record<HeadingType, string> = {
+  h1: 'text-title-lg tracking-[-0.3px]',
+  h2: 'text-title',
+  h3: 'text-title-sm',
+  h4: 'text-title-xs',
+  h5: 'text-title-2xs tracking-[0.2px]',
+  h6: 'text-title-2xs tracking-[0.2px]',
+};
+
+export const Heading = JSX<HeadingProps>((props) => {
+  const { className, headingType, title } = props;
+  if (!headingType) {
+    return;
+  }
+  const Tag = headingType;
+
+  return (
+    <Tag className={`font-sans font-medium ${HEADING_STYLE_MAP[headingType]} ${className || ''}`}>
+      {title}
+    </Tag>
+  );
+});

package/src/ui-kit/Heading/HeadingContent.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * @title Тип заголовка
+ * @enumNames [
+ *   "h1", "h2", "h3", "h4", "h5", "h6"
+ * ]
+ */
+export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingTypeContent {
+  headingType?: HeadingType;
+}
+
+export interface HeadingContent {
+  /** @title Заголовок */
+  title?: string;
+}

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

@@ -1,21 +1,29 @@
 import '../../setup-fixture';
 import { Icon } from './Icon';
-
-import { IconMap } from './IconProps';
-import type { IconName } from './IconProps';
+import { IconMap } from '../../icons/IconName';
 
 export default {
-  all: (
+  'all (as img)': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-6 gap-8">
+        {Object.values(IconMap).map((icon) => (
+          <div key={icon} className="flex flex-col items-center gap-3">
+            <div>{icon}</div>
+            <Icon name={icon} width="64" />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+  'all (as svg)': (
     <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>
-          ))}
+        {Object.values(IconMap).map((icon) => (
+          <div key={icon} className="flex flex-col items-center gap-3">
+            <div>{icon}</div>
+            <Icon name={icon} width="64" asSVG />
+          </div>
+        ))}
       </div>
     </div>
   ),