@heliux-org/design-system-core 0.0.399 → 0.0.400

package/src/components/{PanelLayout/DynamicPanelLayout.tsx → DynamicPanelLayout/PanelLayout.tsx}

@@ -1,17 +1,21 @@
+import "./PanelLayout.module.scss";
 import styled from 'styled-components';
 import { ResizeHandle } from './ResizeHandle';
-import React, { useState, useRef, ReactNode } from 'react';
 import { Panel, PanelGroup } from 'react-resizable-panels';
+import React, { useState, useRef, ReactNode, CSSProperties } from 'react';
 
-interface PanelData {
+export interface PanelData {
     id: string;
     minSize: number;
+    maxSize?: number;
     content: ReactNode;
+    className?: string;
     defaultSize?: number;
     collapsible?: boolean;
-    collapsedSize?: number;
     onExpand?: () => void;
+    collapsedSize?: number;
     onCollapse?: () => void;
+    style?: CSSProperties;
 }
 
 interface DynamicPanelLayoutProps {
@@ -20,13 +24,13 @@ interface DynamicPanelLayoutProps {
 }
 
 const AnimatedPanel = styled(Panel) <{ isDragging: boolean }>`
-  transition: ${props => props.isDragging ? 'none' : 'all 0.3s ease-in-out'};
+  transition: ${props => props.isDragging ? 'none' : 'width 0.3s ease-in-out'};
   &.collapsed {
     width: 0;
   }
 `;
 
-const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels, direction = "horizontal" }) => {
+export const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels, direction = "horizontal" }) => {
     const [isDragging, setIsDragging] = useState<boolean>(false);
 
     const panelRefs = useRef<Record<string, React.RefObject<any>>>(
@@ -45,15 +49,17 @@ const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels, directi
                     <React.Fragment key={panel.id}>
                         <AnimatedPanel
                             id={panel.id}
-                            className="panelbox"
                             ref={panelRef}
+                            style={panel.style}
+                            isDragging={isDragging}
                             minSize={panel.minSize}
+                            maxSize={panel.maxSize}
+                            className={panel.className}
                             defaultSize={panel.defaultSize || 20}
+                            onExpand={panel.onExpand || undefined}
                             collapsedSize={panel.collapsedSize || 0}
                             collapsible={panel.collapsible || false}
-                            isDragging={isDragging}
                             onCollapse={panel.onCollapse || undefined}
-                            onExpand={panel.onExpand || undefined}
                         >
                             {panel.content}
                         </AnimatedPanel>
@@ -70,5 +76,3 @@ const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels, directi
         </PanelGroup>
     );
 };
-
-export default DynamicPanelLayout;

package/src/components/DynamicPanelLayout/ResizeHandle.tsx

@@ -0,0 +1,101 @@
+import React, { FC, MouseEvent } from "react";
+import { PanelResizeHandle } from "react-resizable-panels";
+import styled from "styled-components";
+import "./PanelLayout.module.scss";
+import Tooltip from "../Tooltip/Tooltip";
+import Text from "../Text/Text";
+import Flex from "../Flex/Flex";
+
+type ResizeHandleProps = {
+  className?: string;
+  panelElementRef?: React.RefObject<PanelElement>;
+  setIsDragging: (isDragging: boolean) => void;
+};
+
+interface PanelElement {
+  collapse: () => void;
+  expand: () => void;
+  isExpanded: () => boolean;
+}
+
+const StyledHandle = styled(PanelResizeHandle)`
+  height: 100%;
+  width: 6px;
+  margin: 0 2px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    background-color: var(--divider-selected);
+
+    rect {
+      fill: var(--text-color-on-primary);
+    }
+  }
+`;
+
+const CollapseContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 3px;
+  margin: 0px 1px;
+`;
+
+interface CollapseProps {
+  onClick?: (event: MouseEvent<SVGElement>) => void;
+  className?: string;
+}
+
+const Collapse: FC<CollapseProps> = ({ onClick }) => (
+  <svg
+    viewBox="0 0 4 28"
+    fill="none"
+    onClick={onClick}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="0.5" width="3" height="28" rx="1.5" fill="var(--divider-tertiary)" />
+  </svg>
+);
+
+export function ResizeHandle({ className, panelElementRef, setIsDragging }: ResizeHandleProps) {
+  const handleClick = () => {
+    if (panelElementRef && panelElementRef.current) {
+      if (panelElementRef.current.isExpanded()) {
+        panelElementRef.current.collapse();
+      } else {
+        panelElementRef.current.expand();
+      }
+    }
+  };
+
+  return (
+    <Tooltip
+      withMaxWidth
+      position={Tooltip.positions.RIGHT}
+      content={
+        <Flex direction={Flex.directions.COLUMN}>
+          <Flex direction={Flex.directions.ROW} gap={Flex.gaps.XS}>
+            <Text type={Text.types.TEXT2} weight={Text.weights.BOLD} color={Text.colors.ON_INVERTED}>Drag</Text>
+            <Text type={Text.types.TEXT2} weight={Text.weights.NORMAL} color={Text.colors.SECONDARY}>to resize</Text>
+          </Flex>
+          <Flex direction={Flex.directions.ROW} gap={Flex.gaps.XS}>
+            <Text type={Text.types.TEXT2} weight={Text.weights.BOLD} color={Text.colors.ON_INVERTED}>Click</Text>
+            <Text type={Text.types.TEXT2} weight={Text.weights.NORMAL} color={Text.colors.SECONDARY}>to expand/collapse</Text>
+          </Flex>
+        </Flex>
+      }
+    >
+      <div style={{ width: "10px" }}>
+        <StyledHandle className={className} onDragging={(isDragging: boolean) => setIsDragging(isDragging)}>
+          <CollapseContainer>
+            {panelElementRef && <Collapse onClick={handleClick} className="collapse-handle" />}
+          </CollapseContainer>
+        </StyledHandle>
+      </div>
+    </Tooltip>
+  );
+}

package/src/components/DynamicPanelLayout/__stories__/PanelLayout.mdx

@@ -0,0 +1,77 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as PanelLayoutStories from './PanelLayout.stories';
+
+<Meta of={PanelLayoutStories} />
+
+# Dynamic Panel Layout
+
+A flexible and powerful panel layout system that supports resizable and collapsible panels in both horizontal and vertical orientations.
+
+## Overview
+
+The DynamicPanelLayout component allows you to create sophisticated panel-based layouts with features like:
+- Resizable panels with drag handles
+- Horizontal and vertical orientations
+- Collapsible panels
+- Size constraints
+- Nested layouts
+- Animation support
+
+## Basic Usage
+
+### Horizontal Layout
+The most common use case is a simple horizontal split:
+
+<Canvas of={PanelLayoutStories.BasicHorizontal} />
+
+### Vertical Layout
+Panels can also be arranged vertically:
+
+<Canvas of={PanelLayoutStories.BasicVertical} />
+
+## Advanced Features
+
+### Collapsible Sidebar
+Create collapsible panels perfect for sidebars:
+
+<Canvas of={PanelLayoutStories.CollapsibleSidebar} />
+
+### Fixed Size Panels
+Lock panel sizes with matching min and max values:
+
+<Canvas of={PanelLayoutStories.FixedSizePanel} />
+
+### Complex Nested Layout
+Create sophisticated layouts by nesting panel groups:
+
+<Canvas of={PanelLayoutStories.ComplexLayout} />
+
+### Callback Support
+Panels can trigger callbacks on collapse/expand:
+
+<Canvas of={PanelLayoutStories.WithCallbacks} />
+
+## API Reference
+
+### Props
+
+<Controls />
+
+### PanelData Interface
+Each panel in the panels array accepts these properties:
+
+```typescript
+interface PanelData {
+    id: string;                    // Unique identifier
+    minSize: number;               // Minimum size (percentage)
+    maxSize?: number;              // Maximum size (percentage)
+    content: ReactNode;            // Panel content
+    className?: string;            // CSS class name
+    defaultSize?: number;          // Initial size (percentage)
+    collapsible?: boolean;         // Enable collapse
+    collapsedSize?: number;        // Size when collapsed
+    onExpand?: () => void;         // Expand callback
+    onCollapse?: () => void;       // Collapse callback
+    style?: CSSProperties;         // Inline styles
+}
+```

package/src/components/DynamicPanelLayout/__stories__/PanelLayout.stories.tsx

@@ -0,0 +1,216 @@
+import React from "react";
+import styled from 'styled-components';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DynamicPanelLayout } from '../PanelLayout';
+
+const StyledContent = styled.div`
+  height: 100%;
+  padding: 16px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ColoredPanel = styled(StyledContent) <{ color?: string }>`
+  background: ${props => props.color || '#f5f5f5'};
+  color: ${props => props.color ? 'white' : 'black'};
+`;
+
+const meta: Meta<typeof DynamicPanelLayout> = {
+    title: 'Layout/DynamicPanelLayout',
+    component: DynamicPanelLayout,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof DynamicPanelLayout>;
+
+// Basic horizontal layout
+export const BasicHorizontal: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'left',
+                minSize: 30,
+                content: <ColoredPanel color="#2196F3">Left Panel</ColoredPanel>,
+                defaultSize: 50,
+            },
+            {
+                id: 'right',
+                minSize: 30,
+                content: <ColoredPanel color="#4CAF50">Right Panel</ColoredPanel>,
+                defaultSize: 50,
+            },
+        ],
+    },
+};
+
+// Basic vertical layout
+export const BasicVertical: Story = {
+    args: {
+        direction: 'vertical',
+        panels: [
+            {
+                id: 'top',
+                minSize: 30,
+                content: <ColoredPanel color="#9C27B0">Top Panel</ColoredPanel>,
+                defaultSize: 50,
+            },
+            {
+                id: 'bottom',
+                minSize: 30,
+                content: <ColoredPanel color="#FF5722">Bottom Panel</ColoredPanel>,
+                defaultSize: 50,
+            },
+        ],
+    },
+};
+
+// Three panel horizontal layout
+export const ThreePanelHorizontal: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'left',
+                minSize: 20,
+                content: <ColoredPanel color="#673AB7">Left Panel</ColoredPanel>,
+                defaultSize: 33.33,
+            },
+            {
+                id: 'middle',
+                minSize: 20,
+                content: <ColoredPanel color="#E91E63">Middle Panel</ColoredPanel>,
+                defaultSize: 33.33,
+            },
+            {
+                id: 'right',
+                minSize: 20,
+                content: <ColoredPanel color="#009688">Right Panel</ColoredPanel>,
+                defaultSize: 33.33,
+            },
+        ],
+    },
+};
+
+// Collapsible sidebar
+export const CollapsibleSidebar: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'sidebar',
+                minSize: 10,
+                maxSize: 30,
+                collapsible: true,
+                collapsedSize: 0,
+                defaultSize: 20,
+                content: <ColoredPanel color="#795548">Collapsible Sidebar</ColoredPanel>,
+            },
+            {
+                id: 'main',
+                minSize: 50,
+                content: <ColoredPanel>Main Content Area</ColoredPanel>,
+                defaultSize: 80,
+            },
+        ],
+    },
+};
+
+// Fixed size panel
+export const FixedSizePanel: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'fixed',
+                minSize: 20,
+                maxSize: 20,
+                content: <ColoredPanel color="#607D8B">Fixed 20% Panel</ColoredPanel>,
+                defaultSize: 20,
+            },
+            {
+                id: 'flexible',
+                minSize: 30,
+                content: <ColoredPanel>Flexible Panel</ColoredPanel>,
+                defaultSize: 80,
+            },
+        ],
+    },
+};
+
+// Complex nested layout
+export const ComplexLayout: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'left',
+                minSize: 20,
+                maxSize: 30,
+                content: <ColoredPanel color="#3F51B5">Navigation Panel</ColoredPanel>,
+                defaultSize: 25,
+            },
+            {
+                id: 'center',
+                minSize: 40,
+                content: (
+                    <DynamicPanelLayout
+                        direction="vertical"
+                        panels={[
+                            {
+                                id: 'top',
+                                minSize: 30,
+                                content: <ColoredPanel color="#00BCD4">Content Area</ColoredPanel>,
+                                defaultSize: 70,
+                            },
+                            {
+                                id: 'bottom',
+                                minSize: 20,
+                                content: <ColoredPanel color="#FFC107">Details Panel</ColoredPanel>,
+                                defaultSize: 30,
+                            },
+                        ]}
+                    />
+                ),
+                defaultSize: 50,
+            },
+            {
+                id: 'right',
+                minSize: 15,
+                maxSize: 25,
+                content: <ColoredPanel color="#FF9800">Inspector Panel</ColoredPanel>,
+                defaultSize: 25,
+            },
+        ],
+    },
+};
+
+// Dynamic panels with callbacks
+export const WithCallbacks: Story = {
+    args: {
+        direction: 'horizontal',
+        panels: [
+            {
+                id: 'collapsible',
+                minSize: 15,
+                collapsible: true,
+                onCollapse: () => console.log('Panel collapsed'),
+                onExpand: () => console.log('Panel expanded'),
+                content: <ColoredPanel color="#9E9E9E">Collapsible Panel with Callbacks</ColoredPanel>,
+                defaultSize: 30,
+            },
+            {
+                id: 'main',
+                minSize: 50,
+                content: <ColoredPanel>Check console for callback logs</ColoredPanel>,
+                defaultSize: 70,
+            },
+        ],
+    },
+};

package/src/components/PanelLayout/PanelLayout.tsx

@@ -23,9 +23,12 @@ export type PanelLayoutProps = {
   rightPanelMinSize?: number;
   isCollapsed?: boolean;
   isPositionAbsolute?: boolean;
+  leftPanelMaxSize?: number;
+  onLeftPanelExpand?: () => void;
+  onLeftPanelCollapse?: () => void;
 };
 
-const PanelGroupStyled = styled(PanelGroup)<{ $isPositionAbsolute?: boolean }>`
+const PanelGroupStyled = styled(PanelGroup) <{ $isPositionAbsolute?: boolean }>`
   position: ${({ $isPositionAbsolute }) => ($isPositionAbsolute ? 'absolute' : 'relative')};
   top: 0;
   left: 0;
@@ -35,15 +38,15 @@ const PanelGroupStyled = styled(PanelGroup)<{ $isPositionAbsolute?: boolean }>`
   display: flex;
 `;
 
-const CenterPanelStyled = styled(Panel)<{ $isCollapsed?: boolean }>`
+const CenterPanelStyled = styled(Panel) <{ $isCollapsed?: boolean }>`
   background: transparent;
   flex: 1;
   transition: all 0.3s ease-in-out;
 `;
 
-const AnimatedPanel = styled(Panel)<{ isDragging: boolean; $isCollapsed?: boolean }>`
-  transition: ${props => props.isDragging ? 'none' : 'all 0.3s ease-in-out'};
-  min-width: ${props => props.$isCollapsed ? '40px' : '100px'};
+const AnimatedPanel = styled(Panel) <{ isDragging: boolean; $isCollapsed?: boolean }>`
+  transition: ${props => props.isDragging ? 'none' : 'width 0.3s ease-in-out'};
+  min-width: ${props => props.$isCollapsed ? '40px' : `${props.defaultSize}%`};
   flex-shrink: 0;
 
   &.collapsed {
@@ -68,6 +71,9 @@ type PanelsProps = {
   rightPanelMinSize?: number;
   isCollapsed?: boolean;
   isPositionAbsolute?: boolean;
+  leftPanelMaxSize?: number;
+  onLeftPanelExpand?: () => void;
+  onLeftPanelCollapse?: () => void;
 };
 
 export function Panels({
@@ -84,6 +90,9 @@ export function Panels({
   rightPanelMinSize = 10,
   isCollapsed = false,
   isPositionAbsolute = true,
+  leftPanelMaxSize = 20,
+  onLeftPanelCollapse = undefined,
+  onLeftPanelExpand = undefined,
 }: PanelsProps) {
   const { handleLeftPanelRef, handleRightPanelRef, leftPanelRef, rightPanelRef } = usePanelContext();
   const [isMobile, setIsMobile] = useState(false);
@@ -134,18 +143,22 @@ export function Panels({
             className={cx("panelbox", { collapsed: isCollapsed })}
             isDragging={isLeftDragging}
             $isCollapsed={isCollapsed}
+            maxSize={leftPanelMaxSize}
+            onCollapse={onLeftPanelCollapse}
+            onExpand={onLeftPanelExpand}
+            collapsedSize={leftPanelCollapsedSize}
           >
             {leftSide}
           </AnimatedPanel>
-          <ResizeHandle 
-            panelElementRef={leftPanelRef} 
+          <ResizeHandle
+            panelElementRef={leftPanelRef}
             className={cx("resize-handle", { hidden: isCollapsed })}
-            setIsDragging={setIsLeftDragging} 
+            setIsDragging={setIsLeftDragging}
           />
         </>
       )}
-      <CenterPanelStyled 
-        minSize={centerPanelMinSize} 
+      <CenterPanelStyled
+        minSize={centerPanelMinSize}
         className="mainContent"
         $isCollapsed={isCollapsed}
       >
@@ -153,10 +166,10 @@ export function Panels({
       </CenterPanelStyled>
       {rightSide && (
         <>
-          <ResizeHandle 
-            panelElementRef={rightPanelRef} 
-            className="resize-handle" 
-            setIsDragging={setIsRightDragging} 
+          <ResizeHandle
+            panelElementRef={rightPanelRef}
+            className="resize-handle"
+            setIsDragging={setIsRightDragging}
           />
           <AnimatedPanel
             ref={handleRightPanelRef}
@@ -176,6 +189,9 @@ export function Panels({
   );
 }
 
+/**
+ * @deprecated - use DynamicPanelLayout instead'
+ */
 export const PanelLayout: React.FC<PanelLayoutProps> = ({
   children,
   leftSide,
@@ -192,6 +208,9 @@ export const PanelLayout: React.FC<PanelLayoutProps> = ({
   rightPanelMinSize,
   isCollapsed = false,
   isPositionAbsolute = true,
+  leftPanelMaxSize = 20,
+  onLeftPanelCollapse = undefined,
+  onLeftPanelExpand = undefined,
 }: PanelLayoutProps) => {
   return (
     <PanelContextProvider>
@@ -208,6 +227,9 @@ export const PanelLayout: React.FC<PanelLayoutProps> = ({
         rightPanelMinSize={rightPanelMinSize}
         isCollapsed={isCollapsed}
         isPositionAbsolute={isPositionAbsolute}
+        leftPanelMaxSize={leftPanelMaxSize}
+        onLeftPanelCollapse={onLeftPanelCollapse}
+        onLeftPanelExpand={onLeftPanelExpand}
       >
         {children}
       </Panels>

package/src/components/PanelLayout/__stories__/PanelLayout.mdx

@@ -1,10 +1,16 @@
 import { Meta, Story, Canvas } from "@storybook/blocks";
 import * as PanelLayoutStories from "./PanelLayout.stories";
+import { DeprecatedWarning } from "@heliux-org/storybook-components";
 
 <Meta of={PanelLayoutStories} />
 
 # PanelLayout
 
+<DeprecatedWarning
+  alternativeName="DynamicPanelLayout"
+  alternativeLink="/?path=/docs/layout-dynamicpanellayout--docs"
+/>
+
 - [Overview](#overview)
 - [Props](#props)
 - [PanelLayout properties](#panel-properties)
@@ -42,10 +48,4 @@ Right side content can be toggled on and off base off actions in other panels
 
 <Canvas>
   <Story of={PanelLayoutStories.SwapContent} />
-</Canvas>
-
-### Dynamic PanelLayout
-
-<Canvas>
-  <Story of={PanelLayoutStories.DynamicallyAddPanelOnButtonClick} />
 </Canvas>

package/src/components/PanelLayout/__stories__/PanelLayout.stories.js

@@ -1,16 +1,14 @@
-import React, { useState, useMemo, useEffect } from "react";
-import { createStoryMetaSettingsDecorator } from "../../../storybook";
-import Button from "../../Button/Button";
-import Text from "../../Text/Text";
-import { Panel, PanelLayout } from "../PanelLayout";
-import { createComponentTemplate } from "@heliux-org/storybook-components";
-import Flex from "../../Flex/Flex";
 import Box from "../../Box/Box";
+import Text from "../../Text/Text";
 import "../PanelLayout.module.scss";
+import React, { useState } from "react";
+import Button from "../../Button/Button";
 import { PanelHeader } from "../../Panel/Panel";
+import { Panel, PanelLayout } from "../PanelLayout";
 import { GridRow } from "../../GridSystem/GridSystem";
+import { createStoryMetaSettingsDecorator } from "../../../storybook";
+import { createComponentTemplate } from "@heliux-org/storybook-components";
 import ScrollableContainer from "../../ScrollableContainer/ScrollableContainer";
-import DynamicPanelLayout from "../DynamicPanelLayout";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: PanelLayout,
@@ -18,7 +16,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Layout/Panel Layout",
+  title: "Layout/Panel Layout  [deprecated]",
   component: PanelLayout,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
@@ -302,31 +300,3 @@ const storyContainerStyle = {
   background: "var(--surface-level-200)",
   padding: "24px"
 };
-
-export const DynamicallyAddPanelOnButtonClick = () => {
-  const [show, setShow] = useState(false);
-
-  const data = useMemo(() => {
-    const panelsData = [
-      { id: 'panel1', content: 'Panel 1 content', minSize: 10, collapsible: true, collapsedSize: 5 },
-      { id: 'panel2', content: 'Panel 2 content', minSize: 10, collapsible: true },
-      { id: 'panel3', content: 'Panel 3 content', minSize: 20 },
-    ];
-
-    show && panelsData.push({
-      id: 'panel4',
-      content: 'Panel 4 content',
-      minSize: 10,
-      collapsible: true
-    });
-
-    return panelsData;
-  }, [show]);
-
-  return (
-    <Flex align={Flex.align.START} gap={Flex.gaps.MEDIUM} direction={Flex.directions.COLUMN} style={{ height: "300px", width: "100%" }}>
-      <Button onClick={() => setShow(prev => !prev)}>Click me</Button>
-      <DynamicPanelLayout panels={data} />
-    </Flex>
-  );
-};