@true-engineering/true-react-common-ui-kit 2.6.0 → 2.7.0

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

@@ -1,63 +1,63 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { colors } from '../../theme';
-import { List } from './List';
-import { IListItem } from './types';
-
-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.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-    disabled: true,
-    withIconGap: true,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-    withIconGap: true,
-  },
-];
-
-export default {
-  title: '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, IListProps } from './List';
+
+const listItems: IListProps['items'] = [
+  {
+    item: 'Печатать билет',
+    onClick: console.log,
+    icon: 'sign-out',
+  },
+  { item: 'Выписать', onClick: console.log, withIconGap: true },
+  {
+    item: 'Аннулировать',
+    view: 'destructive',
+    onClick: console.log,
+    icon: <>2</>,
+  },
+  {
+    item: 'Вернуть',
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+    shouldDrawSpacerBelow: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    withIconGap: true,
+  },
+];
+
+export default {
+  title: '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,52 +1,14 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
-
-export const styles = {
-  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 ListStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    minWidth: 180,
+    backgroundColor: colors.CLASSIC_WHITE,
+    padding: [8, 0],
+    listStyle: 'none',
+    margin: 0,
+  },
+};
+
+export type ListStyles = ComponentStyles<typeof styles>;

package/src/components/List/List.tsx

@@ -1,54 +1,36 @@
-import { FC, Fragment } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getTestId,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IListItem } from './types';
-import { ListStyles, styles } from './List.styles';
-
-export interface IListProps extends ICommonProps {
-  tweakStyles?: ListStyles;
-  items: IListItem[];
-  testId?: string;
-  onClick?(): void;
-}
-
-export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
-  const { classes } = useTheme('List', styles, tweakStyles);
-
-  const handleItemClick = (item: IListItem) => {
-    item.onClick();
-    onClick?.();
-  };
-
-  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>
-      ))}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ListItem, IListItem } from '../ListItem';
+import { ListStyles, styles } from './List.styles';
+
+export interface IListProps extends ICommonProps {
+  tweakStyles?: ListStyles;
+  items: IListItem[];
+  testId?: string;
+  onClick?(): void;
+}
+
+export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
+  const { classes } = useTheme('List', styles, tweakStyles);
+
+  const handleItemClick = (item: IListItem) => {
+    item.onClick();
+    onClick?.();
+  };
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {items.map((item, idx) => (
+        <ListItem
+          key={idx}
+          {...item}
+          testId={item.testId ?? getTestId(testId, `item-${idx}`)}
+          onClick={() => handleItemClick(item)}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/List/index.ts

@@ -1,3 +1,2 @@
-export * from './List';
-export * from './types';
-export type { ListStyles } from './List.styles';
+export * from './List';
+export type { ListStyles } from './List.styles';

package/src/components/ListItem/ListItem.stories.tsx

@@ -0,0 +1,67 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { colors } from '../../theme';
+import { ListItem } from './ListItem';
+import { IListItem } from './types';
+
+const listItems: IListItem[] = [
+  {
+    item: 'Печатать билет',
+    onClick: console.log,
+    icon: 'sign-out',
+  },
+  { item: 'Выписать', onClick: console.log, withIconGap: true },
+  {
+    item: 'Аннулировать',
+    view: 'destructive',
+    onClick: console.log,
+    icon: <>2</>,
+  },
+  {
+    item: 'Вернуть',
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+    shouldDrawSpacerBelow: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    disabled: true,
+    withIconGap: true,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+    withIconGap: true,
+  },
+];
+
+export default {
+  title: 'ListItem',
+  component: ListItem,
+  args: {
+    items: listItems,
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
+    },
+  },
+} as ComponentMeta<typeof ListItem>;
+
+export const Default: ComponentStory<typeof ListItem> = (args) => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      padding: 40,
+      gap: 10,
+    }}
+  >
+    {listItems.map((item, idx) => (
+      <ListItem key={idx} {...item} {...args} />
+    ))}
+  </div>
+);

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

@@ -0,0 +1,48 @@
+import { colors } from '../../theme';
+import type { ComponentStyles } from '../../types';
+
+const ITEM_HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 20;
+const ICON_GAP = 12;
+
+export const styles = {
+  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',
+  },
+
+  default: {},
+  destructive: {},
+  custom: {},
+
+  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 ListItemStyles = ComponentStyles<typeof styles>;

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,44 @@
+import { FC, Fragment } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes, renderIcon } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IListItem } from './types';
+import { styles } from './ListItem.styles';
+
+export interface IListItemProps extends ICommonProps, IListItem {}
+
+export const ListItem: FC<IListItemProps> = ({
+  disabled,
+  icon,
+  item,
+  shouldDrawSpacerAbove,
+  shouldDrawSpacerBelow,
+  testId,
+  tweakStyles,
+  view = 'default',
+  withIconGap,
+  onClick,
+}) => {
+  const { classes } = useTheme('ListItem', styles, tweakStyles);
+
+  return (
+    <Fragment>
+      {shouldDrawSpacerAbove && <div className={classes.spacer} />}
+      <div
+        className={clsx(classes.item, classes[view], {
+          [classes.disabledItem]: disabled,
+          [classes.withIconGap]: withIconGap,
+        })}
+        onClick={disabled ? undefined : onClick}
+        {...addDataTestId(testId)}
+        {...(disabled && addDataAttributes({ disabled }))}
+      >
+        {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/ListItem/constants.ts

@@ -0,0 +1,5 @@
+export const LIST_ITEM_VIEW = [
+  'default',
+  'destructive',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;

package/src/components/ListItem/index.ts

@@ -0,0 +1,3 @@
+export * from './ListItem';
+export * from './types';
+export type { ListItemStyles } from './ListItem.styles';

package/src/components/{List → ListItem}/types.ts

@@ -1,13 +1,19 @@
-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;
-}
+import { ReactNode } from 'react';
+import { IIcon } from '../../types';
+import { LIST_ITEM_VIEW } from './constants';
+import type { ListItemStyles } from './ListItem.styles';
+
+export type IListItemView = (typeof LIST_ITEM_VIEW)[number];
+
+export interface IListItem {
+  item: ReactNode;
+  view?: IListItemView;
+  icon?: IIcon;
+  disabled?: boolean;
+  shouldDrawSpacerAbove?: boolean;
+  shouldDrawSpacerBelow?: boolean;
+  withIconGap?: boolean;
+  testId?: string;
+  tweakStyles?: ListItemStyles;
+  onClick(): void;
+}