@redneckz/wildless-cms-uni-blocks 0.14.5 → 0.14.6

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -12,19 +13,19 @@ import type {
   TextBenefitDef,
 } from './BenefitsBlockContent';
 import { defaultIconSize } from './defaultIconSize';
-import { style } from '../../utils/style';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { AlignStyles } from '../../model/AlignStyles';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={style('space-y-x', className)} defaultPadding="p-6xl" {...rest}>
-      {title ? (
-        <Heading headingType="h3" as="h2" className="text-left sm:text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className={AlignStyles} title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full sm:justify-center mt-xl gap-5xl" role="list">
+        <div
+          className="flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl"
+          role="list"
+        >
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -35,7 +36,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex gap-m items-center md:basis-1/2 md:max-w-[500px]"
+    className="flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
@@ -48,7 +49,7 @@ const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
     ) : null}
     {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
     {benefit?.label ? (
-      <div className="sm:h-full">
+      <div className="@sm:h-full">
         <Heading headingType="h6">{benefit.label}</Heading>
         {renderDescription(benefit.description)}
       </div>
@@ -60,7 +61,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className="mt-2xs sm:mt-xs">
+    <div className="mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}
@@ -70,13 +71,13 @@ const renderDescription = (description: DescriptionDef | undefined) => {
 
 const renderTextBenefit = (description?: TextBenefitDef) =>
   description?.name ? (
-    <Paragraph
-      font="font-light"
+    <Text
       size="text-l"
-      color="text-secondary-text group-data-secondary:text-white"
+      color="text-secondary-text group-data-secondary:text-white/80"
+      font="font-light"
     >
       {description.name}
-    </Paragraph>
+    </Text>
   ) : null;
 
 const renderListBenefit = (description?: ListBenefitDef) => {
@@ -85,14 +86,15 @@ const renderListBenefit = (description?: ListBenefitDef) => {
   return description?.items && description.items.length > 0 ? (
     <ul className={listStyleType}>
       {description.items.map((_, i) => (
-        <Paragraph
-          key={`benefitListItem-${i}`}
-          font="font-light"
-          size="text-l"
-          color="text-secondary-text group-data-secondary:text-white"
-        >
-          {_}
-        </Paragraph>
+        <li key={`benefitListItem-${i}`}>
+          <Text
+            size="text-l"
+            color="text-secondary-text group-data-secondary:text-white/80"
+            font="font-light"
+          >
+            {_}
+          </Text>
+        </li>
       ))}
     </ul>
   ) : null;

package/src/components/Blocks.ts

@@ -21,6 +21,7 @@ import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
+import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -78,6 +79,7 @@ export const Blocks: BlocksRegistry = {
   CarouselTariffsCard,
   ComparisonTable,
   ContactsBlock,
+  Depository,
   DepositFiltration,
   ErrorBlock,
   ExchangeRateTile,

package/src/components/Depository/Depository.example.json

@@ -0,0 +1 @@
+{}

package/src/components/Depository/Depository.fixture.tsx

@@ -0,0 +1,10 @@
+import '../../setup-fixture';
+import { Depository } from './Depository';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Depository className="col-span-12" />
+    </div>
+  ),
+};

package/src/components/Depository/Depository.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Pagination } from '../../ui-kit/Pagination/Pagination';
+import { style } from '../../utils/style';
+import type { DepositoryContent } from './DepositoryContent';
+import { DepositoryItem } from './DepositoryItem';
+import { useDepository } from './useDepository';
+
+const DEFAULT_ITEMS_COUNT = 10;
+
+interface DepositoryProps extends DepositoryContent, UniBlockProps {}
+
+export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
+  ({ className, ...rest }) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+
+    const { totalPages = 0, items } = useDepository(itemCount, currentPage);
+
+    const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
+
+    return (
+      <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
+        <div className="flex flex-col">
+          <div className="grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b">
+            <span className="col-span-2 text-gray text-m">Дата</span>
+            <span className="col-span-10 text-gray text-m">Тема</span>
+          </div>
+          {items?.map((params) => (
+            <DepositoryItem key={String(params.publicId)} {...params} />
+          ))}
+          <Pagination
+            currentPage={currentPage + 1}
+            onPageChange={handleChangePage}
+            totalPages={totalPages + 1}
+          />
+        </div>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/Depository/Depository.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/Depository/DepositoryContent.ts

@@ -0,0 +1,3 @@
+import type { UniBlockContent } from '../../model/JSXBlock';
+
+export type DepositoryContent = UniBlockContent;

package/src/components/Depository/DepositoryItem.tsx

@@ -0,0 +1,21 @@
+import { useLink } from '../../hooks/useLink';
+import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { DepositoryDataItem } from './useDepository';
+
+export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+  const link = useLink();
+  const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
+
+  return (
+    <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
+      <div className="col-span-2 text-m">
+        <span>{convertTimestampToDate(timestamp)}</span>
+      </div>
+      <div className="col-span-10 text-h6 hover:text-primary-active">
+        <a href={href} download aria-label="Скачать">
+          {title}
+        </a>
+      </div>
+    </div>
+  );
+};

package/src/components/Depository/useDepository.ts

@@ -0,0 +1,23 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export interface DepositoryDataItem {
+  publicId?: number;
+  timestamp?: number;
+  title?: number;
+}
+
+interface DepositoryData {
+  content?: DepositoryDataItem[];
+  totalPages?: number;
+  totalElements?: number;
+}
+
+export const useDepository = (size: number, page: number) => {
+  const { data } = useAsyncData<DepositoryData>(
+    `/api/v1/depository?page=${page}&size=${size}`,
+    fetchJSONUnsafe,
+  );
+
+  return { items: data?.content, totalPages: data?.totalPages };
+};

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -1,9 +1,8 @@
-import '../../setup-fixture';
-
 import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
-import { ProductBlock } from './ProductBlock';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { ProductBlock } from './ProductBlock';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =
@@ -20,6 +19,16 @@ const image: Picture = {
   },
 };
 
+const imageCard: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 200,
+    height: 126,
+  },
+};
+
 const benefits: ComplexBenefitContent[] = [
   {
     type: 'default',
@@ -101,4 +110,15 @@ export default {
       />
     </div>
   ),
+  'image bottom': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        {...props}
+        image={imageCard}
+        benefits={benefits}
+        imageOptions={{ isBackground: true }}
+      />
+    </div>
+  ),
 };

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
 import { Text } from '../Text/Text';
 import type { InputProps } from './InputProps';
@@ -23,6 +23,7 @@ export const Input = JSX<InputProps>(
     pattern,
     autoFocus = false,
   }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
         onChange && onChange(e.target?.value || '');
@@ -30,6 +31,12 @@ export const Input = JSX<InputProps>(
       [onChange],
     );
 
+    useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [autoFocus, inputRef]);
+
     const paddingStyle = children ? 'pr-3xl' : '';
     const validStyle = valid
       ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
@@ -46,6 +53,7 @@ export const Input = JSX<InputProps>(
             </div>
           ) : null}
           <input
+            ref={inputRef}
             key={key}
             className={style(
               'w-full border rounded-md text-primary-text outline-none p-m',
@@ -62,7 +70,6 @@ export const Input = JSX<InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             pattern={pattern}
-            autoFocus={autoFocus}
           />
         </label>
         {children}

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

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon';
+import { renderPages } from './renderPages';
+
+export const paginationBlockStyle =
+  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+
+export interface PaginationProps {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+const ICON_SIZE = { width: '24', height: '24' };
+
+export const Pagination = ({ currentPage, onPageChange, totalPages }: PaginationProps) => {
+  const handlePrevPage = useCallback(() => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  }, [currentPage]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < totalPages - 1) {
+      onPageChange(currentPage + 1);
+    }
+  }, [currentPage, totalPages]);
+
+  const handleFirstPage = useCallback(() => onPageChange(1), []);
+  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
+
+  const pages = useMemo(
+    () =>
+      new Array(totalPages).fill({
+        currentPage,
+        onPageChange,
+        totalPages,
+      }),
+    [totalPages, currentPage],
+  );
+
+  return (
+    <div className="mt-3xl flex items-center select-none" role="navigation" aria-label="Пагинация">
+      <div className="flex gap-m items-center">
+        <div onClick={handlePrevPage}>
+          <Icon
+            name="ArrowLeftIcon"
+            iconVersion="black"
+            imageClassName={getIconStyle(currentPage === 1)}
+            {...ICON_SIZE}
+          />
+        </div>
+        <div className="flex gap-xs">
+          {currentPage > 1 ? (
+            <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
+              1
+            </div>
+          ) : null}
+          {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
+          {pages.map(renderPages)}
+          {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
+          {currentPage < totalPages ? (
+            <div
+              onClick={handleLastPage}
+              className={paginationBlockStyle}
+              aria-label={`Страница ${totalPages}}`}
+            >
+              {totalPages}
+            </div>
+          ) : null}
+        </div>
+        <div onClick={handleNextPage}>
+          <Icon
+            className="rotate-180"
+            name="ArrowLeftIcon"
+            iconVersion="black"
+            imageClassName={getIconStyle(currentPage === totalPages)}
+            {...ICON_SIZE}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const getIconStyle = (condition: boolean) =>
+  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';

package/src/ui-kit/Pagination/renderPages.tsx

@@ -0,0 +1,33 @@
+import { paginationBlockStyle, PaginationProps } from './Pagination';
+import { shouldRenderPage } from './shouldRenderPage';
+
+export const renderPages = (pagesParams: PaginationProps, index: number) => {
+  const { currentPage, onPageChange, totalPages } = pagesParams;
+  const page = index + 1;
+  if (page === currentPage) {
+    return (
+      <div
+        key={String(index)}
+        aria-current="true"
+        className="py-m px-lg bg-green-light text-white rounded-md"
+      >
+        {page}
+      </div>
+    );
+  }
+
+  if (page !== 1 && page !== totalPages && shouldRenderPage(page, currentPage, totalPages)) {
+    return (
+      <div
+        key={String(index)}
+        onClick={() => onPageChange(page)}
+        className={paginationBlockStyle}
+        aria-label={`Страница ${page}`}
+      >
+        {page}
+      </div>
+    );
+  }
+
+  return null;
+};

package/src/ui-kit/Pagination/shouldRenderPage.ts

@@ -0,0 +1,8 @@
+const checkPageRange = (page: number, currentPage: number, totalPages: number) =>
+  (currentPage <= 3 && page <= currentPage + 3) ||
+  (currentPage >= totalPages - 1 && page >= totalPages - 4);
+
+export const shouldRenderPage = (page: number, currentPage: number, totalPages: number) =>
+  (page < currentPage && page >= currentPage - 2) ||
+  (page <= currentPage + 2 && page > currentPage) ||
+  checkPageRange(page, currentPage, totalPages);

package/src/ui-kit/Select/filterOptions.ts

@@ -1,6 +1,3 @@
-import { compareBy, desc } from '../../utils/Comparator';
-import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
-import { zip } from '../../utils/zip';
 import type { Option } from './Option';
 
 export const filterOptions = (options: Option[], query: string | undefined): Option[] => {
@@ -8,12 +5,5 @@ export const filterOptions = (options: Option[], query: string | undefined): Opt
     return options;
   }
 
-  const ranking = options
-    .map((_) => _.text?.toLowerCase())
-    .map(jaroWinklerDistance(query?.trim().toLowerCase()));
-
-  return zip(options, ranking)
-    .filter(([, rank]) => rank >= 0.5)
-    .sort(desc(compareBy(([, rank]) => rank)))
-    .map(([option]) => option);
+  return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()))
 };

package/src/utils/convertTimestampToDate.ts

@@ -0,0 +1,15 @@
+export const convertTimestampToDate = (timestamp: number) => {
+  const date = new Date(timestamp * 1000);
+
+  let dd: string | number = date.getDate();
+  if (dd < 10) {
+    dd = '0' + dd;
+  }
+
+  let mm: string | number = date.getMonth() + 1;
+  if (mm < 10) {
+    mm = '0' + mm;
+  }
+
+  return dd + '.' + mm + '.' + date.getFullYear();
+};

package/src/utils/fetchMultitudeJSON.ts

@@ -5,5 +5,5 @@ export async function fetchMultitudeJSON<R = unknown>(
 ): Promise<Awaited<R | null>[]> {
   const fetchPromises = urls.map((url) => fetchJSON<R>(url));
 
-  return await Promise.all(fetchPromises);
+  return Promise.all(fetchPromises);
 }