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

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -0,0 +1,519 @@
+import {
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  useCallback,
+  ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import { debounce } from 'ts-debounce';
+
+import { useIsMounted, useTheme, useTweakStyles } from '../../hooks';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { Button } from '../Button';
+import { SearchInput } from '../SearchInput';
+import { ICommonProps } from '../../types';
+import { addDataAttributes } from '../../helpers';
+import {
+  DEFAULT_LOCALE,
+  getLocale,
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+  MultiSelectLocales,
+} from './locales';
+
+import { MultiSelectListStyles, styles } from './MultiSelectList.styles';
+
+export interface IMultiSelectListValues<Option> {
+  include: Option[];
+}
+
+export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
+  tweakStyles?: MultiSelectListStyles;
+  value?: Value;
+  isSearchEnabled?: boolean;
+  width?: number | string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: Partial<IMultiSelectLocale>;
+  onClose?: () => void;
+  onChange: (val?: Value) => void;
+  options?: Option[];
+  fetchOptions?: (val?: string, page?: number) => Promise<Option[]>;
+  getValueView?: (val: Option) => ReactNode;
+  getValueId?: (val: Option) => string;
+  getValueString?: (val: Option) => string;
+  isGroupingEnabled?: boolean;
+  checkboxPosition?: 'left' | 'right';
+  pageSize?: number;
+  searchMaxLength?: number;
+  testId?: string;
+}
+
+const defaultConvertFunction = (val: unknown) => String(val);
+
+export function MultiSelectList<
+  Value extends IMultiSelectListValues<Option>,
+  Option = string,
+>({
+  value,
+  tweakStyles,
+  data,
+  isSearchEnabled = false,
+  width,
+  localeKey = DEFAULT_LOCALE,
+  locale = MultiSelectLocales[localeKey],
+  onChange,
+  onClose,
+  options,
+  fetchOptions,
+  isGroupingEnabled = isSearchEnabled,
+  getValueView = defaultConvertFunction,
+  getValueId = defaultConvertFunction,
+  getValueString = defaultConvertFunction,
+  checkboxPosition = 'left',
+  pageSize,
+  searchMaxLength,
+  testId,
+}: IMultiSelectListProps<Value, Option>): JSX.Element {
+  const isMounted = useIsMounted();
+  const { classes, componentStyles } = useTheme(
+    'MultiSelectList',
+    styles,
+    tweakStyles,
+    { width },
+  );
+
+  const tweakCheckboxStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakCheckbox',
+  );
+
+  const tweakSearchInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSearchInput',
+  );
+
+  const tweakClearButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakClearButton',
+  );
+
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  const chosenValues = value?.include;
+  const chosenValuesIds = useMemo(
+    () => chosenValues?.map(getValueId),
+    [getValueId, chosenValues],
+  );
+
+  const [keyCursorOn, setKeyCursorOn] = useState(0);
+  const [searchValue, setSearchValue] = useState('');
+  // Опции, которые получаем с бека при изменении строки поиска
+  const [allOptions, setAllOptions] = useState<Option[]>([]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingOptionsOnScroll, setLoadingOptionsOnScroll] = useState(false);
+
+  const [activePage, setActivePage] = useState(0);
+  const [isMaxPage, setIsMaxPage] = useState(false);
+
+  const observer = useRef<IntersectionObserver>();
+
+  const unchosenOptions = useMemo(
+    () => allOptions.filter((v) => !chosenValuesIds?.includes(getValueId(v))),
+    [getValueId, allOptions, chosenValuesIds],
+  );
+
+  const handleSearchInputChange = useCallback(
+    async (inputValue?: string) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions(inputValue?.trim() ?? '');
+        if (isMounted() && response !== undefined) {
+          setAllOptions(response);
+          setActivePage(0);
+          setIsMaxPage(
+            response.length === 0 ||
+              (pageSize !== undefined && response.length < pageSize),
+          );
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [fetchOptions, pageSize],
+  );
+
+  const changeSearchValue = useCallback(debounce(handleSearchInputChange), [
+    handleSearchInputChange,
+  ]);
+
+  function handleOnChange(inputValue: string) {
+    setSearchValue(inputValue);
+
+    if (fetchOptions === undefined) {
+      if (options !== undefined) {
+        const lowerSearchValue = inputValue.toLowerCase();
+        setAllOptions(
+          options.filter((o) =>
+            getValueString(o).toLowerCase().includes(lowerSearchValue),
+          ),
+        );
+      }
+    } else {
+      setIsLoading(true);
+      changeSearchValue(inputValue);
+    }
+  }
+
+  const handleSelectValue = (val: Option[]) => {
+    if (val.length === 0) {
+      onChange(undefined);
+      return;
+    }
+
+    onChange({
+      include: val,
+    } as Value);
+  };
+
+  const handleClear = () => {
+    onChange(undefined);
+  };
+
+  const onSelect: ICheckboxProps<Option>['onSelect'] = (val) => {
+    handleSelectValue(
+      val.isSelected
+        ? [...(chosenValues ?? []), val.value]
+        : chosenValues?.filter(
+            (v) => getValueId(v) !== getValueId(val.value),
+          ) ?? [],
+    );
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    // TODO: это все очень плохо работает
+    if (event.code === 'Escape') {
+      onChange(value);
+      if (onClose) {
+        onClose();
+      }
+    }
+    if (event.code === 'ArrowDown') {
+      if (
+        keyCursorOn <
+        unchosenOptions.length + (value?.include.length ?? 0) - 1
+      ) {
+        setKeyCursorOn(keyCursorOn + 1);
+      }
+    }
+    if (event.code === 'ArrowUp') {
+      if (keyCursorOn >= 1) {
+        setKeyCursorOn(keyCursorOn - 1);
+      }
+    }
+    if (event.code === 'Enter') {
+      if (
+        unchosenOptions[keyCursorOn] === undefined &&
+        (value === undefined || value.include.length === 0)
+      ) {
+        return;
+      }
+      if (value !== undefined) {
+        if (keyCursorOn < value.include.length) {
+          onChange({
+            ...value,
+            include:
+              value.include.filter(
+                (val) =>
+                  getValueId(val) !== getValueId(value.include[keyCursorOn]),
+              ) ?? [],
+          });
+        } else {
+          onChange({
+            ...value,
+            include: [
+              ...value.include,
+              unchosenOptions[keyCursorOn - value.include.length],
+            ],
+          });
+        }
+      } else {
+        onChange({
+          include: [unchosenOptions[keyCursorOn]],
+        } as Value);
+      }
+    }
+  };
+
+  const getIsValueChosen = (id: string) =>
+    chosenValues?.some((v) => getValueId(v) === id);
+
+  const handleLoadItemsOnScroll = useCallback(
+    async (inputValue?: string, page?: number) => {
+      if (fetchOptions === undefined) {
+        return;
+      }
+
+      setLoadingOptionsOnScroll(true);
+
+      try {
+        const response = await fetchOptions(inputValue ?? '', page ?? 0);
+        if (isMounted()) {
+          if (response.length > 0) {
+            setAllOptions((prevState) => [...prevState, ...response]);
+          }
+          if (
+            response.length === 0 ||
+            (pageSize !== undefined && response.length < pageSize)
+          ) {
+            setIsMaxPage(true);
+          }
+        }
+      } finally {
+        if (isMounted()) {
+          setLoadingOptionsOnScroll(false);
+        }
+      }
+    },
+    [fetchOptions, getValueId],
+  );
+
+  const initIntersectionObserver = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoadingOptionsOnScroll || isMaxPage) {
+        return;
+      }
+
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+
+      observer.current = new IntersectionObserver(async (entries) => {
+        if (entries[0].isIntersecting) {
+          await handleLoadItemsOnScroll(searchValue, activePage + 1);
+          if (isMounted()) {
+            setActivePage((prevState) => prevState + 1);
+          }
+        }
+      });
+
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [
+      activePage,
+      handleLoadItemsOnScroll,
+      isLoadingOptionsOnScroll,
+      isMaxPage,
+      searchValue,
+    ],
+  );
+
+  useEffect(() => {
+    if (fetchOptions === undefined) {
+      setAllOptions(options ?? []);
+      return;
+    }
+
+    const doFetchOptions = async () => {
+      setIsLoading(true);
+
+      try {
+        const response = await fetchOptions('');
+        if (response !== undefined && isMounted()) {
+          if (
+            response.length === 0 ||
+            (pageSize !== undefined && response.length < pageSize)
+          ) {
+            setIsMaxPage(true);
+          }
+          setAllOptions(response);
+        }
+      } finally {
+        if (isMounted()) {
+          setIsLoading(false);
+        }
+      }
+    };
+    doFetchOptions();
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+
+  const mainOptionsList = isGroupingEnabled ? unchosenOptions : allOptions;
+
+  const hasSelectedOptionsGroup =
+    isGroupingEnabled && chosenValues !== undefined && chosenValues.length > 0;
+
+  const shouldShowNothingFoundMessage = !isLoading && allOptions.length === 0;
+
+  const shouldShowAllOptionsLabel =
+    isGroupingEnabled &&
+    unchosenOptions.length > 0 &&
+    chosenValues !== undefined &&
+    chosenValues.length > 0;
+
+  const shouldShowPreloader = isLoading || isLoadingOptionsOnScroll;
+
+  const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      {isSearchEnabled && (
+        <div className={classes.dropdownInput}>
+          <SearchInput
+            value={searchValue}
+            placeholder={translates.searchPlaceholder}
+            onChange={handleOnChange}
+            tweakStyles={tweakSearchInputStyles}
+            maxLength={searchMaxLength}
+            testId={testId !== undefined ? `${testId}-search` : undefined}
+            shouldFocusOnMount
+          />
+        </div>
+      )}
+      {shouldShowOptionsList && (
+        <div
+          className={classes.list}
+          data-testid={testId !== undefined ? `${testId}-list` : undefined}
+        >
+          {/* Выбранные */}
+          {hasSelectedOptionsGroup && (
+            <>
+              <div
+                className={clsx(
+                  classes.label,
+                  classes.labelChosen,
+                  !isSearchEnabled && classes.withoutTopGap,
+                )}
+              >
+                {translates.chosen}
+              </div>
+              {chosenValues?.map((val) => {
+                const id = getValueId(val);
+                const view = getValueView(val);
+
+                return (
+                  <div
+                    className={clsx(
+                      classes.item,
+                      // keyCursorOn === index && classes.selectedItem,
+                    )}
+                    key={id}
+                  >
+                    <Checkbox
+                      onSelect={onSelect}
+                      isChecked
+                      value={val}
+                      tweakStyles={tweakCheckboxStyles}
+                      labelPosition={
+                        checkboxPosition === 'left' ? 'right' : 'left'
+                      }
+                    >
+                      <div className={classes.option} data-option={id}>
+                        {view}
+                      </div>
+                    </Checkbox>
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {!isLoading && (
+            <>
+              {/* Не выбранные (или все если нет группировки) */}
+              {shouldShowAllOptionsLabel && (
+                <div className={classes.label}>{translates.all}</div>
+              )}
+
+              {mainOptionsList.map((val, index) => {
+                const id = getValueId(val);
+                const view = getValueView(val);
+
+                return (
+                  <div
+                    className={clsx(
+                      classes.item,
+                      // keyCursorOn === index + (value?.include.length ?? 0) &&
+                      //  classes.selectedItem,
+                    )}
+                    ref={
+                      mainOptionsList.length - 1 === index
+                        ? initIntersectionObserver
+                        : undefined
+                    }
+                    key={id}
+                  >
+                    <Checkbox
+                      onSelect={onSelect}
+                      isChecked={getIsValueChosen(id)}
+                      value={val}
+                      tweakStyles={tweakCheckboxStyles}
+                      labelPosition={
+                        checkboxPosition === 'left' ? 'right' : 'left'
+                      }
+                    >
+                      <div className={classes.option} data-option={id}>
+                        {view}
+                      </div>
+                    </Checkbox>
+                  </div>
+                );
+              })}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Preloader */}
+      {shouldShowPreloader && (
+        <div className={classes.preloader}>
+          <ThemedPreloader type="dots" />
+        </div>
+      )}
+
+      {/* Nothing found */}
+      {shouldShowNothingFoundMessage && (
+        <div className={classes.nothingFound}>{translates.nothingFound}</div>
+      )}
+
+      {/* Controls */}
+      <div className={classes.panel}>
+        <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>
+    </div>
+  );
+}

package/src/components/MultiSelectList/index.ts

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

package/src/components/MultiSelectList/locales.ts

@@ -0,0 +1,37 @@
+import { merge } from 'lodash';
+
+export interface IMultiSelectLocale {
+  clear: string;
+  all: string;
+  chosen: string;
+  searchPlaceholder: string;
+  nothingFound: string;
+}
+
+export const MultiSelectLocales: Record<string, IMultiSelectLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    chosen: 'Выбранные',
+    nothingFound: 'Не найдено',
+    searchPlaceholder: 'Поиск',
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    searchPlaceholder: 'Search',
+  },
+};
+
+export type IMultiSelectLocaleKey = keyof typeof MultiSelectLocales;
+
+export const DEFAULT_LOCALE: IMultiSelectLocaleKey = 'en';
+
+export const getLocale = (
+  key: IMultiSelectLocaleKey = DEFAULT_LOCALE,
+  custom?: Partial<IMultiSelectLocale>,
+  custom2?: Partial<IMultiSelectLocale>,
+): IMultiSelectLocale => merge({}, MultiSelectLocales[key], custom, custom2);

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react';
+import { INotificationProps, Notification } from './Notification';
+
+const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
+
+interface IStory extends INotificationProps {
+  shouldUseChildrenInstead: boolean;
+}
+
+export default {
+  title: 'Notification',
+  component: Notification,
+  args: {
+    title: 'Notification title',
+    text: lorem,
+    size: 's',
+    type: 'info',
+    isFullWidth: false,
+    shouldUseChildrenInstead: false,
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
+    type: {
+      control: 'inline-radio',
+      options: ['error', 'info', 'warning', 'ok', 'not-ok'],
+    },
+  },
+} as Meta<IStory>;
+
+export const Default: Story<IStory> = ({
+  title,
+  text,
+  shouldUseChildrenInstead,
+  ...args
+}) => {
+  const children = (
+    <div>
+      Some childrens with <a href="google.com">tags</a>
+    </div>
+  );
+
+  return (
+    <Notification
+      {...args}
+      title={!shouldUseChildrenInstead ? title : undefined}
+      text={!shouldUseChildrenInstead ? text : undefined}
+    >
+      {shouldUseChildrenInstead ? children : undefined}
+    </Notification>
+  );
+};

package/src/components/Notification/Notification.styles.ts

@@ -0,0 +1,50 @@
+import { ComponentStyles } from '../../types';
+import type { NotificationType } from './Notification';
+
+interface IStyleProps {
+  type: NotificationType;
+}
+
+export const styles = {
+  root: {
+    display: 'flex',
+  },
+
+  inline: {
+    width: 'fit-content',
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 16,
+    flexShrink: 0,
+  },
+
+  body: {
+    flexGrow: 1,
+  },
+
+  title: {
+    display: 'block',
+    fontWeight: 'bold',
+  },
+
+  text: {
+    display: 'block',
+  },
+
+  content: {},
+
+  s: {},
+
+  m: {},
+
+  l: {},
+
+  withText: {},
+
+  withTitle: {},
+};
+
+export type NotificationStyles = ComponentStyles<typeof styles, IStyleProps>;