@true-engineering/true-react-common-ui-kit 3.6.0 → 3.8.0

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,52 +1,61 @@
-import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { ICommonProps } from '../../../../types';
+import { ICommonProps } from '../../../../types';
+import { Skeleton } from '../../../Skeleton';
 import { formatCellContent } from '../../helpers';
-import type { IFlexibleTableConfigType } from '../../types';
+import {
+  ITableRow,
+  IValueComponent,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+} from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
-export interface IFlexibleTableCellProps<Values extends Record<string, any>>
-  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
-  item: Values;
-  columnName: keyof Values;
-  config: IFlexibleTableConfigType<Values>;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  isFocusedRow?: boolean;
+export interface IFlexibleTableCellProps<Row extends ITableRow>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+    Pick<
+      Parameters<IValueComponent<Row, unknown>>[0],
+      | 'isFocusedRow'
+      | 'isNestedComponentExpanded'
+      | 'isRowNestedComponentExpanded'
+      | 'onSetNestedComponent'
+    > {
+  row: Row;
+  columnName: keyof Row;
+  config: IFlexibleTableConfigType<Row>;
+  renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
   isSticky?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
+  isLoading?: boolean;
 }
 
-export function FlexibleTableCell<Values extends Record<string, any>>({
-  item,
+export function FlexibleTableCell<Row extends ITableRow>({
+  row,
   columnName,
   config,
-  renderMode = 'table',
-  isFocusedRow,
+  renderMode,
   isSecond,
   isSticky,
-  isNestedComponentExpanded,
-  isRowNestedComponentExpanded,
+  isLoading,
   tweakStyles,
-  onSetNestedComponent,
-}: IFlexibleTableCellProps<Values>): JSX.Element {
+  ...valueComponentProps
+}: IFlexibleTableCellProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+  const { component, left, right, position, cellAlign, cellVerticalAlign } =
     config[columnName] ?? {};
 
-  const value = item[columnName];
+  const value = row[columnName];
 
   const TableCell = renderMode === 'divs' ? 'div' : 'td';
 
   return (
     <TableCell
-      key={columnName as string}
-      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
+      className={clsx(classes.root, {
+        [classes.sticky]: isSticky,
+        [classes.second]: isSecond,
+        [classes.loading]: isLoading,
+      })}
       style={{
         textAlign: cellAlign,
         position: isSticky ? 'sticky' : position,
@@ -55,19 +64,19 @@ export function FlexibleTableCell<Values extends Record<string, any>>({
         verticalAlign: cellVerticalAlign,
       }}
     >
-      {isNotEmpty(value) && (
-        <>
-          {isNotEmpty(component)
-            ? component({
-                value,
-                row: item,
-                isFocusedRow,
-                isNestedComponentExpanded,
-                isRowNestedComponentExpanded,
-                onSetNestedComponent,
-              })
-            : formatCellContent(value, config[columnName])}
-        </>
+      {isLoading ? (
+        <div className={classes.skeleton}>
+          <Skeleton />
+        </div>
+      ) : (
+        isNotEmpty(value) && (
+          <>
+            {/* TODO: Рендерить как настоящий компонент */}
+            {isNotEmpty(component)
+              ? component({ ...valueComponentProps, value, row })
+              : formatCellContent(value, config[columnName])}
+          </>
+        )
       )}
     </TableCell>
   );

package/src/components/FlexibleTable/components/FlexibleTableCell/index.ts

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

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,45 +1,64 @@
-import { ReactNode, useState, memo } from 'react';
+import { ReactNode, useState, memo, MouseEvent } from 'react';
 import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  isEmpty,
+  isFunction,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
-import { IFlexibleTableConfigType, INestedComponent } from '../../types';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+  INestedComponent,
+} from '../../types';
 import { FlexibleTableCell } from '../FlexibleTableCell';
 import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableRowProps<Values extends Record<string, any>>
+export interface IFlexibleTableRowProps<Row extends ITableRow>
   extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
-  item: Values;
-  uniqueField?: keyof Values;
+  item: Row;
+  index: number;
+  uniqueField?: keyof Row;
+  renderMode: IFlexibleTableRenderMode;
+  /** Индексы строк, на которые навешивается класс `active` */
+  activeRows?: number[];
+  /** @default false */
   isFirstColumnSticky?: boolean;
-  isActive: boolean;
-  config: IFlexibleTableConfigType<Values>;
-  enabledColumns?: Array<keyof Values>;
-  rowAttributes?: Array<keyof Values>;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
+  /** @default false */
+  isLoading?: boolean;
+  config: IFlexibleTableConfigType<Row>;
+  columns: Array<keyof Row & string>;
+  rowAttributes?: Array<keyof Row>;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
+  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowHover?: (id?: string) => void;
   onRowClick?: (id: string) => void;
 }
 
-function FlexibleTableRowInner<Values extends Record<string, any>>({
+function FlexibleTableRowInner<Row extends ITableRow>({
   item,
+  index,
+  config,
+  columns,
   uniqueField,
+  renderMode,
+  activeRows,
   isFirstColumnSticky,
-  isActive,
-  config,
-  enabledColumns,
+  isLoading = false,
   rowAttributes,
-  renderMode = 'table',
+  isExpandableRowComponentInitiallyOpen = false,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
   onRowClick,
-}: IFlexibleTableRowProps<Values>): JSX.Element {
+}: IFlexibleTableRowProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableCellStyles = useTweakStyles({
@@ -49,24 +68,43 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
-    isOpen: false,
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => {
+    const isOpen = isFunction(isExpandableRowComponentInitiallyOpen)
+      ? isExpandableRowComponentInitiallyOpen(item, index)
+      : isExpandableRowComponentInitiallyOpen;
+
+    const component = isOpen
+      ? expandableRowComponent?.(item, true, () => {
+          setNestedComponent({ isOpen: false });
+        })
+      : undefined;
+
+    return isReactNodeNotEmpty(component) ? { isOpen: true, component } : { isOpen: false };
   });
 
+  const isActive = activeRows?.includes(index) ?? false;
+  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
+  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
+
+  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
+
   // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
   // например: rowAttributes={['id']} => <tr data-id="x" />
-  const rowData = rowAttributes?.reduce((acc: IDataAttributes, cur) => {
-    const val = item[cur];
-    if (val !== undefined) {
-      acc[cur as string] = String(item[cur]);
+  const rowData = rowAttributes?.reduce<IDataAttributes>(
+    (acc, cur) => ({ ...acc, [cur]: item[cur] }),
+    {},
+  );
+
+  const handleMouseEnter = (event: MouseEvent) => {
+    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
+      event.stopPropagation();
+      onRowHover(item[uniqueField]);
+      setFocused(true);
     }
-    return acc;
-  }, {});
+  };
 
   const handleMouseLeave = () => {
-    if (onRowHover) {
-      onRowHover(undefined);
-    }
+    onRowHover?.(undefined);
     setFocused(false);
   };
 
@@ -81,28 +119,25 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   };
 
   const handleRowClick = () => {
-    if (uniqueField !== undefined) {
+    if (isNotEmpty(uniqueField)) {
       onRowClick?.(item[uniqueField]);
     }
 
     if (isNotEmpty(expandableRowComponent)) {
       const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
 
-      if (!nestedComponent.isOpen && newNestedComponent !== null) {
+      if (!isNestedComponentExpanded && newNestedComponent !== null) {
         updateNestedComponent(newNestedComponent);
         return;
       }
 
-      if (nestedComponent.isOpen && nestedComponent.cellKey === undefined) {
+      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
         closeNestedComponent();
         return;
       }
     }
   };
 
-  const items = enabledColumns ?? Object.keys(config);
-  const isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
-
   const TableRow = renderMode === 'divs' ? 'div' : 'tr';
   const TableCell = renderMode === 'divs' ? 'div' : 'td';
 
@@ -112,47 +147,44 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,
-          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+          [classes.clickable]: isClickable,
+        })}
+        {...(!isLoading && {
+          onClick: handleRowClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
         })}
-        onMouseEnter={(e) => {
-          if (uniqueField !== undefined && onRowHover !== undefined) {
-            e.stopPropagation();
-            onRowHover(item[uniqueField]);
-            setFocused(true);
-          }
-        }}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleRowClick}
         {...addDataAttributes({
           ...rowData,
           active: isActive ? true : undefined,
           editable: isEditable ? true : undefined,
-          isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
+          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
         })}
       >
-        {items.map((key, i) => (
+        {columns.map((key, i) => (
           <FlexibleTableCell
-            columnName={key}
+            key={key}
             isSticky={isFirstColumnSticky && i === 0}
             isSecond={isFirstColumnSticky && i === 1}
-            key={key as string}
-            item={item}
+            isLoading={isLoading}
+            row={item}
             config={config}
+            columnName={key}
             tweakStyles={tweakTableCellStyles}
             renderMode={renderMode}
             isFocusedRow={isFocused}
-            isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
+            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
             isRowNestedComponentExpanded={
-              nestedComponent.isOpen && nestedComponent.cellKey === undefined
+              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
             }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key as string)}
+            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
           />
         ))}
       </TableRow>
 
-      {nestedComponent.isOpen && (
+      {isNestedComponentExpanded && (
         <TableRow className={classes.root}>
-          <TableCell className={classes.nestedComponent} colSpan={items.length}>
+          <TableCell className={classes.nestedComponent} colSpan={columns.length}>
             {nestedComponent.component}
           </TableCell>
         </TableRow>

package/src/components/FlexibleTable/components/FlexibleTableRow/index.ts

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

package/src/components/FlexibleTable/components/index.ts

@@ -1,2 +1,2 @@
-export * from './FlexibleTableRow';
-export * from './FlexibleTableCell';
+export * from './FlexibleTableRow';
+export * from './FlexibleTableCell';

package/src/components/FlexibleTable/constants.ts

@@ -1 +1 @@
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';

package/src/components/FlexibleTable/helpers.ts

@@ -10,6 +10,4 @@ export const formatCellContent = <Values>(
   value: unknown,
   config?: IFlexibleTableConfigType<Values>[keyof Values],
 ): string =>
-  value instanceof Date
-    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
-    : String(value);
+  value instanceof Date ? format(value, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);

package/src/components/FlexibleTable/index.ts

@@ -1,4 +1,4 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { IFlexibleTableStyles } from './FlexibleTable.styles';
-export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';
+export * from './FlexibleTable';
+export * from './types';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';

package/src/components/FlexibleTable/types.ts

@@ -1,10 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 
-export type ITextAlignment = 'left' | 'center' | 'right';
+export type IFlexibleTableRenderMode = 'table' | 'divs';
 
-export type IVerticalAlignment = 'middle' | 'top' | 'bottom' | 'baseline' | 'sub' | string;
-
-export type IPosition = 'sticky' | 'absolute' | 'relative' | 'static';
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
 
 export type ITitleComponent<Value> = FC<{
   value?: Value;
@@ -28,10 +27,11 @@ export type IFlexibleTableConfigType<Values> = {
     minWidth?: string | number;
     width?: string | number;
     maxWidth?: string | number;
-    titleAlign?: ITextAlignment;
-    cellAlign?: ITextAlignment;
-    cellVerticalAlign?: IVerticalAlignment;
-    position?: IPosition;
+    /** @default 'left' */
+    titleAlign?: CSSProperties['textAlign'];
+    cellAlign?: CSSProperties['textAlign'];
+    cellVerticalAlign?: CSSProperties['verticalAlign'];
+    position?: CSSProperties['position'];
     right?: number;
     left?: number;
   };

package/src/components/Icon/Icon.stories.tsx

@@ -6,7 +6,7 @@ import { IIconType } from './types';
 const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 export default {
-  title: 'Icon',
+  title: 'Data Display/Icon',
 };
 
 export const Default = () => (

package/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Icon', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-export type IIconStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Icon', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export type IIconStyles = ITweakStyles<typeof useStyles>;

package/src/components/Icon/Icon.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
-import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
-
-export interface IIconProps extends ICommonProps<IIconStyles> {
-  type: IIconType;
-}
-
-export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { ComplexIconBoilerplate, IconBoilerplate } from './components';
+import { isComplexIcon } from './helpers';
+import { IIconType } from './types';
+import { useStyles, IIconStyles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps<IIconStyles> {
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isComplexIcon(type) ? (
+        <ComplexIconBoilerplate type={type} />
+      ) : (
+        <IconBoilerplate type={type} />
+      )}
+    </div>
+  );
+};

package/src/components/Icon/complexIcons/icons.ts

@@ -1,5 +1,5 @@
-import avatarGreen from './avatarGreen.svg?raw';
-
-export const complexIcons = {
-  avatar: avatarGreen,
-};
+import avatarGreen from './avatarGreen.svg?raw';
+
+export const complexIcons = {
+  avatar: avatarGreen,
+};

package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx

@@ -1,16 +1,16 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { complexIcons } from '../../complexIcons';
-import { IComplexIcon } from '../../types';
-
-export interface IComplexIconBoilerplateProps {
-  type: IComplexIcon;
-}
-
-export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
-  const ComplexIcon = icons[type];
-
-  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
-};
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../../../theme';
+import { complexIcons } from '../../complexIcons';
+import { IComplexIcon } from '../../types';
+
+export interface IComplexIconBoilerplateProps {
+  type: IComplexIcon;
+}
+
+export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
+  const { theme } = useContext(ThemeContext);
+  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
+  const ComplexIcon = icons[type];
+
+  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
+};

package/src/components/Icon/components/ComplexIconBoilerplate/index.ts

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

package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx

@@ -1,43 +1,43 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { iconsList as commonIcons } from '../../icons-list';
-import { ICommonIcon } from '../../types';
-
-export interface IIconBoilerplateProps {
-  type: ICommonIcon;
-}
-
-export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
-  const icon = icons[type];
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={icon.viewBox ?? '0 0 20 20'}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {icon.paths?.map((path, index) => (
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill={path.fill ?? 'currentColor'}
-          stroke={path.stroke ?? 'none'}
-          key={index}
-          {...path}
-        />
-      ))}
-
-      {icon.rects?.map((rect, index) => (
-        <rect {...rect} key={index} />
-      ))}
-
-      {icon.circles?.map((circle, index) => (
-        <circle {...circle} key={index} />
-      ))}
-    </svg>
-  );
-};
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../../../theme';
+import { iconsList as commonIcons } from '../../icons-list';
+import { ICommonIcon } from '../../types';
+
+export interface IIconBoilerplateProps {
+  type: ICommonIcon;
+}
+
+export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
+  const { theme } = useContext(ThemeContext);
+  const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
+  const icon = icons[type];
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={icon.viewBox ?? '0 0 20 20'}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {icon.paths?.map((path, index) => (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill={path.fill ?? 'currentColor'}
+          stroke={path.stroke ?? 'none'}
+          key={index}
+          {...path}
+        />
+      ))}
+
+      {icon.rects?.map((rect, index) => (
+        <rect {...rect} key={index} />
+      ))}
+
+      {icon.circles?.map((circle, index) => (
+        <circle {...circle} key={index} />
+      ))}
+    </svg>
+  );
+};

package/src/components/Icon/components/IconBolerplate/index.ts

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