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

package/src/components/FloatDocActions/components/DocActions/types.ts

@@ -0,0 +1,3 @@
+import { DOC_ACTIONS_VIEWS } from './constants';
+
+export type IDocActionsView = (typeof DOC_ACTIONS_VIEWS)[number];

package/src/components/FloatDocActions/components/index.ts

@@ -0,0 +1 @@
+export * from './DocActions';

package/src/components/FloatDocActions/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_TIMEOUT = 150;

package/src/components/FloatDocActions/index.ts

@@ -0,0 +1,3 @@
+export * from './FloatDocActions';
+export * from './components';
+export type { IFloatDocActionsStyles } from './FloatDocActions.styles';

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

@@ -1,86 +1,99 @@
+import { FC } from 'react';
+import { isArrayNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
 import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
+import { iconsMap } from './icons';
 import { IIconType } from './types';
 
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/Icon',
-};
-
-export const Default = () => (
+const GalleryIcon: FC<{ type: IIconType }> = ({ type }) => (
   <div
+    key={type}
     style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
+      width: 100,
+      height: 100,
+      margin: 1,
+      background: '#f7f7f7',
       display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
     }}
   >
-    {/* <Icon type={select('type', types, types[0])} /> */}
+    <div
+      style={{
+        width: 32,
+        height: 32,
+        margin: '10px 0',
+        display: 'flex',
+        alignItems: 'center',
+        color: '#888',
+      }}
+    >
+      <Icon type={type} />
+    </div>
+    <div
+      style={{
+        fontFamily: 'Arial',
+        fontSize: 13,
+        color: '#747679',
+        overflow: 'hidden',
+        padding: '0 5px',
+      }}
+    >
+      {type}
+    </div>
   </div>
 );
 
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
+const Story: FC = () => {
+  const theme = useTheme();
+  const notCustomizedIcons = Object.keys(iconsMap).filter((icon) =>
+    isEmpty(theme.icons?.[icon]),
+  ) as IIconType[];
+  const customizedIcons = Object.keys(theme.icons ?? {}) as IIconType[];
+
+  return (
+    <div>
+      {isArrayNotEmpty(notCustomizedIcons) && (
+        <div>
+          <h1>Китовые иконки</h1>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              width: '80vw',
+            }}
+          >
+            {notCustomizedIcons.map((type) => (
+              <GalleryIcon type={type} key={type} />
+            ))}
+          </div>
+        </div>
+      )}
+      <div>
+        <h1>Кастомизированные иконки</h1>
         <div
           style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
             display: 'flex',
             alignItems: 'center',
-            color: '#888',
+            flexWrap: 'wrap',
+            width: '80vw',
           }}
         >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
-          }}
-        >
-          {type}
+          {customizedIcons.map((type) => (
+            <GalleryIcon type={type} key={type} />
+          ))}
         </div>
       </div>
-    ))}
-  </div>
-);
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Data Display/Icon',
+  component: Story,
+};
+
+export default meta;
+export const Default = {};

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

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Icon', {
   root: {

package/src/components/Icon/Icon.tsx

@@ -1,11 +1,10 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTheme } from '../../theme';
 import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
+import { iconsMap } from './icons';
 import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
+import { IIconStyles, useStyles } from './Icon.styles';
 
 export interface IIconProps extends ICommonProps<IIconStyles> {
   type: IIconType;
@@ -13,14 +12,20 @@ export interface IIconProps extends ICommonProps<IIconStyles> {
 
 export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
+  const theme = useTheme();
+
+  const icon = theme.icons?.[type] ?? iconsMap[type];
+
+  if (isEmpty(icon)) {
+    console.error(`Иконки ${type} не существует`);
+    return null;
+  }
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
+    <div
+      className={classes.root}
+      {...addDataAttributes(data, testId)}
+      dangerouslySetInnerHTML={{ __html: icon }}
+    />
   );
 };

package/src/components/Icon/icons/calendar.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M6 12h3V9H6v3zm-2 4V7h12l.002 9H4zM16 4h-1V3c0-.552-.448-1-1-1s-1 .448-1 1v1H7V3c0-.552-.448-1-1-1s-1 .448-1 1v1H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2z"></path></svg>

package/src/components/Icon/icons/check.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="m7.5 13.086 7.793-7.793a1 1 0 1 1 1.414 1.414l-8.5 8.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L7.5 13.086Z"></path></svg>

package/src/components/Icon/icons/chevron-down-small.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M8.24512 8.84751L11.038 6.05461C11.4285 5.66409 12.0617 5.66409 12.4522 6.05461C12.8427 6.44514 12.8427 7.0783 12.4522 7.46883L8.95222 10.9688C8.5617 11.3593 7.92853 11.3593 7.53801 10.9688L4.03801 7.46883C3.64749 7.0783 3.64749 6.44514 4.03801 6.05461C4.42853 5.66409 5.0617 5.66409 5.45222 6.05461L8.24512 8.84751Z"></path></svg>

package/src/components/Icon/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10.0029 11.6053L5.71004 7.31242C5.31951 6.9219 4.68635 6.9219 4.29582 7.31242C3.9053 7.70295 3.9053 8.33611 4.29582 8.72664L9.29582 13.7266C9.68635 14.1172 10.3195 14.1172 10.71 13.7266L15.71 8.72664C16.1006 8.33611 16.1006 7.70295 15.71 7.31242C15.3195 6.9219 14.6863 6.9219 14.2958 7.31242L10.0029 11.6053Z"></path></svg>

package/src/components/Icon/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M8.41421 10L12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L11.2929 15.7071C11.6834 16.0976 12.3166 16.0976 12.7071 15.7071C13.0976 15.3166 13.0976 14.6834 12.7071 14.2929L8.41421 10Z"></path></svg>

package/src/components/Icon/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M11.5858 10L7.29289 5.70711C6.90237 5.31658 6.90237 4.68342 7.29289 4.29289C7.68342 3.90237 8.31658 3.90237 8.70711 4.29289L13.7071 9.29289C14.0976 9.68342 14.0976 10.3166 13.7071 10.7071L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L11.5858 10Z"></path></svg>

package/src/components/Icon/icons/close-large.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M6.102 4.709c-.446-.36-1.055-.373-1.415-.012-.39.39-.342 1.072.108 1.523l3.783 3.782-3.783 3.782-.096.108c-.36.446-.373 1.055-.012 1.415.39.391 1.072.342 1.523-.108l3.782-3.783 3.782 3.783.108.097c.446.358 1.055.372 1.415.011.39-.39.342-1.072-.108-1.523l-3.783-3.782L15.19 6.22l.097-.108c.358-.446.372-1.055.011-1.415-.39-.39-1.072-.342-1.523.108L9.992 8.588 6.21 4.805l-.108-.096Z"></path></svg>

package/src/components/Icon/icons/close-window.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="currentColor" d="M4.5 4.5l11 11m0-11l-11 11" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>

package/src/components/Icon/icons/close.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M11.985 10l2.407-2.293c.41-.39.41-1.023 0-1.414-.41-.39-1.074-.39-1.485 0L10.5 8.586 8.093 6.293c-.411-.39-1.075-.39-1.485 0-.41.391-.41 1.023 0 1.414L9.015 10l-2.407 2.293c-.41.391-.41 1.023 0 1.414.205.195.473.293.742.293s.538-.098.743-.293l2.407-2.293 2.407 2.293c.205.195.474.293.743.293s.537-.098.742-.293c.41-.391.41-1.023 0-1.414L11.985 10z"></path></svg>

package/src/components/Icon/icons/filter.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M12 11c1.306 0 2.417.834 2.829 2H17c.552 0 1 .448 1 1s-.448 1-1 1h-2.17c-.412 1.165-1.524 2-2.83 2s-2.418-.835-2.83-2H3c-.552 0-1-.448-1-1s.448-1 1-1h6.171c.412-1.166 1.523-2 2.829-2zM5 3c1.306 0 2.417.834 2.829 2H17c.552 0 1 .448 1 1s-.448 1-1 1H7.83C7.417 8.165 6.305 9 5 9 3.343 9 2 7.657 2 6s1.343-3 3-3z"></path></svg>

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

@@ -0,0 +1,62 @@
+import type { ISvgIcon } from '../types';
+import avatar from './avatar.svg?raw';
+import calendar from './calendar.svg?raw';
+import check from './check.svg?raw';
+import chevronDownSmall from './chevron-down-small.svg?raw';
+import chevronDown from './chevron-down.svg?raw';
+import chevronLeft from './chevron-left.svg?raw';
+import chevronRight from './chevron-right.svg?raw';
+import closeLarge from './close-large.svg?raw';
+import closeWindow from './close-window.svg?raw';
+import close from './close.svg?raw';
+import fileExcel from './file-excel.svg?raw';
+import fileImage from './file-image.svg?raw';
+import fileOther from './file-other.svg?raw';
+import filePdf from './file-pdf.svg?raw';
+import fileWord from './file-word.svg?raw';
+import fileXml from './file-xml.svg?raw';
+import fileZip from './file-zip.svg?raw';
+import filter from './filter.svg?raw';
+import information from './information.svg?raw';
+import menu from './menu.svg?raw';
+import minus from './minus.svg?raw';
+import plus from './plus.svg?raw';
+import search from './search.svg?raw';
+import statusError from './status-error.svg?raw';
+import statusInfo from './status-info.svg?raw';
+import statusNotOk from './status-not-ok.svg?raw';
+import statusOk from './status-ok.svg?raw';
+import statusWarning from './status-warning.svg?raw';
+import trashCan from './trash-can.svg?raw';
+
+export const iconsMap = {
+  avatar,
+  calendar,
+  check,
+  'chevron-down-small': chevronDownSmall,
+  'chevron-down': chevronDown,
+  'chevron-left': chevronLeft,
+  'chevron-right': chevronRight,
+  'close-large': closeLarge,
+  'close-window': closeWindow,
+  close,
+  'file-excel': fileExcel,
+  'file-image': fileImage,
+  'file-other': fileOther,
+  'file-pdf': filePdf,
+  'file-word': fileWord,
+  'file-xml': fileXml,
+  'file-zip': fileZip,
+  filter,
+  information,
+  menu,
+  minus,
+  plus,
+  search,
+  'status-error': statusError,
+  'status-info': statusInfo,
+  'status-not-ok': statusNotOk,
+  'status-ok': statusOk,
+  'status-warning': statusWarning,
+  'trash-can': trashCan,
+} satisfies Record<string, ISvgIcon>;

package/src/components/Icon/icons/information.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm0 8c3.307 0 6-2.693 6-6 0-3.308-2.693-6-6-6-3.308 0-6 2.692-6 6 0 3.307 2.692 6 6 6zm0-14c2.122 0 4.157.843 5.657 2.343S18 7.878 18 10s-.843 4.157-2.343 5.657S12.122 18 10 18s-4.157-.843-5.657-2.343S2 12.122 2 10c0-4.418 3.582-8 8-8zm0 12c-.552 0-1-.448-1-1v-3c0-.552.448-1 1-1s1 .448 1 1v3c0 .552-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/menu.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="1 1 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M5.08154 9.02148C5.08154 8.77083 5.16211 8.55778 5.32324 8.38232C5.48438 8.20687 5.70817 8.11914 5.99463 8.11914C6.28109 8.11914 6.50667 8.20687 6.67139 8.38232C6.8361 8.55778 6.91846 8.77083 6.91846 9.02148C6.91846 9.27214 6.8361 9.47803 6.67139 9.63916C6.50667 9.80029 6.28109 9.88086 5.99463 9.88086C5.70817 9.88086 5.48438 9.80029 5.32324 9.63916C5.16211 9.47803 5.08154 9.27214 5.08154 9.02148ZM8.08154 9.02148C8.08154 8.77083 8.16211 8.55778 8.32324 8.38232C8.48438 8.20687 8.70817 8.11914 8.99463 8.11914C9.28109 8.11914 9.50667 8.20687 9.67139 8.38232C9.8361 8.55778 9.91846 8.77083 9.91846 9.02148C9.91846 9.27214 9.8361 9.47803 9.67139 9.63916C9.50667 9.80029 9.28109 9.88086 8.99463 9.88086C8.70817 9.88086 8.48438 9.80029 8.32324 9.63916C8.16211 9.47803 8.08154 9.27214 8.08154 9.02148ZM11.0815 9.02148C11.0815 8.77083 11.1621 8.55778 11.3232 8.38232C11.4844 8.20687 11.7082 8.11914 11.9946 8.11914C12.2811 8.11914 12.5067 8.20687 12.6714 8.38232C12.8361 8.55778 12.9185 8.77083 12.9185 9.02148C12.9185 9.27214 12.8361 9.47803 12.6714 9.63916C12.5067 9.80029 12.2811 9.88086 11.9946 9.88086C11.7082 9.88086 11.4844 9.80029 11.3232 9.63916C11.1621 9.47803 11.0815 9.27214 11.0815 9.02148Z"></path></svg>

package/src/components/Icon/icons/minus.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 11H4a1 1 0 1 1 0-2h12a1 1 0 1 1 0 2Z"></path></svg>

package/src/components/Icon/icons/plus.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 11h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 2 0v5h5a1 1 0 1 1 0 2Z"></path></svg>

package/src/components/Icon/icons/search.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M9 2c3.866 0 7 3.134 7 7 0 1.7-.606 3.259-1.614 4.472l2.589 2.59c.39.39.39 1.023 0 1.414-.39.39-1.024.39-1.414 0l-2.662-2.661C11.785 15.563 10.443 16 9 16c-3.866 0-7-3.134-7-7s3.134-7 7-7zm0 2C6.239 4 4 6.239 4 9s2.239 5 5 5 5-2.239 5-5-2.239-5-5-5z"></path></svg>

package/src/components/Icon/icons/status-error.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M14 11H6c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1s-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/status-info.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M10 15c-.552 0-1-.448-1-1v-4c0-.552.448-1 1-1s1 .448 1 1v4c0 .552-.448 1-1 1zM10 7c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z"></path></svg>

package/src/components/Icon/icons/status-not-ok.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M11.414 10l2.293-2.293c.391-.391.391-1.023 0-1.414-.39-.391-1.023-.391-1.414 0L10 8.586 7.707 6.293c-.39-.391-1.023-.391-1.414 0-.39.391-.39 1.023 0 1.414L8.586 10l-2.293 2.293c-.39.391-.39 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293L10 11.414l2.293 2.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414L11.414 10z"></path></svg>

package/src/components/Icon/icons/status-ok.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M8.333 11.252l4.96-4.96c.39-.39 1.024-.39 1.414 0 .39.391.39 1.025 0 1.415L9.04 13.374c-.39.39-1.023.39-1.414 0L5.293 11.04c-.39-.39-.39-1.023 0-1.414.39-.39 1.024-.39 1.414 0l1.626 1.626z"></path></svg>

package/src/components/Icon/icons/status-warning.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0z"></path><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" stroke="none" d="M10 5c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1s1-.448 1-1V6c0-.552-.448-1-1-1zM10 13c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z"></path></svg>

package/src/components/Icon/icons/trash-can.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="none" d="M16 6v10c0 1.105-.895 2-2 2H6c-1.105 0-2-.895-2-2V6h12zM8 8c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1s1-.448 1-1V9c0-.552-.448-1-1-1zm4 0c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1s1-.448 1-1V9c0-.552-.448-1-1-1zm0-6l1 1h3c.552 0 1 .448 1 1s-.448 1-1 1H4c-.552 0-1-.448-1-1s.448-1 1-1h3l1-1h4z"></path></svg>

package/src/components/Icon/index.ts

@@ -1,5 +1,5 @@
 export * from './Icon';
 export * from './types';
-export { iconsList } from './icons-list';
+export * from './icons';
 export type { IIconStyles } from './Icon.styles';
 export * from './snippet';

package/src/components/Icon/types.ts

@@ -1,18 +1,12 @@
-import { ReactElement, SVGAttributes } from 'react';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
+import { ReactElement } from 'react';
+import { iconsMap } from './icons';
 
-export interface ISvgIcon {
-  viewBox?: string;
-  paths?: Array<SVGAttributes<never>>;
-  circles?: Array<SVGAttributes<never>>;
-  rects?: Array<SVGAttributes<never>>;
-}
+export type ISvgIcon = string;
 
-export type ICommonIcon = keyof typeof iconsList;
+type IUiKitIconsMap = typeof iconsMap;
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IIconsMap extends IUiKitIconsMap {}
 
-export type IComplexIcon = keyof typeof complexIcons;
-
-export type IIconType = ICommonIcon | IComplexIcon;
+export type IIconType = keyof IIconsMap;
 
 export type IIcon = IIconType | ReactElement;

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,12 +1,11 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { type Meta } from '@storybook/react';
+import { iconsMap, IIconType } from '../Icon';
 import { IconButton } from './IconButton';
 import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
 
-const icons = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = Object.keys(iconsMap) as IIconType[];
 
-export default {
+const meta: Meta<typeof IconButton> = {
   title: 'Buttons/IconButton',
   component: IconButton,
   args: {
@@ -22,11 +21,7 @@ export default {
     size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
   },
-  parameters: {
-    controls: {
-      exclude: ['tweakStyles', 'testId', 'data'],
-    },
-  },
-} as ComponentMeta<typeof IconButton>;
+};
 
-export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;
+export default meta;
+export const Default = {};

package/src/components/IconButton/IconButton.styles.ts

@@ -1,9 +1,5 @@
 import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
-const BUTTON_SIZE_S = 24;
-const BUTTON_SIZE_M = 32;
-const ICON_SIZE = 20;
-
 export const useStyles = createThemedStyles('IconButton', {
   root: {
     display: 'flex',
@@ -13,7 +9,7 @@ export const useStyles = createThemedStyles('IconButton', {
     outline: 'none',
     boxSizing: 'border-box',
     transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, border-color',
+    transitionProperty: 'background-color, color, border-color, opacity, visibility',
     border: 'none',
     position: 'relative',
     boxShadow: 'none',
@@ -29,6 +25,10 @@ export const useStyles = createThemedStyles('IconButton', {
     '&:active': {
       extend: 'active',
     },
+
+    width: 'var(--icon-button-size)',
+    height: 'var(--icon-button-size)',
+    '--icon-button-icon-size': '20px',
   },
 
   'cancel-light': {},
@@ -55,8 +55,8 @@ export const useStyles = createThemedStyles('IconButton', {
   icon: {
     display: 'flex',
     alignItems: 'center',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   loader: {
@@ -66,18 +66,20 @@ export const useStyles = createThemedStyles('IconButton', {
     top: '50%',
     transform: 'translate(-50%, -50%)',
 
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: 'var(--icon-button-icon-size)',
+    height: 'var(--icon-button-icon-size)',
   },
 
   s: {
-    width: BUTTON_SIZE_S,
-    height: BUTTON_SIZE_S,
+    '--icon-button-size': '24px',
   },
 
   m: {
-    width: BUTTON_SIZE_M,
-    height: BUTTON_SIZE_M,
+    '--icon-button-size': '32px',
+  },
+
+  l: {
+    '--icon-button-size': '40px',
   },
 });
 

package/src/components/IconButton/IconButton.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { renderIcon, IIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
@@ -24,51 +23,48 @@ export interface IIconButtonProps
   isLoading?: boolean;
 }
 
-export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
-  (
-    {
-      icon,
-      size = 'm',
-      view = 'cancel-light',
-      isDisabled = false,
-      isActive = false,
-      isLoading = false,
-      type = 'button',
-      testId,
-      tweakStyles,
-      data,
-      onClick,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(function IconButton(
+  {
+    icon,
+    size = 'm',
+    view = 'cancel-light',
+    isDisabled = false,
+    isActive = false,
+    isLoading = false,
+    type = 'button',
+    testId,
+    tweakStyles,
+    data,
+    onClick,
+    ...restProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const hasNoAction = isDisabled || isLoading;
+  const hasNoAction = isDisabled || isLoading;
 
-    return (
-      <button
-        ref={ref}
-        className={clsx(classes.root, classes[view], classes[size], {
-          [classes.disabled]: isDisabled,
-          [classes.active]: isActive,
-          [classes.loading]: isLoading,
-        })}
-        type={type}
-        disabled={isDisabled}
-        onClick={hasNoAction ? undefined : onClick}
-        {...restProps}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        {isLoading ? (
-          <span className={classes.loader}>
-            <ThemedPreloader type="default" useCurrentColor />
-          </span>
-        ) : (
-          <span className={classes.icon}>{renderIcon(icon)}</span>
-        )}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      ref={ref}
+      className={clsx(classes.root, classes[view], classes[size], {
+        [classes.disabled]: isDisabled,
+        [classes.active]: isActive,
+        [classes.loading]: isLoading,
+      })}
+      type={type}
+      disabled={isDisabled}
+      onClick={hasNoAction ? undefined : onClick}
+      {...restProps}
+      {...addDataAttributes(data, testId)}
+    >
+      {isLoading ? (
+        <span className={classes.loader}>
+          <ThemedPreloader type="default" useCurrentColor />
+        </span>
+      ) : (
+        <span className={classes.icon}>{renderIcon(icon)}</span>
+      )}
+    </button>
+  );
+});

package/src/components/IconButton/constants.ts

@@ -1,3 +1,3 @@
-export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+export const ICON_BUTTON_SIZES = ['s', 'm', 'l'] as const;
 
 export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;