@cyber-harbour/ui 1.0.60 → 1.0.61

package/src/Core/LinerProgress/LinerProgress.tsx

@@ -1,26 +1,20 @@
-import { createComponent, FabricComponent, propToRem, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, propToRem, pxToRem, StyledFabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
 type Direction = 'horizontal' | 'vertical';
 
-type LinerProgressProps = FabricComponent<
-  {
-    height?: number;
-    width?: string | number;
-    direction?: Direction;
-    value: number;
-  } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
->;
+type LinerProgressProps = {
+  height?: number;
+  width?: string | number;
+  direction?: Direction;
+  value: number;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>;
 
-export const LinerProgress = ({
-  height = 21,
-  width = '100%',
-  direction = 'horizontal',
-  value,
-  ...props
-}: LinerProgressProps) => {
-  return <StyledLine {...props} $height={height} $value={value} $width={width} $direction={direction} />;
-};
+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;
@@ -29,8 +23,8 @@ interface StyledLineProps {
   $direction: Direction;
 }
 
-const StyledLine = createComponent(
-  styled.div<StyledLineProps>(
+const StyledLine = createStyledComponent<StyledFabricComponent<StyledLineProps>>(
+  styled.div(
     ({ theme, $height, $value, $width, $direction }) => `
      width: ${propToRem($width, theme.baseSize)};
      height: ${propToRem($height, theme.baseSize)};

package/src/Core/Switch/Switch.tsx

@@ -1,10 +1,10 @@
 import { InputHTMLAttributes } from 'react';
-import { createComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
 import { styled } from 'styled-components';
 
 type SwitchProps = FabricComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
 
-export const Switch = ({ className, ...props }: SwitchProps) => {
+export const Switch = createComponent<SwitchProps>(({ className, ...props }) => {
   const spaceProps = destructSpaceProps(props);
   return (
     <StyledLabel className={className} {...spaceProps}>
@@ -12,7 +12,7 @@ export const Switch = ({ className, ...props }: SwitchProps) => {
       <StyledSwitch />
     </StyledLabel>
   );
-};
+});
 
 const StyledSwitch = styled.span(
   ({ theme }) => `
@@ -63,7 +63,7 @@ const HiddenInput = styled.input(
 `
 );
 
-const StyledLabel = createComponent(
+const StyledLabel = createStyledComponent(
   styled.label`
     position: relative;
     display: inline-block;

package/src/Core/Tag/Tag.tsx

@@ -7,6 +7,7 @@ import {
   TagColor,
   hexToRgba,
   generatePropertySpaceStyle,
+  createStyledComponent,
 } from '../../Theme';
 import { CrossIcon } from '../IconComponents';
 
@@ -22,41 +23,33 @@ type TagProps = FabricComponent<{
 }> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-export const Tag = ({
-  children,
-  variant = 'fill',
-  color = 'default',
-  className,
-  disabled,
-  icon,
-  onClick,
-  onDelete,
-  ...props
-}: TagProps) => {
-  return (
-    <StyledContainer
-      $variant={variant}
-      $color={color}
-      $clickable={!!onClick && !disabled}
-      onClick={!disabled ? onClick : undefined}
-      className={className}
-      {...props}
-    >
-      {!!children && <Content>{children}</Content>}
-      {!!onDelete && !disabled && (
-        <DeleteButton
-          aria-label="delete"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete();
-          }}
-        >
-          <CrossIcon />
-        </DeleteButton>
-      )}
-    </StyledContainer>
-  );
-};
+export const Tag = createComponent<TagProps>(
+  ({ children, variant = 'fill', color = 'default', className, disabled, icon, onClick, onDelete, ...props }) => {
+    return (
+      <StyledContainer
+        $variant={variant}
+        $color={color}
+        $clickable={!!onClick && !disabled}
+        onClick={!disabled ? onClick : undefined}
+        className={className}
+        {...props}
+      >
+        {!!children && <Content>{children}</Content>}
+        {!!onDelete && !disabled && (
+          <DeleteButton
+            aria-label="delete"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <CrossIcon />
+          </DeleteButton>
+        )}
+      </StyledContainer>
+    );
+  }
+);
 
 type StyledProps = {
   $variant: TagVariant;
@@ -138,6 +131,6 @@ const Container = styled.div<FabricComponent<StyledProps>>(
   }
 );
 
-const StyledContainer = createComponent(Container, {
+const StyledContainer = createStyledComponent(Container, {
   ignoreStyles: ['padding-block', 'padding-inline'],
 });

package/src/Core/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { pxToRem } from '../../Theme';
+import { createComponent, pxToRem } from '../../Theme';
 import { styled } from 'styled-components';
 
 interface TooltipProps {
@@ -13,50 +13,44 @@ interface TooltipProps {
   offset?: number;
 }
 
-export const Tooltip = ({
-  className,
-  positions = ['top'],
-  align = 'center',
-  anchorClassName,
-  content,
-  offset = 6,
-  children,
-}: TooltipProps) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Tooltip = createComponent<TooltipProps>(
+  ({ className, positions = ['top'], align = 'center', anchorClassName, content, offset = 6, children }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const position = Array.isArray(positions) ? positions[0] : positions;
+    const position = Array.isArray(positions) ? positions[0] : positions;
 
-  const handleMouseEnter = useCallback(() => {
-    if (content) setIsOpen(true);
-  }, [content]);
+    const handleMouseEnter = useCallback(() => {
+      if (content) setIsOpen(true);
+    }, [content]);
 
-  const handleMouseLeave = useCallback(() => {
-    setIsOpen(false);
-  }, []);
+    const handleMouseLeave = useCallback(() => {
+      setIsOpen(false);
+    }, []);
 
-  return (
-    <Popover
-      padding={offset}
-      positions={positions}
-      isOpen={isOpen}
-      align={align}
-      content={
-        !!content && (
-          <StyledContent className={className} $position={position} $offset={offset}>
-            {content}
-          </StyledContent>
-        )
-      }
-      containerStyle={{
-        zIndex: `${9999}`,
-      }}
-    >
-      <StyledAnchor onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={anchorClassName}>
-        {children}
-      </StyledAnchor>
-    </Popover>
-  );
-};
+    return (
+      <Popover
+        padding={offset}
+        positions={positions}
+        isOpen={isOpen}
+        align={align}
+        content={
+          !!content && (
+            <StyledContent className={className} $position={position} $offset={offset}>
+              {content}
+            </StyledContent>
+          )
+        }
+        containerStyle={{
+          zIndex: `${9999}`,
+        }}
+      >
+        <StyledAnchor onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={anchorClassName}>
+          {children}
+        </StyledAnchor>
+      </Popover>
+    );
+  }
+);
 const StyledAnchor = styled.div`
   display: inline-block;
 `;

package/src/Core/Typography/Typography.tsx

@@ -1,6 +1,13 @@
 import styled from 'styled-components';
 import { CSSProperties, ElementType } from 'react';
-import { ColorVariant, createComponent, FabricComponent, TypographyVariant } from '../../Theme';
+import {
+  ColorVariant,
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  StyledFabricComponent,
+  TypographyVariant,
+} from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
 type TypographyProps = FabricComponent<{
@@ -25,8 +32,8 @@ type StyledProps = {
 };
 
 // Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = createComponent(
-  styled('div')<StyledProps>(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
+const StyledTypography = createStyledComponent<StyledFabricComponent<StyledProps>>(
+  styled('div')(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
     // Resolve color from theme if it's a theme color path, or use the direct color value
 
     return `
@@ -39,34 +46,25 @@ const StyledTypography = createComponent(
   })
 );
 
-export const Typography = ({
-  variant = 'body',
-  element,
-  children,
-  weight,
-  fontStyle,
-  color,
-  className,
-  style,
-  ellipsis = false,
-  ...props
-}: TypographyProps) => {
-  // Determine which HTML element to render based on the variant if not explicitly specified
-  const Element = element || (variant.startsWith('h') ? variant : 'p');
+export const Typography = createComponent<TypographyProps>(
+  ({ variant = 'body', element, children, weight, fontStyle, color, className, style, ellipsis = false, ...props }) => {
+    // Determine which HTML element to render based on the variant if not explicitly specified
+    const Element = element || (variant.startsWith('h') ? variant : 'p');
 
-  return (
-    <StyledTypography
-      as={Element}
-      $variant={variant}
-      $weight={weight}
-      $style={fontStyle}
-      $color={color}
-      $ellipsis={ellipsis}
-      className={className}
-      style={style}
-      {...props}
-    >
-      {children}
-    </StyledTypography>
-  );
-};
+    return (
+      <StyledTypography
+        as={Element}
+        $variant={variant}
+        $weight={weight}
+        $style={fontStyle}
+        $color={color}
+        $ellipsis={ellipsis}
+        className={className}
+        style={style}
+        {...props}
+      >
+        {children}
+      </StyledTypography>
+    );
+  }
+);

package/src/Core/index.ts

@@ -22,3 +22,4 @@ export * from './LinerProgress';
 export * from './Switch';
 export * from './Drawer';
 export * from './Tooltip';
+export * from './ContentLoader';

package/src/Layouts/Container/Container.tsx

@@ -1,21 +1,27 @@
-import { createComponent, FabricComponent, generatePropertySpaceStyle, pxToRem } from '../../Theme';
+import {
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  pxToRem,
+} from '../../Theme';
 import { styled } from 'styled-components';
 
-type ContainerProps = FabricComponent<{
+type ContainerProps = {
   children: any;
   maxWidth?: string | number;
-}>;
+};
 
 type StyledContainerProps = {
   $maxWidth?: string | number;
 };
 
-export const Container = ({ maxWidth, ...props }: ContainerProps) => {
+export const Container = createComponent<ContainerProps>(({ maxWidth, ...props }) => {
   return <StyledContainer {...props} $maxWidth={maxWidth} />;
-};
+});
 
-const StyledContainer = createComponent(
-  styled.div<FabricComponent<StyledContainerProps>>(({ theme, $maxWidth, px = 20 }) => {
+const StyledContainer = createStyledComponent<FabricComponent<StyledContainerProps>>(
+  styled.div(({ theme, $maxWidth, px = 20 }) => {
     return `
    ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
     width: 100%;

package/src/Theme/Breakpoint.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { Theme } from './types';
+import { useTheme } from 'styled-components';
+import { breakpoints } from './themes/config';
+
+type Breakpoint = keyof Theme['breakpoints'];
+
+const getBreakpoint = (breakpoints: Theme['breakpoints']): Breakpoint => {
+  if (window !== undefined) {
+    const width = window.innerWidth;
+    for (const [key, value] of Object.entries(breakpoints)) {
+      if (width < value) {
+        return key as Breakpoint;
+      }
+    }
+  }
+  const keys = Object.keys(breakpoints) as Breakpoint[];
+
+  return keys[keys.length - 1];
+};
+
+const BreakpointContext = createContext<Breakpoint>(getBreakpoint(breakpoints));
+
+export const BreakpointProvider = ({ children }: { children: any }) => {
+  const theme = useTheme();
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>(getBreakpoint(theme.breakpoints));
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newBreakpoint = getBreakpoint(theme.breakpoints);
+      if (newBreakpoint !== breakpoint) {
+        setBreakpoint(newBreakpoint);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [breakpoint]);
+
+  return <BreakpointContext.Provider value={breakpoint}>{children}</BreakpointContext.Provider>;
+};
+
+export const useBreakpoint = () => {
+  const currentBreakpoint = useContext(BreakpointContext);
+  const theme = useTheme();
+  const breakpointsOrder = useMemo(() => Object.keys(theme.breakpoints) as Breakpoint[], [theme.breakpoints]);
+  return { currentBreakpoint, breakpointsOrder: breakpointsOrder };
+};

package/src/Theme/ThemeProvider.tsx

@@ -1,6 +1,7 @@
 import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
 import { lightTheme, darkTheme } from './themes';
 import { GlobalStyle } from './GlobalStyle';
+import { BreakpointProvider } from './Breakpoint';
 
 interface ThemeProviderProps {
   children: any;
@@ -12,8 +13,10 @@ export const ThemeProvider = ({ children, mode }: ThemeProviderProps) => {
   return (
     <StyleSheetManager shouldForwardProp={shouldForwardProp}>
       <ThemeProviderStyled theme={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
-        <GlobalStyle />
-        {children}
+        <BreakpointProvider>
+          <GlobalStyle />
+          {children}
+        </BreakpointProvider>
       </ThemeProviderStyled>
     </StyleSheetManager>
   );

package/src/Theme/{componentFabric.ts → componentFabric.tsx}

@@ -1,5 +1,9 @@
-import styled, { css, IStyledComponent, DefaultTheme, WebTarget } from 'styled-components';
+import styled, { css, DefaultTheme } from 'styled-components';
 import { pxToRem } from './utils';
+import React, { useMemo } from 'react';
+import { useBreakpoint } from './Breakpoint';
+import { Breakpoint } from './types';
+import { breakpoints } from './themes/config';
 
 type SpaceProps = {
   m?: string | number; // margin
@@ -18,9 +22,39 @@ type SpaceProps = {
   py?: string | number; // padding-top + padding-bottom
 };
 
-export type FabricComponent<T = object> = T & SpaceProps;
+type GeneratedFabricMarginProperties =
+  | 'margin'
+  | 'margin-top'
+  | 'margin-right'
+  | 'margin-bottom'
+  | 'margin-left'
+  | 'margin-inline'
+  | 'margin-block'
+  | 'padding'
+  | 'padding-top'
+  | 'padding-right'
+  | 'padding-bottom'
+  | 'padding-left'
+  | 'padding-inline'
+  | 'padding-block';
+
+type MediaProps<T = object> = {
+  media?: {
+    [key in Breakpoint]?: Partial<T>;
+  };
+};
 
-const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
+type FabricStyledComponentOptions = {
+  ignoreStyles?: GeneratedFabricMarginProperties[] | undefined; // Ignore margin styles
+};
+
+type CreatedFabricComponent<T extends FabricComponent> =
+  | React.ComponentType<Omit<T, 'media'>>
+  | React.ForwardRefExoticComponent<Omit<T, 'media'>>;
+export type FabricComponent<T = object> = T & SpaceProps & MediaProps<T>;
+export type StyledFabricComponent<T = object> = T & SpaceProps;
+
+const marginStyles = ({ ignoreStyles }: FabricStyledComponentOptions = {}) =>
   css<FabricComponent>(({ theme, ...props }) => {
     return `
       ${generatePropertySpaceStyle(theme, 'margin', props.m, ignoreStyles)}
@@ -33,7 +67,7 @@ const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
     `;
   });
 
-const paddingStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
+const paddingStyles = ({ ignoreStyles }: FabricStyledComponentOptions = {}) =>
   css<FabricComponent>(({ theme, ...props }) => {
     return `
       ${generatePropertySpaceStyle(theme, 'padding', props.p, ignoreStyles)}
@@ -46,21 +80,17 @@ const paddingStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
     `;
   });
 
-type GeneratedFabricMarginProperties =
-  | 'margin'
-  | 'margin-top'
-  | 'margin-right'
-  | 'margin-bottom'
-  | 'margin-left'
-  | 'margin-inline'
-  | 'margin-block'
-  | 'padding'
-  | 'padding-top'
-  | 'padding-right'
-  | 'padding-bottom'
-  | 'padding-left'
-  | 'padding-inline'
-  | 'padding-block';
+export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
+  const rest: SpaceProps = {};
+  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
+    if (key in props) {
+      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
+      delete props[key as keyof SpaceProps];
+    }
+  });
+
+  return rest;
+};
 
 export const generatePropertySpaceStyle = (
   theme: DefaultTheme,
@@ -78,28 +108,52 @@ export const generatePropertySpaceStyle = (
   return '';
 };
 
-type FabricComponentOptions = {
-  ignoreStyles?: GeneratedFabricMarginProperties[] | undefined; // Ignore margin styles
+export function getResponsiveProps<T = object>(
+  { media, ...props }: T & MediaProps<T>,
+  currentBreakpoint: Breakpoint,
+  breakpointOrder: Breakpoint[]
+) {
+  if (!media) {
+    return props;
+  }
+
+  // Отримуємо індекс поточного breakpoint
+  const currentIndex = breakpointOrder.indexOf(currentBreakpoint);
+
+  // Створюємо результуючий об'єкт, починаючи з базових props
+  let result = { ...props };
+
+  // Застосовуємо стилі від найменшого breakpoint до поточного (mobile-first)
+  for (let i = 0; i <= currentIndex; i++) {
+    const breakpoint = breakpointOrder[i];
+    if (media[breakpoint]) {
+      result = {
+        ...result,
+        ...media[breakpoint],
+      };
+    }
+  }
+
+  return result;
+}
+
+export const createComponent = <T extends FabricComponent, R = unknown>(Component: CreatedFabricComponent<T>) => {
+  return React.forwardRef<R, FabricComponent<T>>((props, ref) => {
+    const { currentBreakpoint, breakpointsOrder } = useBreakpoint();
+    const responsiveProps = useMemo(
+      () => getResponsiveProps<T>(props as T & MediaProps<T>, currentBreakpoint, breakpointsOrder),
+      [props, currentBreakpoint]
+    );
+    return <Component {...responsiveProps} ref={ref} />;
+  });
 };
 
-export const createComponent = <T extends object = {}>(
+export const createStyledComponent = <T extends object = StyledFabricComponent>(
   component: React.ComponentType<T>,
-  options?: FabricComponentOptions
+  options?: FabricStyledComponentOptions
 ) => {
-  return styled(component)<T & FabricComponent>`
+  return styled(component)<StyledFabricComponent<T>>`
     ${marginStyles(options)}
     ${paddingStyles(options)}
   `;
 };
-
-export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
-  const rest: SpaceProps = {};
-  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
-    if (key in props) {
-      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
-      delete props[key as keyof SpaceProps];
-    }
-  });
-
-  return rest;
-};

package/src/Theme/index.ts

@@ -5,3 +5,4 @@ export * from './types';
 export * from './themes';
 export * from './componentFabric';
 export * from './useTheme';
+export * from './Breakpoint';