@cyber-harbour/ui 1.0.59 → 1.0.61

package/package.json

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

package/src/Core/Alert/Alert.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, generatePropertySpaceStyle } from '../../Theme';
+import {
+  FabricComponent,
+  StyledFabricComponent,
+  createComponent,
+  createStyledComponent,
+  generatePropertySpaceStyle,
+} from '../../Theme';
 import { AlertIcon } from '../IconComponents';
 
 type AlertProps = FabricComponent<{
@@ -9,7 +15,7 @@ type AlertProps = FabricComponent<{
 }> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-export const Alert = ({ title, note, ...props }: AlertProps) => {
+export const Alert = createComponent<AlertProps>(({ title, note, ...props }) => {
   return (
     <StyledContainer {...props}>
       <IconWrapper>
@@ -21,7 +27,7 @@ export const Alert = ({ title, note, ...props }: AlertProps) => {
       </div>
     </StyledContainer>
   );
-};
+});
 
 const IconWrapper = styled.div(
   ({ theme: { alert } }) => `
@@ -60,8 +66,8 @@ const Note = styled.p(
 `
 );
 
-const StyledContainer = createComponent(
-  styled.div<FabricComponent>(
+const StyledContainer = createStyledComponent(
+  styled.div<StyledFabricComponent>(
     ({ theme, py = theme.alert.paddingBlock, pl = theme.alert.paddingLeft, pr = theme.alert.paddingRight }) => {
       return `
     display: flex;

package/src/Core/Box/Box.tsx

@@ -1,33 +1,35 @@
 import {
   ColorVariant,
   createComponent,
+  createStyledComponent,
   FabricComponent,
   generatePropertySpaceStyle,
   resolveThemeColor,
+  StyledFabricComponent,
 } from '../../Theme';
 import { styled } from 'styled-components';
 
-type BoxProps = FabricComponent<
-  {
-    children: any;
-    element?: 'div' | 'section';
-    hasBorder?: boolean;
-    color?: ColorVariant | string;
-  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
->;
+type BoxProps = {
+  children?: any;
+  element?: 'div' | 'section';
+  hasBorder?: boolean;
+  color?: ColorVariant | string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const Box = ({ children, element = 'div', hasBorder = true, color, ...props }: BoxProps) => {
-  return (
-    <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
-      {children}
-    </StyledBox>
-  );
-};
+export const Box = createComponent<BoxProps>(
+  ({ children, element = 'div', hasBorder = true, color, ...props }): any => {
+    return (
+      <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
+        {children}
+      </StyledBox>
+    );
+  }
+);
 
 type StyledProps = { $hasBorder: boolean; $color?: string };
 
-const StyledBox = createComponent(
-  styled('div')<FabricComponent<StyledProps>>(
+const StyledBox = createStyledComponent(
+  styled('div')<StyledFabricComponent<StyledProps>>(
     ({ theme, $hasBorder, $color, px = theme.box.padding, py = theme.box.padding }) => `
       ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
       ${generatePropertySpaceStyle(theme, 'padding-block', py)}

package/src/Core/Button/Button.tsx

@@ -8,11 +8,12 @@ import {
   getButtonSizeStyles,
   ButtonElementStyle,
   createComponent,
-  FabricComponent,
   generatePropertySpaceStyle,
+  createStyledComponent,
+  StyledFabricComponent,
 } from '../../Theme';
 
-type BaseButtonProps = FabricComponent<{
+type BaseButtonProps = {
   children?: any;
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -23,11 +24,10 @@ type BaseButtonProps = FabricComponent<{
   icon?: any;
   iconPosition?: 'left' | 'right';
   iconVariant?: 'filled' | 'empty';
-}>;
-
+};
 export type ButtonProps = (
-  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
-  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>
+  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'>
+  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'media'>
 ) &
   BaseButtonProps;
 
@@ -70,21 +70,22 @@ type StyledButtonProps = {
   $iconVariant: 'filled' | 'empty';
 };
 
-const Btn = styled.button<FabricComponent<StyledButtonProps>>(
-  ({
-    $variant,
-    $color,
-    $size,
-    $disabled,
-    $fullWidth,
-    $iconPosition,
-    $iconVariant,
-    theme,
-    px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
-    py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
-  }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
+const StyledButton = createStyledComponent(
+  styled.button<StyledFabricComponent<StyledButtonProps>>(
+    ({
+      $variant,
+      $color,
+      $size,
+      $disabled,
+      $fullWidth,
+      $iconPosition,
+      $iconVariant,
+      theme,
+      px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
+      py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
+    }) => {
+      const sizes = getButtonSizeStyles(theme, $size);
+      return `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
@@ -155,39 +156,42 @@ const Btn = styled.button<FabricComponent<StyledButtonProps>>(
             : ``
         }
     `;
+    }
+  )
+);
+
+export const Button = createComponent<ButtonProps>(
+  ({
+    children,
+    variant = 'fill',
+    color = 'primary',
+    size = 'medium',
+    disabled = false,
+    fullWidth = false,
+    className,
+    icon,
+    iconPosition = 'left',
+    iconVariant = 'empty',
+    ...props
+  }) => {
+    return (
+      // @ts-ignore
+      <StyledButton
+        as={'href' in props ? 'a' : 'button'}
+        $variant={variant}
+        $color={color}
+        $size={size}
+        $disabled={disabled}
+        $fullWidth={fullWidth}
+        $iconPosition={iconPosition}
+        $iconVariant={iconVariant}
+        disabled={disabled}
+        className={className}
+        {...props}
+      >
+        {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+        {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
+      </StyledButton>
+    );
   }
 );
-const StyledButton = createComponent(Btn);
-
-export const Button = ({
-  children,
-  variant = 'fill',
-  color = 'primary',
-  size = 'medium',
-  disabled = false,
-  fullWidth = false,
-  className,
-  icon,
-  iconPosition = 'left',
-  iconVariant = 'empty',
-  ...props
-}: ButtonProps) => {
-  return (
-    <StyledButton
-      as={'href' in props ? 'a' : 'button'}
-      $variant={variant}
-      $color={color}
-      $size={size}
-      $disabled={disabled}
-      $fullWidth={fullWidth}
-      $iconPosition={iconPosition}
-      $iconVariant={iconVariant}
-      disabled={disabled}
-      className={className}
-      {...props}
-    >
-      {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
-      {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
-    </StyledButton>
-  );
-};

package/src/Core/Checkbox/Checkbox.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, destructSpaceProps, pxToRem } from '../../Theme';
 
-type CheckboxProps = FabricComponent<{
+type CheckboxProps = {
   label?: any;
-}> &
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
-export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+export const Checkbox = createComponent<CheckboxProps>(({ label, className, disabled, ...props }) => {
   const spaceProps = destructSpaceProps(props);
   return (
     <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
@@ -16,7 +15,7 @@ export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps
       {!!label && <LabelText>{label}</LabelText>}
     </StyledCheckbox>
   );
-};
+});
 
 const CustomCheckbox = styled.div(
   ({ theme }) => `
@@ -48,7 +47,7 @@ const HiddenInput = styled.input`
   position: absolute;
 `;
 
-const StyledCheckbox = createComponent(
+const StyledCheckbox = createStyledComponent(
   styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
     return `
     position: relative;

package/src/Core/ContentLoader/ContentLoader.tsx

@@ -0,0 +1,13 @@
+import ReactContentLoader, { IContentLoaderProps } from 'react-content-loader';
+import { useTheme } from 'styled-components';
+
+export interface ContentLoaderProps extends Omit<IContentLoaderProps, 'backgroundColor' | 'foregroundColor'> {
+  children?: any;
+}
+
+export const ContentLoader = (props: ContentLoaderProps) => {
+  const {
+    contentLoader: { foreground, background },
+  } = useTheme();
+  return <ReactContentLoader {...props} backgroundColor={background} foregroundColor={foreground} />;
+};

package/src/Core/ContentLoader/index.ts

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

package/src/Core/Drawer/Drawer.tsx

@@ -1,6 +1,14 @@
 import { createPortal } from 'react-dom';
 import { styled } from 'styled-components';
-import { createComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
+import {
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  propToRem,
+  pxToRem,
+  StyledFabricComponent,
+} from '../../Theme';
 import { useBodyScrollLock } from '../../utils';
 import { useEffect, useRef } from 'react';
 
@@ -12,12 +20,12 @@ type DrawerProps = {
   width?: string | number;
 };
 
-export const Drawer = (props: DrawerProps) => {
+export const Drawer = createComponent<DrawerProps>((props) => {
   useBodyScrollLock(props.isOpen);
 
   if (!props.isOpen) return null;
   return createPortal(<DrawerWithOutclick {...props} />, document.body);
-};
+});
 
 const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -45,8 +53,8 @@ type DrawerHeaderProps = FabricComponent<{
   children?: any;
 }>;
 
-export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
-  styled.div<DrawerHeaderProps>(
+export const DrawerHeader: any = createStyledComponent<DrawerHeaderProps>(
+  styled.div(
     ({ theme, p = theme.drawer.padding }) => `
     grid-area: drawer-header;
     ${generatePropertySpaceStyle(theme, 'padding', p)};
@@ -57,26 +65,33 @@ export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
   }
 );
 
-type DrawerBodyProps = FabricComponent<{
+type DrawerBodyProps = StyledFabricComponent<{
   children?: any;
 }>;
 
-export const DrawerBody: any = createComponent(
-  styled.div<DrawerBodyProps>(
-    ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
+export const DrawerBody: any = createComponent<DrawerBodyProps>(
+  createStyledComponent<DrawerBodyProps>(
+    styled.div(
+      ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
   grid-area: drawer-body;
   max-height: 100%;
   overflow-y: auto;
   ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
   ${generatePropertySpaceStyle(theme, 'padding-bottom', pb)};
 `
-  ),
-  {
-    ignoreStyles: ['padding', 'padding-bottom'],
-  }
+    ),
+    {
+      ignoreStyles: ['padding', 'padding-bottom'],
+    }
+  )
 );
 
-const StyledDrawer = styled.div<{ $header?: number; $width?: string | number }>(
+type StyledDrawerProps = {
+  $header?: number;
+  $width?: string | number;
+};
+
+const StyledDrawer = styled.div<StyledDrawerProps>(
   ({ theme, $header, $width }) => `
   position: fixed;
   display: grid;

package/src/Core/Flex/FlexContainer.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, forwardRef } from 'react';
-import { createComponent, FabricComponent } from '../../Theme';
+import { createComponent, createStyledComponent, FabricComponent, StyledFabricComponent } from '../../Theme';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -23,46 +23,50 @@ export interface FlexContainerProps extends FabricComponent<Omit<React.HTMLAttri
   as?: any; // TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexContainer: any = forwardRef<HTMLElement, FlexContainerProps>(function FlexContainer(
-  {
-    children,
-    direction = 'row',
-    wrap = 'nowrap',
-    justify = 'flex-start',
-    align = 'stretch',
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    className,
-    style,
-    as = 'div',
-    ...props
-  },
-  ref
-) {
-  return (
-    <StyledFlexContainer
-      as={as}
-      $direction={direction}
-      $wrap={wrap}
-      $justify={justify}
-      $align={align}
-      $alignContent={alignContent}
-      $gap={gap}
-      $rowGap={rowGap}
-      $columnGap={columnGap}
-      className={className}
-      style={style}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </StyledFlexContainer>
-  );
-});
+export const FlexContainer = createComponent<FlexContainerProps, HTMLDivElement>(
+  forwardRef<HTMLDivElement, FlexContainerProps>(
+    (
+      {
+        children,
+        direction = 'row',
+        wrap = 'nowrap',
+        justify = 'flex-start',
+        align = 'stretch',
+        alignContent,
+        gap,
+        rowGap,
+        columnGap,
+        className,
+        style,
+        as = 'div',
+        ...props
+      },
+      ref
+    ) => {
+      return (
+        <StyledContainer
+          as={as}
+          $direction={direction}
+          $wrap={wrap}
+          $justify={justify}
+          $align={align}
+          $alignContent={alignContent}
+          $gap={gap}
+          $rowGap={rowGap}
+          $columnGap={columnGap}
+          className={className}
+          style={style}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </StyledContainer>
+      );
+    }
+  )
+);
 
-interface StyledFlexContainerProps {
+type StyledFlexContainerProps = StyledFabricComponent<{
   $direction: FlexDirection;
   $wrap: FlexWrap;
   $justify: FlexJustify;
@@ -71,9 +75,9 @@ interface StyledFlexContainerProps {
   $gap?: FlexGap;
   $rowGap?: FlexGap;
   $columnGap?: FlexGap;
-}
+}>;
 
-const StyledContainer = styled.div<StyledFlexContainerProps>`
+const StyledContainer = createStyledComponent<StyledFlexContainerProps>(styled.div`
   ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
     display: flex;
     width: 100%;
@@ -87,6 +91,4 @@ const StyledContainer = styled.div<StyledFlexContainerProps>`
     ${$rowGap !== undefined ? `row-gap: ${typeof $rowGap === 'number' ? `${$rowGap}px` : $rowGap};` : ''}
     ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
   `}
-`;
-
-const StyledFlexContainer = createComponent(StyledContainer);
+`);

package/src/Core/Flex/FlexItem.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { styled } from 'styled-components';
+import { createComponent } from '../../Theme';
 
 export type FlexItemGrow = number;
 export type FlexItemShrink = number;
@@ -18,32 +19,24 @@ export interface FlexItemProps {
   as?: any; //TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexItem = ({
-  children,
-  grow,
-  shrink,
-  basis,
-  align,
-  order,
-  className,
-  style,
-  as = 'div',
-}: FlexItemProps) => {
-  return (
-    <StyledFlexItem
-      as={as}
-      $grow={grow}
-      $shrink={shrink}
-      $basis={basis}
-      $align={align}
-      $order={order}
-      className={className}
-      style={style}
-    >
-      {children}
-    </StyledFlexItem>
-  );
-};
+export const FlexItem = createComponent<FlexItemProps>(
+  ({ children, grow, shrink, basis, align, order, className, style, as = 'div' }) => {
+    return (
+      <StyledFlexItem
+        as={as}
+        $grow={grow}
+        $shrink={shrink}
+        $basis={basis}
+        $align={align}
+        $order={order}
+        className={className}
+        style={style}
+      >
+        {children}
+      </StyledFlexItem>
+    );
+  }
+);
 
 interface StyledFlexItemProps {
   $grow?: FlexItemGrow;

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';