@cyber-harbour/ui 1.0.74 → 1.0.76

package/src/Core/Select/Select.tsx

@@ -1,197 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { ContextMenu } from '../ContextMenu';
-import { ButtonSize, getButtonSizeStyles } from '../../Theme';
-import { styled } from 'styled-components';
-
-type SelectBaseProps<T extends string | number> = {
-  selected?: T;
-  options: { value: T; inputDisplay?: string }[];
-  onSelect: (id: T) => void;
-  placeholder: string;
-  disabled?: boolean;
-  positions?: PopoverPosition[] | PopoverPosition;
-  align?: PopoverAlign;
-  size?: ButtonSize;
-  hasBorder?: boolean;
-  maxHeight?: number;
-  matchAnchorWidth?: boolean;
-};
-
-type SelectDefaultProps = {
-  isSearchable?: false;
-};
-
-type SelectSearchableProps = {
-  isSearchable: true;
-  noOptionsMessage: string;
-  inputPlaceholder: string;
-};
-
-type SelectProps<T extends string | number> = SelectBaseProps<T> & (SelectSearchableProps | SelectDefaultProps);
-
-export const Select = <T extends string | number>({
-  options,
-  selected,
-  onSelect,
-  placeholder,
-  disabled = false,
-  positions = ['bottom'],
-  align = 'start',
-  size = 'small',
-  hasBorder = true,
-  maxHeight,
-  matchAnchorWidth = true,
-  isSearchable = false,
-  ...props
-}: SelectProps<T>) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [searchValue, setSearchValue] = useState<string>('');
-
-  const visibleOptions = useMemo(() => {
-    if (!isSearchable) return options;
-
-    const normalizedValue = searchValue?.trim().toLocaleLowerCase() || '';
-    return options.filter(({ value, inputDisplay }) =>
-      String(inputDisplay || value)
-        .toLocaleLowerCase()
-        .includes(normalizedValue)
-    );
-  }, [options, searchValue, isSearchable]);
-
-  const handleToggle = useCallback(() => {
-    if (!disabled) setIsOpen((prev) => !prev);
-  }, []);
-
-  const noOptionsMessage = 'noOptionsMessage' in props ? props.noOptionsMessage : '';
-  const inputPlaceholder = 'inputPlaceholder' in props ? props.inputPlaceholder : '';
-
-  return (
-    <ContextMenu
-      isOpen={isOpen}
-      onClickOutside={() => setIsOpen(false)}
-      onClick={handleToggle}
-      disabled={disabled}
-      anchor={
-        isSearchable && isOpen ? (
-          <StyledSearchInput
-            type="text"
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            placeholder={inputPlaceholder}
-            autoFocus
-            onClick={(e) => e.stopPropagation()}
-            $size={size}
-          />
-        ) : !selected ? (
-          placeholder
-        ) : (
-          options.find((option) => option.value === selected)?.inputDisplay || selected
-        )
-      }
-      fullWidth
-      positions={positions}
-      align={align}
-      size={size}
-      hasBorder={hasBorder}
-      maxHeight={maxHeight}
-      matchAnchorWidth={matchAnchorWidth}
-    >
-      <StyledWrapper>
-        {visibleOptions.map((item) => (
-          <StyledItem
-            onClick={() => {
-              onSelect(item.value);
-              if (isSearchable) setSearchValue('');
-              setIsOpen(false);
-            }}
-            type="button"
-            $selected={item.value === selected}
-            key={item.value}
-            disabled={disabled}
-            $size={size}
-          >
-            {item.inputDisplay || item.value}
-          </StyledItem>
-        ))}
-        {!visibleOptions.length && <NoMatchMessage $size={size}>{noOptionsMessage}</NoMatchMessage>}
-      </StyledWrapper>
-    </ContextMenu>
-  );
-};
-
-const StyledSearchInput = styled.input<{ $size: ButtonSize }>(
-  ({ theme, $size }) => `
-  outline: none;
-  border: none;
-  padding: 0;
-  background: transparent;
-  width: 100%;
-  font-size: ${theme.button.sizes[$size].fontSize};
-  color: ${theme.colors.text.main};
-`
-);
-
-const NoMatchMessage = styled.p<{ $size: ButtonSize }>(
-  ({ theme, $size }) => `
-  padding-block: ${theme.select.padding};
-  padding-inline: ${theme.button.sizes[$size].paddingInline};
-  font-size: ${theme.button.sizes[$size].fontSize};
-  color: ${theme.colors.text.main};
-  white-space: pre-line;
-  word-break: break-word;
-`
-);
-const StyledItem = styled.button<{ $size: ButtonSize; $selected: boolean }>`
-  ${({ theme, $size, $selected }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
-        background: ${theme.select.item.default.background};
-        color: ${theme.select.item.default.text};
-        font-size: ${sizes.fontSize};
-        gap: ${sizes.gap};
-        padding-block: ${theme.select.padding};
-        padding-inline: ${sizes.paddingInline};
-        border-radius: ${sizes.borderRadius};
-        border-width: ${sizes.borderWidth};
-        border: none;
-        width: 100%;
-        cursor: pointer;
-        font-weight: 400;
-        display: inline-flex;
-        align-items: center;
-        justify-content: flex-start;
-        text-decoration: none;
-        transition: all 0.2s ease;
-        outline: none;
-        flex-direction: row;
-
-        &:hover {
-          background-color: ${theme.select.item.hover.background};
-          color: ${theme.select.item.hover.text};
-        }
-
-         ${
-           $selected &&
-           `background: ${theme.select.item.active.background};
-          color: ${theme.select.item.active.text};`
-         }
-
-        &:disabled {
-          background: ${theme.select.item.disabled.background};
-          color: ${theme.select.item.disabled.text};
-          cursor: not-allowed;
-        }
-    `;
-  }}
-`;
-
-const StyledWrapper = styled.div(
-  ({ theme }) => `
-  padding-block: ${theme.select.paddingBlock};
-  padding-inline: ${theme.select.paddingInline};
-  ${StyledItem}:not(:last-of-type) {
-    margin-bottom: ${theme.select.margin};
-  }
-`
-);

package/src/Core/Select/index.ts

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

package/src/Core/Sidebar/Sidebar.tsx

@@ -1,80 +0,0 @@
-import { styled } from 'styled-components';
-import React from 'react';
-import { SidebarContext } from './SidebarContext';
-import { createComponent } from '../../Theme';
-
-export interface SidebarProps {
-  defaultCollapsed?: boolean;
-  children: any;
-  canGrow: boolean;
-}
-
-interface StyledProps {
-  $collapsed: boolean;
-  $canGrow: boolean;
-}
-
-export const Sidebar = createComponent<SidebarProps>(({ defaultCollapsed, canGrow, children }) => {
-  const [collapsed, setCollapsed] = React.useState(!!defaultCollapsed);
-
-  return (
-    <StyledContainer $collapsed={collapsed} $canGrow={canGrow}>
-      <SidebarContext.Provider
-        value={{
-          collapsed,
-          setCollapsed,
-          canGrow,
-        }}
-      >
-        {children}
-      </SidebarContext.Provider>
-    </StyledContainer>
-  );
-});
-
-const StyledContainer = styled.aside<StyledProps>(
-  ({ theme, $collapsed, $canGrow }) => `
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 20px;
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-    width: ${theme.sidebar.width};
-    padding: 12px;
-    height: 100%;
-    overflow: hidden auto;
-    border-right: 1px solid ${theme.sidebar.border};
-    background: ${theme.sidebar.background};
-    ${
-      $collapsed || !$canGrow
-        ? `
-          width: 65px;
-        `
-        : ''
-    }
-
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 25dvh;
-      transform: translateY(-100%);
-      background: ${theme.sidebar.background};
-      border-right: 1px solid ${theme.sidebar.border};
-
-      width: ${theme.sidebar.width};
-      ${
-        $collapsed || !$canGrow
-          ? `
-          width: 65px;
-        `
-          : ''
-      }
-    }
-`
-);

package/src/Core/Sidebar/SidebarContext.tsx

@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-
-interface SidebarContext {
-  collapsed: boolean;
-  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  canGrow: boolean;
-}
-
-export const SidebarContext = createContext<SidebarContext>({
-  collapsed: false,
-  setCollapsed: () => {},
-  canGrow: false,
-});

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -1,35 +0,0 @@
-import { useContext } from 'react';
-import { SidebarContext } from './SidebarContext';
-import { styled } from 'styled-components';
-
-type StyledProps = {
-  $collapsed: boolean;
-  $canGrow: boolean;
-};
-
-export const SidebarDelimeter = () => {
-  const { collapsed, canGrow } = useContext(SidebarContext);
-  return <StyledDelimeter $collapsed={collapsed} $canGrow={canGrow} />;
-};
-
-const StyledDelimeter = styled.div<StyledProps>(
-  ({ $collapsed, $canGrow, theme }) => `
-        min-width: 32px;
-        width: 0;
-
-        border-bottom: 1px dashed ${theme.sidebar.delimeter.color};
-        margin-block: 8px;
-        margin-left: 4px;
-
-    ${
-      !$collapsed &&
-      $canGrow &&
-      `
-        & {
-            width: 100%;
-            margin-left: 0;
-        }
-      `
-    }
-`
-);

package/src/Core/Sidebar/SidebarItem.tsx

@@ -1,137 +0,0 @@
-import { SVGProps, useContext } from 'react';
-import styled from 'styled-components';
-import { SidebarContext } from './SidebarContext';
-
-interface SidebarItemBase {
-  active?: boolean;
-  icon?: React.ComponentType<SVGProps<SVGSVGElement>>;
-  label?: string;
-}
-
-interface SidebarItemAnchor {
-  href: string;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-}
-
-type StyledProps = {
-  $active: SidebarItemBase['active'];
-  $collapsed: boolean;
-  $canGrow: boolean;
-};
-
-interface SidebarItemButton {
-  type?: 'button' | 'reset' | 'submit';
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export type SidebarItemProps = SidebarItemBase & (SidebarItemAnchor | SidebarItemButton);
-
-export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItemProps) => {
-  const { collapsed, canGrow } = useContext(SidebarContext);
-
-  const isAnchor = 'href' in props;
-
-  return (
-    <StyledItem
-      title={collapsed ? label : ''}
-      as={isAnchor ? 'a' : 'button'}
-      $collapsed={collapsed}
-      $active={active}
-      $canGrow={canGrow}
-      {...props}
-    >
-      {Icon && <Icon aria-label={label} width={16} height={16} />}
-      <StyledText $collapsed={collapsed} $active={active} $canGrow={canGrow}>
-        {label}
-      </StyledText>
-    </StyledItem>
-  );
-};
-
-const StyledText = styled.span<StyledProps>(
-  ({ $collapsed, $canGrow }) => `
-  margin-top: 2px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 100%;
-  text-align: left;
-  display: inline-block;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 1.49;
-  font-family: Inter;
-
-  ${
-    $collapsed || !$canGrow
-      ? `
-    & {
-      width: 0;
-    }
-    `
-      : ''
-  }
-`
-);
-
-const StyledItem = styled.a<StyledProps>(
-  ({ $active, $collapsed, $canGrow, theme }) => `
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding-inline: 12px;
-    height: 40px;
-    min-width: 40px;
-    border: none;
-    cursor: pointer;
-    text-decoration: none;
-    border-radius: 8px;
-    color: ${theme.sidebar.text.default};
-    background: ${theme.sidebar.item.default.background};
-    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-    position: relative;
-    ${
-      $active
-        ? `
-        background: ${theme.sidebar.item.active.background};
-        color: ${theme.sidebar.text.active};
-       `
-        : ''
-    }
-    ${$collapsed || !$canGrow ? `gap: 0;` : ''}
-
-
-
-    &:hover {
-      background: ${theme.sidebar.item.hover.background};
-      color: ${theme.sidebar.text.hover};
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      left: -12px;
-      top: 0;
-      height: 100%;
-      width: 0px;
-      border-top-right-radius: 5px;
-      border-bottom-right-radius: 5px;
-      background: rgba(0, 0, 0, 0);
-      transition: background 0.4s ease-in-out, width 0.3s ease-in-out;
-      ${
-        $active
-          ? `
-        background: ${theme.sidebar.text.active};
-        width: 5px;
-        `
-          : ''
-      }
-    }
-
-    svg {
-      flex-shrink: 0;
-      fill: currentColor;
-    }
-`
-);

package/src/Core/Sidebar/SidebarSection.tsx

@@ -1,31 +0,0 @@
-import { CSSProperties, styled } from 'styled-components';
-
-export interface SidebarSectionProps {
-  grow?: number;
-  shrink?: number;
-  basis?: CSSProperties['flexBasis'];
-  items: React.ReactElement[];
-}
-
-export const SidebarSection = ({ grow, shrink, basis, items }: SidebarSectionProps) => {
-  return (
-    <StyledSection $grow={grow} $shrink={shrink} $basis={basis}>
-      {items}
-    </StyledSection>
-  );
-};
-
-interface StyledProps {
-  $grow?: number;
-  $shrink?: number;
-  $basis?: CSSProperties['flexBasis'];
-}
-
-const StyledSection = styled.div<StyledProps>(
-  ({ $grow = 0, $shrink = 1, $basis = '100%' }) => `
-    flex: ${$grow} ${$shrink} ${$basis};
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-  `
-);

package/src/Core/Sidebar/index.ts

@@ -1,5 +0,0 @@
-export * from './Sidebar';
-export * from './SidebarContext';
-export * from './SidebarItem';
-export * from './SidebarDelimeter';
-export * from './SidebarSection';

package/src/Core/Switch/Switch.tsx

@@ -1,71 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import { createComponent, createStyledComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
-import { styled } from 'styled-components';
-
-type SwitchProps = FabricComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
-
-export const Switch = createComponent<SwitchProps>(({ className, ...props }) => {
-  const spaceProps = destructSpaceProps(props);
-  return (
-    <StyledLabel className={className} {...spaceProps}>
-      <HiddenInput type="checkbox" {...props} />
-      <StyledSwitch />
-    </StyledLabel>
-  );
-});
-
-const StyledSwitch = styled.span(
-  ({ theme }) => `
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  width: ${pxToRem(41, theme.baseSize)};
-  height: ${pxToRem(21, theme.baseSize)};
-  border-radius: ${pxToRem(15, theme.baseSize)};
-  background-color: ${theme.switch.default.background};
-  &::before {
-    position: absolute;
-    display: block;
-    top: 50%;
-    transform: translateY(-50%);
-    height: ${pxToRem(15, theme.baseSize)};
-    width: ${pxToRem(15, theme.baseSize)};
-    border-radius: 50%;
-    background-color: ${theme.switch.default.color};
-    content: '';
-  }
-`
-);
-const HiddenInput = styled.input(
-  ({ theme }) => `
-  appearance: none;
-  border: none;
-  outline: none;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  top: 0;
-  left: 0;
-  &:not(:checked) + ${StyledSwitch}::before {
-    left: ${pxToRem(3, theme.baseSize)};
-  }
-  &:checked + ${StyledSwitch} {
-    background-color: ${theme.switch.checked.background};
-    &::before {
-      right: ${pxToRem(3, theme.baseSize)};
-    }
-  }
-  &:disabled + ${StyledSwitch} {
-    background-color: ${theme.switch.disabled.background};
-    cursor: not-allowed;
-  }
-`
-);
-
-const StyledLabel = createStyledComponent(
-  styled.label`
-    position: relative;
-    display: inline-block;
-  `
-);

package/src/Core/Switch/index.ts

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

package/src/Core/Table/Cell.tsx

@@ -1,42 +0,0 @@
-import { styled } from 'styled-components';
-
-export const HeadCell = styled.th(
-  ({ theme }) => `
-  padding-top: 15px;
-  padding-bottom: 10px;
-  padding-right: 15px;
-  :not(:first-of-type) {
-    padding-left: 15px;
-  }
-
-  border-bottom: 1px solid ${theme.colors.stroke.light};
-
-  font-family: ${theme.typography.fontFamily};
-  font-weight: 500;
-  font-size: 14px;
-  text-wrap: nowrap;
-  text-align: left;
-  line-height: 1.5;
-  color: ${theme.colors.text.main};
-`
-);
-
-export const Cell = styled.td(
-  ({ theme }) => `
-  padding-block: 15px;
-  padding-right: 15px;
-  :not(:first-of-type) {
-    padding-left: 15px;
-  }
-  border-bottom: 1px solid ${theme.colors.stroke.light};
-
-  vertical-align: middle;
-  font-family: ${theme.typography.fontFamily};
-  font-weight: 500;
-  font-size: 14px;
-  text-wrap: nowrap;
-  text-align: left;
-  line-height: 1.5;
-  color: ${theme.colors.text.main};
-`
-);

package/src/Core/Table/Row.tsx

@@ -1,3 +0,0 @@
-import { styled } from 'styled-components';
-
-export const Row = styled.tr``;