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

package/src/components/FiltersPane/types.ts

@@ -0,0 +1,126 @@
+import { FC, ReactNode } from 'react';
+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';
+import { IMultiSelectListValues } from '../MultiSelectList';
+
+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

@@ -0,0 +1,29 @@
+import { ComponentStory } from '@storybook/react';
+import { countries } from 'country-flag-icons';
+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

@@ -0,0 +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>;

package/src/components/Flag/Flag.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import Flags from 'country-flag-icons/react/3x2';
+import { hasFlag } from 'country-flag-icons';
+import { useTheme } from '../../hooks';
+import { Icon } from '../Icon';
+import { ICommonProps } from '../../types';
+
+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

@@ -0,0 +1 @@
+declare module 'country-flag-icons/react/3x2';

package/src/components/Flag/index.ts

@@ -0,0 +1,2 @@
+export * from './Flag';
+export type { FlagStyles } from './Flag.styles';

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

@@ -0,0 +1,80 @@
+import { ComponentStory } from '@storybook/react';
+import { FlexibleTable } from './FlexibleTable';
+import { FlexibleTableConfigType } from './types';
+import content from './fixture-test';
+
+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 config: FlexibleTableConfigType<ITableContent> = {
+  contractCode: {
+    title: 'Contract Code',
+  },
+  title: {
+    title: 'Title',
+    minWidth: 320,
+  },
+  validFrom: {
+    title: 'Valid From',
+  },
+  validTo: {
+    title: 'Valid From',
+  },
+  signDate: {
+    title: 'Sign Date',
+  },
+  partner: {
+    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',
+    ],
+  },
+};

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

@@ -0,0 +1,131 @@
+import { colors } from '../../theme';
+import { rgba } from '../../helpers';
+import { ComponentStyles } from '../../types';
+
+const STICKY_SHADOW_PADDING = 12;
+
+export const styles = {
+  root: {
+    position: 'relative',
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+  },
+
+  row: {
+    position: 'relative',
+  },
+
+  scroll: {
+    overflow: 'auto',
+    /*
+      Чтобы сделать таблицу на всю высоту проставьте
+      height у родителя таблицы у себя в проекте.
+      Например: height: calc(100vh -{высота шапки}px)
+    */
+    maxHeight: '100%',
+  },
+
+  horizontallyScrolled: {
+    '& $cellSticky': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+
+    '& $headerSticky::before': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  loader: {
+    position: 'sticky',
+    left: 0,
+    maxWidth: '100vw',
+    height: 48,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  headerRow: {
+    verticalAlign: 'bottom',
+  },
+
+  activeRow: {},
+
+  cell: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7, 14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  cellSticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    transition: ['box-shadow', '0.25s', 'ease-in-out'],
+  },
+
+  cellSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  header: {
+    position: 'sticky',
+    boxSizing: 'content-box',
+    top: 0,
+    zIndex: 10,
+    fontSize: 12,
+    fontWeight: 'normal',
+    padding: [0, 7, 16, 7],
+  },
+
+  headerSticky: {
+    zIndex: 20,
+    left: 0,
+    paddingLeft: 24,
+    paddingRight: 12,
+
+    '&::before': {
+      content: '""',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      background: 'transparent',
+      pointerEvents: 'none',
+      zIndex: 1,
+      transition: ['box-shadow', '0.25s', 'ease-in-out'],
+    },
+
+    '&::after': {
+      content: '""',
+      display: 'block',
+      width: STICKY_SHADOW_PADDING,
+      height: '100%',
+      position: 'absolute',
+      left: '100%',
+      top: 0,
+      background: `linear-gradient(90deg, ${colors.CLASSIC_WHITE}, ${rgba(
+        colors.CLASSIC_WHITE,
+        0,
+      )})`,
+      zIndex: 0,
+    },
+  },
+
+  headerSecond: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  editableRow: {
+    cursor: 'pointer',
+  },
+};
+
+export type FlexibleTableStyles = ComponentStyles<typeof styles>;

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -0,0 +1,241 @@
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+
+import { ThemedPreloader } from '../ThemedPreloader';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import {
+  FlexibleTableConfigType,
+  IInfinityScrollConfig,
+  ITitleComponent,
+} from './types';
+import TableRow from './TableRow';
+
+import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
+
+export interface IFlexibleTableProps<Values extends Record<string, any>>
+  extends ICommonProps {
+  tweakStyles?: FlexibleTableStyles;
+  content: Values[];
+  headerContent?: Partial<Record<keyof Values, any>>;
+  enabledColumns?: Array<keyof Values>;
+  activeRows?: number[];
+  config?: FlexibleTableConfigType<Values>;
+  isHorizontallyScrollable?: boolean;
+  isFirstColumnSticky?: boolean;
+  infinityScrollConfig?: IInfinityScrollConfig;
+  uniqueField?: keyof Values;
+  onHeadClick?: (column: keyof Values) => void;
+  onRowClick?: (id: string) => void;
+  onRowHover?: (id?: string) => void;
+  rowAttributes?: Array<keyof Values>;
+  refForScroll?: RefObject<HTMLDivElement>;
+  nothingFoundContent?: React.ReactNode;
+  expandableRowComponent?: (
+    item: Values,
+    isOpen: boolean,
+    close: () => void,
+  ) => React.ReactNode;
+  testId?: string;
+}
+
+export function FlexibleTable<Values extends Record<string, any>>({
+  data,
+  tweakStyles,
+  content,
+  headerContent,
+  config,
+  activeRows,
+  enabledColumns,
+  isHorizontallyScrollable,
+  isFirstColumnSticky,
+  infinityScrollConfig,
+  uniqueField,
+  onHeadClick,
+  onRowHover,
+  onRowClick,
+  refForScroll,
+  rowAttributes,
+  nothingFoundContent,
+  testId,
+  expandableRowComponent,
+}: IFlexibleTableProps<Values>): JSX.Element {
+  const { classes } = useTheme('FlexibleTable', styles, tweakStyles);
+
+  const observer = useRef<IntersectionObserver>();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (infinityScrollConfig) {
+        if (
+          infinityScrollConfig.isLoading ||
+          infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
+        ) {
+          return;
+        }
+
+        if (observer.current) {
+          observer.current.disconnect();
+        }
+
+        observer.current = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            infinityScrollConfig.onInfinityScroll(
+              infinityScrollConfig.activePage + 1,
+            );
+          }
+        });
+
+        if (node) {
+          observer.current.observe(node);
+        }
+      }
+    },
+    [
+      infinityScrollConfig?.activePage,
+      infinityScrollConfig?.totalPages,
+      infinityScrollConfig?.onInfinityScroll,
+    ],
+  );
+
+  const tableRowClasses = useMemo(
+    () => ({
+      root: classes.row,
+      active: classes.activeRow,
+      editable: classes.editableRow,
+      cell: {
+        root: classes.cell,
+        sticky: classes.cellSticky,
+        second: classes.cellSecond,
+      },
+    }),
+    [tweakStyles],
+  );
+
+  useEffect(() => {
+    const scrollContainer = (refForScroll ?? scrollRef).current;
+    if (
+      scrollContainer === null ||
+      !isHorizontallyScrollable ||
+      !isFirstColumnSticky
+    ) {
+      return;
+    }
+    const scrollHandler = (e: Event) => {
+      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+    };
+    scrollContainer.addEventListener('scroll', scrollHandler);
+    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
+  }, [scrollRef]);
+
+  return (
+    <div
+      ref={refForScroll ?? scrollRef}
+      className={clsx(
+        isHorizontallyScrollable && classes.scroll,
+        isHorizontallyScrolled && classes.horizontallyScrolled,
+      )}
+    >
+      <table
+        className={classes.root}
+        data-testid={testId}
+        {...addDataAttributes(data)}
+      >
+        <thead>
+          <tr className={clsx(classes.row, classes.headerRow)}>
+            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
+              const itemConfig = config?.[key];
+
+              let titleContent = itemConfig?.title ?? '';
+
+              if (itemConfig?.titleComponent !== undefined) {
+                const TitleComponent =
+                  itemConfig?.titleComponent as ITitleComponent<any>;
+                titleContent = <TitleComponent value={headerContent?.[key]} />;
+              }
+
+              return (
+                <th
+                  className={clsx(
+                    classes.header,
+                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
+                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
+                  )}
+                  style={{
+                    minWidth: itemConfig?.minWidth,
+                    width: itemConfig?.width,
+                    maxWidth: itemConfig?.maxWidth,
+                    textAlign: itemConfig?.titleAlign ?? 'left',
+                  }}
+                  key={key as string}
+                  onClick={() => (onHeadClick ? onHeadClick(key) : undefined)}
+                >
+                  {titleContent}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {content.length === 0 &&
+            nothingFoundContent !== undefined &&
+            !infinityScrollConfig?.isLoading &&
+            (infinityScrollConfig?.isLastPage === undefined ||
+              infinityScrollConfig.isLastPage) && (
+              <tr>
+                <td
+                  colSpan={(enabledColumns || Object.keys(content[0])).length}
+                >
+                  {nothingFoundContent}
+                </td>
+              </tr>
+            )}
+
+          {content.map((item, idx) => (
+            <TableRow
+              item={item}
+              uniqueField={uniqueField}
+              isActive={activeRows?.includes(idx) ?? false}
+              isFirstColumnSticky={isFirstColumnSticky}
+              onRowClick={onRowClick}
+              onRowHover={onRowHover}
+              enabledColumns={enabledColumns}
+              config={config}
+              classes={tableRowClasses}
+              key={uniqueField ? item[uniqueField] : idx}
+              rowAttributes={rowAttributes}
+              expandableRowComponent={expandableRowComponent}
+            />
+          ))}
+
+          {infinityScrollConfig !== undefined &&
+            !infinityScrollConfig.isLastPage && (
+              <tr>
+                <td
+                  colSpan={(enabledColumns || Object.keys(content[0])).length}
+                >
+                  <div
+                    ref={initIntersectionObserver}
+                    className={classes.loader}
+                  >
+                    <ThemedPreloader type="dots" />
+                  </div>
+                </td>
+              </tr>
+            )}
+        </tbody>
+      </table>
+    </div>
+  );
+}