@cyber-harbour/ui 1.0.47 → 1.0.49

package/package.json

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

package/src/Core/Alert/Alert.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, createComponent, generatePropertySpaceStyle } from '../../Theme';
+import { AlertIcon } from '../IconComponents';
+
+type AlertProps = FabricComponent<{
+  title?: any;
+  note?: any;
+}> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+
+export const Alert = ({ title, note, ...props }: AlertProps) => {
+  return (
+    <StyledContainer {...props}>
+      <IconWrapper>
+        <AlertIcon />
+      </IconWrapper>
+      <div>
+        {!!title && <Title>{title}</Title>}
+        {!!note && <Note>{note}</Note>}
+      </div>
+    </StyledContainer>
+  );
+};
+
+const IconWrapper = styled.div(
+  ({ theme: { alert } }) => `
+  flex-shrink: 0;
+  color: ${alert.color.icon};
+  padding-top: ${alert.icon.paddingTop};
+  svg {
+    width: ${alert.icon.width};
+    height: ${alert.icon.height};
+    display: block;
+  }
+`
+);
+
+const Title = styled.h3(
+  ({ theme: { alert } }) => `
+  margin: 0;
+  padding: 0;
+  font-size:  ${alert.fontSize};
+  line-height: 1.2;
+  font-weight: 700;
+  color: ${alert.color.text};
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+`
+);
+const Note = styled.p(
+  ({ theme: { alert } }) => `
+  margin: 0;
+  padding: 0;
+  word-break: break-word;
+  font-size:  ${alert.fontSize};
+  color: ${alert.color.text};
+  line-height: 1.5;
+`
+);
+
+const StyledContainer = createComponent(
+  styled.div<FabricComponent>(
+    ({ theme, py = theme.alert.paddingBlock, pl = theme.alert.paddingLeft, pr = theme.alert.paddingRight }) => {
+      return `
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: ${theme.alert.gap};
+    background-color: ${theme.alert.color.background};
+    border-radius: ${theme.alert.borderRadius};
+    ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+    ${generatePropertySpaceStyle(theme, 'padding-right', pr)};
+    ${generatePropertySpaceStyle(theme, 'padding-left', pl)};
+  `;
+    }
+  ),
+  { ignoreStyles: ['padding-block', 'padding-right', 'padding-left'] }
+);

package/src/Core/Alert/index.ts

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

package/src/Core/Box/Box.tsx

@@ -1,4 +1,4 @@
-import { createComponent, FabricComponent } from '../../Theme';
+import { createComponent, FabricComponent, generatePropertySpaceStyle } from '../../Theme';
 import { styled } from 'styled-components';
 
 type BoxProps = FabricComponent<
@@ -11,13 +11,19 @@ export const Box = ({ children, ...props }: BoxProps) => {
   return <StyledBox {...props}>{children}</StyledBox>;
 };
 
-const StyledBox = styled(createComponent('div'))(
-  ({ theme }) => `
-      padding: ${theme.box.padding};
+const StyledBox = createComponent(
+  styled('div')<FabricComponent>(
+    ({ theme, px = theme.box.padding, py = theme.box.padding }) => `
+      ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
+      ${generatePropertySpaceStyle(theme, 'padding-block', py)}
       border-radius: ${theme.box.borderRadius};
       background-color: ${theme.box.background};
       border-width: ${theme.box.border.width};
       border-style: ${theme.box.border.style};
       border-color: ${theme.box.border.color};
   `
+  ),
+  {
+    ignoreStyles: ['padding-inline', 'padding-block'],
+  }
 );

package/src/Core/Button/Button.tsx

@@ -9,6 +9,7 @@ import {
   ButtonElementStyle,
   createComponent,
   FabricComponent,
+  generatePropertySpaceStyle,
 } from '../../Theme';
 
 type BaseButtonProps = FabricComponent<{
@@ -59,7 +60,7 @@ const StyledIconWrapper = styled.span`
   justify-content: center;
 `;
 
-const StyledButton = styled(createComponent('button'))<{
+type StyledButtonProps = {
   $variant: ButtonVariant;
   $color: ButtonColor;
   $size: ButtonSize;
@@ -67,21 +68,28 @@ const StyledButton = styled(createComponent('button'))<{
   $fullWidth: boolean;
   $iconPosition: 'left' | 'right';
   $iconVariant: 'filled' | 'empty';
-}>`
-  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, $iconVariant, theme, ...props }) => {
+};
+
+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 `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
-      ${
-        $variant !== 'empty'
-          ? `
-            ${!props.py ? `padding-block: ${sizes.paddingBlock};` : ''}
-            ${!props.px ? `padding-inline: ${sizes.paddingInline};` : ''}
-          `
-          : ''
-      }
+      ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+      ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
       border-radius: ${sizes.borderRadius};
       border-width: ${sizes.borderWidth};
       border-style: solid;
@@ -147,8 +155,9 @@ const StyledButton = styled(createComponent('button'))<{
             : ``
         }
     `;
-  }}
-`;
+  }
+);
+const StyledButton = createComponent(Btn);
 
 export const Button = ({
   children,

package/src/Core/Flex/FlexContainer.tsx

@@ -1,4 +1,5 @@
 import { CSSProperties, forwardRef } from 'react';
+import { createComponent, FabricComponent } from '../../Theme';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -7,7 +8,7 @@ export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between'
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
 export type FlexGap = string | number;
 
-export interface FlexContainerProps {
+export interface FlexContainerProps extends FabricComponent<Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>> {
   children: any;
   direction?: FlexDirection;
   wrap?: FlexWrap;
@@ -70,7 +71,7 @@ interface StyledFlexContainerProps {
   $columnGap?: FlexGap;
 }
 
-const StyledFlexContainer = styled.div<StyledFlexContainerProps>`
+const StyledContainer = styled.div<StyledFlexContainerProps>`
   ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
     display: flex;
     width: 100%;
@@ -85,3 +86,5 @@ const StyledFlexContainer = styled.div<StyledFlexContainerProps>`
     ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
   `}
 `;
+
+const StyledFlexContainer = createComponent(StyledContainer);

package/src/Core/IconComponents/AlertIcon.tsx

@@ -6,7 +6,7 @@ interface AlertIconProps extends SVGProps<SVGSVGElement> {
 
 export const AlertIcon = ({ fill = 'currentColor', ...props }: AlertIconProps) => {
   return (
-    <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/Core/Line/Line.tsx

@@ -15,10 +15,12 @@ interface StyledLineProps {
   $direction: 'horizontal' | 'vertical';
 }
 
-const StyledLine = styled(createComponent('div'))<StyledLineProps>(
-  ({ theme, $direction }) => `
+const StyledLine = createComponent(
+  styled.div<StyledLineProps>(
+    ({ theme, $direction }) => `
     width: ${$direction === 'horizontal' ? '100%' : theme.line.size};
     height: ${$direction === 'vertical' ? '100%' : theme.line.size};
     background-color: ${theme.line.color};
 `
+  )
 );

package/src/Core/Tag/Tag.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  FabricComponent,
+  createComponent,
+  TagVariant,
+  TagColor,
+  hexToRgba,
+  generatePropertySpaceStyle,
+} from '../../Theme';
+import { CrossIcon } from '../IconComponents';
+
+type TagProps = FabricComponent<{
+  children?: any;
+  variant?: TagVariant;
+  color?: TagColor;
+  className?: string;
+  icon?: any;
+  disabled?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+}> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+
+export const Tag = ({
+  children,
+  variant = 'fill',
+  color = 'default',
+  className,
+  disabled,
+  icon,
+  onClick,
+  onDelete,
+  ...props
+}: TagProps) => {
+  return (
+    <StyledContainer
+      $variant={variant}
+      $color={color}
+      $clickable={!!onClick && !disabled}
+      onClick={!disabled ? onClick : undefined}
+      className={className}
+      {...props}
+    >
+      {!!children && <Content>{children}</Content>}
+      {!!onDelete && !disabled && (
+        <DeleteButton
+          aria-label="delete"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+        >
+          <CrossIcon />
+        </DeleteButton>
+      )}
+    </StyledContainer>
+  );
+};
+
+type StyledProps = {
+  $variant: TagVariant;
+  $color: TagColor;
+  $clickable: boolean;
+};
+
+const Content = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+
+  font-size: 14px;
+  line-height: 16px;
+`;
+
+const DeleteButton = styled.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: currentColor;
+  transition: color 0.2s ease;
+  svg {
+    width: 10px;
+    height: 10px;
+    fill: currentColor;
+  }
+`;
+
+const Container = styled.div<FabricComponent<StyledProps>>(
+  ({
+    theme,
+    $variant,
+    $color,
+    $clickable,
+    py = theme.tag[$variant].paddingBlock,
+    px = theme.tag[$variant].paddingInline,
+  }) => {
+    const color = theme.tag[$variant].color[$color] || $color;
+    return `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    border-width: ${theme.tag[$variant].borderWidth};
+    border-style: solid;
+    border-color: ${color};
+    border-radius: ${theme.tag[$variant].borderRadius};
+    background-color: ${$variant === 'outlined' ? theme.colors.background : hexToRgba(color, 0.05)};
+    color: ${color};
+
+    ${Content} {
+      ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+      ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
+      color: ${color};
+      ${
+        $clickable
+          ? `
+        cursor: pointer;
+        transition: color 0.2s ease;
+        &:hover {
+          color: ${hexToRgba(color, 0.7)};
+        }
+        `
+          : ''
+      }
+    }
+    ${DeleteButton} {
+      ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+      ${generatePropertySpaceStyle(theme, 'padding-right', px)};
+
+      &:hover {
+        color: ${hexToRgba(color, 0.7)};
+      }
+    }
+  `;
+  }
+);
+
+const StyledContainer = createComponent(Container, {
+  ignoreStyles: ['padding-block', 'padding-inline'],
+});

package/src/Core/Tag/index.ts

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

package/src/Core/Typography/Typography.tsx

@@ -13,26 +13,31 @@ type TypographyProps = FabricComponent<{
   color?: ColorVariant | string;
   className?: string;
   ellipsis?: boolean;
-}>;
+}> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-// Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = styled(createComponent('div'))<{
+type StyledProps = {
   $variant: TypographyVariant;
   $weight?: CSSProperties['fontWeight'];
   $style?: CSSProperties['fontStyle'];
   $color?: ColorVariant | string;
   $ellipsis?: boolean;
-}>(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
-  // Resolve color from theme if it's a theme color path, or use the direct color value
+};
+
+// Create a styled component that can be dynamically rendered as different HTML elements
+const StyledTypography = createComponent(
+  styled('div')<StyledProps>(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
+    // Resolve color from theme if it's a theme color path, or use the direct color value
 
-  return `
+    return `
       font-size: ${theme.typography.variants[$variant].fontSize};
       font-weight: ${$weight};
       font-style: ${$style};
       color: ${resolveThemeColor(theme, $color) || theme.colors.text.main};
       ${$ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
     `;
-});
+  })
+);
 
 export const Typography = ({
   variant = 'body',

package/src/Core/index.ts

@@ -14,3 +14,5 @@ export * from './Flex';
 export * from './Box';
 export * from './Line';
 export * from './EmptyData';
+export * from './Tag';
+export * from './Alert';

package/src/Layouts/Container/Container.tsx

@@ -1,4 +1,4 @@
-import { createComponent, FabricComponent, pxToRem } from '../../Theme';
+import { createComponent, FabricComponent, generatePropertySpaceStyle, pxToRem } from '../../Theme';
 import { styled } from 'styled-components';
 
 type ContainerProps = FabricComponent<{
@@ -14,11 +14,14 @@ export const Container = ({ maxWidth, ...props }: ContainerProps) => {
   return <StyledContainer {...props} $maxWidth={maxWidth} />;
 };
 
-const StyledContainer = styled(createComponent<StyledContainerProps>('div'))(({ theme, $maxWidth }) => {
-  return `
-    padding-inline: ${pxToRem(20, theme.baseSize)};
+const StyledContainer = createComponent(
+  styled.div<FabricComponent<StyledContainerProps>>(({ theme, $maxWidth, px = 20 }) => {
+    return `
+   ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
     width: 100%;
     min-width: 0;
     max-width: ${typeof $maxWidth === 'number' ? pxToRem($maxWidth, theme.baseSize) : $maxWidth || '100%'};
   `;
-});
+  }),
+  { ignoreStyles: ['padding-inline'] }
+);

package/src/Theme/componentFabric.ts

@@ -1,4 +1,5 @@
-import styled, { css, WebTarget } from 'styled-components';
+import styled, { css, IStyledComponent, DefaultTheme, WebTarget } from 'styled-components';
+import { pxToRem } from './utils';
 
 type MarginProps = {
   m?: string | number; // margin
@@ -19,52 +20,74 @@ type MarginProps = {
 
 export type FabricComponent<T = object> = T & MarginProps;
 
-const marginStyles = css<FabricComponent>((props) => {
-  return `
-      ${props.m ? `margin: ${typeof props.m === 'number' ? `${props.m}px` : props.m};` : ''}
-      ${props.mt ? `margin-top: ${typeof props.mt === 'number' ? `${props.mt}px` : props.mt};` : ''}
-      ${props.mr ? `margin-right: ${typeof props.mr === 'number' ? `${props.mr}px` : props.mr};` : ''}
-      ${props.mb ? `margin-bottom: ${typeof props.mb === 'number' ? `${props.mb}px` : props.mb};` : ''}
-      ${props.ml ? `margin-left: ${typeof props.ml === 'number' ? `${props.ml}px` : props.ml};` : ''}
-      ${
-        props.mx
-          ? `margin-left: ${typeof props.mx === 'number' ? `${props.mx}px` : props.mx}; margin-right: ${
-              typeof props.mx === 'number' ? `${props.mx}px` : props.mx
-            };`
-          : ''
-      }
-      ${
-        props.my
-          ? `margin-top: ${typeof props.my === 'number' ? `${props.my}px` : props.my}; margin-bottom: ${
-              typeof props.my === 'number' ? `${props.my}px` : props.my
-            };`
-          : ''
-      }
-      ${props.p ? `padding: ${typeof props.p === 'number' ? `${props.p}px` : props.p};` : ''}
-      ${props.pt ? `padding-top: ${typeof props.pt === 'number' ? `${props.pt}px` : props.pt};` : ''}
-      ${props.pr ? `padding-right: ${typeof props.pr === 'number' ? `${props.pr}px` : props.pr};` : ''}
-      ${props.pb ? `padding-bottom: ${typeof props.pb === 'number' ? `${props.pb}px` : props.pb};` : ''}
-      ${props.pl ? `padding-left: ${typeof props.pl === 'number' ? `${props.pl}px` : props.pl};` : ''}
-      ${
-        props.px
-          ? `padding-left: ${typeof props.px === 'number' ? `${props.px}px` : props.px}; padding-right: ${
-              typeof props.px === 'number' ? `${props.px}px` : props.px
-            };`
-          : ''
-      }
-      ${
-        props.py
-          ? `padding-top: ${typeof props.py === 'number' ? `${props.py}px` : props.py}; padding-bottom: ${
-              typeof props.py === 'number' ? `${props.py}px` : props.py
-            };`
-          : ''
-      }
+const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
+  css<FabricComponent>(({ theme, ...props }) => {
+    return `
+      ${generatePropertySpaceStyle(theme, 'margin', props.m, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-top', props.mt, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-right', props.mr, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-bottom', props.mb, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-left', props.ml, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-inline', props.mx, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'margin-block', props.my, ignoreStyles)}
+    `;
+  });
 
+const paddingStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
+  css<FabricComponent>(({ theme, ...props }) => {
+    return `
+      ${generatePropertySpaceStyle(theme, 'padding', props.p, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-top', props.pt, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-right', props.pr, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-bottom', props.pb, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-left', props.pl, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-inline', props.px, ignoreStyles)}
+      ${generatePropertySpaceStyle(theme, 'padding-block', props.py, ignoreStyles)}
     `;
-});
+  });
+
+type GeneratedFabricMarginProperties =
+  | 'margin'
+  | 'margin-top'
+  | 'margin-right'
+  | 'margin-bottom'
+  | 'margin-left'
+  | 'margin-inline'
+  | 'margin-block'
+  | 'padding'
+  | 'padding-top'
+  | 'padding-right'
+  | 'padding-bottom'
+  | 'padding-left'
+  | 'padding-inline'
+  | 'padding-block';
+
+export const generatePropertySpaceStyle = (
+  theme: DefaultTheme,
+  property: GeneratedFabricMarginProperties,
+  value?: string | number,
+  ignoredOptions?: GeneratedFabricMarginProperties[]
+) => {
+  if (ignoredOptions && ignoredOptions.includes(property)) {
+    return '';
+  }
+  if (value !== undefined) {
+    const t = typeof value === 'number';
+    return `${property}: ${typeof value === 'number' ? `${pxToRem(value, theme.baseSize)}` : value};`;
+  }
+  return '';
+};
+
+type FabricComponentOptions = {
+  ignoreStyles?: GeneratedFabricMarginProperties[] | undefined; // Ignore margin styles
+};
 
-export const createComponent = <T = object>(element: WebTarget) => {
-  return styled(element)<FabricComponent<T>>`
-    ${marginStyles};
+export const createComponent = <T extends object = {}>(
+  component: React.ComponentType<T>,
+  options?: FabricComponentOptions
+) => {
+  return styled(component)<T & FabricComponent>`
+    ${marginStyles(options)}
+    ${paddingStyles(options)}
   `;
 };

package/src/Theme/themes/dark.ts

@@ -706,6 +706,54 @@ export const darkThemePx: Theme = {
     foreground: '#99989C',
     background: '#535353',
   },
+  tag: {
+    outlined: {
+      borderRadius: 50,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 1,
+      color: {
+        default: '#99989C',
+        primary: '#3991FA',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+    fill: {
+      borderRadius: 4,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 0,
+      color: {
+        default: '#99989C',
+        primary: '#3991FA',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+  },
+  alert: {
+    paddingBlock: 16,
+    paddingLeft: 16,
+    paddingRight: 44,
+    borderRadius: 5,
+    fontSize: 14,
+    gap: 12,
+    icon: {
+      width: 16,
+      height: 14,
+      paddingTop: 2,
+    },
+    color: {
+      icon: '#FDC700',
+      text: '#894B00',
+      background: '#FFFBE0',
+    },
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;