@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/FiltersPane/FiltersPane.styles.ts

@@ -0,0 +1,71 @@
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const FILTER_HEIGHT = 36;
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    width: '100%',
+  },
+
+  settings: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+  },
+
+  settingsIcon: {
+    width: 16,
+    height: 16,
+  },
+
+  clear: {
+    display: 'flex',
+    alignItems: 'center',
+    height: FILTER_HEIGHT,
+  },
+
+  filterWithClearButton: {
+    display: 'flex',
+    gap: 16,
+    minWidth: 0,
+  },
+
+  // TODO: удалить когда появятся текстовые кнопки
+  tweakClearButton: {
+    s: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      minWidth: 'unset',
+    },
+
+    text: {
+      background: 'none',
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MAIN,
+      },
+
+      '&:hover, &:focus, &:active': {
+        background: 'none',
+        borderColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type FiltersPaneStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -0,0 +1,193 @@
+import { useMemo, useRef } from 'react';
+
+import { useTheme, useTweakStyles } from '../../hooks';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { ConfigType } from './types';
+import { Icon } from '../Icon';
+import { Button } from '../Button';
+import {
+  IFiltersPaneSearchProps,
+  FiltersPaneSearch,
+} from './FiltersPaneSearch';
+import { FilterWrapper } from './FilterWrapper';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
+
+import { FiltersPaneStyles, styles } from './FiltersPane.styles';
+
+export interface IFiltersPaneProps<Values, Content = Values>
+  extends ICommonProps {
+  tweakStyles?: FiltersPaneStyles;
+  filtersConfig: ConfigType<Values>;
+  enabledFilters?: Array<keyof ConfigType<Values>>;
+  values?: Partial<Values>;
+  search?: IFiltersPaneSearchProps<keyof Content>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  isDisabled?: boolean;
+  hasClearButton?: boolean;
+  onClear?: () => void;
+  onChangeFilters: (values: Partial<Values>) => void;
+  onSettingsButtonClick?: () => void;
+  testId?: string;
+}
+
+export function FiltersPane<
+  Values extends Record<string, unknown>,
+  Content = Values,
+>({
+  data,
+  tweakStyles,
+  filtersConfig,
+  enabledFilters,
+  values = {} as Values,
+  localeKey,
+  locale,
+  search,
+  isDisabled = false,
+  hasClearButton = true,
+  onChangeFilters,
+  onSettingsButtonClick,
+  onClear,
+  testId,
+}: IFiltersPaneProps<Values, Content>): JSX.Element {
+  const { classes, componentStyles } = useTheme(
+    'FiltersPane',
+    styles,
+    tweakStyles,
+  );
+
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+
+  const handleClear = () => {
+    if (onClear !== undefined) {
+      onClear();
+      return;
+    }
+    onChangeFilters({});
+    if (search !== undefined) {
+      search.onChange({});
+    }
+  };
+
+  const shouldShowClearButton =
+    hasClearButton &&
+    (search !== undefined ||
+      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+
+  const tweakClearButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakClearButton',
+  );
+
+  const clearButton = (
+    <div className={classes.clear}>
+      <Button
+        onClick={handleClear}
+        size="s"
+        view="text"
+        isDisabled={isDisabled}
+        testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+        tweakStyles={tweakClearButtonStyles}
+      >
+        {translates.clear}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div
+      className={classes.root}
+      ref={ref}
+      {...addDataAttributes(data)}
+      data-testid={testId}
+    >
+      {/* Settings */}
+      {onSettingsButtonClick !== undefined && (
+        <div
+          className={classes.settings}
+          onClick={!isDisabled ? onSettingsButtonClick : undefined}
+          tabIndex={0}
+          data-testid={
+            testId !== undefined ? `${testId}-settings-button` : undefined
+          }
+        >
+          <div className={classes.settingsIcon}>
+            <Icon type="filter" />
+          </div>
+        </div>
+      )}
+      {/* Search */}
+      {search !== undefined && (
+        <FiltersPaneSearch
+          {...search}
+          locale={getLocale(
+            search.localeKey ?? localeKey,
+            search.locale,
+            locale,
+          )}
+          localeKey={search.localeKey ?? localeKey}
+          isDisabled={search.isDisabled ?? isDisabled}
+          testId={testId !== undefined ? `${testId}-search` : undefined}
+        />
+      )}
+      {/* Filters */}
+      {filtersKeys.map((key, index) => {
+        const isLast = index === filtersKeys.length - 1;
+        const currentValue = values[key];
+        const filter = filtersConfig[key];
+        if (filter === undefined) {
+          console.error(
+            `enabledFilters содержит фильтр ${String(
+              key,
+            )}, не описанный в конфиге`,
+          );
+          if (isLast) {
+            return clearButton;
+          }
+          return null;
+        }
+
+        const filterWrapper = (
+          <FilterWrapper
+            filter={filter}
+            locale={locale}
+            localeKey={localeKey}
+            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            value={currentValue}
+            key={key as string}
+            isDisabled={
+              isDisabled ||
+              filter?.requiredFilledFilters?.some((item) => !values[item])
+            }
+            filtersPaneRef={ref}
+            testId={
+              testId !== undefined
+                ? `${testId}-filter-${String(key)}`
+                : undefined
+            }
+          />
+        );
+
+        if (isLast) {
+          return (
+            <div className={classes.filterWithClearButton} key={key as string}>
+              {filterWrapper}
+              {shouldShowClearButton && <>{clearButton}</>}
+            </div>
+          );
+        }
+
+        return filterWrapper;
+      })}
+    </div>
+  );
+}

package/src/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -0,0 +1,109 @@
+import { rgba } from '../../../helpers';
+import { ComponentStyles } from '../../../types';
+import { colors, dimensions } from '../../../theme';
+import { FILTER_HEIGHT } from '../FiltersPane.styles';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    position: 'relative',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    border: [1, 'transparent', 'solid'],
+    borderRadius: 18,
+    paddingRight: 8,
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  disabled: {
+    '& $selectBlock': {
+      cursor: 'default',
+    },
+  },
+
+  selectWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+  },
+
+  selectBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    cursor: 'pointer',
+    height: '100%',
+  },
+
+  selectLabel: {
+    flexShrink: 0,
+    fontSize: 14,
+    userSelect: 'none',
+  },
+
+  chevronIcon: {
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    transition: 'transform .2s ease',
+    opacity: 0.5,
+  },
+
+  open: {
+    transform: 'rotate(180deg)',
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: FILTER_HEIGHT - 2,
+    right: 0,
+    zIndex: 20,
+    minWidth: 200,
+    marginTop: 6,
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    overflow: 'hidden',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  active: {
+    fontWeight: 'bold',
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: FILTER_HEIGHT - 2,
+        fontSize: 14,
+        minWidth: 140,
+      },
+
+      focused: {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    },
+  },
+
+  tweakSelect: {
+    root: {
+      borderRadius: 0,
+      borderBottomLeftRadius: 6,
+      borderBottomRightRadius: 6,
+      boxShadow: 'none',
+    },
+  },
+};
+
+export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -0,0 +1,175 @@
+import { useRef, useState, useMemo, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import { useTheme, useOnClickOutside, useTweakStyles } from '../../../hooks';
+import { Icon } from '../../Icon';
+import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
+import { SearchInput } from '../../SearchInput';
+import { IFiltersPaneSearchPayload } from '../types';
+import { ICommonProps } from '../../../types';
+import { addDataAttributes } from '../../../helpers';
+
+import { FiltersPaneSearchStyles, styles } from './FiltersPaneSearch.styles';
+
+export interface IFiltersPaneSearchProps<Value> extends ICommonProps {
+  tweakStyles?: FiltersPaneSearchStyles;
+  field?: Value;
+  fields?: Value[];
+  value?: string;
+  onChange: (v: IFiltersPaneSearchPayload<Value>) => void;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  testId?: string;
+  maxLength?: number;
+  getValueView?: (value: Value) => ReactNode;
+  getValueId?: (value: Value) => string;
+  getValueString?: (value: Value) => string;
+  selectWidth?: IFilterSelectProps<Value>['width'];
+  hasClearSelectButton?: boolean;
+  isDisabled?: boolean;
+  isSelectSearchEnabled?: boolean;
+  isAutoSizeable?: boolean;
+}
+
+export function FiltersPaneSearch<Value>({
+  value,
+  fields = [],
+  field,
+  onChange,
+  localeKey,
+  locale,
+  getValueId,
+  getValueView,
+  getValueString,
+  selectWidth = '100%',
+  hasClearSelectButton,
+  isDisabled = false,
+  isSelectSearchEnabled = true,
+  isAutoSizeable = true,
+  maxLength,
+  data,
+  tweakStyles,
+  testId,
+}: IFiltersPaneSearchProps<Value>): JSX.Element {
+  const { classes, componentStyles } = useTheme(
+    'FiltersPaneSearch',
+    styles,
+    tweakStyles,
+  );
+
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const refRoot = useRef<HTMLDivElement | null>(null);
+
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  useOnClickOutside(refRoot, () => setIsOpen(false));
+
+  const handleSearchChange = (v?: string) => {
+    onChange({
+      value: v,
+      field,
+    });
+  };
+
+  const handleFieldsChange = (v?: Value) => {
+    onChange({
+      value,
+      field: v,
+    });
+    setIsOpen(false);
+  };
+
+  const selectedFieldLabel = useMemo(
+    () =>
+      field !== undefined && getValueView !== undefined
+        ? getValueView(field)
+        : undefined,
+    [field],
+  );
+
+  const tweakSearchInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSearchInput',
+  );
+
+  const tweakSelectStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSelect',
+  );
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.focused]: isInputFocused,
+        [classes.disabled]: isDisabled,
+      })}
+      ref={refRoot}
+      data-testid={testId}
+      {...addDataAttributes(data)}
+    >
+      <SearchInput
+        value={value}
+        onChange={handleSearchChange}
+        placeholder={translates.searchPlaceholder}
+        tweakStyles={tweakSearchInputStyles}
+        onFocus={() => setIsInputFocused(true)}
+        onBlur={() => setIsInputFocused(false)}
+        testId={testId !== undefined ? `${testId}-input` : undefined}
+        maxLength={maxLength}
+        isAutoSizeable={isAutoSizeable}
+        isDisabled={isDisabled}
+      />
+
+      <div className={classes.selectWrapper}>
+        {/* Select block */}
+        {fields.length > 0 && (
+          <div
+            className={classes.selectBlock}
+            onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
+            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+          >
+            <div
+              className={clsx(
+                classes.selectLabel,
+                selectedFieldLabel !== undefined && classes.active,
+              )}
+            >
+              {selectedFieldLabel ?? translates.displayedFields}
+            </div>
+            <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
+              <Icon type="chevron-down" />
+            </div>
+          </div>
+        )}
+        {/* Selector */}
+        {isOpen && (
+          <div className={classes.dropdown}>
+            <FilterSelect
+              tweakStyles={tweakSelectStyles}
+              value={field}
+              options={fields}
+              getValueView={getValueView}
+              getValueId={getValueId}
+              getValueString={getValueString}
+              localeKey={localeKey}
+              locale={translates}
+              onChange={handleFieldsChange}
+              width={selectWidth}
+              isSearchEnabled={isSelectSearchEnabled}
+              hasClearButton={hasClearSelectButton}
+              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/FiltersPane/FiltersPaneSearch/index.ts

@@ -0,0 +1 @@
+export * from './FiltersPaneSearch';

package/src/components/FiltersPane/index.ts

@@ -0,0 +1,20 @@
+export * from './FiltersPane';
+export * from './types';
+export * from './locales';
+
+// TODO : подумать над тем чтобы вынести это все наружу
+
+export * from './FilterInterval';
+export * from './FilterMultiSelect';
+export * from './FilterSelect';
+export * from './FiltersPaneSearch';
+export * from './FilterWithDates';
+export * from './FilterWithPeriod';
+
+export type { FiltersPaneStyles } from './FiltersPane.styles';
+export type { FilterIntervalStyles } from './FilterInterval/FilterInterval.styles';
+export type { FilterSelectStyles } from './FilterSelect/FilterSelect.styles';
+export type { FiltersPaneSearchStyles } from './FiltersPaneSearch/FiltersPaneSearch.styles';
+export type { FilterWithDatesStyles } from './FilterWithDates/FilterWithDates.styles';
+export type { FilterWithPeriodStyles } from './FilterWithPeriod/FilterWithPeriod.styles';
+export type { FilterWrapperStyles } from './FilterWrapper/FilterWrapper.styles';

package/src/components/FiltersPane/locales.ts

@@ -0,0 +1,107 @@
+import { merge } from 'lodash';
+
+export interface IFilterLocale {
+  clear: string;
+  all: string;
+  other: string;
+  chosen: string;
+  searchPlaceholder: string;
+  displayedFields: string;
+  nothingFound: string;
+  from: string;
+  to: string;
+  back: string;
+  months: string[];
+  periods: {
+    [key: string]: string;
+    THIS_MONTH: string;
+    LAST_MONTH: string;
+    THIS_YEAR: string;
+    LAST_YEAR: string;
+    CUSTOM: string;
+  };
+}
+
+export type IPartialFilterLocale = Partial<Omit<IFilterLocale, 'periods'>> & {
+  periods?: Partial<IFilterLocale['periods']>;
+};
+
+export const FilterLocales: Record<string, IFilterLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    other: 'Остальные',
+    chosen: 'Выбранные',
+    nothingFound: 'Не найдено',
+    from: 'От',
+    to: 'До',
+    back: 'Назад',
+    searchPlaceholder: 'Поиск',
+    displayedFields: 'Поля для поиска',
+    months: [
+      'Январь',
+      'Февраль',
+      'Март',
+      'Апрель',
+      'Май',
+      'Июнь',
+      'Июль',
+      'Август',
+      'Сентябрь',
+      'Октябрь',
+      'Ноябрь',
+      'Декабрь',
+    ],
+    periods: {
+      THIS_MONTH: 'Этот месяц',
+      LAST_MONTH: 'Прошлый месяц',
+      THIS_YEAR: 'Этот год',
+      LAST_YEAR: 'Прошлый год',
+      CUSTOM: 'Другой период',
+    },
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    other: 'Others',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    from: 'From',
+    to: 'To',
+    back: 'Back',
+    searchPlaceholder: 'Search',
+    displayedFields: 'Displayed fields',
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    periods: {
+      THIS_MONTH: 'This month',
+      LAST_MONTH: 'Previous month',
+      THIS_YEAR: 'This year',
+      LAST_YEAR: 'Previous year',
+      CUSTOM: 'Custom',
+    },
+  },
+};
+
+export type IFilterLocaleKey = keyof typeof FilterLocales;
+
+export const DEFAULT_LOCALE: IFilterLocaleKey = 'en';
+
+export const getLocale = (
+  key: IFilterLocaleKey = DEFAULT_LOCALE,
+  custom?: IPartialFilterLocale,
+  custom2?: IPartialFilterLocale,
+): IFilterLocale => merge({}, FilterLocales[key], custom, custom2);