@redneckz/wildless-cms-uni-blocks 0.6.42 → 0.6.43

package/src/components/ProductTile/renderBenefit.tsx

@@ -0,0 +1,39 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { Benefit } from './ProductTileContent';
+
+const LABEL_STYLE_MAP: Record<BlockVersion, TextColor> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export const renderBenefit =
+  (version: BlockVersion = 'primary') =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (benefit: Benefit, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'md')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return [
+          <Text key={`label-${i}`} size="text-h6">
+            {benefit.label}
+          </Text>,
+          <Text key={`desc-${i}`} size="text-m-light" color={LABEL_STYLE_MAP[version]}>
+            {benefit.description}
+          </Text>,
+        ];
+      case 'md':
+        return <MarkdownText md={benefit.md} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/src/components/ProductTile/renderImage.tsx

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
+
+export function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/src/components/TextBlock/TextBlock.tsx

@@ -3,51 +3,43 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockStyleMaps: Record<
-  TextBlockVersion,
-  { background: string; icon: string; title: string; description: string }
-> = {
-  primary: {
-    background: 'bg-white',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    icon: 'bg-white text-primary-main',
-    title: 'text-white',
-    description: 'text-white',
-  },
-  'secondary-light': {
-    background: 'bg-primary-main/10',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
+const textBlockBack: Record<TextBlockVersion, string> = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+  'secondary-light': 'bg-primary-main/10',
 };
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
-    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+  ({
+    className = '',
+    title,
+    description,
+    blockVersion = 'primary',
+    iconVersion,
+    image,
+    ...rest
+  }) => {
+    const isSecondaryBlock = blockVersion === 'secondary';
 
     return (
       <BlockWrapper
-        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+        className={`px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`}
         {...rest}
       >
-        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'small' ? (
+          <div className="mt-1">{renderIcon(isSecondaryBlock)}</div>
+        ) : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5">
-          {title ? (
-            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          ) : null}
+        <div>
+          {title ? renderTitle(title, isSecondaryBlock) : null}
           {description ? (
-            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
+            <div className="mt-1">{renderDescription(description, isSecondaryBlock)}</div>
           ) : null}
         </div>
       </BlockWrapper>
@@ -55,14 +47,30 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-function renderIcon(className: string) {
-  return (
-    <div className="pt-1.5 pl-1 pr-4">
-      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
-    </div>
-  );
-}
+const renderIcon = (isSecondaryBlock: boolean) => (
+  <div
+    className={`rounded-full h-4 w-4 text-center text-xs-light ${
+      isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'
+    }`}
+  >
+    i
+  </div>
+);
 
-function renderImage(image?: Picture) {
-  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
-}
+const renderImage = (image?: Picture) => (image?.src ? <Img image={image} /> : null);
+
+const renderTitle = (title: string, isSecondaryBlock: boolean) => (
+  <Text
+    size="text-l"
+    font="font-medium"
+    color={isSecondaryBlock ? 'text-white' : 'text-primary-text'}
+  >
+    {title}
+  </Text>
+);
+
+const renderDescription = (description: string, isSecondaryBlock: boolean) => (
+  <Paragraph size="text-s" color={isSecondaryBlock ? 'text-white' : 'text-secondary-text'}>
+    {description}
+  </Paragraph>
+);

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

@@ -1,13 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import util from 'util';
-import sharp from 'sharp';
 import type { ResizeOptions, Sharp } from 'sharp';
+import sharp from 'sharp';
+import util from 'util';
 import type { ImageSize } from '../model/ImageSize';
-import type { TransformationOptions } from './TransformationOptions';
 import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
-import { transformSrc } from './transformSrc';
 import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformSrc } from './transformSrc';
 
 const mkdir = util.promisify(fs.mkdir);
 
@@ -126,20 +126,12 @@ function getCompositionResizeSize(
   const { width, height } = size;
   const { width: containerWidth, height: containerHeight } = containerSize;
 
-  let widthRatio = 0;
-  let heightRatio = 0;
-
   if (!(width || height)) {
     return undefined;
   }
 
-  if (width) {
-    widthRatio = containerWidth / width;
-  }
-
-  if (height) {
-    heightRatio = containerHeight / height;
-  }
+  const widthRatio = width ? containerWidth / width : 0;
+  const heightRatio = height ? containerHeight / height : 0;
 
   return widthRatio > heightRatio
     ? { width: Math.min(Number(width), containerWidth) }

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

@@ -1,6 +1,6 @@
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +9,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8');
+  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
 }

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MarkdownTextProps } from './MarkdownTextProps';
+
+export const MarkdownText = JSX<MarkdownTextProps>((props) => {
+  const { md = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html: md }} />;
+});

package/src/ui-kit/MarkdownText/MarkdownTextProps.ts

@@ -0,0 +1,6 @@
+type Markdown = string;
+
+export interface MarkdownTextProps {
+  /** @title Текст */
+  md?: Markdown;
+}

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

@@ -8,10 +8,8 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>((props) => {
-  const { size = '', color = '', align = '', font = '', children } = props;
-
-  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-
-  return <span className={textClasses}>{children}</span>;
-});
+export const Text = JSX<TextProps>(({ size, color, align, font, children }) => (
+  <span className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>
+    {children}
+  </span>
+));