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

package/src/components/MoreMenu/MoreMenu.tsx

@@ -0,0 +1,91 @@
+import clsx from 'clsx';
+import React, { FC, useRef, useState } from 'react';
+import { useOnClickOutsideWithRef, useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { addDataAttributes } from '../../helpers';
+import { IListItem, List } from '../List';
+import { Icon } from '../Icon';
+
+import { MoreMenuStyles, styles } from './MoreMenu.styles';
+
+export interface IMoreMenuProps extends ICommonProps {
+  tweakStyles?: MoreMenuStyles;
+  items: IListItem[];
+  isDisabled?: boolean;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
+  hasDefaultStateBackground?: boolean;
+  testId?: string;
+}
+
+export const MoreMenu: FC<IMoreMenuProps> = ({
+  items,
+  isDisabled,
+  data,
+  tweakStyles,
+  onMenuOpen,
+  onMenuClose,
+  hasDefaultStateBackground = true,
+  testId,
+}) => {
+  const { classes } = useTheme('MoreMenu', styles, tweakStyles);
+
+  const [isMenuShown, setIsMenuShown] = useState(false);
+  const list = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+
+  const toggleMenu = (event: React.MouseEvent) => {
+    const isShown = !isMenuShown;
+    event.stopPropagation();
+    setIsMenuShown(isShown);
+    if (isShown) {
+      if (onMenuOpen !== undefined) {
+        onMenuOpen();
+      }
+    } else {
+      if (onMenuClose !== undefined) {
+        onMenuClose();
+      }
+    }
+  };
+
+  const handleCloseMenu = () => {
+    setIsMenuShown(false);
+    if (onMenuClose !== undefined) {
+      onMenuClose();
+    }
+  };
+
+  useOnClickOutsideWithRef(list, handleCloseMenu, button);
+
+  const isButtonDisabled = isDisabled || items.length === 0;
+
+  return (
+    <div className={classes.root}>
+      <button
+        className={clsx(classes.button, {
+          [classes.hasCircle]: hasDefaultStateBackground,
+          [classes.disabled]: isButtonDisabled,
+          [classes.active]: isMenuShown,
+        })}
+        onClick={!isButtonDisabled ? toggleMenu : undefined}
+        ref={button}
+        data-testid={testId}
+        {...addDataAttributes(data)}
+      >
+        <div className={classes.icon}>
+          <Icon type="menu" />
+        </div>
+      </button>
+      {isMenuShown && !isButtonDisabled && (
+        <div className={classes.menu} ref={list}>
+          <List
+            items={items}
+            onClick={handleCloseMenu}
+            testId={testId !== undefined ? `${testId}-list` : undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/MoreMenu/index.ts

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

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { MultiSelect } from './MultiSelect';
+
+export default {
+  title: 'MultiSelect',
+  component: MultiSelect,
+  argTypes: {
+    corners: { control: 'inline-radio', options: ['full', 'left', 'right'] },
+  },
+};
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const Template: ComponentStory<typeof MultiSelect> = (args) => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      {...args}
+      value={{ include: value }}
+      onChange={(e) => setValue(e?.include ?? [])}
+      fetchOptions={() => Promise.resolve(stringOptions)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  placeholder: 'Placeholder',
+  corners: 'full',
+  isInvalid: false,
+  isDisabled: false,
+  isRequired: false,
+};

package/src/components/MultiSelect/MultiSelect.styles.ts

@@ -0,0 +1,55 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+    boxSizing: 'border-box',
+    height: '100%',
+    width: '100%',
+    cursor: 'pointer',
+    fontSize: 16,
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: '50%',
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  listContainer: {
+    position: 'absolute',
+    top: 'calc(100% + 4px)',
+    left: -1,
+    right: -1,
+    zIndex: 2,
+  },
+
+  invalid: {},
+
+  open: {},
+
+  full: {},
+
+  left: {},
+
+  right: {},
+
+  tweakMultiSelectList: {
+    root: {
+      width: '100%',
+    },
+  },
+};
+
+export type MultiSelectStyles = ComponentStyles<typeof styles>;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,98 @@
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+
+import { MultiSelectList, IMultiSelectListValues } from '../MultiSelectList';
+import { useOnClickOutside, useTheme, useTweakStyles } from '../../hooks';
+import {
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+} from '../MultiSelectList/locales';
+import { MultiSelectInput } from './MultiSelectInput';
+
+import { styles, MultiSelectStyles } from './MultiSelect.styles';
+
+export type THorizontalCornerConnection = 'full' | 'left' | 'right';
+
+export interface IMultiSelectProps<Value = string> {
+  tweakStyles?: MultiSelectStyles;
+  value?: IMultiSelectListValues<Value>;
+  corners?: THorizontalCornerConnection;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: IMultiSelectLocale;
+  onChange: (value?: IMultiSelectListValues<Value>) => void;
+  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+}
+
+export function MultiSelect<Value = string>({
+  value,
+  corners = 'full',
+  isInvalid,
+  isRequired,
+  isDisabled = false,
+  placeholder = '',
+  localeKey,
+  locale,
+  onChange,
+  fetchOptions,
+  tweakStyles,
+}: IMultiSelectProps<Value>): JSX.Element {
+  const { classes, componentStyles } = useTheme(
+    'MultiSelect',
+    styles,
+    tweakStyles,
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef(null);
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  useOnClickOutside(ref, handleOnClose, classes.root);
+
+  const tweakMultiSelectListStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakMultiSelectList',
+  );
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        classes[corners],
+        isOpen && classes.open,
+        isInvalid && !isDisabled && classes.invalid,
+        isRequired && classes.required,
+        isDisabled && classes.disabled,
+      )}
+    >
+      {/* Input */}
+      <MultiSelectInput
+        value={value}
+        isOpen={isOpen}
+        isDisabled={isDisabled}
+        placeholder={placeholder}
+        onToggle={(state) => setIsOpen(state)}
+      />
+      {/* Dropdown */}
+      {isOpen && (
+        <div className={classes.listContainer} ref={ref}>
+          <MultiSelectList
+            tweakStyles={tweakMultiSelectListStyles}
+            value={value}
+            localeKey={localeKey}
+            locale={locale}
+            fetchOptions={fetchOptions}
+            onChange={onChange}
+            onClose={handleOnClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MultiSelect/MultiSelectInput/MultiSelectInput.styles.ts

@@ -0,0 +1,73 @@
+import { ComponentStyles } from '../../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    height: '100%',
+    padding: [0, 12],
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+
+  placeholder: {
+    fontSize: 16,
+    userSelect: 'none',
+  },
+
+  placeholderSmall: {
+    fontSize: 12,
+    marginBottom: 2,
+    position: 'relative',
+  },
+
+  values: {
+    width: '100%',
+  },
+
+  value: {
+    width: 'calc(100% - 64px)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  amount: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: 'calc(50% - 11px)',
+    right: 44,
+    height: 22,
+    minWidth: 22,
+    fontSize: 14,
+    lineHeight: '16px',
+    textAlign: 'center',
+    padding: [2, 4],
+  },
+
+  indicator: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    height: '100%',
+    width: 36,
+    borderRadius: 6,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  arrow: {
+    width: 20,
+    height: 20,
+    transition: 'transform .2s ease',
+  },
+
+  arrowUp: {
+    transform: 'rotate(180deg)',
+  },
+
+  indicatorDisabled: {},
+};
+
+export type MultiSelectInputStyles = ComponentStyles<typeof styles>;

package/src/components/MultiSelect/MultiSelectInput/MultiSelectInput.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import { ReactElement } from 'react';
+import { Icon, IMultiSelectListValues } from '../../index';
+import { useTheme } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+
+import { styles } from './MultiSelectInput.styles';
+
+export interface IMultiSelectInputProps<Value> extends ICommonProps {
+  value?: IMultiSelectListValues<Value>;
+  isOpen: boolean;
+  isDisabled: boolean;
+  placeholder: string;
+  onToggle: (state: boolean) => void;
+}
+
+export function MultiSelectInput<Value>({
+  value: v,
+  isOpen,
+  isDisabled = false,
+  placeholder = '',
+  onToggle,
+}: IMultiSelectInputProps<Value>): ReactElement | null {
+  const { classes } = useTheme('MultiSelectInput', styles);
+
+  const value = v?.include;
+
+  return (
+    <div
+      className={classes.root}
+      onClick={() => !isDisabled && onToggle(!isOpen)}
+    >
+      {/* Placeholder */}
+      {(value === undefined || (value && value.length === 0)) && (
+        <div className={classes.placeholder}>{placeholder}</div>
+      )}
+      {/* Selected options */}
+      {value !== undefined && value.length > 0 && (
+        <>
+          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>
+            {placeholder}
+          </div>
+          <div className={classes.values}>
+            <div className={classes.value}>{value.join(', ')}</div>
+            <div className={classes.amount}>{value.length}</div>
+          </div>
+        </>
+      )}
+      {/* Chevron */}
+      <div
+        className={clsx(
+          classes.indicator,
+          isDisabled && classes.indicatorDisabled,
+        )}
+      >
+        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
+          <Icon type="chevron-down" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MultiSelect/MultiSelectInput/index.ts

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

package/src/components/MultiSelect/index.ts

@@ -0,0 +1,3 @@
+export * from './MultiSelect';
+export type { MultiSelectStyles } from './MultiSelect.styles';
+export type { MultiSelectInputStyles } from './MultiSelectInput/MultiSelectInput.styles';

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -0,0 +1,125 @@
+import { colors, helpers } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+const ITEM_HEIGHT = 40;
+const TOP_GAP = 12;
+
+export const styles = {
+  root: {
+    width: ({ width }: { width: number | string }): string | number =>
+      width ?? 220,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  list: {
+    paddingTop: TOP_GAP,
+    maxHeight: ITEM_HEIGHT * 5 + TOP_GAP,
+    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,
+  },
+
+  item: {
+    boxSizing: 'border-box',
+    padding: 0,
+    maxWidth: '100%',
+    fontSize: 14,
+  },
+
+  option: {
+    display: 'inline-block',
+    userSelect: 'none',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+
+  panel: {
+    display: 'flex',
+    padding: [0, 6, 8],
+  },
+
+  clear: {
+    marginLeft: 'auto',
+  },
+
+  selectedItem: {},
+
+  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',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: 16,
+    fontSize: 14,
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: 40,
+      },
+    },
+  },
+
+  tweakCheckbox: {
+    root: {
+      padding: [11, 16],
+    },
+
+    children: {
+      marginRight: 'auto',
+    },
+  },
+
+  tweakClearButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+};
+
+export type MultiSelectListStyles = ComponentStyles<typeof styles>;