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

package/src/components/List/List.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { colors } from '../../theme';
 import { List } from './List';
-import { IListItem } from './types';
+import { IListItemProps as IListItem } from './components';
 
 const listItems: IListItem[] = [
   {
@@ -23,15 +23,22 @@ const listItems: IListItem[] = [
     shouldDrawSpacerBelow: true,
   },
   {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    item: (() => <div style={{ color: colors.GREEN_FOCUS }}>Test</div>)(),
     onClick: console.log,
-    disabled: true,
     withIconGap: true,
   },
   {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    item: 'Удалить',
     onClick: console.log,
+    disabled: true,
     withIconGap: true,
+    view: 'destructive',
+  },
+  {
+    item: 'Удалить',
+    icon: 'trash-can',
+    onClick: console.log,
+    view: 'destructive',
   },
 ];
 

package/src/components/List/List.tsx

@@ -1,50 +1,27 @@
-import { FC, Fragment } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getTestId,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
+import { FC, KeyboardEvent, MouseEvent } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { ICommonProps } from '../../types';
-import { IListItem } from './types';
+import { IListItemProps as IListItem, ListItem } from './components';
 import { useStyles, IListStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
-  onClick?(): void;
+  onClick?(event: MouseEvent | KeyboardEvent): void;
 }
 
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const handleItemClick = (item: IListItem) => {
-    item.onClick();
-    onClick?.();
+  const handleItemClick = (event: MouseEvent | KeyboardEvent, item: IListItem) => {
+    item.onClick(event);
+    onClick?.(event);
   };
 
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, idx) => (
-        <Fragment key={idx}>
-          {item.shouldDrawSpacerAbove && <div className={classes.spacer} />}
-          <div
-            className={clsx(classes.item, {
-              [classes.disabledItem]: item.disabled,
-              [classes.withIconGap]: item.withIconGap,
-            })}
-            onClick={item.disabled ? undefined : () => handleItemClick(item)}
-            {...addDataTestId(item.testId ?? getTestId(testId, `item-${idx}`))}
-            {...(item.disabled && addDataAttributes({ disabled: item.disabled }))}
-          >
-            {isReactNodeNotEmpty(item.icon) && (
-              <span className={classes.icon}>{renderIcon(item.icon)}</span>
-            )}
-            <span className={classes.content}>{item.item}</span>
-          </div>
-          {item.shouldDrawSpacerBelow && <div className={classes.spacer} />}
-        </Fragment>
+      {items.map((item, i) => (
+        <ListItem key={i} {...item} onClick={(event) => handleItemClick(event, item)} />
       ))}
     </div>
   );

package/src/components/List/components/ListItem/ListItem.styles.ts

@@ -0,0 +1,47 @@
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+
+const ITEM_HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 20;
+const ICON_GAP = 12;
+
+export const useStyles = createThemedStyles('ListItem', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 16,
+    whiteSpace: 'nowrap',
+    minHeight: 40,
+    padding: [0, ITEM_HORIZONTAL_PADDING],
+    transition: 'background-color 0.25s ease-in-out',
+    cursor: 'pointer',
+  },
+
+  default: {},
+
+  destructive: {},
+
+  disabledItem: {
+    cursor: 'default',
+  },
+
+  spacer: {
+    height: 1,
+    backgroundColor: colors.BORDER_LIGHT,
+  },
+
+  withIconGap: {
+    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
+  },
+
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    marginRight: ICON_GAP,
+    flexShrink: 0,
+  },
+
+  content: {},
+});
+
+export type IListItemStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/components/ListItem/ListItem.tsx

@@ -0,0 +1,57 @@
+import { FC, Fragment, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addClickHandler,
+  addDataTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { ICommonProps } from '../../../../types';
+import { renderIcon, IIcon } from '../../../Icon';
+import { useStyles, IListItemStyles } from './ListItem.styles';
+
+export interface IListItemProps extends ICommonProps<IListItemStyles> {
+  item: ReactNode;
+  view?: 'default' | 'destructive';
+  icon?: IIcon;
+  disabled?: boolean;
+  shouldDrawSpacerAbove?: boolean;
+  shouldDrawSpacerBelow?: boolean;
+  withIconGap?: boolean;
+  onClick(event: MouseEvent | KeyboardEvent): void;
+}
+
+export const ListItem: FC<IListItemProps> = ({
+  disabled: isDisabled,
+  icon,
+  item,
+  shouldDrawSpacerAbove,
+  shouldDrawSpacerBelow,
+  testId,
+  tweakStyles,
+  view = 'default',
+  withIconGap,
+  data,
+  onClick,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <Fragment>
+      {shouldDrawSpacerAbove && <div className={classes.spacer} />}
+      <div
+        className={clsx(classes.root, classes[view], {
+          [classes.disabledItem]: isDisabled,
+          [classes.withIconGap]: withIconGap,
+        })}
+        {...addClickHandler(onClick, !isDisabled)}
+        {...addDataTestId(testId)}
+        {...addDataAttributes({ ...data, disabled: isDisabled ? true : undefined })}
+      >
+        {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
+        <span className={classes.content}>{item}</span>
+      </div>
+      {shouldDrawSpacerBelow && <div className={classes.spacer} />}
+    </Fragment>
+  );
+};

package/src/components/List/components/ListItem/index.ts

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

package/src/components/List/components/index.ts

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

package/src/components/List/index.ts

@@ -1,3 +1,3 @@
 export * from './List';
-export * from './types';
 export type { IListStyles } from './List.styles';
+export type { IListItemStyles, IListItemProps as IListItem } from './components';

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

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
 import clsx from 'clsx';
 import { ICommonProps } from '../../../../types';
-import { Icon, IMultiSelectInputStyles, IMultiSelectListValues } from '../../../index';
-import { useStyles } from './MultiSelectInput.styles';
+import { Icon } from '../../../Icon';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
 
 export interface IMultiSelectInputProps<Value>
   extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {

package/src/components/NumberInput/helpers.ts

@@ -1,6 +1,6 @@
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { formatNumber, isSpaceChar } from '../../helpers';
-import { INumberInputProps } from './NumberInput';
+import type { INumberInputProps } from './NumberInput';
 
 const getPrevSpaces = (val: string, position: number): number =>
   val

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { phoneInfo } from '../../constants';
 import { iconsList } from '../Icon';
 import { PhoneInput } from './PhoneInput';
-import { phoneInfo } from './phone-info';
 import { IPhoneValue } from './types';
 
 const iconTypes = [undefined, ...Object.keys(iconsList)];

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -1,5 +1,6 @@
 import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
+import { phoneInfo } from '../../../../constants';
 import {
   checkSearchStringInCountry,
   getCountryTextByLocale,
@@ -12,7 +13,6 @@ import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
 import { Input } from '../../../Input';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { phoneInfo } from '../../phone-info';
 import { IPhoneInfo } from '../../types';
 import {
   useStyles,

package/src/components/PhoneInput/index.ts

@@ -1,5 +1,4 @@
 export * from './PhoneInput';
-export { phoneInfo } from './phone-info';
 export * from './types';
 export type { IPhoneInputStyles } from './PhoneInput.styles';
 export type { IPhoneInputCountryListStyles } from './components';

package/src/components/Select/Select.tsx

@@ -21,9 +21,9 @@ import {
   createFilter,
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
 import { useIsMounted, useOnClickOutsideWithRef, useDropdown, useTweakStyles } from '../../hooks';
-import { ICommonProps, IDropdownWithPopperOptions, IIcon } from '../../types';
+import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
 import { IInputProps, Input } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectList } from './components';

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentStory } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Skeleton',
+  component: Skeleton,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args) => (
+  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
+    <Skeleton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  height: '20px',
+};

package/src/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,46 @@
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Skeleton', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
+    position: 'relative',
+    borderRadius: 4,
+    overflow: 'hidden',
+    '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
+
+    '&::after': {
+      content: '""',
+      animation: '$skeleton 1.6s linear 0.5s infinite',
+      background: `linear-gradient(90deg, transparent, ${rgba(
+        colors.GREY_BACKGROUND,
+        0.65,
+      )}, transparent)`,
+      position: 'absolute',
+      transform: 'translateX(-100%)',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  },
+
+  '@keyframes skeleton': {
+    '0%': {
+      transform: 'translateX(-100%)',
+    },
+
+    '50%': {
+      transform: 'translateX(100%)',
+    },
+
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+export type ISkeletonStyles = ITweakStyles<typeof useStyles>;

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+import { ICommonProps } from '../../types';
+import { ISkeletonStyles, useStyles } from './Skeleton.styles';
+
+export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+  height?: CSSProperties['height'];
+}
+
+export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  return <div className={classes.root} style={{ height }} />;
+};

package/src/components/Skeleton/index.ts

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

package/src/components/index.ts

@@ -34,3 +34,4 @@ export * from './ThemedPreloader';
 export * from './Toaster';
 export * from './Tooltip';
 export * from './ScrollIntoViewIfNeeded';
+export * from './Skeleton';

package/src/constants/index.ts

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

package/src/{components/PhoneInput → constants}/phone-info.ts

@@ -1,4 +1,4 @@
-import { IPhoneInfo } from './types';
+import type { IPhoneInfo } from '../components';
 
 export const phoneInfo: IPhoneInfo[] = [
   {

package/src/helpers/phone.ts

@@ -1,5 +1,6 @@
 import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
-import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
+import type { IPhoneInfo, IPhoneValue } from '../components';
+import { phoneInfo } from '../constants';
 
 export const findCountryByCode = (
   countryCode?: string,

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
+export * from './use-merged-refs';

package/src/hooks/use-merged-refs.ts

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);

package/src/index.ts

@@ -2,5 +2,5 @@ export * from './theme';
 export * from './components';
 export * from './hooks';
 export * from './types';
+export * from './constants';
 export * from './helpers';
-export * from './helpers/snippets';

package/src/theme/types.ts

@@ -52,6 +52,8 @@ import type {
   IFlexibleTableCellStyles,
   IFlexibleTableRowStyles,
   IFilterValueViewStyles,
+  ISkeletonStyles,
+  IListItemStyles,
 } from '../components';
 
 export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
@@ -96,6 +98,7 @@ export interface IComponentStyles {
   IncrementInput: IIncrementInputStyles;
   Input: IInputStyles;
   List: IListStyles;
+  ListItem: IListItemStyles;
   Modal: IModalStyles;
   MoreMenu: IMoreMenuStyles;
   MultiSelect: IMultiSelectStyles;
@@ -108,6 +111,7 @@ export interface IComponentStyles {
   SearchInput: ISearchInputStyles;
   Select: ISelectStyles;
   SelectList: ISelectListStyles;
+  Skeleton: ISkeletonStyles;
   Switch: ISwitchStyles;
   TextArea: ITextAreaStyles;
   TextWithInfo: ITextWithInfoStyles;

package/src/types.ts

@@ -1,6 +1,4 @@
-import { ReactElement } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { IIconType } from './components';
 
 export interface IDataAttributes {
   [key: string]: unknown;
@@ -26,5 +24,3 @@ export interface IDropdownWithPopperOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   flipOptions?: Record<string, any>; // только с shouldUsePopper
 }
-
-export type IIcon = IIconType | ReactElement;

package/dist/components/List/types.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import { IIcon } from '../../types';
-export interface IListItem {
-    item: ReactNode;
-    icon?: IIcon;
-    disabled?: boolean;
-    shouldDrawSpacerAbove?: boolean;
-    shouldDrawSpacerBelow?: boolean;
-    withIconGap?: boolean;
-    testId?: string;
-    onClick(): void;
-}

package/dist/components/PhoneInput/phone-info.d.ts

@@ -1,2 +0,0 @@
-import { IPhoneInfo } from './types';
-export declare const phoneInfo: IPhoneInfo[];

package/src/components/List/types.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { IIcon } from '../../types';
-
-export interface IListItem {
-  item: ReactNode;
-  icon?: IIcon;
-  disabled?: boolean;
-  shouldDrawSpacerAbove?: boolean;
-  shouldDrawSpacerBelow?: boolean;
-  withIconGap?: boolean;
-  testId?: string;
-  onClick(): void;
-}