@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha70

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

@@ -1,6 +1,13 @@
 import { ReactNode, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayLikeNotEmpty,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -29,6 +36,7 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
+  isAutoSized?: boolean;
 }
 
 export function FiltersPaneSearch<Value>({
@@ -44,6 +52,7 @@ export function FiltersPaneSearch<Value>({
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
+  isAutoSized = false,
   maxLength,
   data,
   tweakStyles,
@@ -89,20 +98,15 @@ export function FiltersPaneSearch<Value>({
     setIsOpen(false);
   };
 
-  const selectedFieldLabel = useMemo(
-    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
-    [field],
-  );
-
   return (
     <div
       className={clsx(classes.root, {
         [classes.focused]: isInputFocused,
         [classes.disabled]: isDisabled,
+        [classes.hasValue]: isArrayLikeNotEmpty(value),
       })}
       ref={refRoot}
-      data-testid={testId}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <SearchInput
         value={value}
@@ -111,26 +115,22 @@ export function FiltersPaneSearch<Value>({
         tweakStyles={tweakSearchInputStyles}
         onFocus={() => setIsInputFocused(true)}
         onBlur={() => setIsInputFocused(false)}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
         maxLength={maxLength}
         isDisabled={isDisabled}
+        isAutoSized={isAutoSized}
       />
 
       <div className={classes.selectWrapper}>
         {/* Select block */}
-        {fields.length > 0 && (
+        {isArrayNotEmpty(fields) && (
           <div
             className={classes.selectBlock}
             onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
-            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+            {...addDataTestId(testId, 'select')}
           >
-            <div
-              className={clsx(
-                classes.selectLabel,
-                selectedFieldLabel !== undefined && classes.active,
-              )}
-            >
-              {selectedFieldLabel ?? translates.displayedFields}
+            <div className={clsx(classes.selectLabel, { [classes.active]: isNotEmpty(field) })}>
+              {isNotEmpty(field) ? getValueView?.(field) : translates.displayedFields}
             </div>
             <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
               <Icon type="chevron-down" />
@@ -152,7 +152,7 @@ export function FiltersPaneSearch<Value>({
               onChange={handleFieldsChange}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
-              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+              testId={getTestId(testId, 'dropdown')}
             />
           </div>
         )}

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

@@ -1,4 +1,5 @@
 export * from './Filter';
+export * from './FilterDateSingle';
 export * from './FilterInterval';
 export * from './FilterMultiSelect';
 export * from './FilterSelect';

package/src/components/FiltersPane/constants.ts

@@ -37,6 +37,7 @@ export const FilterLocales: Record<string, IFilterLocale> = {
     from: 'От',
     to: 'До',
     back: 'Назад',
+    date: 'Дата',
     searchPlaceholder: 'Поиск',
     displayedFields: 'Поля для поиска',
     months: [
@@ -71,6 +72,7 @@ export const FilterLocales: Record<string, IFilterLocale> = {
     from: 'From',
     to: 'To',
     back: 'Back',
+    date: 'Date',
     searchPlaceholder: 'Search',
     displayedFields: 'Displayed fields',
     months: [

package/src/components/FiltersPane/helpers.ts

@@ -1,4 +1,4 @@
-import merge from 'lodash-es/merge';
+import { merge } from '@true-engineering/true-react-platform-helpers';
 import { DEFAULT_LOCALE, DEFAULT_SELECT_LOCALE, FilterLocales, SelectLocales } from './constants';
 import {
   type IFilterLocale,
@@ -12,13 +12,13 @@ export const getLocale = (
   key: IFilterLocaleKey = DEFAULT_LOCALE,
   custom?: IPartialFilterLocale,
   custom2?: IPartialFilterLocale,
-): IFilterLocale => merge({}, FilterLocales[key], custom, custom2);
+): 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);
+): ISelectLocale => merge(SelectLocales[key], custom, custom2);
 
 export const sortValues = (arr: Array<number | undefined>): Array<number | undefined> =>
   arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));

package/src/components/FiltersPane/index.ts

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

package/src/components/FiltersPane/types.ts

@@ -1,12 +1,16 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
+import { INumberInputProps } from '../NumberInput';
 import type {
+  IFilterDateSingleProps,
   IFilterIntervalProps,
   IFilterMultiSelectProps,
   IFilterSelectProps,
   IFilterWithDatesProps,
   IFilterWithPeriodProps,
+  IFilterWrapperStyles,
 } from './components';
 import { FilterLocales, PERIODS, SelectLocales } from './constants';
 
@@ -33,11 +37,12 @@ export interface IDatePeriod {
 
 export interface IPeriod extends IDatePeriod {
   periodType: string;
-  label?: string;
 }
 
 export type IPeriodGetter = () => IDatePeriod;
 
+export type IFilterDateSingleValue = Date;
+
 export type IFilterWithDatesValue = IDatePeriod;
 
 export type MultiSelectOptionType<Value> = Value | undefined extends
@@ -47,17 +52,20 @@ export type MultiSelectOptionType<Value> = Value | undefined extends
   : unknown;
 
 export interface IConfigItemBasicBase<Value> {
-  name: string;
+  name: ReactNode;
   isInline?: boolean;
+  isDisabled?: boolean;
   isClearable?: boolean;
   requiredFilledFilters?: string[];
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   getSelectedValueView?: (v: Value) => ReactNode;
+  tweakWrapperStyles?: IFilterWrapperStyles;
 }
 
 export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {
   type: 'interval';
+  name: string;
 } & Omit<IFilterIntervalProps, 'value' | 'onChange' | 'labelName'>;
 
 export interface IBooleanConfigItem<Value> extends IConfigItemBasicBase<Value> {
@@ -78,13 +86,18 @@ export type IDateRangeWithoutPeriodConfigItem<Value> = IConfigItemBasicBase<Valu
   dateFormat?: string;
 } & Omit<IFilterWithDatesProps, 'value' | 'onChange' | 'onStartBtnSubmit' | 'onEndBtnSubmit'>;
 
-// Дата С ПЕРИОДАМИ
+// Дата с периодами
 export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   type: 'dateRange';
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export interface ICustomComponentProps<Value> {
+// Date Picker для выбора одной даты
+export type IDatePickerSingleConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'datePickerSingle';
+} & Omit<IFilterDateSingleProps, 'value' | 'onChange' | 'onEndBtnSubmit'>;
+
+export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
@@ -98,7 +111,6 @@ export type CustomComponent<Value> = FC<ICustomComponentProps<Value>>;
 export type ICustomValue<V> = V extends Array<infer T> ? T : never;
 
 export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
@@ -106,7 +118,6 @@ export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Valu
 }
 
 export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
@@ -124,6 +135,7 @@ export type ConfigItem<Value> =
   | ICustomConfigItem<Value>
   | IDateRangeWithoutPeriodConfigItem<Value>
   | IDateRangeConfigItem<Value>
+  | IDatePickerSingleConfigItem<Value>
   | IIntervalConfigItem<Value>
   | IBooleanConfigItem<Value>;
 
@@ -142,6 +154,7 @@ export interface IFilterLocale {
   from: string;
   to: string;
   back: string;
+  date: string;
   months: string[];
   periods: {
     [key: string]: string;
@@ -173,3 +186,8 @@ export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
   'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;
+
+export type IFilterNumberInputProps = Omit<
+  INumberInputProps,
+  'onChange' | 'value' | 'label' | 'testId' | 'tweakStyles'
+>;

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

@@ -1,30 +1,25 @@
+import { FC } from 'react';
 import { countries } from 'country-flag-icons';
-import { ComponentStory } from '@storybook/react';
-import { Flag } from './Flag';
+import { type Meta } from '@storybook/react';
+import { Flag, IFlagProps } from './Flag';
 import { customFlags } from './customFlags';
 
-export default {
-  title: 'Data Display/Flag',
-  component: Flag,
-  argTypes: {
-    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
-  },
-};
-
-const Template: ComponentStory<typeof Flag> = (args) => (
+const Story: FC<IFlagProps> = (args) => (
   <div style={{ width: 60, height: 40 }}>
     <Flag {...args} />
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  countryCode: 'ug',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/Flag',
+  component: Story,
+  args: {
+    countryCode: 'ug',
+  },
+  argTypes: {
+    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Flag/Flag.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
 import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
+import * as Flags from 'country-flag-icons/react/3x2';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { customFlags } from './customFlags';
-import { useStyles, IFlagStyles } from './Flag.styles';
+import { IFlagStyles, useStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
   /** @default '' */

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

@@ -1,14 +1,9 @@
 import { FC } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { FlexibleTable } from './FlexibleTable';
+import { type Meta } from '@storybook/react';
+import { FlexibleTable, IFlexibleTableProps } from './FlexibleTable';
 import { IFlexibleTableConfigType, IValueComponentProps } from './types';
 
-export default {
-  title: 'Table/FlexibleTable',
-  component: FlexibleTable,
-} as ComponentMeta<typeof FlexibleTable>;
-
 interface ITableContent {
   contractCode: string;
   validFrom: Date;
@@ -77,7 +72,7 @@ const config: IFlexibleTableConfigType<ITableContent> = {
 
 const content: ITableContent[] = [
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE1',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -91,7 +86,7 @@ const content: ITableContent[] = [
     publicNote: 'Public Note',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE2',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -104,7 +99,7 @@ const content: ITableContent[] = [
     note: 'Only Note',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE3',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -117,7 +112,7 @@ const content: ITableContent[] = [
     publicNote: 'Only Public Note',
   },
   {
-    contractCode: 'SOME_CODE_1',
+    contractCode: 'SOME_CODE4',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -129,7 +124,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE5',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -141,7 +136,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE6',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -153,7 +148,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE7',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -165,7 +160,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE8',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -177,7 +172,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE9',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -189,7 +184,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE10',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -201,7 +196,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE11',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -213,7 +208,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE12',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -225,7 +220,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'OB_UT_M119',
+    contractCode: 'OB_UT_M13',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -237,7 +232,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE14',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -250,13 +245,15 @@ const content: ITableContent[] = [
   },
 ];
 
-const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
+const Story: FC<IFlexibleTableProps<ITableContent, unknown, 'contractCode'>> = (args) => (
   <div style={{ width: 700, overflow: 'auto' }}>
     <FlexibleTable<ITableContent>
       {...args}
       config={config}
       content={content}
       rowAttributes={['contractCode']}
+      enabledColumns={undefined}
+      uniqueField="contractCode"
       expandableRowComponent={(_0, _1, close) => (
         <div onClick={close}>
           всем привет :)
@@ -268,33 +265,33 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isLoading: false,
-  isFirstColumnSticky: true,
-  isHorizontallyScrollable: true,
-  isExpandableRowComponentInitiallyOpen: false,
-};
-
-Default.argTypes = {
-  isExpandableRowComponentInitiallyOpen: { control: 'boolean' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'content',
-      'config',
-      'rowAttributes',
-      'headerContent',
-      'tweakStyles',
-      'onHeadClick',
-      'onRowClick',
-      'onRowHover',
-      'expandableRowComponent',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Table/FlexibleTable',
+  component: Story,
+  args: {
+    isLoading: false,
+    isFirstColumnSticky: true,
+    isHorizontallyScrollable: true,
+    isExpandableRowComponentInitiallyOpen: false,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'data',
+        'testId',
+        'content',
+        'config',
+        'rowAttributes',
+        'headerContent',
+        'tweakStyles',
+        'onHeadClick',
+        'onRowClick',
+        'onRowHover',
+        'expandableRowComponent',
+      ],
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,10 +1,12 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations, helpers } from '../../theme';
 import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
 
 export const useStyles = createThemedStyles('FlexibleTable', {
+  flexibleTableWrapper: {},
+
   root: {
     width: '100%',
     position: 'relative',
@@ -13,7 +15,7 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   },
 
   scroll: {
-    overflow: 'auto',
+    ...helpers.withScrollBar,
     /*
       Чтобы сделать таблицу на всю высоту проставьте
       height у родителя таблицы у себя в проекте.
@@ -96,6 +98,7 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     },
   },
 
+  /** @deprecated удалить вместе с isFirstColumnSticky */
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },