@cyber-harbour/ui 1.0.66 → 1.0.67

package/package.json

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

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

@@ -62,3 +62,5 @@ 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