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

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx

@@ -0,0 +1,94 @@
+import { FC, useCallback, useMemo } from 'react';
+import { getYear, getMonth } from 'date-fns';
+import { Icon } from '../../Icon';
+import { Select } from '../../Select';
+import { useTheme } from '../../../hooks';
+
+import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
+
+export interface IDatePickerHeaderProps {
+  tweakStyles?: DatePickerHeaderStyles;
+  date: Date;
+  changeYear: (year: number) => void;
+  changeMonth: (month: number) => void;
+  decreaseMonth: () => void;
+  increaseMonth: () => void;
+  isPrevMonthButtonDisabled: boolean;
+  isNextMonthButtonDisabled: boolean;
+  months: string[];
+}
+
+export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
+  date,
+  changeYear,
+  changeMonth,
+  decreaseMonth,
+  increaseMonth,
+  isPrevMonthButtonDisabled,
+  isNextMonthButtonDisabled,
+  months,
+}) => {
+  const { classes, componentStyles } = useTheme('DatePickerHeader', styles);
+
+  const years = useMemo(
+    () =>
+      Array.from(Array(41)).map((_, i: number) => getYear(new Date()) - 30 + i),
+    [],
+  );
+
+  const getMonthNumber = useCallback(
+    (month: string): number => months.findIndex((m) => m === month),
+    [months],
+  );
+
+  return (
+    <div className={classes.header}>
+      <div className={classes.select}>
+        <div className={classes.selectValue}>{months[getMonth(date)]}</div>
+        <div className={classes.selectControl}>
+          <Select
+            value={months[getMonth(date)]}
+            options={months}
+            onChange={(value) => changeMonth(getMonthNumber(value as string))}
+            tweakStyles={componentStyles.tweakSelect}
+            dropdownIcon="chevron-down-small"
+          />
+        </div>
+      </div>
+      <div className={classes.select}>
+        <div className={classes.selectValue}>{getYear(date)}</div>
+        <div className={classes.selectControl}>
+          <Select
+            value={getYear(date)}
+            options={years}
+            onChange={(value) => {
+              changeYear(value as number);
+            }}
+            tweakStyles={componentStyles.tweakSelect}
+            dropdownIcon="chevron-down-small"
+          />
+        </div>
+      </div>
+
+      <div className={classes.buttons}>
+        <button
+          onClick={decreaseMonth}
+          disabled={isPrevMonthButtonDisabled}
+          className={classes.btn}
+          type="button"
+        >
+          <Icon type="chevron-left" />
+        </button>
+
+        <button
+          onClick={increaseMonth}
+          disabled={isNextMonthButtonDisabled}
+          className={classes.btn}
+          type="button"
+        >
+          <Icon type="chevron-right" />
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/DatePicker/DatePickerHeader/index.ts

@@ -0,0 +1 @@
+export * from './DatePickerHeader';

package/src/components/DatePicker/DatePickerInput/DatePickerInput.styles.ts

@@ -0,0 +1,25 @@
+import { ComponentStyles } from '../../../types';
+
+export const styles = {
+  customInput: {
+    width: '100%',
+    height: '100%',
+  },
+
+  s: {
+    width: 184,
+    height: '100%',
+  },
+
+  m: {
+    width: 300,
+    height: '100%',
+  },
+
+  full: {
+    width: '100%',
+    height: '100%',
+  },
+};
+
+export type DatePickerInputStyles = ComponentStyles<typeof styles>;

package/src/components/DatePicker/DatePickerInput/DatePickerInput.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, ReactElement } from 'react';
+import clsx from 'clsx';
+
+import { useTheme } from '../../../hooks';
+
+import { DatePickerInputStyles, styles } from './DatePickerInput.styles';
+
+export interface IDatePickerInputProps {
+  tweakStyles?: DatePickerInputStyles;
+  onClick?: () => void;
+  children: ReactElement;
+  className?: string;
+  size?: 's' | 'm' | 'full';
+  isOpen?: boolean;
+}
+
+// TODO: why forward ref
+export const DatePickerInput = forwardRef<
+  HTMLDivElement,
+  IDatePickerInputProps
+>(({ onClick, children, size = 'full', className }, ref) => {
+  const { classes } = useTheme('DatePickerInput', styles);
+
+  return (
+    <div className={clsx(classes.customInput, className)}>
+      <div className={classes[size]} onClick={onClick} ref={ref}>
+        {children}
+      </div>
+    </div>
+  );
+});

package/src/components/DatePicker/DatePickerInput/index.ts

@@ -0,0 +1 @@
+export * from './DatePickerInput';

package/src/components/DatePicker/index.ts

@@ -0,0 +1,4 @@
+export * from './DatePicker';
+export type { DatePickerStyles } from './DatePicker.styles';
+export type { DatePickerHeaderStyles } from './DatePickerHeader/DatePickerHeader.styles';
+export type { DatePickerInputStyles } from './DatePickerInput/DatePickerInput.styles';

package/src/components/Description/Description.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory } from '@storybook/react';
+import { Description } from './Description';
+
+export default {
+  title: 'Description',
+  component: Description,
+  argTypes: {
+    truncateIndex: {
+      control: { type: 'range', min: 20, max: 600, step: 10 },
+    },
+  },
+};
+
+const lorem =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
+
+const Template: ComponentStory<typeof Description> = (args) => (
+  <Description {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: lorem,
+  moreTitle: 'подробнее',
+  lessTitle: 'скрыть',
+  truncateIndex: 150,
+  isAlwaysOpen: false,
+};

package/src/components/Description/Description.styles.ts

@@ -0,0 +1,31 @@
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {},
+
+  button: {
+    cursor: 'pointer',
+    display: 'inline-block',
+    color: colors.FONT_MEDIUM,
+    marginTop: 18,
+    textTransform: 'capitalize',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+
+  link: {
+    color: colors.FONT_MEDIUM,
+    textDecoration: 'none',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+};
+
+export type DescriptionStyles = ComponentStyles<typeof styles>;

package/src/components/Description/Description.tsx

@@ -0,0 +1,69 @@
+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>
+  );
+};

package/src/components/Description/index.ts

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

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

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

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

@@ -0,0 +1,162 @@
+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>
+  );
+};

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

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

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

@@ -0,0 +1,14 @@
+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} />;
+}

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

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

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

@@ -0,0 +1,144 @@
+import { colors, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+const ITEM_HEIGHT = 40;
+const LIST_GAP = 12;
+
+export const styles = {
+  root: {
+    width: ({ width }: { width: string | number }): string | number =>
+      width ?? 220,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  list: {
+    paddingTop: LIST_GAP,
+    padding: [LIST_GAP, 0],
+    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP * 2,
+    overscrollBehavior: 'contain',
+    ...helpers.withScrollBar,
+  },
+
+  label: {
+    boxSizing: 'border-box',
+    fontSize: 14,
+    padding: [12, 16],
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.FONT_LABEL,
+  },
+
+  labelChosen: {
+    fontWeight: 'bold',
+    color: colors.FONT_MAIN,
+    padding: [4, 16, 12],
+  },
+
+  withoutTopGap: {
+    paddingTop: 0,
+  },
+
+  withClearButton: {
+    paddingBottom: 0,
+    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP,
+  },
+
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: [10, 16],
+    maxWidth: '100%',
+    cursor: 'pointer',
+    fontSize: 14,
+    minHeight: ITEM_HEIGHT,
+    transition: 'background-color 0.25s ease-in-out',
+    boxSizing: 'border-box',
+  },
+
+  option: {
+    display: 'inline-block',
+    userSelect: 'none',
+    width: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    alignSelf: 'center',
+    flexShrink: 0,
+  },
+
+  panel: {
+    display: 'flex',
+    padding: [0, 6, 8],
+    gap: 8,
+  },
+
+  panelWithFooter: {
+    borderTop: [1, 'solid', colors.BORDER_MAIN],
+    padding: [8, 16],
+  },
+
+  footer: {
+    wordBreak: 'break-word',
+    alignSelf: 'center',
+  },
+
+  clear: {
+    marginLeft: 'auto',
+    alignSelf: 'center',
+  },
+
+  preloader: {
+    width: 80,
+    height: ITEM_HEIGHT,
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  nothingFound: {
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    padding: 16,
+    fontSize: 14,
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: 40,
+      },
+    },
+  },
+
+  tweakClearButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+};
+
+export type FilterSelectStyles = ComponentStyles<typeof styles>;