@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/FlexibleTable/TableRow.tsx

@@ -0,0 +1,164 @@
+import React, { ReactNode, useState } from 'react';
+import clsx from 'clsx';
+
+import { FlexibleTableConfigType, INestedComponent } from './types';
+import { ICommonProps, IDataAttributes } from '../../types';
+import TableValue from './TableValue';
+import { addDataAttributes } from '../../helpers';
+
+interface ITableRowProps<Values extends Record<string, any>>
+  extends ICommonProps {
+  item: Values;
+  uniqueField?: keyof Values;
+  isFirstColumnSticky?: boolean;
+  isActive: boolean;
+  config?: FlexibleTableConfigType<Values>;
+  enabledColumns?: Array<keyof Values>;
+  rowAttributes?: Array<keyof Values>;
+  expandableRowComponent?: (
+    item: Values,
+    isOpen: boolean,
+    close: () => void,
+  ) => React.ReactNode;
+  onRowHover?: (id?: string) => void;
+  onRowClick?: (id: string) => void;
+  // чтобы не перерендеривать стили для каждой строчки / ячейки
+  // TODO: Можно лучше через Classes
+  classes: {
+    root: string;
+    active: string;
+    editable: string;
+    cell: {
+      root: string;
+      sticky: string;
+      second: string;
+    };
+  };
+}
+
+function TableRow<Values extends Record<string, any>>({
+  item,
+  uniqueField,
+  isFirstColumnSticky,
+  isActive,
+  config,
+  enabledColumns,
+  onRowHover,
+  onRowClick,
+  rowAttributes,
+  expandableRowComponent,
+  classes,
+}: ITableRowProps<Values>): JSX.Element {
+  const [isFocused, setFocused] = useState(false);
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
+    isOpen: false,
+  });
+
+  // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
+  // например: rowAttributes={['id']} => <tr data-id="x" />
+  const rowData = rowAttributes?.reduce((acc: IDataAttributes, cur) => {
+    const val = item[cur];
+    if (val !== undefined) {
+      acc[cur as string] = String(item[cur]);
+    }
+    return acc;
+  }, {});
+
+  const handleMouseLeave = () => {
+    if (onRowHover) {
+      onRowHover(undefined);
+    }
+    setFocused(false);
+  };
+
+  const updateNestedComponent = (component?: ReactNode, cellKey?: string) => {
+    setNestedComponent(
+      component === undefined
+        ? { isOpen: false }
+        : { isOpen: true, component, cellKey },
+    );
+  };
+
+  const closeNestedComponent = () => {
+    setNestedComponent({ isOpen: false });
+  };
+
+  const handleRowClick = () => {
+    if (uniqueField !== undefined) {
+      onRowClick?.(item[uniqueField]);
+    }
+
+    if (expandableRowComponent !== undefined) {
+      const newNestedComponent = expandableRowComponent(
+        item,
+        true,
+        closeNestedComponent,
+      );
+
+      if (!nestedComponent.isOpen && newNestedComponent !== null) {
+        updateNestedComponent(newNestedComponent);
+        return;
+      }
+
+      if (nestedComponent.isOpen && nestedComponent.cellKey === undefined) {
+        closeNestedComponent();
+        return;
+      }
+    }
+  };
+
+  const items = enabledColumns ?? Object.keys(item);
+
+  return (
+    <>
+      <tr
+        className={clsx(
+          classes.root,
+          isActive && classes.active,
+          (onRowClick !== undefined || onRowHover !== undefined) &&
+            classes.editable,
+        )}
+        onMouseEnter={(e) => {
+          if (uniqueField !== undefined && onRowHover !== undefined) {
+            e.stopPropagation();
+            onRowHover(item[uniqueField]);
+            setFocused(true);
+          }
+        }}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleRowClick}
+        {...addDataAttributes(rowData)}
+      >
+        {items.map((key, idx) => (
+          <TableValue
+            columnName={key as string}
+            isSticky={isFirstColumnSticky && idx === 0}
+            isSecond={isFirstColumnSticky && idx === 1}
+            key={key as string}
+            item={item}
+            config={config}
+            classes={classes.cell}
+            isFocusedRow={isFocused}
+            isNestedComponentExpanded={
+              nestedComponent.isOpen && nestedComponent.cellKey === key
+            }
+            isRowNestedComponentExpanded={
+              nestedComponent.isOpen && nestedComponent.cellKey === undefined
+            }
+            onSetNestedComponent={(component) =>
+              updateNestedComponent(component, key as string)
+            }
+          />
+        ))}
+      </tr>
+
+      {nestedComponent.isOpen && (
+        <tr className={classes.root}>
+          <td colSpan={items.length}>{nestedComponent.component}</td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+export default React.memo(TableRow) as typeof TableRow;

package/src/components/FlexibleTable/TableValue.tsx

@@ -0,0 +1,86 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { format } from 'date-fns';
+
+import type { ICommonProps } from '../../types';
+import type { FlexibleTableConfigType, IValueComponent } from './types';
+
+interface ITableValueProps<Values extends Record<string, any>>
+  extends ICommonProps {
+  item: Values;
+  columnName: keyof Values;
+  config?: FlexibleTableConfigType<Values>;
+  classes: {
+    root: string;
+    sticky: string;
+    second: string;
+  };
+  isFocusedRow?: boolean;
+  isSecond?: boolean;
+  isSticky?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}
+
+const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+function TableValue<Values extends Record<string, any>>({
+  item,
+  columnName,
+  config,
+  classes,
+  isFocusedRow,
+  isSecond,
+  isSticky,
+  isNestedComponentExpanded,
+  isRowNestedComponentExpanded,
+  onSetNestedComponent,
+}: ITableValueProps<Values>): JSX.Element {
+  const itemConfig = config?.[columnName];
+  const value = item[columnName];
+  let content = null;
+
+  if (itemConfig?.component) {
+    const ValueComponent = itemConfig?.component as IValueComponent<
+      Values,
+      typeof columnName
+    >;
+    content = (
+      <ValueComponent
+        value={value}
+        row={item}
+        isFocusedRow={isFocusedRow}
+        isNestedComponentExpanded={isNestedComponentExpanded}
+        isRowNestedComponentExpanded={isRowNestedComponentExpanded}
+        onSetNestedComponent={onSetNestedComponent}
+      />
+    );
+  } else if (typeof value === 'string' || typeof value === 'number') {
+    content = value;
+  } else if ((value as any) instanceof Date) {
+    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
+  }
+
+  return (
+    <td
+      key={columnName as string}
+      className={clsx(
+        classes.root,
+        isSticky && classes.sticky,
+        isSecond && classes.second,
+      )}
+      style={{
+        textAlign: itemConfig?.cellAlign,
+        position: isSticky ? 'sticky' : itemConfig?.position,
+        right: itemConfig?.right,
+        left: isSticky ? 0 : itemConfig?.left,
+        verticalAlign: itemConfig?.cellVerticalAlign,
+      }}
+    >
+      {content}
+    </td>
+  );
+}
+
+export default TableValue;

package/src/components/FlexibleTable/fixture-test.ts

@@ -0,0 +1,254 @@
+export default [
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE_1',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+  {
+    contractCode: 'SOME_CODE',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+    validFrom: new Date('2015-05-18'),
+    validTo: new Date('2020-05-18'),
+    title: 'Название',
+    signDate: new Date('2020-05-18'),
+    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',
+  },
+];

package/src/components/FlexibleTable/index.ts

@@ -0,0 +1,3 @@
+export * from './FlexibleTable';
+export * from './types';
+export type { FlexibleTableStyles } from './FlexibleTable.styles';

package/src/components/FlexibleTable/types.ts

@@ -0,0 +1,58 @@
+import { FC, ReactNode } from 'react';
+
+export type ITextAlignment = 'left' | 'center' | 'right';
+
+export type IVerticalAlignment =
+  | 'middle'
+  | 'top'
+  | 'bottom'
+  | 'baseline'
+  | 'sub'
+  | string;
+
+export type IPosition = 'sticky' | 'absolute' | 'relative' | 'static';
+
+export type ITitleComponent<Value> = FC<{
+  value?: Value;
+}>;
+
+export type IValueComponent<Values, Value> = FC<{
+  value?: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}>;
+
+export type FlexibleTableConfigType<Values> = {
+  [Key in keyof Values]?: {
+    title?: ReactNode;
+    titleComponent?: ITitleComponent<any>;
+    component?: IValueComponent<Values, Values[Key]>;
+    dateFormat?: string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+    titleAlign?: ITextAlignment;
+    cellAlign?: ITextAlignment;
+    cellVerticalAlign?: IVerticalAlignment;
+    position?: IPosition;
+    right?: number;
+    left?: number;
+  };
+};
+
+export interface IInfinityScrollConfig {
+  activePage: number;
+  totalPages: number;
+  isLoading: boolean;
+  isLastPage: boolean;
+  onInfinityScroll: (skip: number) => void;
+}
+
+export interface INestedComponent {
+  isOpen: boolean;
+  component?: ReactNode;
+  cellKey?: string;
+}

package/src/components/Icon/ComplexIconBoilerplate.tsx

@@ -0,0 +1,17 @@
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../hooks';
+import { complexIcons, IComplexIcon } from './complexIcons';
+
+interface IComplexIconBoilerplateProps {
+  type: IComplexIcon;
+}
+
+const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
+  const { theme } = useContext(ThemeContext);
+  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
+  const ComplexIcon = icons[type];
+
+  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
+};
+
+export default ComplexIconBoilerplate;

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,88 @@
+import { Icon, IIconType } from './Icon';
+import { icons } from './icons';
+import { complexIcons } from './complexIcons';
+
+const types: IIconType[] = [
+  ...Object.keys(icons),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+export default {
+  title: 'Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      display: 'flex',
+      // width: number('Container width', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+      // height: number('Container height', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </div>
+);
+
+export const Gallery = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      width: '80vw',
+    }}
+  >
+    {types.map((type) => (
+      <div
+        key={type}
+        style={{
+          width: 100,
+          height: 100,
+          margin: 1,
+          background: '#f7f7f7',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            margin: '10px 0',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#888',
+          }}
+        >
+          <Icon type={type} />
+        </div>
+        <div
+          style={{
+            fontFamily: 'Arial',
+            fontSize: 13,
+            color: '#747679',
+            overflow: 'hidden',
+            padding: '0 5px',
+          }}
+        >
+          {type}
+        </div>
+      </div>
+    ))}
+  </div>
+);

package/src/components/Icon/Icon.styles.ts

@@ -0,0 +1,10 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+};
+
+export type IconStyles = ComponentStyles<typeof styles>;