@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.11.0

package/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -0,0 +1,75 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm';
+import type { VNode } from '../../model/VNode';
+import { Button } from '../Button/Button';
+import { SlideCheckboxGroup } from '../SlideCheckboxGroup/SlideCheckboxGroup';
+import { Text } from '../Text/Text';
+import type {
+  BaseFiltrationInnerContent,
+  NumberRange,
+  NumberValue,
+  StringArray,
+  StringEnum,
+} from './BaseFiltrationContent';
+
+type SchemaItem = StringArray | StringEnum | NumberRange | NumberValue;
+type FiltrationSchema = Record<string, SchemaItem>;
+
+interface RenderFiltrationFormProps {
+  field: FormFieldRegisterer<any>;
+  reset: () => void;
+  filtrationSchema: FiltrationSchema;
+  resetButton?: BaseFiltrationInnerContent['resetButton'];
+  children?: VNode;
+}
+
+export const renderFiltrationForm = ({
+  field,
+  reset,
+  filtrationSchema,
+  resetButton,
+  children,
+}: RenderFiltrationFormProps) => (
+  <form className="flex justify-between bg-white p-9 mb-1">
+    <div className="flex gap-11">
+      {children}
+      {Object.entries(filtrationSchema).map(renderFormItem(field))}
+    </div>
+    {resetButton ? (
+      <div>
+        <Button className="w-72 ml-3" onClick={reset} {...resetButton} />
+      </div>
+    ) : null}
+  </form>
+);
+
+const renderFormItem =
+  (field: FormFieldRegisterer<any>) =>
+  ([key, item]: [string, SchemaItem]) => {
+    const type = item?.type;
+
+    switch (type) {
+      case 'array':
+        return renderCheckboxes(key, field)(item);
+      default:
+        return null;
+    }
+  };
+
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
+  const options =
+    item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+    [];
+
+  return (
+    <div 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 {...field<string, string[] | undefined>(key)} />
+    </div>
+  );
+};

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

@@ -1,24 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Text } from '../Text/Text';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
-export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
-  const {
-    className = '',
-    icon,
-    label,
-    description,
-    version = 'primary',
-    benefitsVersion = 'normal',
-  } = props;
-  const listItemAlign = description ? 'items-start' : 'items-center';
-
-  return (
-    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
+export const BenefitItem = JSX<BenefitGeneralProps>(
+  ({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (
+    <div className={style('flex gap-5', description ? 'items-start' : 'items-center', className)}>
       {icon ? (
         <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
           <Img
@@ -27,19 +20,24 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
           />
         </div>
       ) : null}
-      <div className="gap-0.5">
+      <div>
         {label ? (
-          <div className="text-h6 text-primary-text group-data-secondary:text-white">{label}</div>
+          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+            {label}
+          </Text>
         ) : null}
         {description ? (
-          <div className="text-m-light text-secondary-text group-data-secondary:text-white">
+          <Paragraph
+            size="text-m-light"
+            color="text-secondary-text group-data-secondary:text-white"
+          >
             {description}
-          </div>
+          </Paragraph>
         ) : null}
       </div>
     </div>
-  );
-});
+  ),
+);
 
 function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
   let bgColorStyle = 'bg-primary-main text-black';

package/src/ui-kit/BlockWrapper.tsx

@@ -20,15 +20,7 @@ export const blockStyles: Record<BlockVersion, string> = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({
-    className = '',
-    version = 'primary',
-    isTheme = true,
-    block,
-    tag = 'section',
-    role,
-    children,
-  }) => {
+  ({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);

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

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 

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

@@ -15,7 +15,7 @@ export const renderButtonsSection = (
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
-    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className)}>
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;

package/src/ui-kit/ControlProps.ts

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

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

@@ -1,39 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { clamp } from '../../utils/clamp';
-import { Input } from '../Input/Input';
-import { adjustValue, localNumberFormat } from './adjustValue';
-import type { CurrencyInputProps } from './CurrencyInputProps';
-
-export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
-    const handleChange = useCallback(
-      (inputValue: string) => {
-        const adjustedVal = adjustValue(inputValue);
-        const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-        onChange && onChange(clampVal);
-      },
-      [onChange],
-    );
-
-    const handleBlur = useCallback(() => {
-      onChange && onChange(localNumberFormat(value));
-    }, [onChange, value]);
-
-    return (
-      <Input
-        className={className}
-        inputClassName="w-full"
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        {...inputProps}
-      >
-        <span className="text-xl-light absolute right-4 bottom-4">₽</span>
-      </Input>
-    );
-  },
-);
-
-const getClampValue = (val: string, clampVal: number): string =>
-  Number(val) === clampVal ? val : String(clampVal);
+import { NumberInput, NumberInputProps } from '../NumberInput/NumberInput';
+import { Text } from '../Text/Text';
+
+export const CurrencyInput = JSX<NumberInputProps>((props) => (
+  <NumberInput {...props} fractionDigits={2}>
+    <div className="absolute right-4 bottom-4">
+      <Text size="text-xl" font="font-light">
+        ₽
+      </Text>
+    </div>
+  </NumberInput>
+));

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

@@ -19,7 +19,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     return (
       <button
         className={style(
-          'flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text',
+          'flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text',
           disabled
             ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
             : 'bg-primary-main text-white hover:bg-primary-hove',

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

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Heading } from './Heading';
 
 export default {

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

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Heading } from './Heading';
 
 export default {

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

@@ -1,5 +1,6 @@
-import { IconMap } from '../../icons/IconName';
 import '../../setup-fixture';
+
+import { IconMap } from '../../icons/IconName';
 import { Icon } from './Icon';
 
 export default {

package/src/ui-kit/Icon/IconProps.ts

@@ -2,6 +2,7 @@ import type { IconName } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
+export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
 
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
@@ -20,3 +21,7 @@ export type IconProps = IconCompatibilityFields & {
   name?: IconName;
   iconVersion?: IconVersion;
 };
+
+export interface RoundedIconProps extends IconProps {
+  iconBgVersion?: IconBgVersion;
+}

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

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from './Icon';
+import type { IconBgVersion, RoundedIconProps } from './IconProps';
+import { style } from '../../utils/style';
+
+const iconBgStyles: Record<IconBgVersion, string> = {
+  primary: 'bg-main-divider',
+  secondary: 'bg-white/30',
+  'secondary-light': 'bg-secondary-light',
+};
+
+export const RoundedIcon = JSX<RoundedIconProps>(({ iconBgVersion = 'primary', ...rest }) => (
+  <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
+    <Icon {...rest} />
+  </div>
+));

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

@@ -1,21 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
 import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
   ({
+    key,
     className = '',
     inputClassName = '',
     id,
     name,
     type = 'text',
     label,
+    placeholder,
     value = '',
     valid = true,
     children,
     onChange,
-    ...inputProps
+    onFocus,
+    onBlur,
+    pattern,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -31,21 +36,33 @@ export const Input = JSX<InputProps>(
 
     return (
       <div className={style('relative', className)}>
-        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
-        <input
-          className={style(
-            'w-full border rounded-md text-primary-text outline-none p-4',
-            paddingStyle,
-            validStyle,
-            inputClassName,
-          )}
-          id={id}
-          name={name || id}
-          type={type}
-          value={value}
-          onInput={handleChange as any}
-          {...inputProps}
-        />
+        <label>
+          {label ? (
+            <div className="mb-2">
+              <Text size="text-m" font="font-light">
+                {label}
+              </Text>
+            </div>
+          ) : null}
+          <input
+            key={key}
+            className={style(
+              'w-full border rounded-md text-primary-text outline-none p-4',
+              paddingStyle,
+              validStyle,
+              inputClassName,
+            )}
+            id={id}
+            name={name || id}
+            placeholder={placeholder}
+            type={type}
+            value={value}
+            onInput={handleChange as any}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            pattern={pattern}
+          />
+        </label>
         {children}
       </div>
     );

package/src/ui-kit/Input/InputProps.ts

@@ -1,7 +1,8 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { InputTypes } from '../../model/InputTypes';
+import type { ControlProps } from '../ControlProps';
 
-export type InputProps = LabelProps & {
+export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   className?: string;
   inputClassName?: string;
   id?: string;
@@ -9,10 +10,8 @@ export type InputProps = LabelProps & {
   type?: InputTypes;
   placeholder?: string;
   pattern?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  onInput?: (event: any) => void;
   onFocus?: (event: any) => void;
   onBlur?: () => void;
   valid?: boolean;
-};
+  disabled?: boolean;
+}

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

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
 import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Text } from '../Text/Text';
 import type { InputRangeProps } from './InputRangeProps';
 import { parseDecimal } from './parseDecimal';
@@ -13,8 +14,8 @@ const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 const DEFAULT_MIN = 1;
 const DEFAULT_MAX = 100;
 
-export const InputRange = JSX<InputRangeProps>(
-  ({
+export const InputRange = JSX<InputRangeProps>((props) => {
+  const {
     className,
     title,
     items = [],
@@ -25,54 +26,47 @@ export const InputRange = JSX<InputRangeProps>(
     value = list[0] || min,
     disabled = false,
     onChange,
-  }) => {
-    const [isFocused, setFocused] = useState(false);
+  } = props;
 
-    const handleChange = useCallback(
-      (e: { target?: { value?: string } }) => {
-        onChange && onChange(parseDecimal(e.target?.value));
-      },
-      [onChange],
-    );
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: number | undefined = 0) =>
+      list.length ? closestValue(list)(_) : clamp(_, min, max),
+    format: toLocalNumberFormat(),
+  });
 
-    const handleFocus = useCallback(() => {
-      setFocused(true);
-    }, []);
+  const handleChange = useCallback(
+    (e: { target?: { value?: string } }) => {
+      onChange && onChange(parseDecimal(e.target?.value));
+    },
+    [onChange],
+  );
 
-    const handleBlur = useCallback(() => {
-      setFocused(false);
-      onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
-    }, [onChange, value]);
-
-    return (
-      <div className={className}>
-        <label className="block relative">
-          {title ? (
-            <Text size="text-m" font="font-light" color="text-primary-text">
-              {title}
-            </Text>
-          ) : null}
-          <input
-            className={style(
-              'm-0 mt-2 font-sans text-h3 w-full h-14',
-              'border border-solid border-gray rounded-md outline-none',
-              'p-0 pl-4 box-border',
-              'text-primary-text hover:border-primary-hover focus:border-primary-text',
-              DISABLED_INPUT_CLASSES,
-            )}
-            value={isFocused ? value : addSpacesBetweenNumbers(value)}
-            disabled={disabled}
-            onInput={handleChange as any}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
-        </label>
-        {renderRangeCaption(items)}
-      </div>
-    );
-  },
-);
+  return (
+    <div className={className}>
+      <label className="block relative">
+        {title ? (
+          <Text size="text-m" font="font-light" color="text-primary-text">
+            {title}
+          </Text>
+        ) : null}
+        <input
+          className={style(
+            'm-0 mt-2 font-sans text-h3 w-full h-14',
+            'border border-solid border-gray rounded-md outline-none',
+            'p-0 pl-4 box-border',
+            'text-primary-text hover:border-primary-hover focus:border-primary-text',
+            DISABLED_INPUT_CLASSES,
+          )}
+          disabled={disabled}
+          onInput={handleChange as any}
+          {...normalizedProps}
+        />
+        {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
+      </label>
+      {renderRangeCaption(items)}
+    </div>
+  );
+});
 
 const closestValue = (list: number[]) => (_: number) =>
   list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));

package/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,14 +1,12 @@
+import type { InputProps } from '../Input/InputProps';
 import type { ListContent } from '../List/ListContent';
 
-export interface InputRangeProps extends ListContent {
-  className?: string;
+export interface InputRangeProps extends ListContent, InputProps<number> {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  value?: number;
   title?: string;
   disabled?: boolean;
-  onChange?: (value: number) => void;
 }

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

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { LinkButton } from './LinkButton';
 
 export default {

package/{mobile/src/components/LinkList/linkListContentExample.ts → src/ui-kit/LinkList/LinkList.fixture.tsx}

@@ -1,7 +1,9 @@
-import type { LinkListContent } from './LinkListContent';
+import '../../setup-fixture';
+import { LinkList } from './LinkList';
+import { LinkListProps } from './LinkListProps';
 
-export const linkDocsContentExample: LinkListContent = {
-  documents: [
+export const props: LinkListProps = {
+  items: [
     { text: 'target self', href: '/abc1/cooldoc/', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf/', target: '_blank' },
     { text: 'GlassIcon', href: '/abc3/map/' },
@@ -20,3 +22,11 @@ export const linkDocsContentExample: LinkListContent = {
     },
   ],
 };
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <LinkList className="col-span-12" {...props} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { LinkListProps } from './LinkListProps';
+import { linkListStyles } from './linkListStyles';
+
+export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
+  items?.length ? (
+    <ul className={style('flex flex-col p-0', linkListStyles, className)}>
+      {items.map(renderLinkListItem)}
+    </ul>
+  ) : null,
+);
+
+const renderLinkListItem = (item: LinkProps, i: number) => {
+  const { text, ...linkProps } = item;
+
+  return (
+    <li key={`list_item_${String(i)}`} className="list-none mb-4 sm:mb-6 sm:last:mb-0">
+      <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
+        {text ? text : null}
+      </a>
+    </li>
+  );
+};

package/src/ui-kit/LinkList/LinkListProps.tsx

@@ -0,0 +1,6 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+export interface LinkListProps {
+  items?: LinkProps[];
+  className?: string;
+}

package/src/ui-kit/LinkList/linkListStyles.mobile.ts

@@ -0,0 +1 @@
+export const linkListStyles = '';

package/src/ui-kit/LinkList/linkListStyles.ts

@@ -0,0 +1 @@
+export const linkListStyles = 'text-s text-secondary-text';

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

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { List } from './List';
 
 const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { ListItem } from './ListItem';
 import type { ListItemSize, ListProps } from './ListProps';
 
@@ -8,28 +9,26 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   L: 'text-h5',
 };
 
-const ITEM_INDENT_MAP = {
+const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
   S: 'ml-2',
   M: 'ml-3',
   L: 'ml-4',
 };
 
 export const List = JSX<ListProps>(
-  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+  ({ className, hasIndent, isDotted, items, listItemSize = 'M' }) =>
     items?.length ? (
       <section
-        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
-          TEXT_SIZE_MAP[listItemSize]
-        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        className={style(
+          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          TEXT_SIZE_MAP[listItemSize],
+          hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
+          className,
+        )}
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem
-            key={String(i)}
-            className={itemClassName}
-            isDotted={isDotted}
-            size={listItemSize}
-          >
+          <ListItem key={String(i)} isDotted={isDotted} size={listItemSize}>
             {item}
           </ListItem>
         ))}