@cyber-harbour/ui 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -43,6 +43,15 @@ export const ContextMenu = ({
       align={align}
       onClickOutside={onClickOutside}
       content={children}
+      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: '500px',
+        zIndex: `${9999}`,
+      }}
     >
       <StyledButton
         ref={buttonRef}
@@ -51,6 +60,8 @@ export const ContextMenu = ({
         $fullWidth={fullWidth}
         $size={size}
         className={className}
+        type="button"
+        disabled={disabled}
       >
         <div>{anchor}</div>
         {isOpen ? (
@@ -88,7 +99,7 @@ const StyledButton = styled.button<{
         font-weight: 500;
         display: inline-flex;
         align-items: center;
-        justify-content: center;
+        justify-content: ${$fullWidth ? 'space-between' : 'center'};
         text-decoration: none;
         transition: all 0.2s ease;
         outline: none;
@@ -118,5 +129,3 @@ const StyledButton = styled.button<{
     `;
   }}
 `;
-
-const StyledContainer = styled.div``;

package/src/Core/IconComponents/Plus.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+interface PrintIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const PlusIcon = ({ fill = 'currentColor', ...props }: PrintIconProps) => {
+  return (
+    <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.21053 5.78952H0.789474C0.357895 5.78952 0 5.43162 0 5.00005C0 4.56847 0.357895 4.21057 0.789474 4.21057H9.21053C9.64211 4.21057 10 4.56847 10 5.00005C10 5.43162 9.64211 5.78952 9.21053 5.78952Z"
+        fill={fill}
+      />
+      <path
+        d="M5.00041 10C4.56883 10 4.21094 9.64211 4.21094 9.21053V0.789474C4.21094 0.357895 4.56883 0 5.00041 0C5.43199 0 5.78988 0.357895 5.78988 0.789474V9.21053C5.78988 9.64211 5.43199 10 5.00041 10Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -36,3 +36,4 @@ export { BallsMenu } from './BallsMenu';
 export { CheckIcon } from './Check';
 export { ChevronDownIcon } from './ChevronDown';
 export { ChevronUpIcon } from './ChevronUp';
+export { PlusIcon } from './Plus';

package/src/Core/Select/Select.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useState } from 'react';
+import { PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { ContextMenu } from '../ContextMenu';
+import { ButtonSize, getButtonSizeStyles } from '@/Theme';
+import { styled } from 'styled-components';
+
+interface SelectProps<T extends string | number> {
+  selected?: T;
+  options: { value: T; inputDisplay?: string }[];
+  handleSelect: (id: T) => void;
+  placeholder: string;
+  disabled?: boolean;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+  size?: ButtonSize;
+}
+
+export const Select = <T extends string | number>({
+  options,
+  selected,
+  handleSelect,
+  placeholder,
+  disabled = false,
+  positions = ['bottom'],
+  align = 'start',
+  size = 'small',
+}: SelectProps<T>) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const handleToggle = useCallback(() => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  }, []);
+
+  return (
+    <ContextMenu
+      isOpen={isOpen}
+      onClickOutside={() => setIsOpen(false)}
+      onClick={handleToggle}
+      disabled={disabled}
+      anchor={!selected ? placeholder : options.find((option) => option.value === selected)?.inputDisplay || selected}
+      fullWidth
+      positions={positions}
+      align={align}
+      size={size}
+    >
+      <StyledWrapper>
+        {options.map((item) => (
+          <StyledItem
+            onClick={() => {
+              handleSelect(item.value);
+              setIsOpen(false);
+            }}
+            type="button"
+            $selected={item.value === selected}
+            key={item.value}
+            disabled={disabled}
+            $size={size}
+          >
+            {item.inputDisplay || item.value}
+          </StyledItem>
+        ))}
+      </StyledWrapper>
+    </ContextMenu>
+  );
+};
+
+const StyledWrapper = styled.div`
+  padding-block: 7px;
+  padding-inline: 5px;
+  button:not(:last-of-type) {
+    margin-bottom: 4px;
+  }
+`;
+
+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: ${sizes.paddingBlock};
+        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;
+        }
+    `;
+  }}
+`;

package/src/Core/Select/index.ts

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

package/src/Core/index.ts

@@ -7,3 +7,4 @@ export * from './Header';
 export * from './Table';
 export * from './Pagination';
 export * from './ContextMenu';
+export * from './Select';

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -12,7 +12,7 @@ export const PageLayout = ({ children, header, sidebar }: PageLayoutProps) => {
     <StyledContainer $withHeader={!!header} $withSidebar={!!sidebar}>
       {header}
       {sidebar}
-      <main>{children}</main>
+      <StyledMain>{children}</StyledMain>
     </StyledContainer>
   );
 };
@@ -53,3 +53,7 @@ export const StyledContainer = styled.div<StyledContainerProps>(
   }
 `
 );
+
+const StyledMain = styled.main`
+  min-width: 0;
+`;

package/src/Theme/theme.ts

@@ -497,7 +497,7 @@ export const lightThemePx: Theme = {
         boxShadow: 'none',
       },
       disabled: {
-        background: '#EBEBEB',
+        background: '#FAFAFA',
         text: '#99989C',
         border: ' #EBEBEB',
         boxShadow: 'none',
@@ -516,6 +516,35 @@ export const lightThemePx: Theme = {
       size: 7,
     },
   },
+  // Компонент Select
+  select: {
+    item: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: '#E5ECFD',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: '#E8EAEE',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+  },
 };
 
 // Конвертуємо всі розміри з px в rem

package/src/Theme/types.ts

@@ -147,6 +147,10 @@ export type Theme = {
       size: number | string;
     };
   };
+  //Select
+  select: {
+    item: Record<ButtonState, ButtonElementStyle>;
+  };
 };
 
 //TODO check and refactoring