@cyber-harbour/ui 1.0.74 → 1.0.76

package/src/Core/IconComponents/WayIcon.tsx

@@ -1,24 +0,0 @@
-import { SVGProps } from 'react';
-
-interface WayIconProps extends SVGProps<SVGSVGElement> {
-  fill?: string;
-}
-
-export const WayIcon = ({ fill = 'currentColor', ...props }: WayIconProps) => {
-  return (
-    <svg viewBox="0 0 35 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M25.226 7.83626C27.0276 7.66984 28.707 9.06174 28.707 10.8924C28.707 12.0876 27.3787 14.0847 26.6917 15.0832C26.478 15.3858 26.1116 15.9759 25.8673 16.2179C25.6993 16.3995 25.4551 16.4298 25.2566 16.2482C25.0428 16.0515 24.6306 15.3858 24.4321 15.1135C23.7756 14.1603 22.5084 12.254 22.4168 11.1345C22.2794 9.48536 23.5619 8.00268 25.2108 7.85139L25.226 7.83626ZM25.3634 9.65179C23.7909 9.8636 23.913 12.2994 25.5925 12.254C27.4093 12.2087 27.2108 9.40972 25.3634 9.65179Z"
-        fill={fill}
-      />
-      <path
-        d="M12.7511 10.0087L13.5756 9.35818L13.6825 9.32792C15.3771 9.35818 16.9802 9.14636 18.2474 9.91796C20.0184 10.9921 18.7818 12.8228 16.1863 12.9438C14.2168 13.0346 12.0488 12.8682 10.0641 12.9438C6.75104 13.0649 6.68997 15.6217 9.9114 15.8336H23.3925L24.278 16.4992H9.56025C8.82741 16.4992 7.66709 16.0756 7.20907 15.773C5.20903 14.4719 6.73578 12.3235 9.81979 12.1874C11.7893 12.1117 13.9725 12.2781 15.942 12.1874C17.7589 12.1117 18.4459 10.8711 17.0718 10.2357C16.8733 10.1449 16.339 9.99361 16.0947 9.99361H12.7664L12.7511 10.0087Z"
-        fill={fill}
-      />
-      <path
-        d="M9.63714 0.526254C12.3242 0.223666 14.4769 2.58385 13.6372 5.17098C13.0418 7.00163 11.5914 8.74151 10.5226 10.3301C10.37 10.4663 10.1257 10.4814 9.94249 10.4057C9.75928 10.3301 9.14858 9.4072 8.98064 9.18026C8.07986 7.9094 6.36991 5.36766 6.49205 3.80933C6.61419 2.251 8.03406 0.692677 9.63714 0.526254ZM10.141 2.59898C7.97299 2.70489 8.38521 6.24516 10.599 5.63999C12.3242 5.17098 12.0341 2.5082 10.141 2.59898Z"
-        fill={fill}
-      />
-    </svg>
-  );
-};

package/src/Core/IconComponents/index.ts

@@ -1,66 +0,0 @@
-export { AlertIcon } from './AlertIcon';
-export { ApiIcon } from './ApiIcon';
-export { ArrowCircleTopRightIcon } from './ArrowCircleTopRightIcon';
-export { ArrowRightIcon } from './ArrowRightIcon';
-export { BugReportIcon } from './BugReportIcon';
-export { CalendarIcon } from './CalendarIcon';
-export { ChevronLeftIcon } from './ChevronLeftIcon';
-export { ChevronRightIcon } from './ChevronRightIcon';
-export { CloseCircleIcon } from './CloseCircleIcon';
-export { ClosedLockIcon } from './ClosedLockIcon';
-export { DataSetsIcon } from './DataSetsIcon';
-export { DeepSearchIcon } from './DeepSearchIcon';
-export { DisabledVisibleIcon } from './DisabledVisibleIcon';
-export { DocsIcon } from './DocsIcon';
-export { DownloadIcon } from './DownloadIcon';
-export { EditUserIcon } from './EditUserIcon';
-export { EnableVisibleIcon } from './EnableVisibleIcon';
-export { EnterArrowLeftIcon } from './EnterArrowLeftIcon';
-export { FiltersIcon } from './FiltersIcon';
-export { HomepageIcon } from './HomepageIcon';
-export { InfoCircleIcon } from './InfoCircleIcon';
-export { MapRadarIcon } from './MapRadarIcon';
-export { MoonIcon } from './MoonIcon';
-export { OpenLockIcon } from './OpenLockIcon';
-export { OrganizationIcon } from './OrganizationIcon';
-export { PasswordFinderIcon } from './PasswordFinderIcon';
-export { PhonebookIcon } from './PhonebookIcon';
-export { PrintIcon } from './PrintIcon';
-export { Profiler2Icon } from './Profiler2Icon';
-export { ProfilerIcon } from './ProfilerIcon';
-export { SandBoxIcon } from './SandBoxIcon';
-export { SearchIcon } from './SearchIcon';
-export { StatisticIcon } from './StatisticIcon';
-export { SunIcon } from './SunIcon';
-export { UpRightArrowCircleIcon } from './UpRightArrowCircleIcon';
-export { VectorIcon } from './VectorIcon';
-export { BallsMenu } from './BallsMenu';
-export { CheckIcon } from './Check';
-export { ChevronDownIcon } from './ChevronDown';
-export { ChevronUpIcon } from './ChevronUp';
-export { PlusIcon } from './Plus';
-export { UsersIcon } from './Users';
-export { InfoCircleFilledIcon } from './InfoCircleFilled';
-export { UnfoldIcon } from './Unfold';
-export { CrossIcon } from './Cross';
-export { MaximizeIcon } from './MaximizeIcon';
-export { BusIcon } from './BusIcon';
-export { CarIcon } from './CarIcon';
-export { WayIcon } from './WayIcon';
-export { PlaneIcon } from './PlaneIcon';
-export { ShipIcon } from './ShipIcon';
-export { FileIcon } from './FileIcon';
-export { IosIcon } from './IosIcon';
-export { AndroidIcon } from './AndroidIcon';
-export { MicrosoftIcon } from './MicrosoftIcon';
-export { FolderAlertIcon } from './FolderAlertIcon';
-export { RelationIcon } from './RelationIcon';
-export { RelationPointsIcon } from './RelationPointsIcon';
-export { PassportIcon } from './PassportIcon';
-export { PointIcon } from './PointIcon';
-export { PencilIcon } from './PencilIcon';
-export { UserInCircleIcon } from './UserInCircle';
-export { FlashIcon } from './FlashIcon';
-export { FolderInfoIcon } from './FolderInfoIcon';
-export { RotateLeftIcon } from './RotateLeftIcon';
-export { RotateRightIcon } from './RotateRightIcon';

package/src/Core/Input/Input.tsx

@@ -1,245 +0,0 @@
-import { InputSize, InputVariant, remToPx } from '../../Theme';
-import { forwardRef, InputHTMLAttributes, Ref, TextareaHTMLAttributes, useEffect, useRef, useState } from 'react';
-import { styled, useTheme } from 'styled-components';
-import { InfoCircleFilledIcon } from '../IconComponents';
-
-type BaseInputProps = {
-  error?: boolean;
-  append?: any;
-  prepend?: any;
-  size?: InputSize;
-  variant?: InputVariant;
-};
-
-export type InputElementProps = BaseInputProps &
-  InputHTMLAttributes<HTMLInputElement> & {
-    multiline?: false;
-  };
-export type TextAreaElementProps = BaseInputProps &
-  TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    multiline: true;
-    autoResize?: boolean;
-  };
-export type InputProps = InputElementProps | TextAreaElementProps;
-
-type TextAreaInputProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  size?: InputSize;
-  autoResize?: boolean;
-};
-
-type InputRefElement<T> = T extends true ? HTMLTextAreaElement : HTMLInputElement | null;
-
-export const Input: any = forwardRef<InputRefElement<InputProps['multiline']>, InputProps>(function Input(
-  { error, append, prepend, size = 'small', variant = 'outlined', multiline, disabled, className, ...props },
-  ref
-) {
-  return (
-    <Group
-      $align={multiline ? 'flex-start' : 'center'}
-      className={className}
-      $error={error}
-      $size={size}
-      $variant={variant}
-      $disabled={!!disabled}
-      $multiline={multiline}
-    >
-      {!!prepend && prepend}
-      <InputGroup $size={size} $variant={variant}>
-        {multiline ? (
-          <TextAreaInput
-            size={size}
-            disabled={disabled}
-            {...(props as TextAreaElementProps)}
-            ref={ref as Ref<InputRefElement<true>>}
-          />
-        ) : (
-          <StyledInput disabled={disabled} {...(props as InputElementProps)} ref={ref as Ref<InputRefElement<false>>} />
-        )}
-        {!!error && (
-          <IconWrapper $variant={variant}>
-            <InfoCircleFilledIcon />
-          </IconWrapper>
-        )}
-      </InputGroup>
-      {!!append && append}
-    </Group>
-  );
-});
-
-const TextAreaInput = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(function Input(
-  { size = 'small', disabled, className, rows = '1', autoResize = false, ...props },
-  ref
-) {
-  const [areaSize, setAreaSize] = useState(Number(rows));
-  const rowsRef = useRef(Number(rows));
-  const divRef = useRef<HTMLDivElement>(null);
-  const theme = useTheme();
-  const rowHeight = useRef(remToPx(theme.input.sizes[size].lineHeight, theme.baseSize) || theme.baseSize);
-
-  useEffect(() => {
-    if (divRef.current && autoResize) {
-      const height = divRef.current.getBoundingClientRect().height;
-      const areaSize = Math.round(height / rowHeight.current);
-      if (rowsRef.current !== areaSize) {
-        rowsRef.current = areaSize;
-        setAreaSize(areaSize);
-      }
-    }
-  }, [props.value]);
-
-  return (
-    <div style={{ position: 'relative', width: '100%' }}>
-      <StyledTextarea disabled={disabled} $autoResize={autoResize} {...props} rows={areaSize} ref={ref} />
-      <SizeContainer
-        ref={divRef}
-        $size={size}
-        style={{
-          minHeight: rowHeight.current * Number(rows),
-        }}
-      >
-        {(props.value || '') + '\u200B'}
-      </SizeContainer>
-    </div>
-  );
-});
-
-type StyledInputProps = { $size: InputSize; $variant: InputVariant };
-type StyledGroupProps = StyledInputProps & {
-  $align: 'flex-start' | 'center';
-  $disabled: boolean;
-  $error?: boolean;
-  $multiline?: boolean;
-};
-
-const StyledTextarea = styled.textarea<{ $autoResize: boolean }>(
-  ({ $autoResize }) => `
-  resize: none;
-  margin: 0;
-  display: block;
-  ${$autoResize ? 'overflow: hidden;' : ''}
-`
-);
-
-const StyledInput = styled.input``;
-
-const InputGroup = styled.div<StyledInputProps>(
-  ({ theme, $size, $variant }) => `
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  color: currentColor;
-
-  svg {
-    width: ${theme.input.sizes[$size].iconSize};
-    height: ${theme.input.sizes[$size].iconSize};
-  }
-
-  &  ${StyledInput}, & ${StyledTextarea}{
-    font-size: ${theme.input.sizes[$size].fontSize};
-    color: inherit;
-    background: transparent;
-    padding-block: ${theme.input.sizes[$size].paddingBlock};
-    padding-inline: ${theme.input.sizes[$size].paddingInline};
-    position: relative;
-    width: 100%;
-    outline: none;
-    border: none;
-
-    &::placeholder {
-      color: ${theme.input[$variant].default.placeholder};
-      font-size: ${theme.input.sizes[$size].fontSize};
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      color: inherit;
-    }
-
-    &:focus, &:focus-visible, &:focus:focus-visible {
-      outline: none;
-    }
-  }
-`
-);
-
-const SizeContainer = styled.div<{ $size: InputSize }>(
-  ({ theme, $size }) => `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: auto;
-  opacity: 0;
-  z-index: -1;
-  pointer-events: none;
-  padding-inline: ${theme.input.sizes[$size].paddingInline};
-  font-size: ${theme.input.sizes[$size].fontSize};
-  line-height: ${theme.input.sizes[$size].lineHeight};
-  word-break: break-word;
-  white-space: pre-wrap;
-`
-);
-
-const IconWrapper = styled.span<{ $variant: InputVariant }>(
-  ({ theme, $variant }) => `
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  color: ${theme.input[$variant].error.icon};
-  margin-right: 10px;
-
-`
-);
-
-const Group = styled.div<StyledGroupProps>(
-  ({ theme, $align = 'center', $disabled, $error, $size, $variant, $multiline }) => `
-  display: inline-flex;
-  align-items: ${$align};
-  width: 100%;
-  border: 1px solid;
-  border-radius: ${theme.input.sizes[$size].borderRadius};
-  height: ${$multiline ? 'auto' : theme.input.sizes[$size].height};
-  overflow: hidden;
-  transition: all 0.2s ease;
-
-  ${
-    $error
-      ? `
-      border-color: ${theme.input[$variant].error.border};
-      color: ${theme.input[$variant].error.text};
-      background: ${theme.input[$variant].error.background};
-      `
-      : `
-      border-color: ${theme.input[$variant].default.border};
-      color: ${theme.input[$variant].default.text};
-      background: ${theme.input[$variant].default.background};
-      `
-  }
-
-  ${
-    !$disabled &&
-    !$error &&
-    `
-    &:hover {
-      border-color: ${theme.input[$variant].focus.border};
-    }
-
-    &:focus-within {
-      border-color: ${theme.input[$variant].focus.border};
-      color: ${theme.input[$variant].focus.text};
-      background: ${theme.input[$variant].focus.background};
-    }
-    `
-  }
-
-  ${
-    $disabled &&
-    `
-    border-color: ${theme.input[$variant].disabled.border};
-    color: ${theme.input[$variant].disabled.text};
-    background: ${theme.input[$variant].disabled.background};
-    cursor: not-allowed;
-    `
-  }
-`
-);

package/src/Core/Input/index.ts

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

package/src/Core/Label/Label.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  FabricComponent,
-  LabelSize,
-  createComponent,
-  createStyledComponent,
-  generatePropertySpaceStyle,
-  propToRem,
-} from '../../Theme';
-
-type LabelProps = FabricComponent<{
-  label?: any;
-  helpText?: any;
-  errorText?: string;
-  size?: LabelSize;
-  children: any;
-  fullWidth?: boolean;
-}> &
-  Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
-  (LabelDirection | LabelDirectionRaw);
-
-type LabelDirectionRaw = {
-  direction?: 'row' | 'row-reverse';
-  childrenWidth?: number | string;
-};
-
-type LabelDirection = {
-  direction?: Omit<React.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
-};
-
-export const Label = createComponent<LabelProps>(
-  ({ label, helpText, children, direction = 'column', size = 'small', errorText, fullWidth, ...props }) => {
-    const $isRow = direction === 'row' || direction === 'row-reverse';
-    const $width = $isRow ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
-
-    return (
-      <StyledLabel $size={size} $direction={direction} $fullWidth={fullWidth} $isRow={$isRow} {...props}>
-        {Boolean(label || helpText) && (
-          <LabelWrapper $width={$width}>
-            {!!label && <LabelText $size={size}>{label}</LabelText>}
-            {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
-          </LabelWrapper>
-        )}
-        <Wrapper $width={$width}>
-          {children}
-          {!!errorText && <ErrorText $size={size}>{errorText}</ErrorText>}
-        </Wrapper>
-      </StyledLabel>
-    );
-  }
-);
-
-type StyledProps = {
-  $size: LabelSize;
-  $direction?: LabelDirection['direction'] | LabelDirectionRaw['direction'];
-  $fullWidth?: boolean;
-  $isRow: boolean;
-  children?: any;
-};
-
-type WrapperProps = { $width: number | string };
-type TextProps = { $size: LabelSize };
-
-const Wrapper = styled.div<WrapperProps>(
-  ({ theme, $width }) => `
-  flex-basis: 100%;
-  @media (min-width: ${theme.breakpoints.m}px) {
-    flex-basis: ${propToRem($width, theme.baseSize)};
-  }
-  `
-);
-
-const LabelWrapper = styled(Wrapper)<WrapperProps>`
-  align-self: flex-start;
-`;
-
-const LabelText = styled.div<TextProps>(
-  ({ theme, $size }) => `
-  line-height: 1.2;
-  font-weight: 500;
-  font-size: ${theme.label.sizes[$size].fontSize};
-  color: ${theme.label.color};
-  cursor: pointer;
-  :hover {
-    color: ${theme.colors.primary.main};
-  }
-
-`
-);
-
-const HelpText = styled.div<TextProps>(
-  ({ theme, $size }) => `
-  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
-  word-break: break-word;
-  line-height: 1.2;
-  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
-  color: ${theme.label.helpTextColor};
-`
-);
-const ErrorText = styled.div<TextProps>(
-  ({ theme, $size }) => `
-  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
-  word-break: break-word;
-  line-height: 1.2;
-  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
-  color: ${theme.colors.error};
-`
-);
-
-const StyledLabel = createStyledComponent<FabricComponent<StyledProps>>(
-  styled.label(
-    ({
-      theme,
-      $direction = 'column',
-      $isRow,
-      $size,
-      $fullWidth = false,
-      mb = theme.label.sizes[$size].marginBottom,
-    }) => {
-      return `
-        display: inline-flex;
-        justify-content: space-between;
-        ${$fullWidth ? 'width: 100%;' : ''}
-        min-width: 0;
-        flex-direction: column;
-
-        @media (min-width: ${theme.breakpoints.m}px) {
-          flex-direction: ${$direction};
-          align-items:  ${$isRow ? 'center' : 'stretch'};
-        }
-
-        gap: ${theme.label.sizes[$size].gap};
-        ${generatePropertySpaceStyle(theme, 'margin-bottom', mb)};
-      `;
-    }
-  ),
-  { ignoreStyles: ['margin-bottom'] }
-);

package/src/Core/Label/index.ts

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

package/src/Core/Line/Line.tsx

@@ -1,26 +0,0 @@
-import { createComponent, createStyledComponent, FabricComponent, StyledFabricComponent } from '../../Theme';
-import { styled } from 'styled-components';
-
-type LineProps = FabricComponent<
-  {
-    direction?: 'horizontal' | 'vertical';
-  } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
->;
-
-export const Line = createComponent<LineProps>(({ direction = 'horizontal', ...props }) => {
-  return <StyledLine {...props} $direction={direction} />;
-});
-
-interface StyledLineProps {
-  $direction: 'horizontal' | 'vertical';
-}
-
-const StyledLine = createStyledComponent<StyledFabricComponent<StyledLineProps>>(
-  styled.div(
-    ({ theme, $direction }) => `
-    width: ${$direction === 'horizontal' ? '100%' : theme.line.size};
-    height: ${$direction === 'vertical' ? '100%' : theme.line.size};
-    background-color: ${theme.line.color};
-`
-  )
-);

package/src/Core/Line/index.ts

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

package/src/Core/LinerProgress/LinerProgress.tsx

@@ -1,47 +0,0 @@
-import { createComponent, createStyledComponent, propToRem, pxToRem, StyledFabricComponent } from '../../Theme';
-import { styled } from 'styled-components';
-
-type Direction = 'horizontal' | 'vertical';
-
-type LinerProgressProps = {
-  height?: number;
-  width?: string | number;
-  direction?: Direction;
-  value: number;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>;
-
-export const LinerProgress = createComponent<LinerProgressProps>(
-  ({ height = 21, width = '100%', direction = 'horizontal', value, ...props }: LinerProgressProps) => {
-    return <StyledLine {...props} $height={height} $value={value} $width={width} $direction={direction} />;
-  }
-);
-
-interface StyledLineProps {
-  $height: number;
-  $value: number;
-  $width: string | number;
-  $direction: Direction;
-}
-
-const StyledLine = createStyledComponent<StyledFabricComponent<StyledLineProps>>(
-  styled.div(
-    ({ theme, $height, $value, $width, $direction }) => `
-     width: ${propToRem($width, theme.baseSize)};
-     height: ${propToRem($height, theme.baseSize)};
-     background-color: ${theme.leanerProgress.background};
-     position: relative;
-     overflow: hidden;
-     border-radius: ${pxToRem(2, theme.baseSize)};
-     &::after {
-       position: absolute;
-       content: '';
-       left: 0;
-       bottom: 0;
-       width: ${$direction === 'horizontal' ? `${$value}%` : propToRem($width, theme.baseSize)};
-       height: ${$direction === 'horizontal' ? '100%' : `${$value}%`};
-       background-color: ${theme.leanerProgress.progressColor};
-       border-radius: ${pxToRem(2, theme.baseSize)};
-     }
-`
-  )
-);

package/src/Core/LinerProgress/index.ts

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

package/src/Core/ListMenu/ListMenu.tsx

@@ -1,31 +0,0 @@
-import { ReactNode } from 'react';
-import { styled } from 'styled-components';
-
-export interface ListMenuProps {
-  children: any;
-  width?: number;
-}
-
-type StyledListProps = {
-  $width: number;
-};
-export const ListMenu = ({ children, width = 220 }: ListMenuProps) => {
-  return <StyledList $width={width}>{children}</StyledList>;
-};
-
-const StyledList = styled.ul<StyledListProps>(
-  ({ theme, $width }) => `
-      margin: 0;
-      padding: 20px;
-      width: ${$width}px;
-      list-style: none;
-      height: 100%;
-      overflow-y: auto;
-      background-color: ${theme.colors.background};
-      border-right: 1px solid ${theme.colors.stroke.light};
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: 40px;
-  `
-);