ai-design-system 0.1.1 → 0.1.2

package/components/blocks/SectionLayout/SectionLayout.stories.tsx

@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SectionLayout } from './SectionLayout'
+
+/**
+ * SectionLayout Block Stories
+ *
+ * A layout block that provides adjustable panels with headers.
+ * Uses AdjustableLayout composite for panel management and AppHeader composite for headers.
+ *
+ * ## Features
+ * - Adjustable panel sizing with drag handles
+ * - Optional headers with tabs in each panel
+ * - Horizontal and vertical orientation support
+ * - Panel size persistence via localStorage
+ *
+ * ## Usage
+ * Perfect for creating multi-panel layouts with independent headers,
+ * such as code editors, chat interfaces, or dashboard layouts.
+ */
+const meta = {
+  title: 'Blocks/SectionLayout',
+  component: SectionLayout,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof SectionLayout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default SectionLayout
+ *
+ * 4-panel adjustable layout with headers using AppHeader composite.
+ */
+export const Default: Story = {
+  render: () => {
+    const sections = [
+      {
+        id: 'top-left',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Top Left Content</h3>
+            <p className="text-sm text-muted-foreground">Content area with AppHeader composite</p>
+          </div>
+        ),
+        defaultSize: 25,
+        header: {
+          tabs: [
+            { value: 'view', label: 'View' },
+            { value: 'edit', label: 'Edit' },
+          ],
+          defaultTab: 'view',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'top-right',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Top Right Content</h3>
+            <p className="text-sm text-muted-foreground">Content area with AppHeader composite</p>
+          </div>
+        ),
+        defaultSize: 25,
+        header: {
+          tabs: [
+            { value: 'tab1', label: 'Tab 1' },
+            { value: 'tab2', label: 'Tab 2' },
+            { value: 'tab3', label: 'Tab 3' },
+          ],
+          defaultTab: 'tab1',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'bottom-left',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Bottom Left Content</h3>
+            <p className="text-sm text-muted-foreground">Content area with minimal AppHeader</p>
+          </div>
+        ),
+        defaultSize: 25,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'bottom-right',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Bottom Right Content</h3>
+            <p className="text-sm text-muted-foreground">Content area with AppHeader composite</p>
+          </div>
+        ),
+        defaultSize: 25,
+        header: {
+          tabs: [
+            { value: 'log', label: 'Log' },
+            { value: 'console', label: 'Console' },
+          ],
+          defaultTab: 'log',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          storageKey="section-layout-default"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * Single Panel Layout
+ *
+ * Single panel with header using AppHeader composite.
+ */
+export const SinglePanel: Story = {
+  render: () => {
+    const sections = [
+      {
+        id: 'main-panel',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Single Panel Content</h3>
+            <p className="text-sm text-muted-foreground">Single panel with AppHeader composite</p>
+          </div>
+        ),
+        defaultSize: 100,
+        header: {
+          tabs: [
+            { value: 'overview', label: 'Overview' },
+            { value: 'details', label: 'Details' },
+            { value: 'settings', label: 'Settings' },
+          ],
+          defaultTab: 'overview',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          storageKey="section-layout-single"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * Primary Drag Handles
+ *
+ * Demonstrates primary colored drag handles.
+ */
+export const PrimaryDragHandles: Story = {
+  render: () => {
+    const sections = [
+      {
+        id: 'left',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Left Panel</h3>
+            <p className="text-sm text-muted-foreground">Primary drag handles</p>
+          </div>
+        ),
+        defaultSize: 50,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'right',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Right Panel</h3>
+            <p className="text-sm text-muted-foreground">Primary drag handles</p>
+          </div>
+        ),
+        defaultSize: 50,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          dragHandleColor="primary"
+          storageKey="section-layout-primary"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * Accent Drag Handles
+ *
+ * Demonstrates accent colored drag handles.
+ */
+export const AccentDragHandles: Story = {
+  render: () => {
+    const sections = [
+      {
+        id: 'panel1',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Panel 1</h3>
+            <p className="text-sm text-muted-foreground">Accent drag handles</p>
+          </div>
+        ),
+        defaultSize: 33,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'panel2',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Panel 2</h3>
+            <p className="text-sm text-muted-foreground">Accent drag handles</p>
+          </div>
+        ),
+        defaultSize: 34,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'panel3',
+        content: (
+          <div className="h-full bg-muted rounded-lg border p-4">
+            <h3 className="font-medium mb-2">Panel 3</h3>
+            <p className="text-sm text-muted-foreground">Accent drag handles</p>
+          </div>
+        ),
+        defaultSize: 33,
+        header: {
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          dragHandleColor="accent"
+          storageKey="section-layout-accent"
+        />
+      </div>
+    )
+  },
+}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -0,0 +1,82 @@
+import * as React from "react"
+import { AdjustableLayout, type AdjustableLayoutSection } from "@/components/composites/AdjustableLayout"
+import { AppHeader, type AppHeaderProps } from "@/components/composites/AppHeader"
+
+export interface SectionLayoutSection extends AdjustableLayoutSection {
+  header?: AppHeaderProps
+}
+
+export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Layout sections with optional headers
+   */
+  sections: SectionLayoutSection[]
+  /**
+   * Layout orientation for adjustable layout
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical"
+  /**
+   * Storage key for layout panel sizes persistence
+   */
+  storageKey?: string
+  /**
+   * Callback for section resize events
+   */
+  onSectionResize?: (sectionId: string, newSize: number) => void
+  /**
+   * Color theme for drag handles
+   * @default "border"
+   */
+  dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
+}
+
+/**
+ * SectionLayout Block
+ *
+ * A layout block that provides adjustable panels with headers.
+ * Uses AdjustableLayout composite for panel management and AppHeader composite for headers.
+ * 
+ * This is a Block component that composites multiple Composite components
+ * to provide higher-level layout functionality.
+ */
+export const SectionLayout = React.memo<SectionLayoutProps>(
+  ({ 
+    sections, 
+    orientation = "horizontal",
+    storageKey,
+    onSectionResize,
+    dragHandleColor = "border",
+    className,
+    ...props 
+  }) => {
+    // Transform sections to include headers
+    const transformedSections = sections.map(section => ({
+      ...section,
+      content: (
+        <div className="h-full flex flex-col">
+          {section.header && (
+            <AppHeader {...section.header} />
+          )}
+          <div className="flex-1">
+            {section.content}
+          </div>
+        </div>
+      ),
+    }))
+
+    return (
+      <AdjustableLayout
+        sections={transformedSections}
+        orientation={orientation}
+        storageKey={storageKey}
+        onSectionResize={onSectionResize}
+        dragHandleColor={dragHandleColor}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+
+SectionLayout.displayName = "SectionLayout"

package/components/blocks/SectionLayout/index.ts

@@ -0,0 +1,2 @@
+export { SectionLayout } from './SectionLayout'
+export type { SectionLayoutProps } from './SectionLayout'

package/components/blocks/index.ts

@@ -10,7 +10,9 @@ export type { DocumentEditorWithCommentsProps } from './DocumentEditorWithCommen
 export { FileChangeQueue } from './FileChangeQueue'
 export type { FileChangeQueueProps } from './FileChangeQueue'
 
-export { LayoutProvider } from './LayoutProvider'
+// Blocks
+export * from './LayoutProvider'
+export * from './SectionLayout'
 export type { LayoutProviderProps } from './LayoutProvider'
 
 export { WorkflowCanvas } from './WorkflowCanvas'

package/components/composites/AdjustableLayout/AdjustableLayout.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AdjustableLayout, type AdjustableLayoutSection } from './AdjustableLayout'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/primitives/Card'
+
+const meta = {
+  title: 'Composites/AdjustableLayout',
+  component: AdjustableLayout,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof AdjustableLayout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default AdjustableLayout
+ *
+ * 4-section layout with equal default sizes.
+ */
+export const Default: Story = {
+  render: () => {
+    const sections: AdjustableLayoutSection[] = [
+      {
+        id: 'left',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-blue-600">Left Panel</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Resizeable panel content</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 25,
+      },
+      {
+        id: 'center',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-green-600">Center Panel</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Resizeable panel content</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 25,
+      },
+      {
+        id: 'right',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-purple-600">Right Panel</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Resizeable panel content</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 25,
+      },
+      {
+        id: 'logs',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-orange-600">Logs Panel</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Resizeable panel content</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 25,
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <AdjustableLayout
+          sections={sections}
+          storageKey="adjustable-layout-default"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * Two Panels
+ *
+ * Simple 2-panel layout with resizable divider.
+ */
+export const TwoPanels: Story = {
+  render: () => {
+    const sections: AdjustableLayoutSection[] = [
+      {
+        id: 'main',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-blue-600">Main Content</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Primary content area</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 70,
+      },
+      {
+        id: 'sidebar',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-gray-600">Sidebar</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Secondary content area</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 30,
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <AdjustableLayout
+          sections={sections}
+          storageKey="adjustable-layout-two-panels"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * Vertical Orientation
+ *
+ * Vertical layout with horizontal dividers.
+ */
+export const VerticalOrientation: Story = {
+  render: () => {
+    const sections: AdjustableLayoutSection[] = [
+      {
+        id: 'header',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-blue-600">Header Section</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Top content area</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 20,
+      },
+      {
+        id: 'main',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-green-600">Main Content</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Middle content area</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 60,
+      },
+      {
+        id: 'footer',
+        content: (
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="text-gray-600">Footer Section</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">Bottom content area</p>
+            </CardContent>
+          </Card>
+        ),
+        defaultSize: 20,
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <AdjustableLayout
+          sections={sections}
+          orientation="vertical"
+          storageKey="adjustable-layout-vertical"
+        />
+      </div>
+    )
+  },
+}