@cyber-harbour/ui 1.0.65 → 1.0.67

package/package.json

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

package/src/Core/IconComponents/FolderInfoIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface FolderInfoIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const FolderInfoIcon = ({ fill = 'currentColor', ...props }: FolderInfoIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14.9123 2.84018H9.23227C8.97227 2.06018 8.61227 1.54018 7.73227 1.47018C7.39227 1.49018 7.07227 1.49018 6.73227 1.49018C6.20227 1.49018 5.66227 1.49018 5.12227 1.46018C4.59227 1.44018 4.04227 1.43018 3.52227 1.43018C3.09227 1.43018 2.66227 1.43018 2.24227 1.47018C1.20227 1.54018 0.452274 2.29018 0.372274 3.33018C0.392274 4.72018 0.372274 6.10018 0.372274 7.49018C0.372274 9.65018 0.352274 11.9002 0.422274 14.1202C0.652274 14.9902 1.31227 15.5102 2.23227 15.5702H13.2723C14.9923 15.4602 16.2623 14.2002 16.3623 12.4802V4.39018C16.3023 3.56018 15.7323 2.96018 14.9023 2.84018H14.9123ZM15.3523 5.32018H10.1723L9.61227 3.86018H14.9323C15.0423 3.86018 15.3423 4.17018 15.3423 4.27018V5.32018H15.3523ZM2.00227 12.0402L1.42227 13.9602C1.42227 13.9602 1.40227 13.8502 1.39227 13.8102V3.30018C1.41227 2.89018 1.75227 2.53018 2.16227 2.47018H7.73227C7.90227 2.47018 8.03227 2.57018 8.14227 2.78018C8.35227 3.16018 8.51227 3.64018 8.65227 4.10018C8.79227 4.52018 8.93227 4.97018 9.10227 5.32018H5.47227C4.82227 5.32018 4.01227 5.85018 3.70227 6.51018C3.10227 8.35018 2.54227 10.1902 1.99227 12.0402H2.00227ZM15.3523 12.6702C15.3523 13.4802 14.2523 14.5702 13.4323 14.5702H2.26227L4.58227 6.98018C4.68227 6.70018 5.15227 6.33018 5.40227 6.33018H15.3523V12.6702Z"
+        fill={fill}
+      />
+      <path
+        d="M7.85237 12.4204C6.54237 11.1004 6.94236 8.6304 8.69236 7.9004C10.9824 6.9504 13.2024 9.0304 12.4224 11.3804C11.7924 13.2804 9.24237 13.8204 7.85237 12.4204ZM9.68237 8.4704C8.23237 8.5704 7.33237 10.2504 8.17237 11.5004C9.01237 12.7504 10.7724 12.7404 11.5324 11.4204C12.2924 10.1004 11.1824 8.3704 9.68237 8.4704Z"
+        fill={fill}
+      />
+      <path
+        d="M9.7724 8.93011C10.0324 8.90011 10.1924 9.11011 10.2224 9.35011C10.2424 9.55011 10.2524 10.2001 10.2224 10.3801C10.1424 10.7501 9.5824 10.8001 9.4524 10.4401C9.3824 10.2601 9.3824 9.39011 9.4524 9.20011C9.5024 9.07011 9.6424 8.95011 9.7824 8.93011H9.7724Z"
+        fill={fill}
+      />
+      <path
+        d="M9.71242 10.9701C10.3924 10.8301 10.3424 11.9101 9.65242 11.7001C9.36242 11.6101 9.36242 11.0401 9.71242 10.9701Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/RotateLeftIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface RotateLeftIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const RotateLeftIcon = ({ fill = 'currentColor', ...props }: RotateLeftIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.37229 15.6666C4.90562 15.6666 2.09229 12.8466 2.09229 9.38659C2.09229 8.13993 2.45895 6.93326 3.15229 5.89326C3.30562 5.66659 3.61895 5.59993 3.84562 5.75326C4.07229 5.9066 4.13895 6.21993 3.98562 6.44659C3.40562 7.31326 3.09895 8.33326 3.09895 9.37993C3.09895 12.2933 5.46562 14.6599 8.37895 14.6599C11.2923 14.6599 13.659 12.2933 13.659 9.37993C13.659 6.46659 11.2856 4.09993 8.37229 4.09993C7.75895 4.09993 7.15895 4.18659 6.59229 4.35993C6.32562 4.43993 6.04562 4.29326 5.96562 4.02659C5.88562 3.75993 6.03229 3.47993 6.29895 3.39993C6.96562 3.19993 7.65895 3.09326 8.37229 3.09326C11.839 3.09326 14.6523 5.91326 14.6523 9.37326C14.6523 12.8333 11.839 15.6666 8.37229 15.6666Z"
+        fill={fill}
+      />
+      <path
+        d="M5.61881 4.54658C5.50548 4.54658 5.38548 4.50658 5.29215 4.42658C5.07881 4.23992 5.05881 3.92658 5.23881 3.71992L7.16548 1.50658C7.34548 1.29992 7.66548 1.27325 7.87215 1.45992C8.07881 1.63992 8.09881 1.95992 7.91881 2.16658L5.99215 4.37325C5.89215 4.48658 5.75215 4.54658 5.61881 4.54658Z"
+        fill={fill}
+      />
+      <path
+        d="M7.86545 6.18659C7.76545 6.18659 7.65879 6.15325 7.57212 6.09325L5.31879 4.44659C5.09879 4.28659 5.05212 3.97325 5.21212 3.75325C5.37212 3.52659 5.68545 3.47992 5.91212 3.63992L8.15879 5.27992C8.37879 5.43992 8.43212 5.75325 8.26545 5.97992C8.17212 6.11992 8.01879 6.18659 7.86545 6.18659Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/RotateRightIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface RotateRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const RotateRightIcon = ({ fill = 'currentColor', ...props }: RotateRightIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.37228 15.6668C4.90562 15.6668 2.09229 12.8468 2.09229 9.38676C2.09229 5.92676 4.90562 3.1001 8.37228 3.1001C9.08562 3.1001 9.77895 3.2001 10.4456 3.40676C10.7123 3.48676 10.859 3.76676 10.779 4.03343C10.699 4.3001 10.419 4.44676 10.1523 4.36676C9.58562 4.19343 8.98562 4.1001 8.37228 4.1001C5.45895 4.1001 3.09229 6.46676 3.09229 9.3801C3.09229 12.2934 5.45895 14.6601 8.37228 14.6601C11.2856 14.6601 13.6523 12.2934 13.6523 9.3801C13.6523 8.32676 13.3456 7.31343 12.7656 6.44676C12.6123 6.2201 12.6723 5.90676 12.9056 5.75343C13.1323 5.6001 13.4456 5.6601 13.599 5.89343C14.2923 6.92676 14.659 8.13343 14.659 9.38676C14.6523 12.8468 11.839 15.6668 8.37228 15.6668Z"
+        fill={fill}
+      />
+      <path
+        d="M11.1252 4.54664C10.9852 4.54664 10.8452 4.48664 10.7452 4.37331L8.81854 2.15998C8.63854 1.95331 8.65854 1.63331 8.86521 1.45331C9.07188 1.27331 9.39188 1.29331 9.57188 1.49998L11.4985 3.71331C11.6785 3.91998 11.6585 4.23998 11.4519 4.41998C11.3652 4.50664 11.2452 4.54664 11.1252 4.54664Z"
+        fill={fill}
+      />
+      <path
+        d="M8.87904 6.18696C8.72571 6.18696 8.57237 6.11363 8.47237 5.9803C8.31237 5.7603 8.35904 5.44696 8.57904 5.2803L10.8257 3.6403C11.0457 3.47363 11.359 3.52696 11.5257 3.74696C11.6924 3.96696 11.639 4.2803 11.419 4.44696L9.17237 6.09363C9.08571 6.1603 8.98571 6.18696 8.87904 6.18696Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -61,3 +61,6 @@ export { PointIcon } from './PointIcon';
 export { PencilIcon } from './PencilIcon';
 export { UserInCircleIcon } from './UserInCircle';
 export { FlashIcon } from './FlashIcon';
+export { FolderInfoIcon } from './FolderInfoIcon';
+export { RotateLeftIcon } from './RotateLeftIcon';
+export { RotateRightIcon } from './RotateRightIcon';

package/src/Core/Overlay/Overlay.tsx

@@ -0,0 +1,92 @@
+import { createPortal } from 'react-dom';
+import { styled } from 'styled-components';
+import { useBodyScrollLock } from '../../utils';
+import { createComponent, createStyledComponent, generatePropertySpaceStyle, StyledFabricComponent } from '../../Theme';
+
+type Position = 'start' | 'center' | 'end';
+
+export type OverlayProps = {
+  children: any;
+  onOutsideClick?: () => void;
+  append?: any;
+  appendPosition?: Position;
+  prepend?: any;
+  prependPosition?: Position;
+};
+
+export const Overlay = createComponent<OverlayProps>(
+  ({ children, onOutsideClick, prepend, append, prependPosition, appendPosition, ...props }) => {
+    useBodyScrollLock(true);
+    return createPortal(
+      <Container
+        {...props}
+        onClick={(e) => {
+          if (e.target === e.currentTarget && onOutsideClick) {
+            onOutsideClick();
+          }
+        }}
+      >
+        {!!prepend && <PrependWrapper $position={prependPosition}>{prepend}</PrependWrapper>}
+        <StyledWrapper>{children}</StyledWrapper>
+        {!!append && <AppendWrapper $position={appendPosition}>{append}</AppendWrapper>}
+      </Container>,
+      document.body
+    );
+  }
+);
+
+const PrependWrapper = styled.div<{ $position?: Position }>(
+  ({ theme, $position = 'end' }) => `
+  position: absolute;
+  top: ${theme.overlay.gap};
+  z-index: ${theme.zIndex.backdrop};
+  ${
+    $position === 'end'
+      ? `right: ${theme.overlay.gap};`
+      : $position === 'start'
+      ? `left: ${theme.overlay.gap};`
+      : 'left: 50%; transform: translateX(-50%);'
+  }
+`
+);
+
+const AppendWrapper = styled.div<{ $position?: Position }>(
+  ({ theme, $position = 'center' }) => `
+  position: absolute;
+  bottom: ${theme.overlay.gap};
+  z-index: ${theme.zIndex.backdrop};
+  ${
+    $position === 'end'
+      ? `right: ${theme.overlay.gap};`
+      : $position === 'start'
+      ? `left: ${theme.overlay.gap};`
+      : 'left: 50%; transform: translateX(-50%);'
+  }
+`
+);
+
+const StyledWrapper = styled.div`
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+`;
+
+const Container = createStyledComponent(
+  styled.div<StyledFabricComponent>(
+    ({ theme, py = theme.overlay.paddingBlock }) => `
+    position: fixed;
+     ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${theme.overlay.background};
+    z-index: ${theme.zIndex.backdrop};
+    
+`
+  )
+);

package/src/Core/Overlay/index.ts

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

package/src/Core/index.ts

@@ -23,3 +23,4 @@ export * from './Switch';
 export * from './Drawer';
 export * from './Tooltip';
 export * from './ContentLoader';
+export * from './Overlay';

package/src/Theme/themes/dark.ts

@@ -985,6 +985,11 @@ export const darkThemePx: Theme = {
     height: 26,
     iconSize: 8,
   },
+  overlay: {
+    paddingBlock: 40,
+    gap: 6,
+    background: 'rgba(0, 0, 0, 0.5)',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -984,6 +984,11 @@ export const lightThemePx: Theme = {
     height: 26,
     iconSize: 8,
   },
+  overlay: {
+    paddingBlock: 40,
+    gap: 6,
+    background: 'rgba(16, 16, 16, 0.1)',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -328,6 +328,11 @@ export type Theme = {
     height: string | number;
     iconSize: string | number;
   };
+  overlay: {
+    paddingBlock: string | number;
+    background: string;
+    gap: string | number;
+  };
 };
 
 //TODO check and refactoring