@cyber-harbour/ui 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "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/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/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';

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/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 {}
+}