@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

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

@@ -1,85 +1,86 @@
-import { Icon, IIconType } from './Icon';
-import { complexIcons } from './complexIcons';
-import { icons } from './icons';
-
-const types: IIconType[] = [...Object.keys(icons), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      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,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </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',
-        }}
-      >
-        <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>
-    ))}
-  </div>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      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,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </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',
+        }}
+      >
+        <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>
+    ))}
+  </div>
+);

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

@@ -1,10 +1,10 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-};
-
-export type IconStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+};
+
+export type IconStyles = ComponentStyles<typeof styles>;

package/src/components/Icon/Icon.tsx

@@ -1,32 +1,27 @@
-import React from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import ComplexIconBoilerplate from './ComplexIconBoilerplate';
-import { IconBoilerplate } from './IconBoilerplate';
-import { complexIcons, IComplexIcon } from './complexIcons';
-import { ICommonIcon } from './icons';
-import { IconStyles, styles } from './Icon.styles';
-
-export type IIconType = ICommonIcon | IComplexIcon;
-
-export interface IIconProps extends ICommonProps {
-  tweakStyles?: IconStyles;
-  type: IIconType;
-}
-
-const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
-
-export const Icon: React.FC<IIconProps> = ({ type, data, tweakStyles }) => {
-  const { classes } = useTheme('Icon', styles, tweakStyles);
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ComplexIconBoilerplate, IconBoilerplate } from './components';
+import { isComplexIcon } from './helpers';
+import { IIconType } from './types';
+import { IconStyles, styles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps {
+  tweakStyles?: IconStyles;
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, tweakStyles }) => {
+  const { classes } = useTheme('Icon', styles, tweakStyles);
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      {isComplexIcon(type) ? (
+        <ComplexIconBoilerplate type={type} />
+      ) : (
+        <IconBoilerplate type={type} />
+      )}
+    </div>
+  );
+};

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

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

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

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

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

package/src/components/Icon/{ComplexIconBoilerplate.tsx → components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx}

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

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

package/src/components/Icon/{IconBoilerplate.tsx → components/IconBolerplate/IconBoilerplate.tsx}

@@ -1,42 +1,43 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../hooks';
-import { ICommonIcon, icons as commonIcons } from './icons';
-
-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 '../../../../hooks';
+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

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

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

@@ -0,0 +1,2 @@
+export * from './ComplexIconBoilerplate';
+export * from './IconBolerplate';

package/src/components/Icon/helpers.ts

@@ -0,0 +1,9 @@
+import { complexIcons } from './complexIcons';
+import { IComplexIcon, IIconType, ISvgIcon } from './types';
+
+export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
+
+/**
+ * Эта функция позволяет корректно определить ключи в типе
+ */
+export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>) => ico;