@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

package/src/components/FlexibleTable/types.ts

@@ -1,52 +1,52 @@
-import { CSSProperties, FC, ReactNode } from 'react';
-
-export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export type ITableRow = Record<string, any>;
-
-export type ITitleComponent<Value> = FC<{
-  value?: Value;
-}>;
-
-export type IValueComponent<Values, Value> = (props: {
-  value: Value;
-  row: Values;
-  isFocusedRow?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}) => JSX.Element | ReactNode;
-
-export type IFlexibleTableConfigType<Values> = {
-  [Key in keyof Values]?: {
-    title?: ReactNode;
-    titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
-    dateFormat?: string;
-    minWidth?: string | number;
-    width?: string | number;
-    maxWidth?: string | number;
-    /** @default 'left' */
-    titleAlign?: CSSProperties['textAlign'];
-    cellAlign?: CSSProperties['textAlign'];
-    cellVerticalAlign?: CSSProperties['verticalAlign'];
-    position?: CSSProperties['position'];
-    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;
-}
+import { CSSProperties, FC, ReactNode } from 'react';
+
+export type IFlexibleTableRenderMode = 'table' | 'divs';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
+
+export type ITitleComponent<Value> = FC<{
+  value?: Value;
+}>;
+
+export type IValueComponent<Values, Value> = (props: {
+  value: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}) => JSX.Element | ReactNode;
+
+export type IFlexibleTableConfigType<Values> = {
+  [Key in keyof Values]?: {
+    title?: ReactNode;
+    titleComponent?: ITitleComponent<unknown>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
+    dateFormat?: string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+    /** @default 'left' */
+    titleAlign?: CSSProperties['textAlign'];
+    cellAlign?: CSSProperties['textAlign'];
+    cellVerticalAlign?: CSSProperties['verticalAlign'];
+    position?: CSSProperties['position'];
+    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/Icon.stories.tsx

@@ -1,86 +1,86 @@
-import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-import { IIconType } from './types';
-
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/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>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Data Display/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/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/index.ts

@@ -1 +1 @@
-export * from './icons';
+export * from './icons';

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,105 +1,105 @@
-import { FC, useEffect } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { INumberInputProps, NumberInput } from '../NumberInput';
-import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
-
-export interface IIncrementInputProps
-  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
-    ICommonProps<IIncrementInputStyles> {
-  /** @default 1 */
-  step?: number;
-}
-
-export const IncrementInput: FC<IIncrementInputProps> = ({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  intPartPrecision,
-  data,
-  testId,
-  tweakStyles,
-  isDisabled,
-  isReadonly,
-  isInvalid,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'IncrementInput',
-  });
-
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isIncreaseDisabled =
-    isDisabled ||
-    isReadonly ||
-    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-    (max !== undefined && value !== undefined && value >= max);
-
-  const isDecreaseDisabled =
-    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
-
-  const increment = (): void => {
-    onChange(getNumberInRange((value ?? 0) + step, min, max));
-  };
-
-  const decrement = (): void => {
-    onChange(getNumberInRange((value ?? 0) - step, min, max));
-  };
-
-  useEffect(() => {
-    if (!isNumberInteger(step)) {
-      console.error('Параметр step должен быть целым числом');
-    }
-  }, [step]);
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <NumberInput
-        {...props}
-        isInvalid={isInvalid}
-        isDisabled={isDisabled}
-        isReadonly={isReadonly}
-        min={min}
-        max={max}
-        intPartPrecision={intPartPrecision}
-        onChange={onChange}
-        value={value}
-        tweakStyles={tweakInputStyles}
-      />
-      <div className={classes.buttons}>
-        <button
-          className={clsx(classes.button, {
-            [classes.disabledButton]: isIncreaseDisabled,
-            [classes.errorButton]: isInvalid,
-          })}
-          type="button"
-          disabled={isIncreaseDisabled}
-          onClick={increment}
-        >
-          <Icon type="plus" />
-        </button>
-        <button
-          className={clsx(classes.button, {
-            [classes.disabledButton]: isDecreaseDisabled,
-            [classes.errorButton]: isInvalid,
-          })}
-          type="button"
-          disabled={isDecreaseDisabled}
-          onClick={decrement}
-        >
-          <Icon type="minus" />
-        </button>
-      </div>
-    </div>
-  );
-};
+import { FC, useEffect } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { INumberInputProps, NumberInput } from '../NumberInput';
+import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
+
+export interface IIncrementInputProps
+  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
+    ICommonProps<IIncrementInputStyles> {
+  /** @default 1 */
+  step?: number;
+}
+
+export const IncrementInput: FC<IIncrementInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  intPartPrecision,
+  data,
+  testId,
+  tweakStyles,
+  isDisabled,
+  isReadonly,
+  isInvalid,
+  ...props
+}) => {
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'IncrementInput',
+  });
+
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isIncreaseDisabled =
+    isDisabled ||
+    isReadonly ||
+    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (max !== undefined && value !== undefined && value >= max);
+
+  const isDecreaseDisabled =
+    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
+
+  const increment = (): void => {
+    onChange(getNumberInRange((value ?? 0) + step, min, max));
+  };
+
+  const decrement = (): void => {
+    onChange(getNumberInRange((value ?? 0) - step, min, max));
+  };
+
+  useEffect(() => {
+    if (!isNumberInteger(step)) {
+      console.error('Параметр step должен быть целым числом');
+    }
+  }, [step]);
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <NumberInput
+        {...props}
+        isInvalid={isInvalid}
+        isDisabled={isDisabled}
+        isReadonly={isReadonly}
+        min={min}
+        max={max}
+        intPartPrecision={intPartPrecision}
+        onChange={onChange}
+        value={value}
+        tweakStyles={tweakInputStyles}
+      />
+      <div className={classes.buttons}>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isIncreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isIncreaseDisabled}
+          onClick={increment}
+        >
+          <Icon type="plus" />
+        </button>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isDecreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isDecreaseDisabled}
+          onClick={decrement}
+        >
+          <Icon type="minus" />
+        </button>
+      </div>
+    </div>
+  );
+};