@cyber-harbour/ui 1.0.59 → 1.0.61

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

package/src/Theme/themes/dark.ts

@@ -28,6 +28,8 @@ export const darkThemePx: Theme = {
       light: '#99989C',
       lighter: '#535353',
       invert: '#101010',
+      success: '#31B083',
+      error: '#C93939',
     },
     stroke: {
       main: '#34404C',
@@ -965,6 +967,15 @@ export const darkThemePx: Theme = {
     width: 573,
     shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
   },
+  tooltip: {
+    fontSize: 14,
+    padding: 10,
+    borderRadius: 6,
+    maxWidth: 240,
+    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
+    color: '#99989C',
+    background: '#1E2226',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -27,6 +27,8 @@ export const lightThemePx: Theme = {
       light: '#535353',
       lighter: '#99989C',
       invert: '#ffffff',
+      success: '#31B083',
+      error: '#C93939',
     },
     stroke: {
       main: '#C7C5C5',
@@ -964,6 +966,15 @@ export const lightThemePx: Theme = {
     width: 573,
     shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
   },
+  tooltip: {
+    fontSize: 14,
+    padding: 10,
+    borderRadius: 6,
+    maxWidth: 240,
+    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
+    color: '#535353',
+    background: '#EBEBEB',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -105,6 +105,8 @@ export type Theme = {
       light: string;
       lighter: string;
       invert: string;
+      success: string;
+      error: string;
     };
     stroke: {
       main: string;
@@ -308,6 +310,15 @@ export type Theme = {
     width: number;
     shadow: string;
   };
+  tooltip: {
+    fontSize: string | number;
+    padding: string | number;
+    maxWidth: string | number;
+    borderRadius: string | number;
+    shadow: string;
+    color: string;
+    background: string;
+  };
 };
 
 //TODO check and refactoring