@cyber-harbour/ui 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/IconComponents/PencilIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+
+interface PencilIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const PencilIcon = ({ fill = 'currentColor', ...props }: PencilIconProps) => {
+  return (
+    <svg viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M2.35001 13.0753L1.14265 16.0938C1.10786 16.1808 1.09934 16.276 1.11816 16.3677C1.13697 16.4595 1.18229 16.5437 1.2485 16.6099C1.31471 16.6761 1.3989 16.7214 1.49063 16.7402C1.58235 16.7591 1.67758 16.7505 1.76451 16.7157L4.7829 15.5083C5.26418 15.3157 5.7013 15.0273 6.06775 14.6606L16.514 4.21473C16.8946 3.83411 17.1084 3.31787 17.1084 2.77959C17.1084 2.24131 16.8946 1.72508 16.514 1.34445C16.1334 0.963831 15.6172 0.75 15.0789 0.75C14.5407 0.75 14.0245 0.963831 13.6439 1.34445L3.19669 11.7903C2.83038 12.1569 2.54233 12.5941 2.35001 13.0753Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/PointIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+
+interface PointIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const PointIcon = ({ fill = 'currentColor', ...props }: PointIconProps) => {
+  return (
+    <svg viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M28.928 0.067c-2.381 0.235-4.176 0.755-6.115 1.776-2.601 1.422-4.71 3.453-6.186 5.908l-0.041 0.073c-1.272 2.189-2.072 4.794-2.199 7.574l-0.001 0.037-0.024 0.563-14.363 0.053v2.555h14.568l0.187 0.843c0.533 2.37 1.51 4.453 2.845 6.255l-0.032-0.045c0.741 1.011 2.421 2.664 3.453 3.4 4.011 2.851 9.149 3.661 13.709 2.157 1.337-0.488 2.474-1.026 3.552-1.653l-0.104 0.056c1.138-0.744 2.128-1.568 3.013-2.493l0.006-0.006c2.011-2.12 3.264-4.432 3.987-7.341l0.28-1.123 15.869-0.053v-2.555h-15.613l-0.064-0.317c-0.041-0.24-0.064-0.517-0.064-0.8 0-0.009 0-0.017 0-0.026v0.001c0-1.613-0.709-4.248-1.661-6.168-1.366-2.619-3.317-4.766-5.689-6.324l-0.063-0.039c-0.975-0.572-2.112-1.11-3.298-1.546l-0.15-0.048c-1.789-0.592-4.123-0.877-5.803-0.715zM32.557 2.912c5.315 1.128 9.392 5.459 10.293 10.931 0.155 0.933 0.155 3.379 0 4.309-0.654 3.884-2.877 7.151-5.983 9.181l-0.052 0.032c-4.117 2.645-9.627 2.605-13.739-0.101-4.149-2.733-6.389-7.357-5.995-12.371 0.483-6.133 4.989-11.109 10.939-12.085 1.109-0.181 3.445-0.128 4.536 0.104z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -57,3 +57,5 @@ export { FolderAlertIcon } from './FolderAlertIcon';
 export { RelationIcon } from './RelationIcon';
 export { RelationPointsIcon } from './RelationPointsIcon';
 export { PassportIcon } from './PassportIcon';
+export { PointIcon } from './PointIcon';
+export { PencilIcon } from './PencilIcon';

package/src/Core/Tooltip/Tooltip.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useState } from 'react';
+import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { pxToRem } from '../../Theme';
+import { styled } from 'styled-components';
+
+interface TooltipProps {
+  className?: string;
+  children?: any;
+  content?: any;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+  anchorClassName?: string;
+  offset?: number;
+}
+
+export const Tooltip = ({
+  className,
+  positions = ['top'],
+  align = 'center',
+  anchorClassName,
+  content,
+  offset = 6,
+  children,
+}: TooltipProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const position = Array.isArray(positions) ? positions[0] : positions;
+
+  const handleMouseEnter = useCallback(() => {
+    if (content) setIsOpen(true);
+  }, [content]);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <Popover
+      padding={offset}
+      positions={positions}
+      isOpen={isOpen}
+      align={align}
+      content={
+        !!content && (
+          <StyledContent className={className} $position={position} $offset={offset}>
+            {content}
+          </StyledContent>
+        )
+      }
+      containerStyle={{
+        zIndex: `${9999}`,
+      }}
+    >
+      <StyledAnchor onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={anchorClassName}>
+        {children}
+      </StyledAnchor>
+    </Popover>
+  );
+};
+const StyledAnchor = styled.div`
+  display: inline-block;
+`;
+
+const StyledContent = styled.div<{ $position: PopoverPosition; $offset: number }>(
+  ({ theme, $position, $offset }) => `
+  padding: ${theme.tooltip.padding};
+  max-width: ${theme.tooltip.maxWidth};
+  border-radius: ${theme.tooltip.borderRadius};
+  background: ${theme.tooltip.background};
+  box-shadow: ${theme.tooltip.shadow};
+
+  color: ${theme.tooltip.color};
+  font-size: ${theme.tooltip.fontSize};
+  line-height: 1.4;
+  word-break: break-word;
+  white-space: pre-line;
+  animation: fadeIn-${$position} 0.3s ease forwards;
+  transform-origin: ${
+    $position === 'top' ? 'bottom' : $position === 'bottom' ? 'top' : $position === 'left' ? 'right' : 'left'
+  };
+
+  @keyframes fadeIn-top {
+    from { opacity: 0.5; transform: translateY(${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeIn-bottom {
+    from { opacity: 0.5; transform: translateY(-${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeIn-left {
+    from { opacity: 0.5; transform: translateX(${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes fadeIn-right {
+    from { opacity: 0.5; transform: translateX(-${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+`
+);

package/src/Core/Tooltip/index.ts

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

package/src/Core/index.ts

@@ -21,3 +21,4 @@ export * from './Checkbox';
 export * from './LinerProgress';
 export * from './Switch';
 export * from './Drawer';
+export * from './Tooltip';

package/src/Theme/themes/dark.ts

@@ -28,6 +28,8 @@ export const darkThemePx: Theme = {
       light: '#99989C',
       lighter: '#535353',
       invert: '#101010',
+      success: '#31B083',
+      error: '#C93939',
     },
     stroke: {
       main: '#34404C',
@@ -965,6 +967,15 @@ export const darkThemePx: Theme = {
     width: 573,
     shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
   },
+  tooltip: {
+    fontSize: 14,
+    padding: 10,
+    borderRadius: 6,
+    maxWidth: 240,
+    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
+    color: '#99989C',
+    background: '#1E2226',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -27,6 +27,8 @@ export const lightThemePx: Theme = {
       light: '#535353',
       lighter: '#99989C',
       invert: '#ffffff',
+      success: '#31B083',
+      error: '#C93939',
     },
     stroke: {
       main: '#C7C5C5',
@@ -964,6 +966,15 @@ export const lightThemePx: Theme = {
     width: 573,
     shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
   },
+  tooltip: {
+    fontSize: 14,
+    padding: 10,
+    borderRadius: 6,
+    maxWidth: 240,
+    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
+    color: '#535353',
+    background: '#EBEBEB',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -105,6 +105,8 @@ export type Theme = {
       light: string;
       lighter: string;
       invert: string;
+      success: string;
+      error: string;
     };
     stroke: {
       main: string;
@@ -308,6 +310,15 @@ export type Theme = {
     width: number;
     shadow: string;
   };
+  tooltip: {
+    fontSize: string | number;
+    padding: string | number;
+    maxWidth: string | number;
+    borderRadius: string | number;
+    shadow: string;
+    color: string;
+    background: string;
+  };
 };
 
 //TODO check and refactoring