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

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+import { Styles } from 'react-jss';
+import { Modifier, Placement } from 'react-overlays/usePopper';
+import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
+export interface IDataAttributes {
+    [key: string]: string | null | undefined;
+}
+export interface ICommonProps {
+    data?: IDataAttributes;
+}
+export interface IDropdownWithPopperOptions {
+    shouldUsePopper?: boolean;
+    shouldRenderInBody?: boolean;
+    scrollParent?: 'auto' | 'document' | Element;
+    shouldHideOnScroll?: boolean;
+    canBeFlipped?: boolean;
+    modifiers?: Array<Partial<Modifier<any, any>>>;
+    placement?: Placement;
+    flipOptions?: Record<string, any>;
+}
+export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
+export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerInput' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
+export declare type UiKitAnimations = Record<string, any>;
+export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
+export interface UiKitTheme {
+    name: string;
+    components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+    complexIcons?: Partial<Record<IComplexIcon, string>>;
+    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
+    animations?: UiKitAnimations;
+    colors?: Record<string, string>;
+    dimensions?: Record<string, number>;
+    boxShadows?: Record<string, string>;
+    helpers?: UiKitHelpers;
+}

package/dist/vite-env.d.ts

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

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@true-engineering/true-react-common-ui-kit",
+  "version": "1.0.1",
+  "description": "True Engineering React UI Kit with theming support",
+  "author": "True Engineering (https://trueengineering.ru)",
+  "keywords": [
+    "TE",
+    "True Engineering",
+    "UI Kit with theming support",
+    "UI Kit"
+  ],
+  "homepage": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/true-react-common-ui-kit.umd.cjs",
+  "module": "./dist/true-react-common-ui-kit.js",
+  "directories": {
+    "lib": "src"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/true-react-common-ui-kit.umd.cjs",
+      "import": "./dist/true-react-common-ui-kit.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./src": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "full-check": "yarn format:check && yarn lint"
+  },
+  "dependencies": {
+    "clsx": "1.2.1",
+    "country-flag-icons": "1.5.5",
+    "date-fns": "2.29.3",
+    "hex-to-rgba": "2.0.1",
+    "jss": "10.9.2",
+    "lodash": "4.17.21",
+    "react": "18.2.0",
+    "react-datepicker": "4.8.0",
+    "react-dom": "18.2.0",
+    "react-input-mask": "3.0.0-alpha.2",
+    "react-jss": "10.9.2",
+    "react-overlays": "5.2.1",
+    "react-remove-scroll": "2.5.6",
+    "react-transition-group": "4.4.5",
+    "scroll-into-view-if-needed": "3.0.6",
+    "ts-debounce": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.12",
+    "@storybook/addon-actions": "6.5.15",
+    "@storybook/addon-essentials": "6.5.15",
+    "@storybook/addon-interactions": "6.5.15",
+    "@storybook/addon-links": "6.5.15",
+    "@storybook/builder-vite": "0.3.0",
+    "@storybook/react": "6.5.15",
+    "@storybook/testing-library": "0.0.13",
+    "@swc/core": "^1.3.30",
+    "@types/lodash": "4.14.191",
+    "@types/react": "18.0.26",
+    "@types/react-datepicker": "4.8.0",
+    "@types/react-dom": "18.0.9",
+    "@types/react-input-mask": "3.0.2",
+    "@types/react-transition-group": "4.4.5",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "@vitejs/plugin-react": "3.0.0",
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-react": "7.32.2",
+    "prettier": "2.8.3",
+    "rollup-plugin-swc3": "0.3.0",
+    "typescript": "4.9.3",
+    "unplugin-swc": "1.3.2",
+    "vite": "4.0.0",
+    "vite-plugin-dts": "1.7.1"
+  }
+}

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

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

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

package/src/components/AccountInfo/AccountInfo.tsx

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

package/src/components/AccountInfo/index.ts

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

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

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

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

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

package/src/components/AddButton/AddButton.tsx

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

package/src/components/AddButton/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,61 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { icons } from '../Icon/icons';
+
+import { Button, BUTTON_VIEWS, IButtonProps } from './Button';
+
+const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(icons),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+const preloaderTypes: Array<IButtonProps['preloaderType']> = [
+  'dots',
+  'default',
+  'logo',
+];
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {
+    size: 'l',
+    view: 'primary',
+    icon: undefined,
+    iconPosition: 'left',
+    preloaderType: 'dots',
+    children: 'Button',
+    isActive: false,
+    isInline: false,
+    isLoading: false,
+    isDisabled: false,
+    isFullWidth: false,
+  },
+  argTypes: {
+    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
+    icon: { options: iconTypes, control: 'select' },
+    size: { options: sizeTypes, control: 'inline-radio' },
+    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+    preloaderType: { options: preloaderTypes, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'data',
+        'testId',
+        'onClick',
+        'onMouseDown',
+        'tweakStyles',
+        'shouldSkipTabNavigation',
+      ],
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+export const Default: ComponentStory<typeof Button> = (args) => (
+  <Button {...args} key={args.size} />
+);

package/src/components/Button/Button.styles.ts

@@ -0,0 +1,196 @@
+import { ComponentStyles } from '../../types';
+import { ThemedPreloaderStyles } from '../ThemedPreloader';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, color, box-shadow, border-color',
+    maxWidth: '100%',
+    border: [1, 'solid', 'transparent'],
+    position: 'relative',
+    boxShadow: 'none',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  primary: {},
+  secondary: {},
+  outline: {},
+  warning: {},
+  destructive: {},
+  text: {},
+  custom: {},
+
+  children: {},
+
+  icon: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  iconFromLeft: {
+    flexDirection: 'row',
+    gap: 6,
+
+    '& $icon': {
+      marginLeft: -4,
+    },
+  },
+
+  iconFromRight: {
+    flexDirection: 'row-reverse',
+    gap: 6,
+
+    '& $icon': {
+      marginRight: -4,
+    },
+  },
+
+  onlyIcon: {},
+
+  withIcon: {},
+
+  s: {
+    padding: [0, 12],
+    height: 32,
+    fontSize: 14,
+    letterSpacing: 0.15,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 32,
+    },
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $iconFromLeft': {
+      gap: 4,
+    },
+
+    '& $iconFromRight': {
+      gap: 4,
+    },
+  },
+
+  m: {
+    padding: [0, 12],
+    height: 42,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 42,
+    },
+  },
+
+  l: {
+    padding: [0, 16],
+    height: 48,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 48,
+    },
+  },
+
+  xl: {
+    padding: [0, 20],
+    height: 56,
+    fontSize: 16,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 56,
+    },
+
+    '& $iconFromLeft': {
+      gap: 8,
+    },
+
+    '& $iconFromRight': {
+      gap: 8,
+    },
+  },
+
+  fullWidth: {
+    minWidth: 'auto',
+    width: '100%',
+  },
+
+  inline: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  active: {},
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  disabled: {},
+
+  tweakPreloader: {},
+};
+
+export const dotsPreloaderStyles: ThemedPreloaderStyles = {
+  tweakPreloaderComponent: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+};
+
+export type ButtonStyles = ComponentStyles<typeof styles>;