@true-engineering/true-react-common-ui-kit 3.9.1 → 3.10.0

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

@@ -1,70 +1,70 @@
-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,
-    icon: <>2</>,
-  },
-  {
-    item: 'Вернуть',
-    onClick: console.log,
-    disabled: true,
-    withIconGap: true,
-    shouldDrawSpacerBelow: true,
-  },
-  {
-    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,
+    icon: <>2</>,
+  },
+  {
+    item: 'Вернуть',
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+    shouldDrawSpacerBelow: true,
+  },
+  {
+    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,51 +1,51 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
-
-export const useStyles = createThemedStyles('List', {
-  root: {
-    minWidth: 180,
-    backgroundColor: colors.CLASSIC_WHITE,
-    padding: [8, 0],
-    listStyle: 'none',
-    margin: 0,
-  },
-
-  item: {
-    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',
-  },
-
-  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 IListStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+const ITEM_HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 20;
+const ICON_GAP = 12;
+
+export const useStyles = createThemedStyles('List', {
+  root: {
+    minWidth: 180,
+    backgroundColor: colors.CLASSIC_WHITE,
+    padding: [8, 0],
+    listStyle: 'none',
+    margin: 0,
+  },
+
+  item: {
+    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',
+  },
+
+  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 IListStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/List.tsx

@@ -1,33 +1,33 @@
-import { FC, KeyboardEvent, MouseEvent } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { IListItemProps as IListItem, ListItem } from './components';
-import { useStyles, IListStyles } 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, item: IListItem) => {
-    item.onClick(event);
-    onClick?.(event);
-  };
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => (
-        <ListItem
-          key={i}
-          testId={getTestId(testId, `item-${i}`)}
-          {...item}
-          onClick={(event) => handleItemClick(event, item)}
-        />
-      ))}
-    </div>
-  );
-};
+import { FC, KeyboardEvent, MouseEvent } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { IListItemProps as IListItem, ListItem } from './components';
+import { useStyles, IListStyles } 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, item: IListItem) => {
+    item.onClick(event);
+    onClick?.(event);
+  };
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {items.map((item, i) => (
+        <ListItem
+          key={i}
+          testId={getTestId(testId, `item-${i}`)}
+          {...item}
+          onClick={(event) => handleItemClick(event, item)}
+        />
+      ))}
+    </div>
+  );
+};

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

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

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

@@ -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, IListItemProps as IListItem } from './components';
+export * from './List';
+export type { IListStyles } from './List.styles';
+export type { IListItemStyles, IListItemProps as IListItem } from './components';