@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

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

@@ -1,90 +1,90 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { colors } from '../../theme';
-import { List } from './List';
-import { IListItemProps as IListItem } from './components';
-
-const listItems: IListItem[] = [
-  {
-    item: 'Печатать билет',
-    onClick: console.log,
-    icon: 'sign-out',
-  },
-  { item: 'Выписать', onClick: console.log, withIconGap: true },
-  {
-    item: 'Аннулировать',
-    onClick: console.log,
-    disabled: true,
-    icon: <>2</>,
-  },
-  {
-    item: 'Вернуть',
-    onClick: console.log,
-    withIconGap: true,
-    shouldDrawSpacerBelow: true,
-    nestedItems: [
-      {
-        item: 'Вернуть деньги',
-        nestedItems: [
-          {
-            item: 'Вернуть деньги',
-            onClick: console.log,
-          },
-          {
-            item: 'Вернуть стену',
-            onClick: console.log,
-          },
-        ],
-        onClick: console.log,
-      },
-      {
-        item: 'Вернуть стену',
-        onClick: console.log,
-      },
-    ],
-  },
-  {
-    item: (() => <div style={{ color: colors.GREEN_FOCUS }}>Test</div>)(),
-    onClick: console.log,
-    withIconGap: true,
-  },
-  {
-    item: 'Удалить',
-    onClick: console.log,
-    disabled: true,
-    withIconGap: true,
-    view: 'destructive',
-  },
-  {
-    item: 'Удалить',
-    icon: 'trash-can',
-    onClick: console.log,
-    view: 'destructive',
-  },
-];
-
-export default {
-  title: 'Data Display/List',
-  component: List,
-  args: {
-    items: listItems,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof List>;
-
-export const Default: ComponentStory<typeof List> = (args) => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 40,
-    }}
-  >
-    <List {...args} />
-  </div>
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { colors } from '../../theme';
+import { List } from './List';
+import { IListItemProps as IListItem } from './components';
+
+const listItems: IListItem[] = [
+  {
+    item: 'Печатать билет',
+    onClick: console.log,
+    icon: 'sign-out',
+  },
+  { item: 'Выписать', onClick: console.log, withIconGap: true },
+  {
+    item: 'Аннулировать',
+    onClick: console.log,
+    disabled: true,
+    icon: <>2</>,
+  },
+  {
+    item: 'Вернуть',
+    onClick: console.log,
+    withIconGap: true,
+    shouldDrawSpacerBelow: true,
+    nestedItems: [
+      {
+        item: 'Вернуть деньги',
+        nestedItems: [
+          {
+            item: 'Вернуть деньги',
+            onClick: console.log,
+          },
+          {
+            item: 'Вернуть стену',
+            onClick: console.log,
+          },
+        ],
+        onClick: console.log,
+      },
+      {
+        item: 'Вернуть стену',
+        onClick: console.log,
+      },
+    ],
+  },
+  {
+    item: (() => <div style={{ color: colors.GREEN_FOCUS }}>Test</div>)(),
+    onClick: console.log,
+    withIconGap: true,
+  },
+  {
+    item: 'Удалить',
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+    view: 'destructive',
+  },
+  {
+    item: 'Удалить',
+    icon: 'trash-can',
+    onClick: console.log,
+    view: 'destructive',
+  },
+];
+
+export default {
+  title: 'Data Display/List',
+  component: List,
+  args: {
+    items: listItems,
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
+    },
+  },
+} as ComponentMeta<typeof List>;
+
+export const Default: ComponentStory<typeof List> = (args) => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 40,
+    }}
+  >
+    <List {...args} />
+  </div>
+);

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

@@ -1,25 +1,25 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IWithPopupStyles } from '../WithPopup';
-
-export const useStyles = createThemedStyles('List', {
-  root: {
-    minWidth: 180,
-    backgroundColor: colors.CLASSIC_WHITE,
-    padding: [8, 0],
-    listStyle: 'none',
-    margin: 0,
-  },
-
-  nestedItems: {
-    marginTop: -8,
-    paddingLeft: 4,
-  },
-});
-
-export const withPopupStyles: IWithPopupStyles = {
-  trigger: {
-    width: '100%',
-  },
-};
-
-export type IListStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IWithPopupStyles } from '../WithPopup';
+
+export const useStyles = createThemedStyles('List', {
+  root: {
+    minWidth: 180,
+    backgroundColor: colors.CLASSIC_WHITE,
+    padding: [8, 0],
+    listStyle: 'none',
+    margin: 0,
+  },
+
+  nestedItems: {
+    marginTop: -8,
+    paddingLeft: 4,
+  },
+});
+
+export const withPopupStyles: IWithPopupStyles = {
+  trigger: {
+    width: '100%',
+  },
+};
+
+export type IListStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/List.tsx

@@ -1,68 +1,68 @@
-import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
-import {
-  addDataTestId,
-  getTestId,
-  isArrayNotEmpty,
-  isNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { WithPopup } from '../WithPopup';
-import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
-import { useStyles, IListStyles, withPopupStyles } from './List.styles';
-
-export interface IListProps extends ICommonProps<IListStyles> {
-  items: IListItem[];
-  onClick?: (event: MouseEvent | KeyboardEvent) => void;
-}
-
-export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const handleItemClick = (
-    event: MouseEvent | KeyboardEvent,
-    { onClick: itemOnClick }: IListItem,
-  ) => {
-    if (isNotEmpty(itemOnClick)) {
-      itemOnClick(event);
-      onClick?.(event);
-    }
-  };
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => {
-        const itemProps: IListItemProps = {
-          testId: getTestId(testId, `item-${i}`),
-          ...item,
-          shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
-          shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
-          onClick: (event) => handleItemClick(event, item),
-        };
-
-        return (
-          <Fragment key={i}>
-            {isArrayNotEmpty(item.nestedItems) ? (
-              <WithPopup
-                eventType="hover"
-                tweakStyles={withPopupStyles}
-                placement="right-start"
-                popupOffset={0}
-                shouldRenderInBody={false}
-                trigger={({ triggerProps }) => (
-                  <ListItem {...itemProps} isFocused={triggerProps.isActive} />
-                )}
-              >
-                <div className={classes.nestedItems}>
-                  <List items={item.nestedItems} onClick={onClick} />
-                </div>
-              </WithPopup>
-            ) : (
-              <ListItem {...itemProps} />
-            )}
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-};
+import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
+import {
+  addDataTestId,
+  getTestId,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { WithPopup } from '../WithPopup';
+import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { useStyles, IListStyles, withPopupStyles } from './List.styles';
+
+export interface IListProps extends ICommonProps<IListStyles> {
+  items: IListItem[];
+  onClick?: (event: MouseEvent | KeyboardEvent) => void;
+}
+
+export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const handleItemClick = (
+    event: MouseEvent | KeyboardEvent,
+    { onClick: itemOnClick }: IListItem,
+  ) => {
+    if (isNotEmpty(itemOnClick)) {
+      itemOnClick(event);
+      onClick?.(event);
+    }
+  };
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {items.map((item, i) => {
+        const itemProps: IListItemProps = {
+          testId: getTestId(testId, `item-${i}`),
+          ...item,
+          shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
+          shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
+          onClick: (event) => handleItemClick(event, item),
+        };
+
+        return (
+          <Fragment key={i}>
+            {isArrayNotEmpty(item.nestedItems) ? (
+              <WithPopup
+                eventType="hover"
+                tweakStyles={withPopupStyles}
+                placement="right-start"
+                popupOffset={0}
+                shouldRenderInBody={false}
+                trigger={({ triggerProps }) => (
+                  <ListItem {...itemProps} isFocused={triggerProps.isActive} />
+                )}
+              >
+                <div className={classes.nestedItems}>
+                  <List items={item.nestedItems} onClick={onClick} />
+                </div>
+              </WithPopup>
+            ) : (
+              <ListItem {...itemProps} />
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -1,52 +1,52 @@
-import { animations, 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',
-    gap: ICON_GAP,
-    boxSizing: 'border-box',
-    fontSize: 16,
-    whiteSpace: 'nowrap',
-    minHeight: 40,
-    padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    cursor: 'pointer',
-  },
-
-  default: {},
-
-  destructive: {},
-
-  focused: {},
-
-  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,
-    flexShrink: 0,
-  },
-
-  content: {
-    flexGrow: 1,
-  },
-});
-
-export type IListItemStyles = ITweakStyles<typeof useStyles>;
+import { animations, 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',
+    gap: ICON_GAP,
+    boxSizing: 'border-box',
+    fontSize: 16,
+    whiteSpace: 'nowrap',
+    minHeight: 40,
+    padding: [0, ITEM_HORIZONTAL_PADDING],
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
+    cursor: 'pointer',
+  },
+
+  default: {},
+
+  destructive: {},
+
+  focused: {},
+
+  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,
+    flexShrink: 0,
+  },
+
+  content: {
+    flexGrow: 1,
+  },
+});
+
+export type IListItemStyles = ITweakStyles<typeof useStyles>;

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

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

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

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

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

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

package/src/components/List/index.ts

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