@true-engineering/true-react-common-ui-kit 4.0.0-alpha67 → 4.0.0-alpha69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha67",
+  "version": "4.0.0-alpha69",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -275,7 +275,6 @@ const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
         ]}
         filtersConfig={config}
         values={values}
-        localeKey="ru"
         locale={{ searchPlaceholder: 'Поиск' }}
         onChangeFilters={setValues}
         onSettingsButtonClick={shouldShowSettingsButton ? () => null : undefined}
@@ -289,6 +288,7 @@ const meta: Meta<typeof Story> = {
   title: 'Table/FiltersPane',
   component: Story,
   args: {
+    localeKey: 'ru',
     shouldShowSettingsButton: false,
     isSearchDisabled: false,
     hasClearButton: true,
@@ -302,6 +302,7 @@ const meta: Meta<typeof Story> = {
     isSearchAutoSized: false,
   },
   argTypes: {
+    localeKey: { control: 'inline-radio', options: ['ru', 'en'] },
     containerWidth: {
       control: { type: 'range', min: 500, max: 1400, step: 100 },
     },

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -1,17 +1,23 @@
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { format } from 'date-fns';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ICommonProps } from '../../../../types';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  isObject,
+} from '@true-engineering/true-react-platform-helpers';
+import { ITweakStylesProps } from '../../../../types';
 import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
-import { defaultConvertFunction, getLocale } from '../../helpers';
-import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
+import { getLocale } from '../../helpers';
+import { IDateRangeConfigItem, IPeriod } from '../../types';
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
 export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
-  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
-    ICommonProps<IFilterValueViewStyles> {}
+  extends Pick<IFilterWrapperProps<Values, Key>, 'value' | 'filter' | 'localeKey' | 'locale'>,
+    ITweakStylesProps<IFilterValueViewStyles> {
+  value: Values[Key];
+}
 
 export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
   value,
@@ -19,8 +25,8 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
   locale,
   localeKey,
   tweakStyles,
-}: IFilterValueView<Values, Key>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+}: IFilterValueView<Values, Key>): ReactNode {
+  const classes = useStyles({ tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;
   const translates = useMemo(
@@ -28,36 +34,26 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
     [translatesLocaleKey, locale, filter.locale],
   );
 
-  if (isEmpty(value)) {
-    return <></>;
-  }
-
   if (isNotEmpty(filter.getSelectedValueView)) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
 
-  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
-  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
-  const isDateRange = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
-
   const displayValue = (v: unknown): string => {
     if (!isNotEmpty(v)) {
       return '';
     }
 
     if (v instanceof Date) {
-      return format(
-        v,
-        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
-      );
+      const { dateFormat = DEFAULT_DATE_FORMAT } = filter as IDateRangeConfigItem<unknown>;
+      return format(v, dateFormat);
     }
 
-    if (typeof v === 'object' && 'value' in v && isNotEmpty(v.value)) {
-      return String(v.value);
+    if (!isObject(v)) {
+      return String(v);
     }
 
-    if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
-      return String(v);
+    if ('value' in v && isNotEmpty(v.value)) {
+      return String(v.value);
     }
 
     console.warn(
@@ -69,99 +65,72 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
   };
 
   if (filter.type === 'select') {
-    const getView = filter.getValueView ?? defaultConvertFunction;
+    const getView = filter.getValueView ?? displayValue;
     return <span className={classes.text}>{getView(value)}</span>;
   }
 
-  if (filter.type === 'multiSelect') {
-    const multiSelectValue = value as IMultiSelectListValues<any>;
-    const getView = filter.getValueView ?? defaultConvertFunction;
-    const { include } = multiSelectValue;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getArrayView = (values: unknown, getView: (_: any) => ReactNode = displayValue) => {
+    if (!Array.isArray(values) || !isArrayNotEmpty(values)) {
+      return null;
+    }
 
+    const [first, ...rest] = values;
     return (
       <>
-        {Array.isArray(include) && include.length > 0 && (
-          <>
-            <span className={classes.text}>{getView(include[0])}</span>
-            <span className={classes.count}>
-              {include.length > 1 && ` (+${include.length - 1})`}
-            </span>
-          </>
-        )}
+        <span className={classes.text}>{getView(first)}</span>
+        {isArrayNotEmpty(rest) && <span className={classes.count}> (+{rest.length})</span>}
       </>
     );
-  }
-
-  if (filter.type === 'interval') {
-    const intervalValue = value as unknown as number[];
-    const intervalValueFrom = intervalValue[0];
-    const intervalValueTo = intervalValue[1];
+  };
 
-    const intervals: string[] = [];
-    if (intervalValueFrom !== undefined) {
-      intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
-    }
-    if (intervalValueTo !== undefined) {
-      intervals.push(`${translates.to.toLowerCase()} ${String(intervalValueTo)}`);
-    }
+  if (filter.type === 'multiSelect') {
+    const { include } = value as Partial<IMultiSelectListValues<unknown>>;
+    return getArrayView(include, filter.getValueView);
+  }
 
-    return <span className={classes.text}>{intervals.join(' ')}</span>;
+  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
+  if (isMultiple) {
+    return getArrayView(value, filter.getSelectedValue);
   }
 
+  const isDateRange = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
   if (isDateRange) {
-    const { from, to, periodType, label } = value as unknown as IPeriod;
-    const hasFrom = from !== undefined && from !== null;
-    const hasTo = to !== undefined && to !== null;
+    const { from, to, periodType = 'CUSTOM' } = value as Partial<IPeriod>;
 
     if (periodType !== 'CUSTOM') {
-      return <span className={classes.text}>{displayValue(label)}</span>;
+      return <span className={classes.text}>{translates.periods[periodType] ?? periodType}</span>;
     }
 
+    const hasFrom = isNotEmpty(from);
+    const hasTo = isNotEmpty(to);
     const range: string[] = [];
-    if (hasFrom) {
-      if (!hasTo) {
-        range.push(translates.from.toLowerCase());
-      }
-      range.push(displayValue(from));
-    }
-    if (hasTo) {
-      if (hasFrom) {
-        range.push('—');
-      } else {
-        range.push(translates.to.toLowerCase());
-      }
-      range.push(displayValue(to));
+    if (hasFrom && hasTo) {
+      range.push(displayValue(from), '—', displayValue(to));
+    } else if (hasFrom) {
+      range.push(translates.from.toLowerCase(), displayValue(from));
+    } else if (hasTo) {
+      range.push(translates.to.toLowerCase(), displayValue(to));
+    } else {
+      return null;
     }
 
     return <span className={classes.text}>{range.join(' ')}</span>;
   }
 
-  if (isMultiple) {
-    const convertValue = filter.getSelectedValue ?? displayValue;
-
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{convertValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
-  if (isRange && Array.isArray(value)) {
-    const rangeValue = value as unknown as number[];
-    const rangeValueFrom = rangeValue[0];
-    const rangeValueTo = rangeValue[1];
+  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
+  if (isRange || filter.type === 'interval') {
+    if (!Array.isArray(value)) {
+      return null;
+    }
 
+    const [valueFrom, valueTo] = value;
     const range: string[] = [];
-    if (rangeValueFrom !== undefined) {
-      range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
+    if (isNotEmpty(valueFrom)) {
+      range.push(translates.from.toLowerCase(), displayValue(valueFrom));
     }
-    if (rangeValueTo !== undefined) {
-      range.push(`${translates.to.toLowerCase()} ${String(rangeValueTo)}`);
+    if (isNotEmpty(valueTo)) {
+      range.push(translates.to.toLowerCase(), displayValue(valueTo));
     }
 
     return <span className={classes.text}>{range.join(' ')}</span>;

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -86,7 +86,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
       if (onClose !== undefined) {
         onClose();
       }
-      onChange({ ...p, label: getPeriodTranslate(periodType) });
+      onChange(p);
     }
 
     setIsPeriodPickerShown(false);

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,10 +1,6 @@
 import { MouseEventHandler } from 'react';
 import clsx from 'clsx';
-import {
-  addDataAttributes,
-  getTestId,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useMixedStyles, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -105,14 +101,13 @@ export function FilterWrapper<Values extends Record<string, unknown>, Key extend
             className={clsx(classes.item, { [classes.booleanItem]: isBoolean })}
           >
             <div className={classes.name}>{filter.name}</div>
-            {!isBoolean && isNotEmpty(value) && (
+            {!isBoolean && hasValue && (
               <div className={classes.value}>
                 <FilterValueView
                   value={value}
                   filter={filter}
                   locale={locale}
                   localeKey={localeKey}
-                  testId={getTestId(testId, 'value')}
                   tweakStyles={tweakFilterValueViewStyles}
                 />
               </div>

package/src/components/FiltersPane/components/FilterWrapper/helpers.ts

@@ -1,6 +1,6 @@
 import { isNotEmpty, isObject } from '@true-engineering/true-react-platform-helpers';
 
-export const isContentNotEmpty = (value: unknown): boolean => {
+export const isContentNotEmpty = <T>(value: T): value is NonNullable<T> => {
   if (Array.isArray(value)) {
     return value.some(isContentNotEmpty);
   }

package/src/components/FiltersPane/types.ts

@@ -37,7 +37,6 @@ export interface IDatePeriod {
 
 export interface IPeriod extends IDatePeriod {
   periodType: string;
-  label?: string;
 }
 
 export type IPeriodGetter = () => IDatePeriod;

package/src/components/Notification/Notification.stories.tsx

@@ -39,7 +39,9 @@ const meta: Meta<typeof Story> = {
     shouldUseChildrenInstead: false,
   },
   argTypes: {
-    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    icon: { options: [undefined, null, ...Object.keys(iconsMap)], control: 'select' },
+    size: { options: ['s', 'm', 'l'], control: 'inline-radio' },
+    type: { options: ['info', 'error', 'warning', 'ok', 'not-ok', 'custom'], control: 'select' },
   },
   parameters: {
     controls: {

package/src/components/Notification/Notification.tsx

@@ -3,11 +3,11 @@ import clsx from 'clsx';
 import {
   addDataAttributes,
   addDataTestId,
+  isNotEmpty,
   isReactNodeNotEmpty,
-  isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
-import { Icon, IIcon, renderIcon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { INotificationType } from './types';
 import { useStyles, INotificationStyles } from './Notification.styles';
 
@@ -15,11 +15,11 @@ export interface INotificationProps extends ICommonProps<INotificationStyles> {
   type: INotificationType;
   /** @default true */
   isFullWidth?: boolean;
-  text?: string;
-  title?: string;
+  text?: ReactNode;
+  title?: ReactNode;
   /** @default 's' */
   size?: 's' | 'm' | 'l';
-  icon?: IIcon;
+  icon?: IIcon | null;
   children?: ReactNode;
 }
 
@@ -32,15 +32,13 @@ export const Notification: FC<INotificationProps> = ({
   testId,
   size = 's',
   data,
-  icon,
+  icon = type !== 'custom' ? `status-${type}` : undefined,
   tweakStyles,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const hasText = isStringNotEmpty(text);
-  const hasTitle = isStringNotEmpty(title);
-  const isDefaultType = type !== 'custom';
-  const hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
+  const hasText = isReactNodeNotEmpty(text);
+  const hasTitle = isReactNodeNotEmpty(title);
 
   return (
     <div
@@ -51,13 +49,7 @@ export const Notification: FC<INotificationProps> = ({
       })}
       {...addDataAttributes(data, testId)}
     >
-      {hasIcon && (
-        <div className={classes.icon}>
-          {isReactNodeNotEmpty(icon)
-            ? renderIcon(icon)
-            : isDefaultType && <Icon type={`status-${type}`} />}
-        </div>
-      )}
+      {isNotEmpty(icon) && <div className={classes.icon}>{renderIcon(icon)}</div>}
       <div className={classes.body}>
         {hasTitle && (
           <span className={classes.title} {...addDataTestId(testId, 'title')}>