@cyber-harbour/ui 1.0.74 → 1.0.76

package/src/Core/Table/Table.tsx

@@ -1,94 +0,0 @@
-import { ReactNode, useMemo, CSSProperties } from 'react';
-import { styled } from 'styled-components';
-import { Row } from './Row';
-import { Cell, HeadCell } from './Cell';
-
-export type ColumnTable<ID = string> = {
-  id: ID;
-  title: string;
-  width?: CSSProperties['width'];
-  className?: string;
-};
-
-export type RenderCellProps<T = string> = {
-  rowIndex: number;
-  cellIndex: number;
-  columnId: T;
-};
-
-export type RenderHeaderCellProps<T = string> = {
-  title: string;
-  columnId: T;
-};
-
-interface TableProps {
-  columns: ColumnTable[];
-  rowCount: number;
-  renderCell: (props: RenderCellProps<any>) => any;
-  renderHeaderCell: (props: RenderHeaderCellProps<any>) => any;
-  rowIds?: string[];
-}
-
-export const Table = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }: TableProps) => {
-  const cellCount = columns.length;
-
-  const data = useMemo(() => {
-    const items: ReactNode[][] = [];
-    for (let i = 0; i < rowCount; i++) {
-      items[i] = [];
-      for (let j = 0; j < cellCount; j++) {
-        items[i][j] = renderCell({
-          rowIndex: i,
-          cellIndex: j,
-          columnId: columns[j].id,
-        });
-      }
-    }
-    return items;
-  }, [rowCount, cellCount, columns, renderCell]);
-
-  return (
-    <StyledTable>
-      <StyledHead>
-        <Row>
-          {columns.map(({ id, title, width }) => (
-            <HeadCell
-              key={id}
-              style={{
-                width,
-              }}
-            >
-              {renderHeaderCell({ title, columnId: id })}
-            </HeadCell>
-          ))}
-        </Row>
-      </StyledHead>
-      <tbody>
-        {data.map((cells, rowIndex) => (
-          <Row key={`row-${rowIndex}`} id={rowIds ? rowIds[rowIndex] : `row-${rowIndex}`}>
-            {cells.map((cell, cellIndex) => (
-              <Cell className={columns[cellIndex]?.className} key={`cell-${cellIndex}`}>
-                {cell}
-              </Cell>
-            ))}
-          </Row>
-        ))}
-      </tbody>
-    </StyledTable>
-  );
-};
-
-const StyledTable = styled.table`
-  width: 100%;
-  border-spacing: 0;
-  table-layout: fixed;
-`;
-
-const StyledHead = styled.thead(
-  ({ theme }) => `
-  background-color: ${theme.colors.background};
-  position: sticky;
-  top: 0;
-  z-index: 1;
-`
-);

package/src/Core/Table/index.ts

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

package/src/Core/Tag/Tag.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  FabricComponent,
-  createComponent,
-  TagVariant,
-  TagColor,
-  hexToRgba,
-  generatePropertySpaceStyle,
-  createStyledComponent,
-} 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 = createComponent<TagProps>(
-  ({ children, variant = 'fill', color = 'default', className, disabled, icon, onClick, onDelete, ...props }) => {
-    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(
-  ({ theme }) => `
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  min-width: 0;
-  word-break: break-word;
-
-  font-size: 14px;
-  line-height: 16px;
-  @media (min-width: ${theme.breakpoints.m}) {
-    justify-content: center;
-  }
-`
-);
-
-const DeleteButton = styled.button`
-  align-self: flex-start;
-  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 = createStyledComponent(Container, {
-  ignoreStyles: ['padding-block', 'padding-inline'],
-});

package/src/Core/Tag/index.ts

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

package/src/Core/Tooltip/Tooltip.tsx

@@ -1,103 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { createComponent, 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 = createComponent<TooltipProps>(
-  ({ className, positions = ['top'], align = 'center', anchorClassName, content, offset = 6, children }) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-
-    const position = Array.isArray(positions) ? positions[0] : positions;
-
-    const handleMouseEnter = useCallback(() => {
-      if (content) setIsOpen(true);
-    }, [content]);
-
-    const handleClose = useCallback(() => {
-      setIsOpen(false);
-    }, []);
-
-    const handleClickOrTouch = useCallback(() => {
-      if (content) setIsOpen((prev) => !prev);
-    }, [content]);
-
-    return (
-      <Popover
-        padding={offset}
-        positions={positions}
-        isOpen={isOpen}
-        align={align}
-        onClickOutside={handleClose}
-        content={
-          !!content && (
-            <StyledContent className={className} $position={position} $offset={offset}>
-              {content}
-            </StyledContent>
-          )
-        }
-        containerStyle={{
-          zIndex: `${9999}`,
-        }}
-      >
-        <StyledAnchor
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleClose}
-          className={anchorClassName}
-          onTouchStart={handleClickOrTouch}
-        >
-          {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

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

package/src/Core/Typography/Typography.tsx

@@ -1,70 +0,0 @@
-import styled from 'styled-components';
-import { CSSProperties, ElementType } from 'react';
-import {
-  ColorVariant,
-  createComponent,
-  createStyledComponent,
-  FabricComponent,
-  StyledFabricComponent,
-  TypographyVariant,
-} from '../../Theme';
-import { resolveThemeColor } from '../../Theme/utils';
-
-type TypographyProps = FabricComponent<{
-  style?: CSSProperties;
-  variant?: TypographyVariant;
-  element?: ElementType;
-  children: any;
-  weight?: CSSProperties['fontWeight'];
-  fontStyle?: CSSProperties['fontStyle'];
-  color?: ColorVariant | string;
-  className?: string;
-  ellipsis?: boolean;
-}> &
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
-
-type StyledProps = {
-  $variant: TypographyVariant;
-  $weight?: CSSProperties['fontWeight'];
-  $style?: CSSProperties['fontStyle'];
-  $color?: ColorVariant | string;
-  $ellipsis?: boolean;
-};
-
-// Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = createStyledComponent<StyledFabricComponent<StyledProps>>(
-  styled('div')(({ 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 `
-      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 = createComponent<TypographyProps>(
-  ({ variant = 'body', element, children, weight, fontStyle, color, className, style, ellipsis = false, ...props }) => {
-    // Determine which HTML element to render based on the variant if not explicitly specified
-    const Element = element || (variant.startsWith('h') ? variant : 'p');
-
-    return (
-      <StyledTypography
-        as={Element}
-        $variant={variant}
-        $weight={weight}
-        $style={fontStyle}
-        $color={color}
-        $ellipsis={ellipsis}
-        className={className}
-        style={style}
-        {...props}
-      >
-        {children}
-      </StyledTypography>
-    );
-  }
-);

package/src/Core/Typography/index.ts

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

package/src/Core/index.ts

@@ -1,27 +0,0 @@
-export * from './Button';
-export * from './IconComponents';
-export * from './Sidebar';
-export * from './Typography';
-export * from './ListMenu';
-export * from './Header';
-export * from './Table';
-export * from './Pagination';
-export * from './ContextMenu';
-export * from './Select';
-export * from './RowActionsMenu';
-export * from './Input';
-export * from './Flex';
-export * from './Box';
-export * from './Line';
-export * from './EmptyData';
-export * from './Tag';
-export * from './Alert';
-export * from './Label';
-export * from './Checkbox';
-export * from './LinerProgress';
-export * from './Switch';
-export * from './Drawer';
-export * from './Tooltip';
-export * from './ContentLoader';
-export * from './Overlay';
-export * from './Modal';

package/src/FullscreenCard/FullscreenCard.tsx

@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-import { createComponent, pxToRem } from '../Theme';
-
-interface FullscreenCardProps {
-  children: any;
-  className?: string;
-  position: 'absolute' | 'fixed';
-  isActive: boolean;
-  top?: number;
-  left?: number;
-  right?: number;
-  bottom?: number;
-}
-
-export const FullscreenCard = createComponent<FullscreenCardProps>(
-  ({ isActive, position, top = 0, left = 0, right, bottom, ...props }) => {
-    return (
-      <StyledContainer
-        $isActive={isActive}
-        $position={position}
-        $top={top}
-        $left={left}
-        $right={right}
-        $bottom={bottom}
-        {...props}
-      />
-    );
-  }
-);
-
-const StyledContainer = styled.div<{
-  $isActive: boolean;
-  $top?: number;
-  $left?: number;
-  $right?: number;
-  $bottom?: number;
-  $position: 'absolute' | 'fixed';
-}>(
-  ({ $isActive, $top, $left, $right, $bottom, $position, theme }) => `
-${
-  $isActive
-    ? `
-      position: ${$position};
-      z-index: 1000;
-        ${typeof $top === 'number' ? `top: ${pxToRem($top, theme.baseSize)};` : ''}
-        ${typeof $left === 'number' ? `left: ${pxToRem($left, theme.baseSize)};` : ''}
-        ${typeof $right === 'number' ? `right: ${pxToRem($right, theme.baseSize)};` : ''}
-        ${typeof $bottom === 'number' ? `bottom: ${pxToRem($bottom, theme.baseSize)};` : ''}
-      
-    `
-    : ''
-}
-
-  min-width: 0;
-  `
-);

package/src/FullscreenCard/index.ts

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