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

package/src/components/FiltersPane/types.ts

@@ -1,112 +1,112 @@
-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 { 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 { 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.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,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} />;
+};

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';

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,84 +1,84 @@
-import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { FlexibleTable } from './FlexibleTable';
-import content from './fixture-test';
-import { FlexibleTableConfigType } from './types';
-
-export default {
-  title: 'Table/FlexibleTable',
-  component: FlexibleTable,
-};
-
-interface ITableContent {
-  contractCode: string;
-  validFrom: Date;
-  validTo: Date;
-  title: string;
-  signDate: Date;
-  partner: string;
-  partnerDescription: string;
-  parentContract: string;
-  currency: string;
-  status: string;
-}
-
-const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
-const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
-
-const config: FlexibleTableConfigType<ITableContent> = {
-  contractCode: {
-    title: 'Contract Code',
-  },
-  title: {
-    component: Temp,
-    title: 'Title',
-    minWidth: 320,
-  },
-  validFrom: {
-    title: 'Valid From',
-  },
-  validTo: {
-    title: 'Valid From',
-  },
-  signDate: {
-    title: 'Sign Date',
-  },
-  partner: {
-    component: Temp1,
-    title: 'Partner',
-  },
-};
-
-const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    content={content}
-    config={config}
-  />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isHorizontallyScrollable: true,
-  isFirstColumnSticky: true,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'onHeadClick',
-      'onRowClick',
-      'onRowHover',
-      'expandableRowComponent',
-    ],
-  },
-};
+import { FC } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { FlexibleTable } from './FlexibleTable';
+import content from './fixture-test';
+import { FlexibleTableConfigType } from './types';
+
+export default {
+  title: 'Table/FlexibleTable',
+  component: FlexibleTable,
+};
+
+interface ITableContent {
+  contractCode: string;
+  validFrom: Date;
+  validTo: Date;
+  title: string;
+  signDate: Date;
+  partner: string;
+  partnerDescription: string;
+  parentContract: string;
+  currency: string;
+  status: string;
+}
+
+const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
+const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
+
+const config: FlexibleTableConfigType<ITableContent> = {
+  contractCode: {
+    title: 'Contract Code',
+  },
+  title: {
+    component: Temp,
+    title: 'Title',
+    minWidth: 320,
+  },
+  validFrom: {
+    title: 'Valid From',
+  },
+  validTo: {
+    title: 'Valid From',
+  },
+  signDate: {
+    title: 'Sign Date',
+  },
+  partner: {
+    component: Temp1,
+    title: 'Partner',
+  },
+};
+
+const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
+  <FlexibleTable<ITableContent>
+    {...args}
+    uniqueField="contractCode"
+    expandableRowComponent={(item, _, close) =>
+      item.contractCode === 'OB_UT_M119' ? (
+        <div onClick={close}>всем привет :) {item.contractCode}</div>
+      ) : null
+    }
+    content={content}
+    config={config}
+  />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isHorizontallyScrollable: true,
+  isFirstColumnSticky: true,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'onHeadClick',
+      'onRowClick',
+      'onRowHover',
+      'expandableRowComponent',
+    ],
+  },
+};