@cyber-harbour/ui 1.0.74 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -11,6 +11,13 @@
       "require": "./dist/index.js"
     }
   },
+  "bin": {
+    "switch-ui-lib": "./bin/switch-ui-lib.js"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
   "private": false,
   "scripts": {
     "dev": "tsup --config tsup.dev.config.ts",
@@ -20,7 +27,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish": "npm publish --access public"
+    "publish": "npm publish --access public",
+    "switch-ui-lib": "node ./bin/switch-ui-lib.js"
   },
   "keywords": [],
   "author": "",
@@ -29,7 +37,9 @@
   "dependencies": {
     "@types/react-dom": "^19.1.6",
     "d3": "^7.9.0",
+    "dotenv": "^16.6.1",
     "lodash.clonedeep": "^4.5.0",
+    "prompts": "^2.4.2",
     "react-content-loader": "^7.0.2",
     "react-force-graph-2d": "^1.27.1",
     "react-tiny-popover": "^8.1.6",

package/src/Core/Alert/Alert.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  FabricComponent,
-  StyledFabricComponent,
-  createComponent,
-  createStyledComponent,
-  generatePropertySpaceStyle,
-} from '../../Theme';
-import { AlertIcon } from '../IconComponents';
-
-type AlertProps = FabricComponent<{
-  title?: any;
-  note?: any;
-}> &
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
-
-export const Alert = createComponent<AlertProps>(({ title, note, ...props }) => {
-  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 = createStyledComponent(
-  styled.div<StyledFabricComponent>(
-    ({ 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

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

package/src/Core/Box/Box.tsx

@@ -1,46 +0,0 @@
-import {
-  ColorVariant,
-  createComponent,
-  createStyledComponent,
-  FabricComponent,
-  generatePropertySpaceStyle,
-  resolveThemeColor,
-  StyledFabricComponent,
-} from '../../Theme';
-import { styled } from 'styled-components';
-
-type BoxProps = {
-  children?: any;
-  element?: 'div' | 'section';
-  hasBorder?: boolean;
-  color?: ColorVariant | string;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-
-export const Box = createComponent<BoxProps>(
-  ({ children, element = 'div', hasBorder = true, color, ...props }): any => {
-    return (
-      <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
-        {children}
-      </StyledBox>
-    );
-  }
-);
-
-type StyledProps = { $hasBorder: boolean; $color?: string };
-
-const StyledBox = createStyledComponent(
-  styled('div')<StyledFabricComponent<StyledProps>>(
-    ({ theme, $hasBorder, $color, 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: ${$hasBorder ? theme.box.border.width : 0};
-      border-style: ${theme.box.border.style};
-      border-color: ${resolveThemeColor(theme, $color) || theme.box.border.color};
-  `
-  ),
-  {
-    ignoreStyles: ['padding-inline', 'padding-block'],
-  }
-);

package/src/Core/Box/index.ts

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

package/src/Core/Button/Button.tsx

@@ -1,208 +0,0 @@
-import React from 'react';
-import styled, { CSSProperties } from 'styled-components';
-import {
-  ButtonVariant,
-  ButtonSize,
-  ButtonColor,
-  getButtonStyles,
-  getButtonSizeStyles,
-  ButtonElementStyle,
-  createComponent,
-  generatePropertySpaceStyle,
-  createStyledComponent,
-  StyledFabricComponent,
-  pxToRem,
-} from '../../Theme';
-
-type BaseButtonProps = {
-  children?: any;
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  className?: string;
-  icon?: any;
-  iconPosition?: 'left' | 'right';
-  iconVariant?: 'filled' | 'empty';
-  minWidth?: number;
-  whiteSpace?: CSSProperties['whiteSpace'];
-};
-export type ButtonProps = (
-  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'>
-  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'media'>
-) &
-  BaseButtonProps;
-
-const getCss = (styles: ButtonElementStyle) => `
-    background: ${styles.background};
-    color: ${styles.text};
-    border-color: ${styles.border};
-    box-shadow: ${styles.boxShadow};
-  `;
-
-const getIconStyles = (styles: ButtonElementStyle) =>
-  styles.filledIcon
-    ? `
-    color: ${styles.filledIcon.color};
-    background: ${styles.filledIcon.background};
-  `
-    : '';
-
-// Створюємо стилізований компонент, що використовує уніфіковану палітру
-const ButtonTextContainer = styled.div<{ $whiteSpace: CSSProperties['whiteSpace'] }>(
-  ({ $whiteSpace }) => `
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: ${$whiteSpace};
-  user-select: text;
-`
-);
-
-const StyledIconWrapper = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-type StyledButtonProps = {
-  $variant: ButtonVariant;
-  $color: ButtonColor;
-  $size: ButtonSize;
-  $disabled: boolean;
-  $fullWidth: boolean;
-  $iconPosition: 'left' | 'right';
-  $iconVariant: 'filled' | 'empty';
-  $minWidth?: number;
-};
-
-const StyledButton = createStyledComponent(
-  styled.button<StyledFabricComponent<StyledButtonProps>>(
-    ({
-      $variant,
-      $color,
-      $size,
-      $disabled,
-      $fullWidth,
-      $iconPosition,
-      $iconVariant,
-      $minWidth,
-      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};
-      ${generatePropertySpaceStyle(theme, 'padding-block', py)};
-      ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
-      border-radius: ${sizes.borderRadius};
-      border-width: ${sizes.borderWidth};
-      border-style: solid;
-      max-width: 100%;
-      width: ${$fullWidth ? '100%' : 'auto'};
-      cursor: ${$disabled ? 'not-allowed' : 'pointer'};
-      font-weight: 500;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-      transition: all 0.2s ease;
-      outline: none;
-      user-select: text;
-      ${typeof $minWidth === 'number' ? `min-width: ${pxToRem($minWidth, theme.baseSize)};` : ''}
-
-      ${$iconPosition === 'right' ? 'flex-direction: row-reverse;' : ''}
-
-      &:hover {
-        ${getCss(getButtonStyles(theme, $variant, $color, 'hover'))}
-      }
-
-      &:active {
-        ${getCss(getButtonStyles(theme, $variant, $color, 'active'))}
-      }
-
-      &:disabled {
-        ${getCss(getButtonStyles(theme, $variant, $color, 'disabled'))}
-      }
-
-      ${StyledIconWrapper} svg {
-        width: ${sizes.iconSize};
-        height: ${sizes.iconSize};
-      }
-
-        ${
-          $iconVariant === 'filled'
-            ? `
-             ${StyledIconWrapper} {
-                width: 24px;
-                height: 24px;
-                border-radius: ${sizes.borderRadius};
-                transition: all 0.2s ease;
-                ${getIconStyles(getButtonStyles(theme, $variant, $color, 'default'))}
-              }
-              &:hover {
-                ${StyledIconWrapper} {
-                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'hover'))}
-                }
-              }
-
-              &:active {
-                ${StyledIconWrapper} {
-                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'active'))}
-                }
-              }
-
-               &:disabled {
-                ${StyledIconWrapper} {
-                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'disabled'))}
-                }
-              }
-            `
-            : ``
-        }
-    `;
-    }
-  )
-);
-
-export const Button = createComponent<ButtonProps>(
-  ({
-    children,
-    variant = 'fill',
-    color = 'primary',
-    size = 'medium',
-    disabled = false,
-    fullWidth = false,
-    className,
-    icon,
-    iconPosition = 'left',
-    iconVariant = 'empty',
-    whiteSpace = 'nowrap',
-    minWidth,
-    ...props
-  }) => {
-    return (
-      // @ts-ignore
-      <StyledButton
-        as={'href' in props ? 'a' : 'button'}
-        $variant={variant}
-        $color={color}
-        $size={size}
-        $disabled={disabled}
-        $fullWidth={fullWidth}
-        $iconPosition={iconPosition}
-        $iconVariant={iconVariant}
-        $minWidth={minWidth}
-        disabled={disabled}
-        className={className}
-        {...props}
-      >
-        {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
-        {!!children && <ButtonTextContainer $whiteSpace={whiteSpace}>{children}</ButtonTextContainer>}
-      </StyledButton>
-    );
-  }
-);

package/src/Core/Button/index.ts

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

package/src/Core/Checkbox/Checkbox.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { createComponent, createStyledComponent, destructSpaceProps, pxToRem } from '../../Theme';
-
-type CheckboxProps = {
-  label?: any;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
-
-export const Checkbox = createComponent<CheckboxProps>(({ label, className, disabled, ...props }) => {
-  const spaceProps = destructSpaceProps(props);
-  return (
-    <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
-      <HiddenInput type="checkbox" disabled={disabled} {...props} />
-      <CustomCheckbox />
-      {!!label && <LabelText>{label}</LabelText>}
-    </StyledCheckbox>
-  );
-});
-
-const CustomCheckbox = styled.div(
-  ({ theme }) => `
-    width: ${pxToRem(15)};
-    height: ${pxToRem(15)};
-    border-radius: ${pxToRem(2)};
-    border: 1px solid ${theme.colors.stroke.main};
-    background-color: ${theme.colors.background};
-    transition: all 0.2s ease;
-  `
-);
-
-const LabelText = styled.span(
-  ({ theme }) => `
-  margin-left: ${pxToRem(5)};
-  font-size: ${theme.typography.variants.h3.fontSize};
-  color: ${theme.colors.text.main};
-`
-);
-
-const HiddenInput = styled.input`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-`;
-
-const StyledCheckbox = createStyledComponent(
-  styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
-    return `
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: ${$disabled ? 'not-allowed' : 'pointer'};
-
-    &:hover {
-        ${HiddenInput}:not(:disabled) + ${CustomCheckbox} {
-          border-color: ${theme.colors.primary.main};
-        }
-    }
-
-    ${HiddenInput}:checked + ${CustomCheckbox} {
-        background-color: ${theme.colors.primary.main};
-        border-color: ${theme.colors.primary.main};
-    }
-    ${HiddenInput}:disabled + ${CustomCheckbox} {
-        background-color: ${theme.colors.disable};
-    }
-    `;
-  })
-);

package/src/Core/Checkbox/index.ts

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

package/src/Core/ContentLoader/ContentLoader.tsx

@@ -1,13 +0,0 @@
-import ReactContentLoader, { IContentLoaderProps } from 'react-content-loader';
-import { useTheme } from 'styled-components';
-
-export interface ContentLoaderProps extends Omit<IContentLoaderProps, 'backgroundColor' | 'foregroundColor'> {
-  children?: any;
-}
-
-export const ContentLoader = (props: ContentLoaderProps) => {
-  const {
-    contentLoader: { foreground, background },
-  } = useTheme();
-  return <ReactContentLoader {...props} backgroundColor={background} foregroundColor={foreground} />;
-};

package/src/Core/ContentLoader/index.ts

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

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -1,153 +0,0 @@
-import { ButtonSize, getButtonSizeStyles } from '../../Theme';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { styled, useTheme } from 'styled-components';
-import { ChevronDownIcon, ChevronUpIcon } from '../IconComponents';
-
-interface ContextMenuProps {
-  isOpen: boolean;
-  onClick: () => void;
-  onClickOutside: (e: MouseEvent) => void;
-  size?: ButtonSize;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  className?: string;
-  children?: any;
-  anchor?: any;
-  positions?: PopoverPosition[] | PopoverPosition;
-  align?: PopoverAlign;
-  hasBorder?: boolean;
-  maxHeight?: number;
-  matchAnchorWidth?: boolean;
-  anchorIcon?: any;
-}
-
-export const ContextMenu = ({
-  isOpen,
-  onClickOutside,
-  onClick,
-  anchor,
-  size = 'medium',
-  disabled,
-  fullWidth,
-  className,
-  positions = ['bottom'],
-  align = 'start',
-  children,
-  hasBorder = true,
-  maxHeight = 500,
-  matchAnchorWidth = false,
-  anchorIcon,
-}: ContextMenuProps) => {
-  const [anchorWidth, setAnchorWidth] = useState<number>(0);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-
-  const theme = useTheme();
-  useLayoutEffect(() => {
-    if (buttonRef.current) {
-      setAnchorWidth(buttonRef.current.offsetWidth);
-    }
-  }, [matchAnchorWidth]);
-
-  return (
-    <Popover
-      padding={theme.contextMenu.padding}
-      isOpen={isOpen}
-      positions={positions}
-      align={align}
-      onClickOutside={onClickOutside}
-      content={children}
-      ref={buttonRef}
-      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',
-        overflow: 'auto',
-        maxHeight: `${maxHeight}px`,
-        zIndex: `${9999}`,
-        width: anchorWidth && matchAnchorWidth ? `${anchorWidth}px` : undefined,
-      }}
-      containerClassName="cb-ui-context-menu"
-    >
-      <StyledButton
-        onClick={onClick}
-        $disabled={disabled}
-        $fullWidth={fullWidth}
-        $size={size}
-        className={className}
-        type="button"
-        disabled={disabled}
-        $hasBorder={hasBorder}
-      >
-        <StyledAnchor>{anchor}</StyledAnchor>
-        {anchorIcon ||
-          (isOpen ? (
-            <ChevronUpIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
-          ) : (
-            <ChevronDownIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
-          ))}
-      </StyledButton>
-    </Popover>
-  );
-};
-const StyledAnchor = styled.div`
-  flex-grow: 1;
-  text-align: start;
-`;
-// Створюємо стилізований компонент, що використовує уніфіковану палітру
-const StyledButton = styled.button<{
-  $size: ButtonSize;
-  $disabled?: boolean;
-  $fullWidth?: boolean;
-  $hasBorder: boolean;
-}>`
-  ${({ $size, $disabled, $fullWidth, theme, $hasBorder }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
-        background: ${theme.contextMenu.button.default.background};
-        color: ${theme.contextMenu.button.default.text};
-        border-color: ${$hasBorder ? theme.contextMenu.button.default.border : 'transparent'};
-        box-shadow: ${theme.contextMenu.button.default.boxShadow};
-        font-size: ${sizes.fontSize};
-        gap: ${sizes.gap};
-        padding-block: ${sizes.paddingBlock};
-        padding-inline: ${sizes.paddingInline};
-        border-radius: ${sizes.borderRadius};
-        border-width: ${sizes.borderWidth};
-        border-style: solid;
-        width: ${$fullWidth ? '100%' : 'auto'};
-        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
-        font-weight: 500;
-        display: inline-flex;
-        align-items: center;
-        justify-content: ${$fullWidth ? 'space-between' : 'center'};
-        text-decoration: none;
-        transition: all 0.2s ease;
-        outline: none;
-        flex-direction: row;
-
-        &:hover {
-          background: ${theme.contextMenu.button.hover.background};
-          color: ${theme.contextMenu.button.hover.text};
-          border-color: ${$hasBorder ? theme.contextMenu.button.hover.border : 'transparent'};
-          box-shadow: ${theme.contextMenu.button.hover.boxShadow};
-        }
-
-        &:active {
-          background: ${theme.contextMenu.button.active.background};
-          color: ${theme.contextMenu.button.active.text};
-          border-color: ${$hasBorder ? theme.contextMenu.button.active.border : 'transparent'};
-          box-shadow: ${theme.contextMenu.button.active.boxShadow};
-        }
-
-        &:disabled {
-          background: ${theme.contextMenu.button.disabled.background};
-          color: ${theme.contextMenu.button.disabled.text};
-          border-color: ${$hasBorder ? theme.contextMenu.button.disabled.border : 'transparent'};
-          box-shadow: ${theme.contextMenu.button.disabled.boxShadow};
-        }
-
-    `;
-  }}
-`;

package/src/Core/ContextMenu/ContextMenuDelimiter.tsx

@@ -1,13 +0,0 @@
-import { styled } from 'styled-components';
-
-interface StyledProps {}
-
-export const ContextMenuDelimiter = styled.div<StyledProps>(
-  ({ theme }) => `
-    margin-inline: ${theme.contextMenu.delimeter.marginInline};
-    margin-block: ${theme.contextMenu.delimeter.marginBlock};
-    border-top-width: ${theme.contextMenu.delimeter.thickness};
-    border-top-style: ${theme.contextMenu.delimeter.style};
-    border-top-color: ${theme.contextMenu.delimeter.color};
-  `
-);

package/src/Core/ContextMenu/index.ts

@@ -1,3 +0,0 @@
-export * from './ContextMenu';
-export * from './ContextMenuDelimiter';
-export * from './useContextMenuControl';

package/src/Core/ContextMenu/useContextMenuControl.ts

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-
-export const useContextMenuControl = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen((prev) => !prev);
-  };
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
-  const openMenu = () => {
-    setIsOpen(true);
-  };
-  return {
-    isOpen,
-    toggleMenu,
-    closeMenu,
-    openMenu,
-  };
-};