@true-engineering/true-react-common-ui-kit 3.5.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -84,6 +84,7 @@
     "eslint-config-prettier": "8.7.0",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "prettier": "2.8.3",
     "rollup-plugin-swc3": "0.3.0",
     "typescript": "4.9.3",

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -39,7 +39,7 @@ export function Filter<Values, Key extends keyof Values>({
   const translatesLocaleKey = filter.localeKey ?? localeKey;
   const translates = useMemo(
     () => getLocale(translatesLocaleKey, locale, filter.locale),
-    [localeKey, locale, filter.locale],
+    [translatesLocaleKey, locale, filter.locale],
   );
 
   useOnClickOutsideWithRef(

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { format } from 'date-fns';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../../../types';
 import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
@@ -18,16 +19,16 @@ export function FilterValueView<Values, Key extends keyof Values>({
   ICommonProps<IFilterValueViewStyles>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  if (value === undefined || value === null) {
-    return <></>;
-  }
-
   const translatesLocaleKey = filter.localeKey ?? localeKey;
   const translates = useMemo(
     () => getLocale(translatesLocaleKey, locale, filter.locale),
-    [localeKey, locale, filter.locale],
+    [translatesLocaleKey, locale, filter.locale],
   );
 
+  if (isEmpty(value)) {
+    return <></>;
+  }
+
   if (filter.getSelectedValueView !== undefined) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
@@ -36,8 +37,8 @@ export function FilterValueView<Values, Key extends keyof Values>({
   const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
   const isDate = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
 
-  const displayValue = (v: any): string => {
-    if (v === undefined || v === null) {
+  const displayValue = (v: unknown): string => {
+    if (!isNotEmpty(v)) {
       return '';
     }
 
@@ -48,7 +49,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
       );
     }
 
-    if (typeof v === 'object' && v.value !== undefined) {
+    if (typeof v === 'object' && 'value' in v && isNotEmpty(v.value)) {
       return String(v.value);
     }
 
@@ -70,7 +71,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
   }
 
   if (filter.type === 'multiSelect') {
-    const multiSelectValue = value as unknown as IMultiSelectListValues<any>;
+    const multiSelectValue = value as IMultiSelectListValues<any>;
     const getView = filter.getValueView ?? defaultConvertFunction;
     const { include } = multiSelectValue;
 

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

@@ -1,13 +1,11 @@
-import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
-import { IFlexibleTableConfigType } from './types';
-import { IFlexibleTableStyles } from './FlexibleTable.styles';
+import { IFlexibleTableConfigType, IValueComponent } from './types';
 
 export default {
   title: 'Table/FlexibleTable',
   component: FlexibleTable,
-};
+} as ComponentMeta<typeof FlexibleTable>;
 
 interface ITableContent {
   contractCode: string;
@@ -22,8 +20,7 @@ interface ITableContent {
   status: string;
 }
 
-const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
-const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
+const Temp: IValueComponent<ITableContent, string> = ({ value }) => <>{value}</>;
 
 const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {
@@ -44,12 +41,12 @@ const config: IFlexibleTableConfigType<ITableContent> = {
     title: 'Sign Date',
   },
   partner: {
-    component: Temp1,
+    component: Temp,
     title: 'Partner',
   },
 };
 
-const content = [
+const content: ITableContent[] = [
   {
     contractCode: 'SOME_CODE',
     validFrom: new Date('2015-05-18'),
@@ -59,13 +56,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000632',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -77,13 +68,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000262',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -95,13 +80,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['SOME_CODE_1'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000392',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -113,13 +92,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -131,13 +104,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000632',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -149,13 +116,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000262',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -167,13 +128,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1-073-СТ/2010'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000392',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -185,13 +140,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -203,13 +152,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -221,13 +164,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -239,13 +176,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -257,17 +188,11 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'OB_UT_M119',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -275,13 +200,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -293,40 +212,25 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
 ];
 
-const tweak: IFlexibleTableStyles = {
-  tweakTableRow: {
-    tweakTableCell: {
-      root: {
-        color: 'red',
-      },
-    },
-  },
-};
-
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
   <div style={{ width: 500, overflow: 'auto' }}>
     <FlexibleTable<ITableContent>
       {...args}
-      uniqueField="contractCode"
-      expandableRowComponent={(item, _, close) =>
-        item.contractCode === 'OB_UT_M119' ? (
-          <div onClick={close}>всем привет :) {item.contractCode}</div>
-        ) : null
-      }
-      tweakStyles={tweak}
-      content={content}
       config={config}
+      content={content}
+      rowAttributes={['contractCode']}
+      expandableRowComponent={(_0, _1, close) => (
+        <div onClick={close}>
+          всем привет :)
+          <br />
+          Нажми на меня, чтобы закрыть
+        </div>
+      )}
     />
   </div>
 );
@@ -334,9 +238,14 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
 export const Default = Template.bind({});
 
 Default.args = {
-  isHorizontallyScrollable: true,
-  isFirstColumnSticky: true,
   isLoading: false,
+  isFirstColumnSticky: true,
+  isHorizontallyScrollable: true,
+  isExpandableRowComponentInitiallyOpen: false,
+};
+
+Default.argTypes = {
+  isExpandableRowComponentInitiallyOpen: { control: 'boolean' },
 };
 
 Default.parameters = {
@@ -344,6 +253,11 @@ Default.parameters = {
     exclude: [
       'data',
       'testId',
+      'content',
+      'config',
+      'rowAttributes',
+      'headerContent',
+      'tweakStyles',
       'onHeadClick',
       'onRowClick',
       'onRowHover',

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

@@ -6,8 +6,8 @@ export const STICKY_SHADOW_PADDING = 12;
 
 export const useStyles = createThemedStyles('FlexibleTable', {
   root: {
-    position: 'relative',
     width: '100%',
+    position: 'relative',
     borderCollapse: 'separate',
     borderSpacing: 0,
   },
@@ -102,13 +102,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   nothingFoundRow: {},
 
   nothingFound: {},
-
-  skeletonRow: {},
-
-  skeleton: {
-    height: 21,
-    padding: [14, 7],
-  },
 });
 
 export type IFlexibleTableStyles = ITweakStyles<