Merge pull request #23 from Jakub007d/breakpoint

feat: adding custom breakpoint interface

Author: Hyperkid123

packages/module/src/WidgetLayout/GridLayout.tsx

@@ -12,14 +12,13 @@ import {
   ExtendedTemplateConfig,
   AnalyticsTracker,
   WidgetConfiguration,
+  Breakpoints,
 } from './types';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateVariant, PageSection } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout, getGridDimensions } from './utils';
-
-export const defaultBreakpoints = breakpoints;
+import { defaultBreakpoints, defaultColumns, droppingElemId, getWidgetIdentifier, extendLayout, getGridDimensions } from './utils';
 
 const createSerializableConfig = (config?: WidgetConfiguration) => {
   if (!config) { return undefined; }
@@ -62,6 +61,10 @@ export interface GridLayoutProps {
   droppingWidgetType?: string;
   /** Resize configuration options */
   resizeWidgetConfig?: Partial<ResizeConfig>;
+  /** Custom breakpoints for responsive layout (container width thresholds in px) */
+  breakpoints?: Breakpoints;
+  /** Custom column counts per breakpoint variant */
+  columns?: Record<Variants, number>;
 }
 
 const LayoutEmptyState = ({
@@ -107,6 +110,8 @@ const GridLayout = ({
   onActiveWidgetsChange,
   droppingWidgetType,
   resizeWidgetConfig,
+  breakpoints = defaultBreakpoints,
+  columns = defaultColumns,
 }: GridLayoutProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [isInitialRender, setIsInitialRender] = useState(true);
@@ -226,10 +231,10 @@ const GridLayout = ({
   // Update layout variant when container width changes
   useEffect(() => {
     if (mounted && layoutWidth > 0) {
-      const variant: Variants = getGridDimensions(layoutWidth);
+      const variant: Variants = getGridDimensions(layoutWidth, breakpoints);
       setLayoutVariant(variant);
     }
-  }, [layoutWidth, mounted]);
+  }, [layoutWidth, mounted, breakpoints]);
 
   const activeLayout = internalTemplate[layoutVariant] || [];
 

packages/module/src/WidgetLayout/index.ts

@@ -5,8 +5,8 @@ export { default as WidgetDrawer } from './WidgetDrawer';
 
 export * from './types';
 export {
-  columns,
-  breakpoints,
+  defaultColumns,
+  defaultBreakpoints,
   droppingElemId,
   getWidgetIdentifier,
   mapWidgetDefaults,

packages/module/src/WidgetLayout/types.ts

@@ -5,6 +5,13 @@ export const widgetIdSeparator = '#';
 
 export type Variants = 'sm' | 'md' | 'lg' | 'xl';
 
+export interface Breakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
 export type LayoutWithTitle = LayoutItem & { title: string };
 
 export type TemplateConfig = {

packages/module/src/WidgetLayout/utils.ts

@@ -1,10 +1,10 @@
-import { ExtendedTemplateConfig, TemplateConfig, Variants, widgetIdSeparator } from './types';
+import { ExtendedTemplateConfig, TemplateConfig, Variants, widgetIdSeparator, Breakpoints } from './types';
 
 export const droppingElemId = '__dropping-elem__';
 
-export const columns: Record<Variants, number> = { xl: 4, lg: 3, md: 2, sm: 1 };
+export const defaultColumns: Record<Variants, number> = { xl: 4, lg: 3, md: 2, sm: 1 };
 
-export const breakpoints: Record<Variants, number> = { xl: 1550, lg: 1400, md: 1100, sm: 800 };
+export const defaultBreakpoints: Breakpoints = { xl: 1550, lg: 1400, md: 1100, sm: 800 };
 
 /**
  * Generate a unique widget identifier
@@ -52,7 +52,7 @@ export const extendLayout = (extendedTemplateConfig: ExtendedTemplateConfig): Ex
 /**
  * Get grid dimensions based on container width
  */
-export function getGridDimensions(currentWidth: number): Variants {
+export function getGridDimensions(currentWidth: number, breakpoints: Breakpoints = defaultBreakpoints): Variants {
   if (currentWidth >= breakpoints.xl) {
     return 'xl';
   }