@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTheme } from '../../hooks';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { IconBoilerplate } from './IconBoilerplate';
+import ComplexIconBoilerplate from './ComplexIconBoilerplate';
+import { ICommonIcon } from './icons';
+import { complexIcons, IComplexIcon } from './complexIcons';
+
+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>
+  );
+};

package/src/components/Icon/IconBoilerplate.tsx

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

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

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

@@ -0,0 +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>

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

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

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

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