Improved breakpoints

Author: FlorianRappl

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Piral Changelog
 
+## 1.8.3 (tbd)
+
+- Updated `breakpoints` to have flexible breakpoints
+- Added `breakpoints` parameter to `getAppInstance` options
+- Added `breakpoints` parameter to `createInstanceElement` function
+
 ## 1.8.2 (January 31, 2025)
 
 - Fixed issue with command line parsing in the `piral-cli` on Windows

src/framework/piral-core/src/types/layout.ts

@@ -1,7 +1,9 @@
 /**
  * The mapping of breakpoints to layout type index.
+ * Choose up to three breakpoints.
+ * In case of no breakpoint a default layout will be chosen.
  */
-export type LayoutBreakpoints = [string, string, string];
+export type LayoutBreakpoints = [string?, string?, string?];
 
 /**
  * The different known layout types.

src/framework/piral/src/app.tsx

@@ -19,8 +19,8 @@ render(app, document.querySelector('#app'));
 ```
  */
 export function getAppInstance(config: PiralConfiguration = {}, options: PiralRenderBaseOptions = {}) {
-  const { settings, layout, errors, dashboardPath, piralChildren } = options;
+  const { settings, layout, errors, dashboardPath, piralChildren, breakpoints } = options;
   const instance = createPiral(config, settings);
-  const app = createInstanceElement(instance, layout, errors, dashboardPath, piralChildren);
+  const app = createInstanceElement(instance, layout, errors, dashboardPath, piralChildren, breakpoints);
   return { instance, app };
 }

src/framework/piral/src/instance.tsx

@@ -8,6 +8,7 @@ import {
   ErrorComponentsState,
   SetErrors,
   SetLayout,
+  LayoutBreakpoints,
 } from 'piral-core';
 
 export function createInstanceElement(
@@ -16,9 +17,10 @@ export function createInstanceElement(
   errors?: Partial<ErrorComponentsState>,
   dashboardPath = '/',
   piralChildren?: React.ReactNode,
+  breakpoints?: LayoutBreakpoints,
 ): React.ReactElement {
   return (
-    <Piral instance={instance}>
+    <Piral instance={instance} breakpoints={breakpoints}>
       <SetLayout layout={layout} />
       <SetErrors errors={errors} />
       <SetRoute path={dashboardPath} component={Dashboard} />

src/framework/piral/src/types.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { PiralConfiguration, ComponentsState, ErrorComponentsState } from 'piral-core';
+import { PiralConfiguration, ComponentsState, ErrorComponentsState, LayoutBreakpoints } from 'piral-core';
 import { PiralExtSettings } from 'piral-ext';
 
 /**
@@ -15,6 +15,10 @@ export interface PiralRenderBaseOptions {
    * Defines how the layout looks like.
    */
   layout?: Partial<ComponentsState>;
+  /**
+   * Defines the breakpoints to use for responsive layouts.
+   */
+  breakpoints?: LayoutBreakpoints;
   /**
    * Defines how the errors look like.
    */