@true-engineering/true-react-common-ui-kit 2.0.1 → 2.1.1

package/dist/types.d.ts

@@ -24,6 +24,9 @@ export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {
     name: string;
     components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+    /**
+     * Для переопределения иконок, которые есть в UiKit
+     */
     icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
     complexIcons?: Partial<Record<IComplexIcon, string>>;
     preloaders?: Partial<Record<IPreloaderSvgType, string>>;

package/dist/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -69,6 +69,7 @@
     "@storybook/react": "6.5.15",
     "@storybook/testing-library": "0.0.13",
     "@swc/core": "^1.3.30",
+    "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash-es": "4.17.11",
     "@types/react": "18.0.26",
     "@types/react-datepicker": "4.19.4",

package/src/components/AccountInfo/AccountInfo.stories.tsx

@@ -1,35 +1,32 @@
-import { ComponentStory } from '@storybook/react';
-import { AccountInfo } from './AccountInfo';
-
-export default {
-  title: 'AccountInfo',
-  component: AccountInfo,
-};
-
-const Template: ComponentStory<typeof AccountInfo> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 400,
-      height: 200,
-      border: '1px dotted rgba(0, 0, 0, 0.2)',
-    }}
-  >
-    <AccountInfo
-      {...args}
-      options={[{ item: 'Logout', onClick: () => console.log('logout') }]}
-    />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  accountName: 'Ivan Ivanov',
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'options', 'avatar'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { AccountInfo } from './AccountInfo';
+
+export default {
+  title: 'AccountInfo',
+  component: AccountInfo,
+};
+
+const Template: ComponentStory<typeof AccountInfo> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 400,
+      height: 200,
+      border: '1px dotted rgba(0, 0, 0, 0.2)',
+    }}
+  >
+    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  accountName: 'Ivan Ivanov',
+};
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'options', 'avatar'],
+  },
+};

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -1,55 +1,55 @@
-import { animations } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-//
-
-export const styles = {
-  root: {
-    display: 'flex',
-  },
-
-  account: {
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  accountName: {
-    margin: [0, 2, 0, 10],
-    fontSize: 14,
-    transition: 'color 0.25s ease-in-out',
-  },
-
-  accountNameOpened: {},
-
-  accountChevron: {
-    width: 16,
-    height: 16,
-    transition: 'ease-in-out 0.25s',
-    transitionProperty: 'transform, color',
-  },
-
-  accountChevronOpened: {
-    transform: 'rotate(180deg)',
-  },
-
-  accountMenu: {
-    position: 'absolute',
-    zIndex: 90,
-    top: '100%',
-    right: 0,
-    marginTop: 8,
-  },
-
-  avatarIcon: {
-    width: 32,
-    height: 32,
-  },
-
-  ...animations.slideUp,
-
-  tweakList: {},
-};
-
-export type AccountInfoStyles = ComponentStyles<typeof styles>;
+import { animations } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+//
+
+export const styles = {
+  root: {
+    display: 'flex',
+  },
+
+  account: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  accountName: {
+    margin: [0, 2, 0, 10],
+    fontSize: 14,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  accountNameOpened: {},
+
+  accountChevron: {
+    width: 16,
+    height: 16,
+    transition: 'ease-in-out 0.25s',
+    transitionProperty: 'transform, color',
+  },
+
+  accountChevronOpened: {
+    transform: 'rotate(180deg)',
+  },
+
+  accountMenu: {
+    position: 'absolute',
+    zIndex: 90,
+    top: '100%',
+    right: 0,
+    marginTop: 8,
+  },
+
+  avatarIcon: {
+    width: 32,
+    height: 32,
+  },
+
+  ...animations.slideUp,
+
+  tweakList: {},
+};
+
+export type AccountInfoStyles = ComponentStyles<typeof styles>;

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,106 +1,77 @@
-import React, { FC, ReactNode, useRef, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-
-import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
-import {
-  useOnClickOutsideWithRef,
-  useTheme,
-  useTweakStyles,
-} from '../../hooks';
-import { IListProps, List } from '../List';
-import { Icon } from '../Icon';
-
-import { AccountInfoStyles, styles } from './AccountInfo.styles';
-
-export interface IAccountInfoProps extends ICommonProps {
-  tweakStyles?: AccountInfoStyles;
-  avatar?: ReactNode;
-  accountName: ReactNode;
-  options: IListProps['items'];
-}
-
-const ANIMATION_TIMEOUT = 150;
-
-export const AccountInfo: FC<IAccountInfoProps> = ({
-  data,
-  avatar,
-  tweakStyles,
-  accountName,
-  options,
-}) => {
-  // TODO: потестить
-  const { classes, componentStyles } = useTheme(
-    'AccountInfo',
-    styles,
-    tweakStyles,
-    {
-      timeout: ANIMATION_TIMEOUT,
-    },
-  );
-  const nameRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const toggleMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.stopPropagation();
-    setIsMenuOpen((v) => !v);
-  };
-
-  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
-
-  const tweakListStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakList',
-  );
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)} tabIndex={0}>
-      {avatar ?? (
-        <div className={classes.avatarIcon}>
-          <Icon type="avatar" />
-        </div>
-      )}
-      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
-        <div
-          className={clsx(
-            classes.accountName,
-            isMenuOpen && classes.accountNameOpened,
-          )}
-        >
-          {accountName}
-        </div>
-        <div
-          className={clsx(
-            classes.accountChevron,
-            isMenuOpen && classes.accountChevronOpened,
-          )}
-        >
-          <Icon type="chevron-down-small" />
-        </div>
-        <CSSTransition
-          in={isMenuOpen}
-          timeout={ANIMATION_TIMEOUT}
-          unmountOnExit
-          classNames={{
-            enter: classes['slide-up-enter'],
-            enterActive: classes['slide-up-enter-active'],
-            exit: classes['slide-up-exit'],
-            exitActive: classes['slide-up-exit-active'],
-          }}
-        >
-          <div
-            ref={dropdownRef}
-            className={classes.accountMenu}
-            onClick={toggleMenu}
-          >
-            <List items={options} tweakStyles={tweakListStyles} />
-          </div>
-        </CSSTransition>
-      </div>
-    </div>
-  );
-};
+import React, { FC, ReactNode, useRef, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IListProps, List } from '../List';
+import { AccountInfoStyles, styles } from './AccountInfo.styles';
+
+export interface IAccountInfoProps extends ICommonProps {
+  tweakStyles?: AccountInfoStyles;
+  avatar?: ReactNode;
+  accountName: ReactNode;
+  options: IListProps['items'];
+}
+
+const ANIMATION_TIMEOUT = 150;
+
+export const AccountInfo: FC<IAccountInfoProps> = ({
+  data,
+  avatar,
+  tweakStyles,
+  accountName,
+  options,
+}) => {
+  // TODO: потестить
+  const { classes, componentStyles } = useTheme('AccountInfo', styles, tweakStyles, {
+    timeout: ANIMATION_TIMEOUT,
+  });
+  const nameRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setIsMenuOpen((v) => !v);
+  };
+
+  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
+
+  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)} tabIndex={0}>
+      {avatar ?? (
+        <div className={classes.avatarIcon}>
+          <Icon type="avatar" />
+        </div>
+      )}
+      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
+        <div className={clsx(classes.accountName, isMenuOpen && classes.accountNameOpened)}>
+          {accountName}
+        </div>
+        <div className={clsx(classes.accountChevron, isMenuOpen && classes.accountChevronOpened)}>
+          <Icon type="chevron-down-small" />
+        </div>
+        <CSSTransition
+          in={isMenuOpen}
+          timeout={ANIMATION_TIMEOUT}
+          unmountOnExit
+          classNames={{
+            enter: classes['slide-up-enter'],
+            enterActive: classes['slide-up-enter-active'],
+            exit: classes['slide-up-exit'],
+            exitActive: classes['slide-up-exit-active'],
+          }}
+        >
+          <div ref={dropdownRef} className={classes.accountMenu} onClick={toggleMenu}>
+            <List items={options} tweakStyles={tweakListStyles} />
+          </div>
+        </CSSTransition>
+      </div>
+    </div>
+  );
+};

package/src/components/AccountInfo/index.ts

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

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/AddButton/AddButton.styles.ts

@@ -1,34 +1,34 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0px 16px',
-    height: 52,
-    cursor: 'pointer',
-    outline: 'none',
-    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    fontSize: 14,
-
-    '&:hover': {
-      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    },
-  },
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  icon: {
-    width: 20,
-    display: 'inline-block',
-    marginRight: 8,
-  },
-
-  fullWidth: {
-    width: '100%',
-  },
-};
-
-export type AddButtonStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0px 16px',
+    height: 52,
+    cursor: 'pointer',
+    outline: 'none',
+    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    fontSize: 14,
+
+    '&:hover': {
+      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  icon: {
+    width: 20,
+    display: 'inline-block',
+    marginRight: 8,
+  },
+
+  fullWidth: {
+    width: '100%',
+  },
+};
+
+export type AddButtonStyles = ComponentStyles<typeof styles>;

package/src/components/AddButton/AddButton.tsx

@@ -1,49 +1,48 @@
-import clsx from 'clsx';
-import { FC } from 'react';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { addDataAttributes } from '../../helpers';
-import { Icon } from '../Icon';
-
-import { AddButtonStyles, styles } from './AddButton.styles';
-
-export interface IAddButtonProps extends ICommonProps {
-  tweakStyles?: AddButtonStyles;
-  text: string;
-  type?: 'submit' | 'button';
-  isDisabled?: boolean;
-  isFullWidth?: boolean;
-  onClick?(): void | Promise<void>;
-}
-
-// TODO: Весьма сомнительный компонент
-export const AddButton: FC<IAddButtonProps> = ({
-  text,
-  type = 'button',
-  isDisabled,
-  onClick,
-  isFullWidth,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('AddButton', styles, tweakStyles);
-
-  return (
-    <button
-      type={type}
-      className={clsx(
-        classes.root,
-        isDisabled && classes.disabled,
-        isFullWidth && classes.fullWidth,
-      )}
-      onClick={!isDisabled ? onClick : undefined}
-      disabled={isDisabled}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.icon}>
-        <Icon type={'plus'} />
-      </div>
-      <div>{text}</div>
-    </button>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { AddButtonStyles, styles } from './AddButton.styles';
+
+export interface IAddButtonProps extends ICommonProps {
+  tweakStyles?: AddButtonStyles;
+  text: string;
+  type?: 'submit' | 'button';
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  onClick?(): void | Promise<void>;
+}
+
+// TODO: Весьма сомнительный компонент
+export const AddButton: FC<IAddButtonProps> = ({
+  text,
+  type = 'button',
+  isDisabled,
+  onClick,
+  isFullWidth,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('AddButton', styles, tweakStyles);
+
+  return (
+    <button
+      type={type}
+      className={clsx(
+        classes.root,
+        isDisabled && classes.disabled,
+        isFullWidth && classes.fullWidth,
+      )}
+      onClick={!isDisabled ? onClick : undefined}
+      disabled={isDisabled}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.icon}>
+        <Icon type={'plus'} />
+      </div>
+      <div>{text}</div>
+    </button>
+  );
+};

package/src/components/AddButton/index.ts

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