@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

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

@@ -0,0 +1,9 @@
+export * from './Filter';
+export * from './FilterInterval';
+export * from './FilterMultiSelect';
+export * from './FilterSelect';
+export * from './FiltersPaneSearch';
+export * from './FilterValueView';
+export * from './FilterWithDates';
+export * from './FilterWithPeriod';
+export * from './FilterWrapper';

package/src/components/FiltersPane/constants.ts

@@ -0,0 +1,137 @@
+import { endOfMonth, endOfYear, startOfMonth, startOfYear, sub } from 'date-fns';
+import {
+  IFilterLocale,
+  IFilterLocaleKey,
+  IPeriodGetter,
+  ISelectLocale,
+  ISelectLocaleKey,
+} from './types';
+
+export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
+
+export const SelectLocales: Record<string, ISelectLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    chosen: 'Выбранные',
+    nothingFound: 'Ничего не найдено',
+    searchPlaceholder: 'Поиск',
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    searchPlaceholder: 'Search',
+  },
+};
+
+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 const DEFAULT_LOCALE: IFilterLocaleKey = 'en';
+
+export const DEFAULT_SELECT_LOCALE: ISelectLocaleKey = 'en';
+
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const DEFAULT_PICKER_PROPS = {};
+
+export const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
+  THIS_MONTH: () => {
+    const today = new Date();
+    return {
+      from: startOfMonth(today),
+      to: endOfMonth(today),
+    };
+  },
+  LAST_MONTH: () => {
+    const day = sub(new Date(), { months: 1 });
+    return {
+      from: startOfMonth(day),
+      to: endOfMonth(day),
+    };
+  },
+  THIS_YEAR: () => {
+    const today = new Date();
+    return {
+      from: startOfYear(today),
+      to: endOfYear(today),
+    };
+  },
+  LAST_YEAR: () => {
+    const day = sub(new Date(), { years: 1 });
+    return {
+      from: startOfYear(day),
+      to: endOfYear(day),
+    };
+  },
+};

package/src/components/FiltersPane/helpers.ts

@@ -0,0 +1,26 @@
+import merge from 'lodash-es/merge';
+import { DEFAULT_LOCALE, DEFAULT_SELECT_LOCALE, FilterLocales, SelectLocales } from './constants';
+import {
+  type IFilterLocale,
+  type IFilterLocaleKey,
+  type IPartialFilterLocale,
+  ISelectLocale,
+  ISelectLocaleKey,
+} from './types';
+
+export const getLocale = (
+  key: IFilterLocaleKey = DEFAULT_LOCALE,
+  custom?: IPartialFilterLocale,
+  custom2?: IPartialFilterLocale,
+): IFilterLocale => merge({}, FilterLocales[key], custom, custom2);
+
+export const getSelectLocale = (
+  key: ISelectLocaleKey = DEFAULT_SELECT_LOCALE,
+  custom?: Partial<ISelectLocale>,
+  custom2?: Partial<ISelectLocale>,
+): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);
+
+export const sortValues = (arr: Array<number | undefined>) =>
+  arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
+
+export const defaultConvertFunction = (val: unknown): string => String(val);

package/src/components/FiltersPane/index.ts

@@ -1,20 +1,5 @@
-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';
+export * from './FiltersPane';
+export * from './types';
+// TODO : подумать над тем чтобы вынести это все наружу
+export * from './components';
+export type { FiltersPaneStyles } from './FiltersPane.styles';

package/src/components/FiltersPane/types.ts

@@ -1,112 +1,156 @@
-import { FC, ReactNode } from 'react';
-import { IMultiSelectListValues } from '../MultiSelectList';
-import { IFilterIntervalProps } from './FilterInterval';
-import { IFilterMultiSelectProps } from './FilterMultiSelect';
-import { IFilterSelectProps } from './FilterSelect';
-import { IFilterWithDatesProps } from './FilterWithDates';
-import { IFilterWithPeriodProps } from './FilterWithPeriod';
-import { IFilterLocaleKey, IPartialFilterLocale } from './locales';
-
-export const PERIODS = ['THIS_MONTH', 'LAST_MONTH', 'THIS_YEAR', 'LAST_YEAR', 'CUSTOM'] as const;
-
-export type IPeriodType = (typeof PERIODS)[number];
-
-export type IFilterMultiSelectValues<Option = string> = IMultiSelectListValues<Option>;
-
-export type IPeriodsList = Array<IPeriodType | [string, IPeriodGetter]>;
-
-export interface IFiltersPaneSearchPayload<Value> {
-  value?: string;
-  field?: Value;
-}
-
-export interface IFilterValueViewProps<Value> {
-  value?: Value;
-  filter: ConfigItem<Value>;
-}
-
-export interface IDatePeriod {
-  from: Date | null;
-  to: Date | null;
-}
-
-export interface IPeriod extends IDatePeriod {
-  periodType: string;
-  label?: string;
-}
-
-export type IPeriodGetter = () => IDatePeriod;
-
-export type IFilterWithDatesValue = IDatePeriod;
-
-export type MultiSelectOptionType<Value> = Value | undefined extends
-  | IFilterMultiSelectValues<infer Option>
-  | undefined
-  ? Option
-  : unknown;
-
-export interface IConfigItemBasicBase<Value> {
-  name: string;
-  isInline?: boolean;
-  requiredFilledFilters?: string[];
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  getSelectedValueView?: (v: Value) => ReactNode;
-}
-
-export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {
-  type: 'interval';
-} & Omit<IFilterIntervalProps, 'value' | 'onChange' | 'labelName'>;
-
-export interface IBooleanConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  type: 'boolean';
-}
-
-export type IMultiSelectConfigItem<Value> = IConfigItemBasicBase<Value> & {
-  type: 'multiSelect';
-} & Omit<IFilterMultiSelectProps<Value, MultiSelectOptionType<Value>>, 'value' | 'onChange'>;
-
-export type ISelectConfigItem<Value> = IConfigItemBasicBase<Value> & {
-  type: 'select';
-} & Omit<IFilterSelectProps<Value>, 'value' | 'onChange'>;
-
-// Дата без периодов
-export type IDateRangeWithoutPeriodConfigItem<Value> = IConfigItemBasicBase<Value> & {
-  type: 'dateRangeWithoutPeriod';
-  dateFormat?: string;
-} & Omit<IFilterWithDatesProps, 'value' | 'onChange' | 'onStartBtnSubmit' | 'onEndBtnSubmit'>;
-
-// Дата С ПЕРИОДАМИ
-export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
-  type: 'dateRange';
-  dateFormat?: string;
-} & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
-
-export type CustomComponent<Value> = FC<{
-  value?: Value;
-  onChange: (v?: Value) => void;
-  onClose?: () => void;
-  filter: ICustomConfigItem<Value>;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-}>;
-
-export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  [key: string]: any;
-  type: 'custom';
-  component: CustomComponent<Value>;
-  valueViewType?: 'range' | 'multiple';
-}
-
-export type ConfigItem<Value> =
-  | ISelectConfigItem<Value>
-  | IMultiSelectConfigItem<Value>
-  | ICustomConfigItem<Value>
-  | IDateRangeWithoutPeriodConfigItem<Value>
-  | IDateRangeConfigItem<Value>
-  | IIntervalConfigItem<Value>
-  | IBooleanConfigItem<Value>;
-
-export type ConfigType<Values> = {
-  [K in keyof Values]: ConfigItem<Values[K]>;
-};
+import { FC, ReactNode } from 'react';
+import { IDatePickerProps } from '../DatePicker';
+import { IMultiSelectListValues } from '../MultiSelectList';
+import {
+  IFilterIntervalProps,
+  IFilterMultiSelectProps,
+  IFilterSelectProps,
+  IFilterWithDatesProps,
+  IFilterWithPeriodProps,
+} from './components';
+import { FilterLocales, PERIODS, SelectLocales } from './constants';
+
+export type IPeriodType = (typeof PERIODS)[number];
+
+export type IFilterMultiSelectValues<Option = string> = IMultiSelectListValues<Option>;
+
+export type IPeriodsList = Array<IPeriodType | [string, IPeriodGetter]>;
+
+export interface IFiltersPaneSearchPayload<Value> {
+  value?: string;
+  field?: Value;
+}
+
+export interface IFilterValueViewProps<Value> {
+  value?: Value;
+  filter: ConfigItem<Value>;
+}
+
+export interface IDatePeriod {
+  from: Date | null;
+  to: Date | null;
+}
+
+export interface IPeriod extends IDatePeriod {
+  periodType: string;
+  label?: string;
+}
+
+export type IPeriodGetter = () => IDatePeriod;
+
+export type IFilterWithDatesValue = IDatePeriod;
+
+export type MultiSelectOptionType<Value> = Value | undefined extends
+  | IFilterMultiSelectValues<infer Option>
+  | undefined
+  ? Option
+  : unknown;
+
+export interface IConfigItemBasicBase<Value> {
+  name: string;
+  isInline?: boolean;
+  requiredFilledFilters?: string[];
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  getSelectedValueView?: (v: Value) => ReactNode;
+}
+
+export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'interval';
+} & Omit<IFilterIntervalProps, 'value' | 'onChange' | 'labelName'>;
+
+export interface IBooleanConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  type: 'boolean';
+}
+
+export type IMultiSelectConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'multiSelect';
+} & Omit<IFilterMultiSelectProps<Value, MultiSelectOptionType<Value>>, 'value' | 'onChange'>;
+
+export type ISelectConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'select';
+} & Omit<IFilterSelectProps<Value>, 'value' | 'onChange'>;
+
+// Дата без периодов
+export type IDateRangeWithoutPeriodConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'dateRangeWithoutPeriod';
+  dateFormat?: string;
+} & Omit<IFilterWithDatesProps, 'value' | 'onChange' | 'onStartBtnSubmit' | 'onEndBtnSubmit'>;
+
+// Дата С ПЕРИОДАМИ
+export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'dateRange';
+  dateFormat?: string;
+} & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
+
+export type CustomComponent<Value> = FC<{
+  value?: Value;
+  onChange: (v?: Value) => void;
+  onClose?: () => void;
+  filter: ICustomConfigItem<Value>;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+}>;
+
+export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  [key: string]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  valueViewType?: 'range' | 'multiple';
+}
+
+export type ConfigItem<Value> =
+  | ISelectConfigItem<Value>
+  | IMultiSelectConfigItem<Value>
+  | ICustomConfigItem<Value>
+  | IDateRangeWithoutPeriodConfigItem<Value>
+  | IDateRangeConfigItem<Value>
+  | IIntervalConfigItem<Value>
+  | IBooleanConfigItem<Value>;
+
+export type ConfigType<Values> = {
+  [K in keyof Values]: ConfigItem<Values[K]>;
+};
+
+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 type IFilterLocaleKey = keyof typeof FilterLocales;
+
+export interface ISelectLocale {
+  clear: string;
+  all: string;
+  chosen: string;
+  searchPlaceholder: string;
+  nothingFound: string;
+}
+
+export type ISelectLocaleKey = keyof typeof SelectLocales;
+
+export type IFilterWithDateDatePickerProps = Omit<
+  IDatePickerProps,
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate'
+>;

package/src/components/Flag/Flag.stories.tsx

@@ -1,29 +1,29 @@
-import { countries } from 'country-flag-icons';
-import { ComponentStory } from '@storybook/react';
-import { Flag } from './Flag';
-
-export default {
-  title: 'Flag',
-  component: Flag,
-  argTypes: {
-    countryCode: { control: 'select', options: countries },
-  },
-};
-
-const Template: ComponentStory<typeof Flag> = (args) => (
-  <div style={{ width: 60, height: 40 }}>
-    <Flag {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  countryCode: 'ug',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+import { countries } from 'country-flag-icons';
+import { ComponentStory } from '@storybook/react';
+import { Flag } from './Flag';
+
+export default {
+  title: 'Flag',
+  component: Flag,
+  argTypes: {
+    countryCode: { control: 'select', options: countries },
+  },
+};
+
+const Template: ComponentStory<typeof Flag> = (args) => (
+  <div style={{ width: 60, height: 40 }}>
+    <Flag {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  countryCode: 'ug',
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data'],
+  },
+};

package/src/components/Flag/Flag.tsx

@@ -1,27 +1,27 @@
-import { FC } from 'react';
-import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { FlagStyles, styles } from './Flag.styles';
-
-export interface IFlagProps extends ICommonProps {
-  tweakStyles?: FlagStyles;
-  countryCode?: string;
-}
-
-export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const { classes } = useTheme('Flag', styles, tweakStyles);
-  const CC = countryCode.toUpperCase();
-
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
-
-  return <TheFlag className={classes.root} />;
-};
+import { FC } from 'react';
+import { hasFlag } from 'country-flag-icons';
+import Flags from 'country-flag-icons/react/3x2';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { FlagStyles, styles } from './Flag.styles';
+
+export interface IFlagProps extends ICommonProps {
+  tweakStyles?: FlagStyles;
+  countryCode?: string;
+}
+
+export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
+  const { classes } = useTheme('Flag', styles, tweakStyles);
+  const CC = countryCode.toUpperCase();
+
+  const TheFlag = hasFlag(CC)
+    ? Flags[CC as keyof typeof Flags]
+    : () => (
+        <div className={classes.noFlag}>
+          <Icon type="minus" />
+        </div>
+      );
+
+  return <TheFlag className={classes.root} />;
+};