@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha50

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/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,6 +1,8 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
+import { INumberInputProps } from '../NumberInput';
 import type {
   IFilterIntervalProps,
   IFilterMultiSelectProps,
@@ -47,7 +49,7 @@ export type MultiSelectOptionType<Value> = Value | undefined extends
   : unknown;
 
 export interface IConfigItemBasicBase<Value> {
-  name: string;
+  name: ReactNode;
   isInline?: boolean;
   isClearable?: boolean;
   requiredFilledFilters?: string[];
@@ -58,6 +60,7 @@ export interface IConfigItemBasicBase<Value> {
 
 export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {
   type: 'interval';
+  name: string;
 } & Omit<IFilterIntervalProps, 'value' | 'onChange' | 'labelName'>;
 
 export interface IBooleanConfigItem<Value> extends IConfigItemBasicBase<Value> {
@@ -84,22 +87,38 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export type CustomComponent<Value> = FC<{
+export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
   filter: ICustomConfigItem<Value>;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-}>;
+}
+
+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> {
+  [key: string & {}]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  valueViewType?: 'range';
+}
 
-export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  [key: string]: any;
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
-  valueViewType?: 'range' | 'multiple';
+  valueViewType?: 'multiple';
+  getSelectedValue?: (v: ICustomValue<Value>) => ReactNode;
 }
 
+export type ICustomConfigItem<Value> =
+  | ICustomRangeConfigItem<Value>
+  | ICustomMultipleConfigItem<Value>;
+
 export type ConfigItem<Value> =
   | ISelectConfigItem<Value>
   | IMultiSelectConfigItem<Value>
@@ -155,3 +174,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,29 +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 },
-  },
-};
-
-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.styles.ts

@@ -2,6 +2,10 @@ import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Flag', {
   root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
     border: [1, 'solid', colors.BORDER_MAIN],

package/src/components/Flag/Flag.tsx

@@ -1,9 +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 { useStyles, IFlagStyles } from './Flag.styles';
+import { customFlags } from './customFlags';
+import { IFlagStyles, useStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
   /** @default '' */
@@ -12,15 +13,28 @@ export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
+  const countryFlagKey = countryCode.toUpperCase();
 
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
+  const hasFlagInLibrary = hasFlag(countryFlagKey);
 
-  return <TheFlag className={classes.root} />;
+  if (hasFlagInLibrary) {
+    const FlagComponent = Flags[countryFlagKey as keyof typeof Flags];
+    return (
+      <div className={classes.root}>
+        <FlagComponent />
+      </div>
+    );
+  }
+
+  const CustomFlag = customFlags[countryFlagKey as keyof typeof customFlags];
+
+  if (CustomFlag !== undefined) {
+    return <div className={classes.root} dangerouslySetInnerHTML={{ __html: CustomFlag }} />;
+  }
+
+  return (
+    <div className={classes.noFlag}>
+      <Icon type="minus" />
+    </div>
+  );
 };

package/src/components/Flag/customFlags/AB.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FFF" d="M0 0h512v341.3H0z"/><g fill="#6DA544"><path d="M0 0h512v48.8H0zM0 97.5h512v48.8H0zM0 195h512v48.8H0zM0 292.6h512v48.8H0z"/></g><path fill="#D80027" d="M0 0h256v146.3H0z"/><path fill="#FFF" d="m116.9 114.4-7.5-14.8V69.9L128 59l18.6 10.9v22.3l7.4-7.4 4.2 3-4.2 11.8-14.9 14.8z"/><circle fill="#FFF" cx="82" cy="82.8" r="5.4"/><circle fill="#FFF" cx="90.8" cy="61.7" r="5.4"/><circle fill="#FFF" cx="106.6" cy="46.2" r="5.4"/><circle fill="#FFF" cx="128" cy="40.8" r="5.4"/><circle fill="#FFF" cx="149.4" cy="46.2" r="5.4"/><circle fill="#FFF" cx="165.2" cy="61.7" r="5.4"/><circle fill="#FFF" cx="174" cy="82.8" r="5.4"/></svg>

package/src/components/Flag/customFlags/OS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#FFF" d="M0 0h450v300H0z"/><path fill="red" d="M0 100h450v200H0z"/><path fill="#FFDF00" d="M0 200h450v100H0z"/></svg>

package/src/components/Flag/customFlags/customFlags.ts

@@ -0,0 +1,13 @@
+import AB from './AB.svg?raw';
+import OS from './OS.svg?raw';
+
+export const customFlags = {
+  /**
+   * Абхазия
+   */
+  AB,
+  /**
+   * Южная осетия
+   */
+  OS,
+};

package/src/components/Flag/customFlags/index.ts

@@ -0,0 +1 @@
+export * from './customFlags';

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 у родителя таблицы у себя в проекте.