@true-engineering/true-react-common-ui-kit 2.1.0 → 2.2.0

package/src/components/FiltersPane/locales.ts

@@ -1,107 +1,107 @@
-import merge from 'lodash-es/merge';
-
-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);
+import merge from 'lodash-es/merge';
+
+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);

package/src/components/FiltersPane/types.ts

@@ -1,126 +1,112 @@
-import { FC, ReactNode } from 'react';
-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';
-import { IMultiSelectListValues } from '../MultiSelectList';
-
-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 { 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]>;
+};

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

@@ -1,29 +1,29 @@
-import { ComponentStory } from '@storybook/react';
-import { countries } from 'country-flag-icons';
-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.styles.ts

@@ -1,18 +1,18 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
-    // если будет нужно, то можно вынести border на уровень пропсов
-    border: [1, 'solid', colors.BORDER_MAIN],
-    borderRadius: 2,
-  },
-
-  noFlag: {
-    width: 20,
-    color: colors.FONT_MEDIUM,
-  },
-};
-
-export type FlagStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
+    // если будет нужно, то можно вынести border на уровень пропсов
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 2,
+  },
+
+  noFlag: {
+    width: 20,
+    color: colors.FONT_MEDIUM,
+  },
+};
+
+export type FlagStyles = ComponentStyles<typeof styles>;

package/src/components/Flag/Flag.tsx

@@ -1,28 +1,27 @@
-import { FC } from 'react';
-import Flags from 'country-flag-icons/react/3x2';
-import { hasFlag } from 'country-flag-icons';
-import { useTheme } from '../../hooks';
-import { Icon } from '../Icon';
-import { ICommonProps } from '../../types';
-
-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} />;
+};

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/Flag/index.ts

@@ -1,2 +1,2 @@
-export * from './Flag';
-export type { FlagStyles } from './Flag.styles';
+export * from './Flag';
+export type { FlagStyles } from './Flag.styles';