@cyber-harbour/ui 1.0.60 → 1.0.62

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';