@cyber-harbour/ui 1.0.74 → 1.0.76

package/src/Core/ListMenu/ListMenuItem.tsx

@@ -1,105 +0,0 @@
-import { FC } from 'react';
-import { styled } from 'styled-components';
-
-export type ListMenuItemBase = {
-  active?: boolean;
-  label?: string;
-  count?: number;
-};
-
-export type ListMenuItemAnchorProps = {
-  href: string;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-};
-
-export type ListMenuItemButtonProps = {
-  type?: 'button' | 'reset' | 'submit';
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-
-export type ListMenuItemProps = ListMenuItemBase & (ListMenuItemAnchorProps | ListMenuItemButtonProps);
-
-type StyledProps = {
-  $active: ListMenuItemProps['active'];
-};
-
-export const ListMenuItem = ({ active, label, count, ...props }: ListMenuItemProps) => {
-  const Element = 'href' in props ? 'a' : 'button';
-  return (
-    <StyledItem $active={active}>
-      <StyledLink as={'href' in props ? 'a' : 'button'} $active={active} {...props}>
-        {label}
-        {typeof count === 'number' && <StyledCount $active={active}>{count}</StyledCount>}
-      </StyledLink>
-    </StyledItem>
-  );
-};
-const StyledItem = styled.li<StyledProps>(
-  ({ theme, $active }) => `
-   position: relative;
-   display: flex;
-   align-items: center;
-   justify-content: flex-start;
-   width: 100%;
-   &:not(:last-child) {
-    margin-bottom: 4px;
-   }
-
-    ::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: ${$active ? '100%' : 0};
-      border-radius: 2px;
-      transform: translateX(-25%);
-      background-color: ${$active ? theme.colors.primary.main : 'transparent'};
-      transition: background-color 0.3s ease-in-out, height 0.3s ease-in-out;
-    }
-  `
-);
-
-const StyledLink = styled.a<StyledProps>(
-  ({ theme, $active }) => `
-    display: inline-block;
-    
-    padding: 8px 10px;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    text-decoration: none;
-    background-color: transparent;
-    border-radius: 8px;
-    
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    
-    font-family: Inter;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 1.5;
-    text-align: left;
-    color: ${$active ? theme.colors.primary.main : theme.colors.text.main};
-
-    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-
-    &:hover {
-      color: ${theme.colors.primary.main};
-    }`
-);
-
-const StyledCount = styled.span<StyledProps>(
-  ({ theme, $active }) => `
-    margin-left: 8px;
-    padding: 2px 4px;
-    border-radius: 4px;
-    background-color: ${$active ? theme.colors.primary.lightest2 : theme.colors.stroke.lighter};
-    color: inherit;
-    line-height: 1.5;
-    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-  `
-);

package/src/Core/ListMenu/ListMenuSection.tsx

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { styled } from 'styled-components';
-
-export interface ListMenuSectionProps {
-  items: any;
-  title?: string;
-}
-export const ListMenuSection = ({ title, items }: ListMenuSectionProps) => {
-  return (
-    <li>
-      {!!title && <StyledTitle>{title}</StyledTitle>}
-      <StyledList>{items}</StyledList>
-    </li>
-  );
-};
-
-const StyledTitle = styled.h2(
-  ({ theme }) => `
-    margin: 0 0 15px 0;
-    width: 100%;
-    padding: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    font-family: Inter;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1;
-    letter-spacing: 0.03em;
-    text-align: left;
-    text-transform: uppercase;
-    color: ${theme.colors.text.lighter};
-`
-);
-
-const StyledList = styled.ul(
-  ({ theme }) => `
-      margin: 0;
-      padding: 0;
-      width: 180px;
-      list-style: none;
-      position: relative;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 100%;
-        background-color: ${theme.colors.stroke.light};
-        }
-  `
-);

package/src/Core/ListMenu/index.ts

@@ -1,3 +0,0 @@
-export * from './ListMenu';
-export * from './ListMenuItem';
-export * from './ListMenuSection';

package/src/Core/Modal/Modal.tsx

@@ -1,116 +0,0 @@
-import styled from 'styled-components';
-import { Overlay } from '../Overlay';
-import { createStyledComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
-
-type ModalProps = {
-  onClose: () => void;
-  width?: number;
-  children: any;
-  isNested?: boolean;
-};
-
-interface ModalChildrenProps extends FabricComponent<Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>> {
-  children: any;
-}
-
-export const Modal = ({ children, onClose, isNested = false, width }: ModalProps) => {
-  return (
-    <Overlay onOutsideClick={onClose} isLocked={!isNested}>
-      <StyledContainer $width={width}>{children}</StyledContainer>
-    </Overlay>
-  );
-};
-
-export const ModalHeader = createStyledComponent<ModalChildrenProps>(
-  styled.div(({ theme, p = theme.modal.padding, px, pl, pr }) => {
-    const left = pl || px || p;
-    const right = pr || px || p;
-    return `
-    grid-area: modal-header;
-    position: relative;
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: ${typeof left === 'string' ? left : pxToRem(left)};
-        right: ${typeof right === 'string' ? right : pxToRem(right)};
-        height: ${pxToRem(1)};
-        background-color: ${theme.modal.borderColor};
-    }
-
-    ${generatePropertySpaceStyle(theme, 'padding', p)};
-  `;
-  }),
-  {
-    ignoreStyles: ['padding'],
-  }
-);
-
-export const ModalBody = createStyledComponent<ModalChildrenProps>(
-  styled.div(
-    ({ theme, p = theme.modal.padding }) => `
-    grid-area: modal-body;
-    max-height: 100%;
-    overflow-y: auto;
-    ${generatePropertySpaceStyle(theme, 'padding', p)};
-  `
-  ),
-  {
-    ignoreStyles: ['padding'],
-  }
-);
-
-export const ModalFooter = createStyledComponent<ModalChildrenProps>(
-  styled.div(({ theme, p = theme.modal.padding, px, pl, pr }) => {
-    const left = pl || px || p;
-    const right = pr || px || p;
-    return `
-    grid-area: modal-footer;
-     position: relative;
-     &::after {
-        content: '';
-        position: absolute;
-        top: ${pxToRem(1)};
-        left: ${typeof left === 'string' ? left : pxToRem(left)};
-        right: ${typeof right === 'string' ? right : pxToRem(right)};
-        height: ${pxToRem(1)};
-        background-color: ${theme.modal.borderColor};
-    }
-    ${generatePropertySpaceStyle(theme, 'padding', p)};
-  `;
-  }),
-  {
-    ignoreStyles: ['padding'],
-  }
-);
-
-const StyledContainer = styled.div<{ $width?: number }>(
-  ({ theme, $width = theme.modal.width }) => `
-  display: grid;
-   grid-template-areas:
-    "modal-header"
-    "modal-body"
-    "modal-footer";
-  grid-template-rows: auto 1fr auto;
-  position: absolute;
-  z-index:${theme.zIndex.modal};
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: ${theme.modal.background};
-  @media (min-width: ${theme.breakpoints.m}px) {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: auto;
-    max-height: 90dvh;
-    width: ${propToRem($width, theme.baseSize)};
-    max-width: 90vw;
-    border: 1px solid ${theme.modal.borderColor};
-    box-shadow: ${theme.modal.shadow};
-    border-radius: ${theme.modal.borderRadius};
-  }
-`
-);

package/src/Core/Modal/index.ts

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

package/src/Core/Overlay/Overlay.tsx

@@ -1,94 +0,0 @@
-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;
-  isLocked?: boolean;
-};
-
-export const Overlay = createComponent<OverlayProps>(
-  ({ children, onOutsideClick, prepend, append, prependPosition, appendPosition, isLocked = true, ...props }) => {
-    useBodyScrollLock(isLocked);
-    return createPortal(
-      <Container
-        {...props}
-        className="cb-ui-backdrop"
-        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

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

package/src/Core/Pagination/Pagination.tsx

@@ -1,139 +0,0 @@
-import { FC, useCallback, useMemo } from 'react';
-import { styled } from 'styled-components';
-import { ChevronRightIcon } from '../IconComponents';
-import { ChevronLeftIcon } from '../IconComponents';
-
-export interface PaginationProps {
-  total_items: number;
-  limit: number;
-  offset: number;
-  onChangePage: (offset: number) => void;
-}
-
-const PAGINATION_LIMIT = 9;
-const DIFF = 2;
-const VISIBLE_GROUPE = 5;
-const STEP = 1;
-const ELLIPSIS = '...';
-
-export const Pagination = ({ total_items, limit, offset, onChangePage }: PaginationProps) => {
-  const currentPage = useMemo(() => (offset ? offset / limit + 1 : 1), [limit, offset]);
-  const pages = Math.ceil(total_items / limit);
-  const paginationItems: (number | string)[] = useMemo(() => {
-    const items = [];
-    if (pages <= PAGINATION_LIMIT) {
-      for (let i = 1; i <= pages; i += 1) {
-        items.push(i);
-      }
-    } else {
-      const firstPage = 1;
-      const lastPage = pages;
-      items.push(firstPage);
-      if (currentPage <= VISIBLE_GROUPE) {
-        for (let i = 2; i <= VISIBLE_GROUPE + 2; i += 1) {
-          items.push(i);
-        }
-        items.push(ELLIPSIS, lastPage);
-      } else if (currentPage > VISIBLE_GROUPE && currentPage < lastPage - VISIBLE_GROUPE) {
-        items.push(ELLIPSIS);
-        for (let i = currentPage - DIFF; i <= currentPage + DIFF; i += 1) {
-          items.push(i);
-        }
-        items.push(ELLIPSIS, lastPage);
-      } else {
-        items.push(ELLIPSIS);
-        for (let i = lastPage - VISIBLE_GROUPE - 1; i <= lastPage; i += 1) {
-          items.push(i);
-        }
-      }
-    }
-    return items;
-  }, [currentPage, pages]);
-
-  const isDisabled = useCallback(
-    (page: number | string) => typeof page === 'string' || page === currentPage,
-    [currentPage]
-  );
-  const onPaginationClick = useCallback(
-    (page: number | string) => {
-      if (isDisabled(page)) return;
-      onChangePage(page as number);
-    },
-    [onChangePage, isDisabled]
-  );
-  return (
-    <FlexGroup>
-      <Button
-        aria-label="previous page"
-        onClick={() => onPaginationClick(currentPage - STEP)}
-        disabled={currentPage === 1}
-      >
-        <ChevronLeftIcon />
-      </Button>
-      <StyledList>
-        {paginationItems.map((page, idx) => (
-          <li key={`pagination-${page}-${idx}`}>
-            <Button $current={page === currentPage} onClick={() => onPaginationClick(page)}>
-              {page}
-            </Button>
-          </li>
-        ))}
-      </StyledList>
-      <Button
-        aria-label="next page"
-        onClick={() => onPaginationClick(currentPage + STEP)}
-        disabled={!total_items || currentPage === pages}
-      >
-        <ChevronRightIcon />
-      </Button>
-    </FlexGroup>
-  );
-};
-
-type StyledButtonProps = {
-  $current?: boolean;
-};
-
-const StyledList = styled.div(
-  ({ theme }) => `
-  list-style: none;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${theme.pagination.gap};
-`
-);
-const Button = styled.button<StyledButtonProps>(
-  ({ theme, $current }) => `
-  font-family: ${theme.typography.fontFamily};
-  background-color: ${$current ? theme.colors.primary.main : theme.colors.background};
-  color: ${$current ? theme.colors.background : theme.colors.text.main};
-  border: none;
-  cursor: pointer;
-  padding-block: ${theme.pagination.paddingBlock};
-  padding-inline: ${theme.pagination.paddingInline};
-  border-radius: ${theme.pagination.borderRadius};
-  font-size: ${theme.pagination.fontSize};
-  font-weight: 400;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${theme.pagination.height};
-  svg {
-    width: ${theme.pagination.iconSize};
-    height: ${theme.pagination.iconSize};
-}
-  &:hover {
-    background-color: ${theme.colors.primary.light};
-  }
-    transition: background-color 0.3s ease-in-out;
-`
-);
-const FlexGroup = styled.div(
-  ({ theme }) => `
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${theme.pagination.gap};
-`
-);

package/src/Core/Pagination/index.ts

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

package/src/Core/RowActionsMenu/RowActionsMenu.tsx

@@ -1,153 +0,0 @@
-import { ButtonColor, ButtonSize, getButtonSizeStyles } from '../../Theme';
-import { useRef } from 'react';
-import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { styled, useTheme } from 'styled-components';
-import { BallsMenu } from '../IconComponents';
-import { useContextMenuControl } from '../ContextMenu';
-import { Button } from '../Button';
-
-export type Action = {
-  label: string;
-  onClick: () => void;
-  color: ButtonColor;
-};
-
-interface RowActionsMenuProps {
-  items: Action[];
-  size?: ButtonSize;
-  disabled?: boolean;
-  className?: string;
-  positions?: PopoverPosition[] | PopoverPosition;
-  align?: PopoverAlign;
-}
-
-export const RowActionsMenu = ({
-  size = 'small',
-  disabled,
-  className,
-  positions = ['bottom'],
-  align = 'end',
-  items,
-}: RowActionsMenuProps) => {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const { isOpen, closeMenu, toggleMenu } = useContextMenuControl();
-
-  const theme = useTheme();
-
-  return (
-    <Popover
-      padding={theme.contextMenu.padding}
-      isOpen={isOpen}
-      positions={positions}
-      align={align}
-      onClickOutside={closeMenu}
-      content={
-        <ContentWrapper>
-          {items.map(({ label, onClick, color }, idx) => (
-            <Button
-              variant="empty"
-              key={`row-action-${idx}`}
-              color={color}
-              fullWidth
-              size={size}
-              py={10}
-              px={5}
-              onClick={() => {
-                onClick();
-                closeMenu();
-              }}
-            >
-              {label}
-            </Button>
-          ))}
-        </ContentWrapper>
-      }
-      containerStyle={{
-        backgroundColor: theme.colors.background,
-        border: `1px solid ${theme.colors.stroke.light}`,
-        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
-        borderRadius: '5px',
-        zIndex: `${9999}`,
-      }}
-    >
-      <StyledButton
-        ref={buttonRef}
-        onClick={toggleMenu}
-        $disabled={disabled}
-        $size={size}
-        className={className}
-        type="button"
-        disabled={disabled}
-      >
-        <BallsMenu width={theme.rowActionsMenu.icon.size} height={theme.rowActionsMenu.icon.size} />
-      </StyledButton>
-    </Popover>
-  );
-};
-
-const StyledButton = styled.button<{
-  $size: ButtonSize;
-  $disabled?: boolean;
-}>`
-  ${({ $size, $disabled, theme }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
-        background: ${theme.rowActionsMenu.button.default.background};
-        color: ${theme.rowActionsMenu.button.default.text};
-        border: none;
-        font-size: ${sizes.fontSize};
-        gap: ${sizes.gap};
-        padding: 4px;
-        border-radius: ${sizes.borderRadius};
-        width: auto;
-        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
-        font-weight: 500;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        text-decoration: none;
-        transition: all 0.2s ease;
-        outline: none;
-
-        &:hover {
-          background: ${theme.rowActionsMenu.button.hover.background};
-          color: ${theme.rowActionsMenu.button.hover.text};
-        }
-
-        &:active {
-          background: ${theme.rowActionsMenu.button.active.background};
-          color: ${theme.rowActionsMenu.button.active.text};
-        }
-
-        &:disabled {
-          background: ${theme.rowActionsMenu.button.disabled.background};
-          color: ${theme.rowActionsMenu.button.disabled.text};
-        }
-
-    `;
-  }}
-`;
-const ContentWrapper = styled.div(
-  ({ theme }) => `
-  padding: 5px 10px;
-  display: flex;
-  flex-direction: column;
-  button {
-    min-width: 110px;
-    justify-content: flex-start;
-    font-weight: 400;
-  }
-  button:not(:last-of-type) {
-    position: relative;
-    ::after {
-      position: absolute;
-      content: '';
-      bottom: 0;
-      left: 5px;
-      right: 5px;
-      height: 1px;
-      background-color: ${theme.rowActionsMenu.delimiterColor};
-    }
-  }
-`
-);

package/src/Core/RowActionsMenu/index.ts

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