@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/src/components/MoreMenu/MoreMenu.tsx

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

package/src/components/MoreMenu/index.ts

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

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

@@ -1,46 +1,46 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/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,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/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

@@ -1,55 +1,59 @@
-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>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IMultiSelectListStyles } from '../MultiSelectList';
+
+export const useStyles = createThemedStyles('MultiSelect', {
+  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: {},
+});
+
+export const multiSelectListStyles: IMultiSelectListStyles = {
+  root: {
+    width: '100%',
+  },
+};
+
+export type IMultiSelectStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakMultiSelectList: IMultiSelectListStyles }
+>;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,92 +1,101 @@
-import { useRef, useState } from 'react';
-import clsx from 'clsx';
-import { useOnClickOutside, useTheme, useTweakStyles } from '../../hooks';
-import {
-  MultiSelectList,
-  IMultiSelectListValues,
-  IMultiSelectLocale,
-  IMultiSelectLocaleKey,
-} from '../MultiSelectList';
-import { MultiSelectInput } from './components';
-import { THorizontalCornerConnection } from './types';
-import { styles, MultiSelectStyles } from './MultiSelect.styles';
-
-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>
-  );
-}
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutside, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import {
+  MultiSelectList,
+  IMultiSelectListValues,
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+} from '../MultiSelectList';
+import { MultiSelectInput } from './components';
+import { IHorizontalCornerConnection } from './types';
+import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
+
+export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
+  value?: IMultiSelectListValues<Value>;
+  corners?: IHorizontalCornerConnection;
+  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,
+  testId,
+  data,
+  onChange,
+  fetchOptions,
+  tweakStyles,
+}: IMultiSelectProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakMultiSelectListStyles = useTweakStyles({
+    innerStyles: multiSelectListStyles,
+    tweakStyles,
+    className: 'tweakMultiSelectList',
+    currentComponentName: 'MultiSelect',
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef(null);
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  useOnClickOutside(ref, handleOnClose, classes.root);
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        classes[corners],
+        isOpen && classes.open,
+        isInvalid && !isDisabled && classes.invalid,
+        isRequired && classes.required,
+        isDisabled && classes.disabled,
+      )}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {/* 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>
+  );
+}