@true-engineering/true-react-common-ui-kit 4.0.0-alpha61 → 4.0.0-alpha62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha61",
+  "version": "4.0.0-alpha62",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

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

@@ -2,9 +2,17 @@ import { FC } from 'react';
 import { type Meta } from '@storybook/react';
 import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
+import { IExtendableProps } from '../../types';
 import { IListProps, List } from './List';
 import { IListItemProps as IListItem } from './components';
 
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IListSizes extends IExtendableProps<typeof SIZES> {}
+}
+
 const listItems: IListItem[] = [
   {
     item: 'Печатать билет',
@@ -83,6 +91,10 @@ const meta: Meta<typeof Story> = {
   component: Story,
   args: {
     items: listItems,
+    size: undefined,
+  },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
   },
   parameters: {
     controls: {

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

@@ -1,5 +1,6 @@
 import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IWithPopupStyles } from '../WithPopup';
+import { IListSizes } from './types';
 
 export const useStyles = createThemedStyles('List', {
   root: {
@@ -23,4 +24,4 @@ export const withPopupStyles: IWithPopupStyles = {
   },
 };
 
-export type IListStyles = ITweakStyles<typeof useStyles>;
+export type IListStyles = ITweakStyles<typeof useStyles, IListSizes>;

package/src/components/List/List.tsx

@@ -1,4 +1,5 @@
 import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
+import clsx from 'clsx';
 import {
   addDataAttributes,
   getTestId,
@@ -8,15 +9,16 @@ import {
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
 import { IListItemProps, ListItem } from './components';
-import { IListItem } from './types';
+import { IListItem, IListSize } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
+  size?: IListSize;
   onClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 
-export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
+export const List: FC<IListProps> = ({ items, size, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles({ theme: tweakStyles });
 
   const handleItemClick = (
@@ -32,10 +34,14 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
   const filteredItems = items.filter(({ isHidden }) => !isHidden);
 
   return (
-    <div className={classes.root} {...addDataAttributes(data, testId)}>
+    <div
+      className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+      {...addDataAttributes(data, testId)}
+    >
       {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
+          size,
           ...item,
           shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
           shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
@@ -56,7 +62,7 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
                 )}
               >
                 <div className={classes.nestedItems}>
-                  <List items={item.nestedItems} onClick={onClick} />
+                  <List items={item.nestedItems} size={size} onClick={onClick} />
                 </div>
               </WithPopup>
             ) : (

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

@@ -1,4 +1,5 @@
 import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import type { IListSizes as IListItemSizes } from '../../types';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -49,4 +50,4 @@ export const useStyles = createThemedStyles('ListItem', {
   },
 });
 
-export type IListItemStyles = ITweakStyles<typeof useStyles>;
+export type IListItemStyles = ITweakStyles<typeof useStyles, IListItemSizes>;

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

@@ -4,10 +4,12 @@ import {
   addClickHandler,
   addDataAttributes,
   isArrayNotEmpty,
+  isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../../../types';
 import { renderIcon, IIcon, Icon } from '../../../Icon';
+import type { IListSize as IListItemSize } from '../../types';
 import { useStyles, IListItemStyles } from './ListItem.styles';
 
 export interface IListItemProps extends ICommonProps<IListItemStyles> {
@@ -15,6 +17,7 @@ export interface IListItemProps extends ICommonProps<IListItemStyles> {
   view?: 'default' | 'destructive';
   icon?: IIcon;
   nestedItems?: IListItemProps[];
+  size?: IListItemSize;
   isFocused?: boolean;
   disabled?: boolean;
   shouldDrawSpacerAbove?: boolean;
@@ -27,6 +30,7 @@ export const ListItem: FC<IListItemProps> = ({
   icon,
   item,
   nestedItems,
+  size,
   disabled: isDisabled,
   isFocused,
   shouldDrawSpacerAbove,
@@ -44,7 +48,7 @@ export const ListItem: FC<IListItemProps> = ({
     <>
       {shouldDrawSpacerAbove && <div className={classes.spacer} />}
       <div
-        className={clsx(classes.root, classes[view], {
+        className={clsx(classes.root, classes[view], isNotEmpty(size) && classes[size], {
           [classes.disabledItem]: isDisabled,
           [classes.withIconGap]: withIconGap,
           [classes.focused]: isFocused,

package/src/components/List/index.ts

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

package/src/components/List/types.ts

@@ -1,5 +1,11 @@
 import { IListItemProps } from './components';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IListSizes {}
+
+export type IListSize = keyof IListSizes;
+
 export interface IListItem extends IListItemProps {
   isHidden?: boolean;
+  size?: IListSize;
 }

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -2,9 +2,17 @@ import { FC } from 'react';
 import { type Meta } from '@storybook/react';
 import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
+import { IExtendableProps } from '../../types';
 import { IListItem } from '../List';
 import { INewMoreMenuProps, NewMoreMenu } from './NewMoreMenu';
 
+const SIZES = ['micro'] as const;
+
+declare module '../List/types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IListSizes extends IExtendableProps<typeof SIZES> {}
+}
+
 const menuItems: IListItem[] = [
   { item: 'Печатать билет', onClick: console.log },
   { item: 'Выписать', onClick: console.log },
@@ -61,9 +69,11 @@ const meta: Meta<typeof Story> = {
     placement: 'bottom-end',
     shouldRenderInBody: false,
     shouldHideOnScroll: false,
+    listSize: undefined,
   },
   argTypes: {
     placement: { control: 'select', options: placements },
+    listSize: { options: [undefined, ...SIZES], control: 'inline-radio' },
   },
   parameters: {
     controls: {

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -2,10 +2,11 @@ import { FC } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { ICommonProps, IRenderNode } from '../../types';
 import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
+import { IListItem, IListSize, List } from '../List';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
+import { IWithPopupTriggerProps } from '../WithPopup/types';
 import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 
 export interface INewMoreMenuProps
@@ -20,6 +21,8 @@ export interface INewMoreMenuProps
     >,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
+  renderTrigger?: IRenderNode<IWithPopupTriggerProps>;
+  listSize?: IListSize;
   /** @default false */
   isDisabled?: boolean;
   /** @default true */
@@ -31,6 +34,8 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   isDisabled = false,
   hasDefaultStateBackground = true,
   data,
+  renderTrigger,
+  listSize,
   testId,
   tweakStyles,
   ...rest
@@ -49,29 +54,33 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
     currentComponentName: 'NewMoreMenu',
   });
 
+  const defaultTrigger = ({ triggerProps, referenceProps }: IWithPopupTriggerProps) => (
+    <button
+      className={clsx(classes.button, {
+        [classes.hasCircle]: hasDefaultStateBackground,
+        [classes.disabled]: triggerProps.isDisabled,
+        [classes.active]: triggerProps.isActive,
+      })}
+      disabled={triggerProps.isDisabled}
+      {...addDataAttributes(data, testId)}
+      {...referenceProps}
+    >
+      <div className={classes.icon}>
+        <Icon type="menu" />
+      </div>
+    </button>
+  );
+
   return (
     <WithPopup
       isDisabled={isDisabled || isArrayEmpty(items)}
       tweakStyles={tweakWithPopupStyles}
       {...rest}
-      trigger={({ triggerProps, referenceProps }) => (
-        <button
-          className={clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: triggerProps.isDisabled,
-            [classes.active]: triggerProps.isActive,
-          })}
-          disabled={triggerProps.isDisabled}
-          {...addDataAttributes(data, testId)}
-          {...referenceProps}
-        >
-          <div className={classes.icon}>
-            <Icon type="menu" />
-          </div>
-        </button>
-      )}
+      trigger={renderTrigger ?? defaultTrigger}
     >
-      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
+      {({ onClose }) => (
+        <List items={items} size={listSize} tweakStyles={tweakListStyles} onClick={onClose} />
+      )}
     </WithPopup>
   );
 };