@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha4

package/src/components/FiltersPane/index.ts

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

package/src/components/FiltersPane/types.ts

@@ -1,157 +1,157 @@
-import { FC, ReactNode } from 'react';
-import { IDatePickerProps } from '../DatePicker';
-import { IMultiSelectListValues } from '../MultiSelectList';
-import type {
-  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;
-  isClearable?: 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' | 'tweakStyles'
->;
+import { FC, ReactNode } from 'react';
+import { IDatePickerProps } from '../DatePicker';
+import { IMultiSelectListValues } from '../MultiSelectList';
+import type {
+  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;
+  isClearable?: 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' | 'tweakStyles'
+>;

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: 'Data Display/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: 'Data Display/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,17 +1,17 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Flag', {
-  root: {
-    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
-    // если будет нужно, то можно вынести border на уровень пропсов
-    border: [1, 'solid', colors.BORDER_MAIN],
-    borderRadius: 2,
-  },
-
-  noFlag: {
-    width: 20,
-    color: colors.FONT_MEDIUM,
-  },
-});
-
-export type IFlagStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Flag', {
+  root: {
+    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
+    // если будет нужно, то можно вынести border на уровень пропсов
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 2,
+  },
+
+  noFlag: {
+    width: 20,
+    color: colors.FONT_MEDIUM,
+  },
+});
+
+export type IFlagStyles = ITweakStyles<typeof useStyles>;

package/src/components/Flag/Flag.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, IFlagStyles } from './Flag.styles';
-
-export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
-  /** @default '' */
-  countryCode?: string;
-}
-
-export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const classes = useStyles({ theme: 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 { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, IFlagStyles } from './Flag.styles';
+
+export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
+  /** @default '' */
+  countryCode?: string;
+}
+
+export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
+  const classes = useStyles({ theme: 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 { IFlagStyles } from './Flag.styles';
+export * from './Flag';
+export type { IFlagStyles } from './Flag.styles';