@redneckz/wildless-cms-uni-blocks 0.8.30 → 0.9.0

package/src/components/Filtration/Filtration.fixture.tsx

@@ -0,0 +1,147 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { Filtration } from './Filtration';
+import type { FiltrationContent } from './FiltrationContent';
+
+const PROPERTY_APARTMENT = {
+  propertyType: 'apartment',
+};
+
+const PROPERTY_FLAT = {
+  propertyType: 'flat',
+};
+
+const PROPERTY_HOUSE = {
+  propertyType: 'house',
+};
+
+const STAGE_BUILT = {
+  stage: 'built',
+};
+
+const STAGE_IN_PROGRESS = {
+  stage: 'inProgress',
+};
+
+const EXTRA_MORTGAGE = {
+  extraOptions: 'preferentialMortgage',
+};
+
+const EXTRA_CHILDREN = {
+  extraOptions: 'children',
+};
+
+const CATEGORY_IT = {
+  categories: 'IT',
+};
+
+const CATEGORY_SALARY = {
+  categories: 'salaryClient',
+};
+
+const generateBlock = (...presets: any[]) => ({
+  type: 'ProductTile',
+  style: ['col-span-6'],
+  content: { ...presets.reduce((acc, p) => ({ ...acc, ...p })) },
+});
+
+const SCHEMA: FiltrationContent['filtrationSchema'] = {
+  propertyType: {
+    title: 'Тип недвижимости',
+    type: 'string',
+    enum: ['flat', 'apartment', 'house', 'storeRoom', 'parkingSpace'],
+    enumNames: ['Квартира', 'Апартаменты', 'Жилой дом', 'Кладовая', 'Машино-место'],
+  },
+  stage: {
+    title: 'Этап строительства',
+    type: 'string',
+    enum: ['built', 'inProgress'],
+    enumNames: ['Готовое жильё', 'Строящиеся'],
+  },
+  categories: {
+    title: 'Категории',
+    type: 'string',
+    enum: ['salaryClient', 'IT', 'youngFamily', 'military', 'medicalWorker', 'scientist'],
+    enumNames: [
+      'Зарплатный клиент',
+      'IT-специалист',
+      'Молодая семья',
+      'Военнослужащий',
+      'Медицинский работник',
+      'Научный сотрудник',
+    ],
+  },
+  extraOptions: {
+    title: 'Дополнительно',
+    type: 'string',
+    enum: ['preferentialMortgage', 'children'],
+    enumNames: ['Льготная ипотека', 'Дети'],
+  },
+};
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Filtration
+        className="col-span-12"
+        label="Другие ипотечные программы"
+        filtrationSchema={SCHEMA}
+        topItemsCount={2}
+        resetButton={{ text: 'Очистить фильтры', buttonVersion: 'secondary' }}
+        block={{
+          type: 'Filtration',
+          blocks: [
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_IN_PROGRESS,
+              EXTRA_MORTGAGE,
+              CATEGORY_IT,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_BUILT,
+              EXTRA_CHILDREN,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_FLAT,
+              STAGE_IN_PROGRESS,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_FLAT,
+              STAGE_BUILT,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_APARTMENT,
+              STAGE_BUILT,
+              EXTRA_CHILDREN,
+              CATEGORY_IT,
+            ),
+            generateBlock(
+              PRODUCT_TILE,
+              PROPERTY_HOUSE,
+              STAGE_BUILT,
+              EXTRA_MORTGAGE,
+              CATEGORY_SALARY,
+            ),
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/Filtration/Filtration.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm } from '../../hooks/useForm';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+import type { FiltrationContent } from './FiltrationContent';
+import { FiltrationInner } from './FiltrationInner';
+import { renderFormItem } from './renderFormItem';
+
+interface FiltrationProps extends FiltrationContent, UniBlockProps {}
+
+export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
+  ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+    const { formState, register, resetForm } = useForm();
+
+    return (
+      <BlockWrapper className={style('p-9', className)} {...rest}>
+        <form className="flex justify-between">
+          <div className="flex gap-11">
+            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
+          </div>
+          {resetButton ? (
+            <div>
+              <Button
+                className="w-72"
+                text={resetButton.text}
+                version={resetButton.buttonVersion}
+                onClick={resetForm}
+              />
+            </div>
+          ) : null}
+        </form>
+        <FiltrationInner filtrationState={formState} {...rest} />
+      </BlockWrapper>
+    );
+  },
+);
+
+Filtration.childrenTypes = ['ProductTile'];
+Filtration.childSchema = (content?: FiltrationContent) => content?.filtrationSchema || {};

package/src/components/Filtration/Filtration.ui.json

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

package/src/components/Filtration/FiltrationContent.ts

@@ -0,0 +1,87 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+
+/**
+ * @title Заголовок
+ */
+type Title = string;
+
+/**
+ * @title Ключи
+ */
+type Enum = string[];
+
+/**
+ * @title Имена
+ */
+type EnumNames = string[];
+
+export type StringEnum = {
+  title?: Title;
+  /**
+   * @default string
+   * @hidden
+   */
+  type?: 'string';
+  enum?: Enum;
+  enumNames?: EnumNames;
+};
+
+export type StringArray = {
+  title?: Title;
+  /**
+   * @default array
+   * @hidden
+   */
+  type?: 'array';
+  items?: {
+    /**
+     * @default string
+     * @hidden
+     */
+    type?: 'string';
+    enum?: Enum;
+    enumNames?: EnumNames;
+  };
+};
+
+// TODO: Make customizable to implement arbitrary filtration blocks
+export type FiltrationSchema = {
+  /** @title Тип недвижимости */
+  propertyType?: StringEnum;
+  /** @title Этап строительства */
+  stage?: StringEnum;
+  /** @title Категории */
+  categories?: StringEnum;
+  /** @title Дополнительно */
+  extraOptions?: StringEnum;
+};
+
+/**
+ * @title Кнопка сброса
+ */
+export type ResetButton = {
+  /**
+   * @title Текст кнопки
+   */
+  text: string;
+  /**
+   * @title Цвет кнопки
+   */
+  buttonVersion: ButtonVersion;
+};
+
+export interface FiltrationInnerContent {
+  /** @title Название кнопки */
+  label?: string;
+  /** @title Количество отображаемых предметов */
+  topItemsCount?: number;
+}
+
+/**
+ * @title Фильтрация
+ */
+export interface FiltrationContent extends FiltrationInnerContent {
+  /** @title Параметры фильтрации */
+  filtrationSchema?: FiltrationSchema;
+  resetButton?: ResetButton;
+}

package/src/components/Filtration/FiltrationInner.tsx

@@ -0,0 +1,67 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
+import type { IconName } from '../../icons/IconName';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { style } from '../../utils/style';
+import { ErrorBlock } from '../ErrorBlock/ErrorBlock';
+import { checkShouldRenderBlock } from './checkShouldRenderBlock';
+import type { FiltrationInnerContent } from './FiltrationContent';
+
+const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+
+const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
+
+interface FiltrationInnerProps extends FiltrationInnerContent, UniBlockProps {
+  filtrationState?: Record<string, any>;
+}
+
+export const FiltrationInner = JSX<FiltrationInnerProps>(
+  ({ label = '', filtrationState = {}, topItemsCount = 0, block, ...rest }) => {
+    const blocksToRender =
+      block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
+
+    const [visibleBlocks, hiddenBlocks] =
+      topItemsCount > 0
+        ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+        : [blocksToRender, []];
+
+    return (
+      <div>
+        <div className={style(blocksToRender.length ? 'hidden' : '')}>
+          <ErrorBlock
+            error={{ errorContentType: 'Image' }}
+            title="Нет подходящей ипотечной программы"
+            subtitle="Попробуйте очистить фильтры"
+          />
+        </div>
+        <div className={style(blocksToRender.length ? '' : 'hidden')}>
+          <div className={resultsGridStyle}>
+            {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
+          </div>
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => {
+              return (
+                <FoldableSection className={resultsGridStyle} isUnfolded={isUnfolded}>
+                  {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
+                </FoldableSection>
+              );
+            }}
+            renderFoldButton={({ isUnfolded, onToggle }) => (
+              <DefaultFoldButton
+                className="mt-11"
+                disabled={topItemsCount > hiddenBlocks.length}
+                label={label}
+                icon={ICONS[Number(isUnfolded)]}
+                dataTheme={rest.options?.page?.colorPalette}
+                onClick={onToggle}
+              />
+            )}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/Filtration/checkShouldRenderBlock.ts

@@ -0,0 +1,18 @@
+const isSingularFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    pattern[key] === undefined || pattern[key] === target[key];
+
+const isMultipleFieldMatch =
+  <P extends Partial<Record<string, any[]>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    pattern[key] === undefined || pattern[key]?.every((_) => target[key]?.includes(_));
+
+export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
+  Object.entries(pattern)
+    .map(([key, subPattern]) =>
+      Array.isArray(subPattern)
+        ? isMultipleFieldMatch(key, pattern)
+        : isSingularFieldMatch(key, pattern),
+    )
+    .every((predicate) => predicate(target));

package/src/components/Filtration/renderFormItem.tsx

@@ -0,0 +1,36 @@
+import type { FormElementRegisterer } from '../../hooks/useForm';
+import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
+import { Text } from '../../ui-kit/Text/Text';
+import type { FiltrationSchema, StringEnum } from './FiltrationContent';
+
+export const renderFormItem =
+  (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
+    const item = filtrationSchema[key as keyof typeof filtrationSchema];
+    const type = item?.type;
+
+    switch (type) {
+      case 'string':
+        return renderRadioButtons(key, register)(item);
+      default:
+        return null;
+    }
+  };
+
+const renderRadioButtons =
+  (key: string, register: FormElementRegisterer) => (item?: StringEnum) => {
+    const options =
+      item?.enum?.map((e, i) => ({ value: e, title: item?.enumNames?.[i] || '' })) || [];
+
+    return (
+      <div role="radiogroup" key={key}>
+        {item?.title ? (
+          <div className="mb-4">
+            <Text size="text-m" font="font-light" color="text-secondary-text">
+              {item.title}
+            </Text>
+          </div>
+        ) : null}
+        <SlideCheckboxGroup items={options} multiple={false} {...register(key)} />
+      </div>
+    );
+  };

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

@@ -7,7 +7,7 @@ import type { ImageSize } from '../model/ImageSize';
 import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
 import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
 import type { TransformationOptions } from './TransformationOptions';
-import { transformSrc } from './transformSrc';
+import { transformImgPath } from './transformImgPath';
 
 const mkdir = util.promisify(fs.mkdir);
 
@@ -59,21 +59,18 @@ export async function transformImg({
     chain = chain.toFormat(format, options);
   }
 
-  const transformedSrc = transformSrc(src, transformationOptions);
-  const transformedImgPath = `${publicDir}/${path.relative(
-    contentDir,
-    `${path.dirname(pagePath)}/${transformedSrc}`,
-  )}`;
+  const transformedImgPath = transformImgPath(src, { pageDir, contentDir }, transformationOptions);
+  const imgPublicPath = path.join(publicDir, transformedImgPath);
 
-  await mkdir(path.dirname(transformedImgPath), { recursive: true });
+  await mkdir(path.dirname(imgPublicPath), { recursive: true });
 
   try {
-    await chain.toFile(transformedImgPath);
+    await chain.toFile(imgPublicPath);
   } catch (e) {
     console.error(e);
   }
 
-  return transformedSrc;
+  return transformedImgPath;
 }
 
 function createBackgroundImageChain({ width, height }: ImageSize) {

package/src/content-page-repository/{transformSrc.ts → transformImgPath.ts}

@@ -1,10 +1,16 @@
 import path from 'path';
 import type { ImgSource } from '../model/Picture';
-import type { TransformationOptions } from './TransformationOptions';
 import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+import type { TransformationOptions } from './TransformationOptions';
 
-export function transformSrc(
+interface DirectoryParams {
+  pageDir: string;
+  contentDir: string;
+}
+
+export function transformImgPath(
   src: string,
+  { pageDir, contentDir }: DirectoryParams,
   { format, size }: TransformationOptions & ImgSource,
 ): string {
   const noTransform = isPictureSizeEmpty(size) && !format;
@@ -12,10 +18,13 @@ export function transformSrc(
     return src;
   }
 
+  const imgPath = path.relative(contentDir, path.join(pageDir, src));
+  const imgDir = path.dirname(imgPath);
+
   const fileName = path.basename(src, path.extname(src));
   const fileSizes = [size?.width, size?.height].filter(Boolean);
   const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
   const ext = format ? String(format) : 'webp';
 
-  return `${fileName}${suffix}.${ext}`;
+  return path.join(imgDir, `${fileName}${suffix}.${ext}`);
 }

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

@@ -19,10 +19,7 @@ export async function transformPicture(
   });
 
   const { width, height } = await sharp(
-    path.resolve(
-      options.publicDir,
-      path.relative(options.contentDir, `${path.dirname(pagePath)}/${transformedPicture}`),
-    ),
+    path.resolve(options.publicDir, transformedPicture),
   ).metadata();
 
   const containerSize = width && height ? { width, height } : undefined;
@@ -40,10 +37,10 @@ export async function transformPicture(
 
   return {
     ...picture,
-    src: transformedPicture,
+    src: path.join('/', transformedPicture),
     sources: transformedSources.map((_, i) => ({
       ...sources[i],
-      src: _,
+      src: path.join('/', _),
       size: { width, height },
     })),
   };

package/src/hooks/useForm.ts

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export type FormElementRegisterer = ReturnType<typeof useForm>['register'];
+
+export const useForm = <FormState extends Record<string, any>>(
+  initialState: Partial<FormState> = {},
+) => {
+  const [formState, setFormState] = useState<Partial<FormState>>(initialState);
+
+  const handlersMap = useRef<Partial<Record<keyof FormState, () => void>>>({});
+
+  const register = <FieldName extends keyof FormState>(fieldName: FieldName) => {
+    if (!handlersMap.current) {
+      return {};
+    }
+
+    const handler = (value?: FormState[FieldName]) => {
+      setFormState((prev) => ({ ...prev, [fieldName]: value }));
+    };
+
+    handlersMap.current[fieldName] ||= handler;
+
+    return { value: formState?.[fieldName], onChange: handlersMap.current[fieldName] };
+  };
+
+  const resetForm = useCallback(() => setFormState({}), []);
+
+  return { formState, register, resetForm };
+};

package/src/model/JSXBlock.ts

@@ -1,4 +1,5 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
+import type { JSONSchema7Definition } from 'json-schema';
 import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
 import type { SlotName } from './BlockDecorator';
 import type { BlockVersion } from './BlockVersion';
@@ -26,5 +27,6 @@ export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComp
   VNode | VNode[]
 > & {
   childrenTypes?: string[] | { include?: string[]; exclude?: string[] };
+  childSchema?: (content: BlockDef['content']) => Record<string, JSONSchema7Definition>;
   slots?: (props: BlockProps) => SlotName[];
 };

package/src/ui-kit/ControlProps.ts

@@ -0,0 +1,4 @@
+export interface ControlProps<T> {
+  value?: T;
+  onChange?: (value: T | undefined) => void;
+}

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ColorPalette } from '../../model/ContentPageDef';
+import { style } from '../../utils/style';
 import type { IconName } from '../Icon/IconProps';
 import { Img } from '../Img/Img';
 import type { FoldablePartProps } from './FoldablePartProps';
@@ -9,25 +10,30 @@ interface DefaultFoldButtonProps {
   label: string;
   icon: IconName;
   dataTheme?: ColorPalette;
+  disabled?: boolean;
   onClick?: () => void;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
     const STATE_STYLE =
       'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
     const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
 
     return (
       <button
-        className={[
+        className={style(
           'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
           STATE_STYLE,
           DIMENSIONS_STYLE,
+          disabled
+            ? 'bg-main-divider text-main-disabled cursor-not-allowed hover:bg-main-divider active:bg-main-divider'
+            : '',
           className,
-        ].join(' ')}
-        data-theme={dataTheme}
+        )}
         onClick={onClick}
+        disabled={disabled}
+        data-theme={dataTheme}
       >
         <span className="text-h4 pr-3">{label}</span>
         {icon ? (

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

@@ -3,7 +3,7 @@ import { SlideCheckbox } from './SlideCheckbox';
 export default {
   primary: (
     <div className="bg-white">
-      <SlideCheckbox checked={true} text={'Checkbox'} />
+      <SlideCheckbox value={true} text={'Checkbox'} />
     </div>
   ),
 };

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

@@ -1,33 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
+import { Text } from '../Text/Text';
 
 interface SlideCheckboxProps {
-  checked?: boolean;
+  value?: boolean;
   text?: string;
-  onClick?: () => void;
+  type?: 'checkbox' | 'radio';
+  onChange?: (value: boolean) => void;
 }
-export const SlideCheckbox = JSX<SlideCheckboxProps>(({ checked, text, onClick }) => (
-  <div
-    role="checkbox"
-    aria-checked={checked}
-    className="flex justify-start items-center w-full cursor-pointer mb-4"
-    onClick={() => onClick && onClick()}
-  >
+export const SlideCheckbox = JSX<SlideCheckboxProps>(
+  ({ value = false, text, type = 'checkbox', onChange }) => (
     <div
-      className={`relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${
-        checked ? 'bg-primary-main' : 'bg-main-divider'
-      }`}
+      role={type}
+      aria-checked={value}
+      className="flex justify-start items-center w-full cursor-pointer mb-4"
+      onClick={() => onChange && onChange(!value)}
     >
       <div
-        className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${
-          checked ? 'left-[50%]' : 'left-[5%]'
+        className={`relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${
+          value ? 'bg-primary-main' : 'bg-main-divider'
         }`}
-      />
+      >
+        <div
+          className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${
+            value ? 'left-[50%]' : 'left-[5%]'
+          }`}
+        />
+      </div>
+      <div>
+        <Text size="text-m" font="font-light" color="text-primary-text">
+          {text}
+        </Text>
+      </div>
     </div>
-    <div>
-      <Text size="text-m" font="font-light" color="text-primary-text">
-        {text}
-      </Text>
-    </div>
-  </div>
-));
+  ),
+);