@cyber-harbour/ui 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -16,6 +16,7 @@
     "dev": "tsup --config tsup.dev.config.ts",
     "build": "cross-env NODE_ENV=production tsup",
     "build:dev": "tsup",
+    "type:check": "tsc --noEmit",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/src/Core/Button/Button.tsx

@@ -1,24 +1,115 @@
+import React from 'react';
 import styled from 'styled-components';
+import {
+  ButtonVariant,
+  ButtonSize,
+  ButtonColor,
+  getButtonStyles,
+  getButtonSizeStyles,
+  ButtonElementStyle,
+} from '../../Theme';
 
-const StyledButton = styled.button`
-  padding: 0.5rem 1rem;
-  background: ${(props) => props.theme.colors.primary.main};
-  color: ${(props) => props.theme.colors.text.invert};
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background: ${(props) => props.theme.colors.primary.light};
-  }
-`;
-
-export interface ButtonProps {
-  children: any;
-  color?: string;
+interface BaseButtonProps {
+  children?: any;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  size?: ButtonSize;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+  icon?: any;
+  iconPosition?: 'left' | 'right';
 }
 
-export const Button = ({ children, color }: ButtonProps) => {
-  return <StyledButton color={color}>{children}</StyledButton>;
+export type ButtonProps = BaseButtonProps &
+  (React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>);
+
+const getCss = (styles: ButtonElementStyle) => `
+    background: ${styles.background};
+    color: ${styles.text};
+    border-color: ${styles.border};
+    box-shadow: ${styles.boxShadow};
+  `;
+
+// Створюємо стилізований компонент, що використовує уніфіковану палітру
+const StyledButton = styled.button<{
+  $variant: ButtonVariant;
+  $color: ButtonColor;
+  $size: ButtonSize;
+  $disabled: boolean;
+  $fullWidth: boolean;
+  $iconPosition: 'left' | 'right';
+}>`
+  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, theme }) => {
+    const sizes = getButtonSizeStyles(theme, $size);
+    return `
+      ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
+      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: center;
+      text-decoration: none;
+      transition: all 0.2s ease;
+      outline: none;
+
+      ${$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'))}
+      }
+
+      svg {
+        width: ${sizes.iconSize};
+        height: ${sizes.iconSize};
+      }
+    `;
+  }}
+`;
+
+export const Button = ({
+  children,
+  variant = 'fill',
+  color = 'primary',
+  size = 'medium',
+  disabled = false,
+  fullWidth = false,
+  className,
+  icon,
+  iconPosition = 'left',
+  ...props
+}: ButtonProps) => {
+  return (
+    <StyledButton
+      as={'href' in props ? 'a' : 'button'}
+      $variant={variant}
+      $color={color}
+      $size={size}
+      $disabled={disabled}
+      $fullWidth={fullWidth}
+      $iconPosition={iconPosition}
+      disabled={disabled}
+      className={className}
+      {...props}
+    >
+      {icon}
+      <div>{children}</div>
+    </StyledButton>
+  );
 };

package/src/Core/Button/index.ts

@@ -1 +1 @@
-export { Button } from './Button';
+export * from './Button';

package/src/Core/Header/Header.tsx

@@ -5,24 +5,14 @@ interface HeaderProps {
 }
 
 export const Header = ({ children }: HeaderProps) => {
-  return (
-    <StyledWrapper>
-      <StyledContainer>{children}</StyledContainer>
-    </StyledWrapper>
-  );
+  return <StyledContainer>{children}</StyledContainer>;
 };
 
-const StyledWrapper = styled.header`
-  height: 56px;
-`;
-
-const StyledContainer = styled.div(
+const StyledContainer = styled.header(
   ({ theme }) => `
     display: flex;
-    position: fixed;
+    position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     z-index: 1000;
     align-items: center;
     justify-content: space-between;
@@ -31,5 +21,17 @@ const StyledContainer = styled.div(
     height: 56px;
     background-color: ${theme.colors.background};
     border-bottom: 1px solid ${theme.colors.stroke.main};
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 25dvh;
+      transform: translateY(-100%);
+      background: ${theme.colors.background};
+    }
 `
 );

package/src/Core/IconComponents/BallsMenu.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const BallsMenu = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 3" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <ellipse cx="1.56746" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="7.71278" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="13.8581" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+    </svg>
+  );
+};

package/src/Core/IconComponents/Check.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const CheckIcon = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14.4983 1L5.34428 11L1.18338 6.45455" stroke={fill} stroke-width="1.5" stroke-linejoin="round" />;
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronDownIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.4517 5.77798L16.4067 6.79197L10.8447 12.1899C10.0753 12.9367 8.82791 12.9367 8.05853 12.1899L2.49647 6.79197L1.45166 5.77798L3.54128 3.75L4.58609 4.76399L9.45161 9.48599L14.3172 4.76399L15.362 3.75L17.4517 5.77798Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronUpIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.20166 10.722L1.24661 9.70803L6.80863 4.31012C7.57801 3.56329 8.82541 3.56329 9.59479 4.31012L15.1569 9.70803L16.2017 10.722L14.112 12.75L13.0672 11.736L8.20171 7.01401L3.33611 11.736L2.29136 12.75L0.20166 10.722Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -32,3 +32,7 @@ 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';

package/src/Core/ListMenu/ListMenuItem.tsx

@@ -47,16 +47,16 @@ const StyledItem = styled.li<StyledProps>(
    }
 
     ::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;
+      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;
     }
   `
 );
@@ -88,11 +88,7 @@ const StyledLink = styled.a<StyledProps>(
     transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 
     &:hover {
-      background-color: ${theme.colors.primary.lighter};
       color: ${theme.colors.primary.main};
-      span {
-        background-color: ${theme.colors.primary.lighter};
-      }
     }`
 );
 

package/src/Core/ListMenu/ListMenuSection.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
 export interface ListMenuSectionProps {
-  items: ReactNode | ReactNode[];
+  items: any;
   title?: string;
 }
 export const ListMenuSection = ({ title, items }: ListMenuSectionProps) => {

package/src/Core/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, useCallback, useMemo } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 import { styled } from 'styled-components';
 import { ChevronRightIcon } from '../IconComponents';
 import { ChevronLeftIcon } from '../IconComponents';
@@ -16,7 +16,7 @@ const VISIBLE_GROUPE = 5;
 const STEP = 1;
 const ELLIPSIS = '...';
 
-export const Pagination: FC<PaginationProps> = ({ total_items, limit, offset, onChangePage }) => {
+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(() => {

package/src/Core/Sidebar/Sidebar.tsx

@@ -15,61 +15,61 @@ export const Sidebar = ({ defaultCollapsed, children }: SidebarProps) => {
   const [collapsed, setCollapsed] = React.useState(!!defaultCollapsed);
 
   return (
-    <StyledWrapper $collapsed={collapsed}>
-      <StyledContainer $collapsed={collapsed}>
-        <SidebarContext.Provider
-          value={{
-            collapsed,
-            setCollapsed,
-          }}
-        >
-          {children}
-        </SidebarContext.Provider>
-      </StyledContainer>
-    </StyledWrapper>
+    <StyledContainer $collapsed={collapsed}>
+      <SidebarContext.Provider
+        value={{
+          collapsed,
+          setCollapsed,
+        }}
+      >
+        {children}
+      </SidebarContext.Provider>
+    </StyledContainer>
   );
 };
 
-const StyledWrapper = styled.aside<StyledProps>(
-  ({ $collapsed }) => `
-    position: relative;
+const StyledContainer = styled.aside<StyledProps>(
+  ({ theme, $collapsed }) => `
+    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%;
-    width: 220px;
+    border-right: 1px solid ${theme.colors.stroke.light};
+    background: ${theme.colors.background};
+    ${
+      $collapsed
+        ? `
+          width: 65px;
+        `
+        : ''
+    }
 
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 25dvh;
+      transform: translateY(-100%);
+      background: ${theme.colors.background};
+      border-right: 1px solid ${theme.colors.stroke.light};
 
-    ${
-      $collapsed &&
-      `
-      & {
+      width: ${theme.sidebar.width};
+      ${
+        $collapsed
+          ? `
           width: 65px;
-          height: 100%;
-          min-heigth: 0px;
+        `
+          : ''
       }
-      `
     }
 `
 );
-
-const StyledContainer = styled.div<StyledProps>(
-  ({ theme, $collapsed }) => `
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 1px;
-  position: fixed;
-  z-index: 1000;
-  top: 56px;
-  left: 0;
-  width: 220px;
-  padding: 12px;
-  height: calc(100% - 56px);
-  border-right: 1px solid ${theme.colors.stroke.light};
-  background: ${theme.colors.background};
-   ${
-     $collapsed &&
-     `
-        width: 65px;
-      `
-   }
-`
-);

package/src/Core/Sidebar/SidebarItem.tsx

@@ -112,15 +112,15 @@ const StyledItem = styled.a<StyledProps>(
       top: 0;
       height: 100%;
       width: 0px;
-      border-top-right-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
       background: rgaba(0, 0, 0, 0);
       transition: background 0.4s ease-in-out, width 0.3s ease-in-out;
       ${
         $active
           ? `
         background: ${theme.colors.primary.main};
-        width: 3px;
+        width: 5px;
         `
           : ''
       }

package/src/Core/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useMemo, CSSProperties } from 'react';
+import { ReactNode, useMemo, CSSProperties } from 'react';
 import { styled } from 'styled-components';
 import { Row } from './Row';
 import { Cell, HeadCell } from './Cell';
@@ -24,12 +24,12 @@ export type RenderHeaderCellProps<T = string> = {
 interface TableProps {
   columns: ColumnTable[];
   rowCount: number;
-  renderCell: (props: RenderCellProps<any>) => ReactNode;
-  renderHeaderCell: (props: RenderHeaderCellProps<any>) => ReactNode;
+  renderCell: (props: RenderCellProps<any>) => any;
+  renderHeaderCell: (props: RenderHeaderCellProps<any>) => any;
   rowIds?: string[];
 }
 
-export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }) => {
+export const Table = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }: TableProps) => {
   const cellCount = columns.length;
 
   const data = useMemo(() => {
@@ -49,7 +49,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
 
   return (
     <StyledTable>
-      <thead>
+      <StyledHead>
         <Row>
           {columns.map(({ id, title, width }) => (
             <HeadCell
@@ -62,7 +62,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
             </HeadCell>
           ))}
         </Row>
-      </thead>
+      </StyledHead>
       <tbody>
         {data.map((cells, rowIndex) => (
           <Row key={`row-${rowIndex}`} id={rowIds ? rowIds[rowIndex] : `row-${rowIndex}`}>
@@ -83,3 +83,12 @@ const StyledTable = styled.table`
   border-spacing: 0;
   table-layout: fixed;
 `;
+
+const StyledHead = styled.thead(
+  ({ theme }) => `
+  background-color: ${theme.colors.background};
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+);

package/src/Core/Typography/Typography.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { CSSProperties, ElementType, ReactNode } from 'react';
-import { ColorVariant, TypographyVariant } from '../../Theme/theme';
+import { ColorVariant, TypographyVariant } from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
 export interface TypographyProps {
@@ -23,7 +23,7 @@ const StyledTypography = styled.div<{
   // Resolve color from theme if it's a theme color path, or use the direct color value
 
   return `
-      font-size: ${theme.typography[$variant]};
+      font-size: ${theme.typography.variants[$variant].fontSize};
       font-weight: ${$weight};
       font-style: ${$style};
       color: ${resolveThemeColor(theme, $color) || theme.colors.text.main};

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -26,12 +26,13 @@ export const StyledContainer = styled.div<StyledContainerProps>(
   ({ $withHeader, $withSidebar }) => `
   display: grid;
   min-height: 100dvh;
+  position: relative;
   grid-template-columns: ${$withSidebar ? 'auto 1fr' : '1fr'};
   grid-template-rows: ${$withHeader ? 'auto 1fr' : '1fr'};
   grid-template-areas: ${
     $withHeader
       ? $withSidebar
-        ? `'header header' 'sidebar content'`
+        ? `'sidebar header' 'sidebar content'`
         : `'header' 'content'`
       : $withSidebar
       ? `'sidebar content'`

package/src/Theme/ThemeProvider.tsx

@@ -1,4 +1,3 @@
-import { ReactElement, ReactNode } from 'react';
 import { ThemeProvider as ThemeProviderStyled } from 'styled-components';
 import { lightTheme } from './theme';
 import { GlobalStyle } from './GlobalStyle';

package/src/Theme/index.ts

@@ -1,4 +1,5 @@
-export * from './theme';
 export * from './GlobalStyle';
 export * from './ThemeProvider';
 export * from './utils';
+export * from './types';
+export * from './theme';

package/src/Theme/styled.d.ts

@@ -0,0 +1,7 @@
+import 'styled-components';
+import { Palette } from './palette';
+import { Theme } from './types';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}