@true-engineering/true-react-common-ui-kit 2.1.0 → 2.2.0

package/src/components/Description/Description.tsx

@@ -1,69 +1,60 @@
-import { FC, useState } from 'react';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
-
-import { DescriptionStyles, styles } from './Description.styles';
-
-export interface IDescriptionProps extends ICommonProps {
-  tweakStyles?: DescriptionStyles;
-  text: string;
-  moreTitle?: string;
-  lessTitle?: string;
-  truncateIndex?: number;
-  isAlwaysOpen?: boolean;
-}
-
-const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
-
-export const Description: FC<IDescriptionProps> = ({
-  text,
-  moreTitle,
-  lessTitle,
-  truncateIndex = 150,
-  isAlwaysOpen = true,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('Description', styles, tweakStyles);
-
-  const isTooShort = text.length < truncateIndex;
-  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
-  const link = text.match(LINK_REGEXP);
-  const linkText = link && link[0];
-  const textWithNoLink = text.replace(LINK_REGEXP, '');
-
-  const shortText = text.slice(
-    0,
-    text.slice(0, truncateIndex).lastIndexOf(' '),
-  );
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      {isAlwaysOpen || isOpen || isTooShort ? (
-        <div>
-          <span>{textWithNoLink} </span>
-          {!!linkText && (
-            <a
-              className={classes.link}
-              href={linkText}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {linkText}
-            </a>
-          )}
-        </div>
-      ) : (
-        <div>
-          <span>{shortText}</span>
-        </div>
-      )}
-      {isAlwaysOpen || isTooShort ? undefined : (
-        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? lessTitle : moreTitle}
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, useState } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { DescriptionStyles, styles } from './Description.styles';
+
+export interface IDescriptionProps extends ICommonProps {
+  tweakStyles?: DescriptionStyles;
+  text: string;
+  moreTitle?: string;
+  lessTitle?: string;
+  truncateIndex?: number;
+  isAlwaysOpen?: boolean;
+}
+
+const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
+
+export const Description: FC<IDescriptionProps> = ({
+  text,
+  moreTitle,
+  lessTitle,
+  truncateIndex = 150,
+  isAlwaysOpen = true,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('Description', styles, tweakStyles);
+
+  const isTooShort = text.length < truncateIndex;
+  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
+  const link = text.match(LINK_REGEXP);
+  const linkText = link && link[0];
+  const textWithNoLink = text.replace(LINK_REGEXP, '');
+
+  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      {isAlwaysOpen || isOpen || isTooShort ? (
+        <div>
+          <span>{textWithNoLink} </span>
+          {!!linkText && (
+            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
+              {linkText}
+            </a>
+          )}
+        </div>
+      ) : (
+        <div>
+          <span>{shortText}</span>
+        </div>
+      )}
+      {isAlwaysOpen || isTooShort ? undefined : (
+        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? lessTitle : moreTitle}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Description/index.ts

@@ -1,2 +1,2 @@
-export * from './Description';
-export type { DescriptionStyles } from './Description.styles';
+export * from './Description';
+export type { DescriptionStyles } from './Description.styles';

package/src/components/FiltersPane/FilterInterval/FilterInterval.styles.ts

@@ -1,64 +1,64 @@
-import { colors } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-export const styles = {
-  root: {
-    padding: 8,
-    background: colors.CLASSIC_WHITE,
-  },
-
-  inputWrapper: {
-    padding: [4, 12],
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: 20,
-    marginBottom: 12,
-  },
-
-  autosize: {
-    minWidth: 120,
-    height: 0,
-    opacity: 0,
-    paddingRight: 16,
-    fontSize: 16,
-    whiteSpace: 'pre',
-    userSelect: 'none',
-    pointerEvents: 'none',
-  },
-
-  clear: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-
-  tweakInput: {
-    input: {
-      minWidth: 120,
-    },
-
-    icon: {
-      padding: 0,
-      width: 24,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
-  },
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
-};
-
-export type FilterIntervalStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+export const styles = {
+  root: {
+    padding: 8,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  inputWrapper: {
+    padding: [4, 12],
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: 20,
+    marginBottom: 12,
+  },
+
+  autosize: {
+    minWidth: 120,
+    height: 0,
+    opacity: 0,
+    paddingRight: 16,
+    fontSize: 16,
+    whiteSpace: 'pre',
+    userSelect: 'none',
+    pointerEvents: 'none',
+  },
+
+  clear: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+
+  tweakInput: {
+    input: {
+      minWidth: 120,
+    },
+
+    icon: {
+      padding: 0,
+      width: 24,
+
+      '&:last-child': {
+        paddingRight: 0,
+      },
+    },
+  },
+
+  tweakClearButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+};
+
+export type FilterIntervalStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/FilterInterval/FilterInterval.tsx

@@ -1,162 +1,143 @@
-import { FC, useMemo } from 'react';
-
-import { ICommonProps } from '../../../types';
-import { useTheme, useTweakStyles } from '../../../hooks';
-import { addDataAttributes } from '../../../helpers';
-import { NumberInput } from '../../NumberInput';
-import { Button } from '../../Button';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
-
-import { FilterIntervalStyles, styles } from './FilterInterval.styles';
-
-export interface IFilterIntervalProps extends ICommonProps {
-  tweakStyles?: FilterIntervalStyles;
-  value?: Array<number | undefined>;
-  onChange: (value?: Array<number | undefined>) => void;
-  labelName: string;
-
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  withFieldNameInLabel?: boolean;
-  canBeFloat?: boolean;
-  fromInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  toInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  testId?: string;
-}
-
-const sortValues = (arr: Array<number | undefined>) =>
-  arr.includes(undefined)
-    ? arr
-    : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
-
-export const FilterInterval: FC<IFilterIntervalProps> = ({
-  data,
-  tweakStyles,
-  value,
-  labelName,
-  withFieldNameInLabel,
-  localeKey,
-  locale,
-  canBeFloat,
-  onChange,
-  fromInput,
-  toInput,
-  testId,
-}) => {
-  const { classes, componentStyles } = useTheme(
-    'FilterInterval',
-    styles,
-    tweakStyles,
-  );
-
-  const translates = useMemo(
-    () => getLocale(localeKey, locale),
-    [localeKey, locale],
-  );
-
-  const handleClear = () => {
-    onChange(undefined);
-  };
-
-  const handleFromChange = (v?: number) => {
-    if (v === undefined && value?.[1] === undefined) {
-      onChange(undefined);
-      return;
-    }
-    onChange(sortValues([v, value?.[1]]));
-  };
-
-  const handleToChange = (v?: number) => {
-    if (v === undefined && value?.[0] === undefined) {
-      onChange(undefined);
-      return;
-    }
-    onChange(sortValues([value?.[0], v]));
-  };
-
-  const tweakInputStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakInput',
-  );
-
-  const tweakClearButtonStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakClearButton',
-  );
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <div className={classes.inputWrapper}>
-        <div>
-          <NumberInput
-            onChange={handleFromChange}
-            value={value?.[0]}
-            label={
-              withFieldNameInLabel
-                ? `${labelName} ${translates.from.toLocaleLowerCase()}`
-                : translates.from
-            }
-            border="bottom"
-            canBeFloat={canBeFloat}
-            isClearable
-            min={fromInput?.min}
-            max={fromInput?.max}
-            maxLength={fromInput?.maxLength}
-            tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-start` : undefined}
-          />
-          {withFieldNameInLabel && (
-            <div className={classes.autosize}>
-              {labelName}&nbsp;{translates.from}
-            </div>
-          )}
-        </div>
-        <div>
-          <NumberInput
-            onChange={handleToChange}
-            value={value?.[1]}
-            label={
-              withFieldNameInLabel
-                ? `${labelName} ${translates.to.toLocaleLowerCase()}`
-                : translates.to
-            }
-            border="bottom"
-            canBeFloat={canBeFloat}
-            isClearable
-            min={toInput?.min}
-            max={toInput?.max}
-            maxLength={toInput?.maxLength}
-            tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-end` : undefined}
-          />
-          {withFieldNameInLabel && (
-            <div className={classes.autosize}>
-              {labelName}&nbsp;{translates.to}
-            </div>
-          )}
-        </div>
-      </div>
-      <div className={classes.clear}>
-        <Button
-          onClick={handleClear}
-          size="s"
-          view="text"
-          testId={testId !== undefined ? `${testId}-clear-button` : undefined}
-          tweakStyles={tweakClearButtonStyles}
-        >
-          {translates.clear}
-        </Button>
-      </div>
-    </div>
-  );
-};
+import { FC, useMemo } from 'react';
+import { addDataAttributes } from '../../../helpers';
+import { useTheme, useTweakStyles } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import { Button } from '../../Button';
+import { NumberInput } from '../../NumberInput';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
+import { FilterIntervalStyles, styles } from './FilterInterval.styles';
+
+export interface IFilterIntervalProps extends ICommonProps {
+  tweakStyles?: FilterIntervalStyles;
+  value?: Array<number | undefined>;
+  onChange: (value?: Array<number | undefined>) => void;
+  labelName: string;
+
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  withFieldNameInLabel?: boolean;
+  canBeFloat?: boolean;
+  fromInput?: {
+    min?: number;
+    max?: number;
+    maxLength?: number;
+  };
+  toInput?: {
+    min?: number;
+    max?: number;
+    maxLength?: number;
+  };
+  testId?: string;
+}
+
+const sortValues = (arr: Array<number | undefined>) =>
+  arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
+
+export const FilterInterval: FC<IFilterIntervalProps> = ({
+  data,
+  tweakStyles,
+  value,
+  labelName,
+  withFieldNameInLabel,
+  localeKey,
+  locale,
+  canBeFloat,
+  onChange,
+  fromInput,
+  toInput,
+  testId,
+}) => {
+  const { classes, componentStyles } = useTheme('FilterInterval', styles, tweakStyles);
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const handleClear = () => {
+    onChange(undefined);
+  };
+
+  const handleFromChange = (v?: number) => {
+    if (v === undefined && value?.[1] === undefined) {
+      onChange(undefined);
+      return;
+    }
+    onChange(sortValues([v, value?.[1]]));
+  };
+
+  const handleToChange = (v?: number) => {
+    if (v === undefined && value?.[0] === undefined) {
+      onChange(undefined);
+      return;
+    }
+    onChange(sortValues([value?.[0], v]));
+  };
+
+  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+
+  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <div className={classes.inputWrapper}>
+        <div>
+          <NumberInput
+            onChange={handleFromChange}
+            value={value?.[0]}
+            label={
+              withFieldNameInLabel
+                ? `${labelName} ${translates.from.toLocaleLowerCase()}`
+                : translates.from
+            }
+            border="bottom"
+            canBeFloat={canBeFloat}
+            isClearable
+            min={fromInput?.min}
+            max={fromInput?.max}
+            maxLength={fromInput?.maxLength}
+            tweakStyles={tweakInputStyles}
+            testId={testId !== undefined ? `${testId}-start` : undefined}
+          />
+          {withFieldNameInLabel && (
+            <div className={classes.autosize}>
+              {labelName}&nbsp;{translates.from}
+            </div>
+          )}
+        </div>
+        <div>
+          <NumberInput
+            onChange={handleToChange}
+            value={value?.[1]}
+            label={
+              withFieldNameInLabel
+                ? `${labelName} ${translates.to.toLocaleLowerCase()}`
+                : translates.to
+            }
+            border="bottom"
+            canBeFloat={canBeFloat}
+            isClearable
+            min={toInput?.min}
+            max={toInput?.max}
+            maxLength={toInput?.maxLength}
+            tweakStyles={tweakInputStyles}
+            testId={testId !== undefined ? `${testId}-end` : undefined}
+          />
+          {withFieldNameInLabel && (
+            <div className={classes.autosize}>
+              {labelName}&nbsp;{translates.to}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={classes.clear}>
+        <Button
+          onClick={handleClear}
+          size="s"
+          view="text"
+          testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+          tweakStyles={tweakClearButtonStyles}
+        >
+          {translates.clear}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/FiltersPane/FilterInterval/index.ts

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

package/src/components/FiltersPane/FilterMultiSelect/FilterMultiSelect.tsx

@@ -1,14 +1,10 @@
-import { IFilterMultiSelectValues } from '../types';
-import { IMultiSelectListProps, MultiSelectList } from '../../MultiSelectList';
-
-export type IFilterMultiSelectProps<
-  Value,
-  Option = string,
-> = IMultiSelectListProps<Value, Option>;
-
-export function FilterMultiSelect<
-  Value extends IFilterMultiSelectValues<Option>,
-  Option = string,
->(props: IFilterMultiSelectProps<Value, Option>): JSX.Element {
-  return <MultiSelectList {...props} />;
-}
+import { IMultiSelectListProps, MultiSelectList } from '../../MultiSelectList';
+import { IFilterMultiSelectValues } from '../types';
+
+export type IFilterMultiSelectProps<Value, Option = string> = IMultiSelectListProps<Value, Option>;
+
+export function FilterMultiSelect<Value extends IFilterMultiSelectValues<Option>, Option = string>(
+  props: IFilterMultiSelectProps<Value, Option>,
+): JSX.Element {
+  return <MultiSelectList {...props} />;
+}

package/src/components/FiltersPane/FilterMultiSelect/index.ts

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