feat(masonry):[palette]: update components in palette

Signed-off-by: Justin Charles <[email protected]>

Author: justin212407

modules/masonry/src/palette/brickListPanel.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState, Suspense } from 'react';
+import { defaultCategories as categories } from './categories';
+import bricksData from './config/brick-config.json';
+import type { BrickConfig } from './types';
+import { brickViews } from './registry';
+import './palette.css';
+
+interface BrickListPanelProps {
+  selectedCategory: string;
+  onClose: () => void;
+  filter?: string;
+}
+
+const bricks: BrickConfig[] = (bricksData as any[]).map((b) => ({
+  ...b,
+  argCount: b.argCount ?? 0,
+}));
+
+const groupBricksByCategory = (bricks: BrickConfig[]) => {
+  const grouped: Record<string, BrickConfig[]> = {};
+  bricks.forEach((brick) => {
+    if (!grouped[brick.category]) {
+      grouped[brick.category] = [];
+    }
+    grouped[brick.category].push(brick);
+  });
+  return grouped;
+};
+
+const BrickListPanel: React.FC<BrickListPanelProps> = ({
+  selectedCategory,
+  onClose,
+  filter = '',
+}) => {
+  // Handle close button click
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClose();
+  };
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [filteredBricks, setFilteredBricks] = useState<Record<string, BrickConfig[]>>({});
+
+  useEffect(() => {
+    const filtered = filter
+      ? bricks.filter((brick) => brick.label.toLowerCase().includes(filter.toLowerCase()))
+      : bricks;
+
+    setFilteredBricks(groupBricksByCategory(filtered));
+  }, [filter]);
+
+  useEffect(() => {
+    if (selectedCategory && containerRef.current) {
+      const categoryElement = containerRef.current.querySelector(
+        `[data-category="${selectedCategory}"]`,
+      ) as HTMLElement;
+
+      if (categoryElement) {
+        categoryElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, [selectedCategory]);
+
+  return (
+    <div className="brick-panel">
+      <div className="brick-panel-header">
+        <h3>Blocks</h3>
+        <button
+          className="close-button"
+          onClick={handleClose}
+          aria-label="Close panel"
+          type="button"
+        >
+          ×
+        </button>
+      </div>
+      <div className="brick-list" ref={containerRef}>
+        {Object.entries(filteredBricks).map(([category, categoryBricks]) => (
+          <div key={category} className="brick-category" data-category={category}>
+            <h4 className="category-header">{category}</h4>
+            <div className="brick-category-list">
+              {categoryBricks.map((brick) => (
+                <div key={brick.id} className="brick-item">
+                  <Suspense fallback={<div>Loading brick...</div>}>
+                    <AsyncBrickView brick={brick} />
+                  </Suspense>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const AsyncBrickView = ({ brick }: { brick: BrickConfig }) => {
+  const [BrickComponent, setBrickComponent] = React.useState<React.FC<BrickConfig> | null>(null);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    let isMounted = true;
+
+    const loadBrick = async () => {
+      try {
+        const Component = brickViews[brick.type];
+        if (!Component) {
+          throw new Error(`No view found for brick type: ${brick.type}`);
+        }
+
+        if (isMounted) {
+          setBrickComponent(() => Component);
+        }
+      } catch (err) {
+        if (isMounted) setError(err as Error);
+      }
+    };
+
+    loadBrick();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [brick]);
+
+  if (error) {
+    return (
+      <div className="brick-default">
+        <div className="brick-name">Error loading brick</div>
+        <div className="brick-description">{error.message}</div>
+      </div>
+    );
+  }
+
+  if (!BrickComponent) {
+    return (
+      <div className="brick-default">
+        <div className="brick-name">Loading...</div>
+      </div>
+    );
+  }
+
+  return <BrickComponent {...brick} />;
+};
+
+export default BrickListPanel;

modules/masonry/src/palette/categoryGrid.tsx

@@ -0,0 +1,41 @@
+// src/palette/CategoryGrid.tsx
+import React from 'react';
+import { getCategories, PaletteMode } from './categories';
+
+interface Props {
+  /** Called when a category is selected */
+  onSelect: (id: string) => void;
+  /** Currently selected category ID */
+  selected?: string;
+  /** Current palette mode */
+  mode: PaletteMode;
+}
+
+/**
+ * CategoryGrid
+ * Renders a vertical list of category buttons
+ */
+const CategoryGrid: React.FC<Props> = ({ onSelect, selected, mode }) => {
+  const categories = getCategories(mode);
+
+  return (
+    <div className="category-grid">
+      {categories.map((category) => (
+        <button
+          key={category.id}
+          onClick={() => onSelect(category.id)}
+          className={`category-button ${selected === category.id ? 'selected' : ''}`}
+          style={{
+            backgroundColor: category.color,
+            color: 'white',
+          }}
+          aria-label={category.label}
+        >
+          {category.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default CategoryGrid;

modules/masonry/src/palette/paletteWrapper.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import Sidebar from './sidebar';
+import BrickListPanel from './brickListPanel';
+import './palette.css';
+
+const PaletteWrapper: React.FC = () => {
+  const [selectedCategory, setSelectedCategory] = useState<string | undefined>(undefined);
+  const [query, setQuery] = useState('');
+  const [showBrickPanel, setShowBrickPanel] = useState(false);
+  const prevSelectedCategory = React.useRef<string | undefined>(undefined);
+
+  const handleCategorySelect = (categoryId: string) => {
+    if (selectedCategory === categoryId) {
+      setShowBrickPanel(!showBrickPanel);
+    } else {
+      setSelectedCategory(categoryId);
+      setShowBrickPanel(true);
+    }
+  };
+
+  const handleCloseBrickPanel = () => {
+    setShowBrickPanel(false);
+  };
+
+  React.useEffect(() => {
+    if (selectedCategory && selectedCategory !== prevSelectedCategory.current) {
+      setShowBrickPanel(true);
+    }
+    prevSelectedCategory.current = selectedCategory;
+  }, [selectedCategory]);
+
+  return (
+    <>
+      {/* Primary Palette */}
+      <div className="palette-container">
+        <Sidebar
+          selected={selectedCategory}
+          onSelect={handleCategorySelect}
+          query={query}
+          setQuery={setQuery}
+        />
+      </div>
+
+      {/* Secondary Panel - Only show when a category is selected and panel is open */}
+      {selectedCategory && showBrickPanel && (
+        <div className="brick-list-container">
+          <BrickListPanel
+            selectedCategory={selectedCategory}
+            onClose={handleCloseBrickPanel}
+            filter={query}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PaletteWrapper;

modules/masonry/src/palette/registry.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { SimpleBrickView } from '../brick/view/components/simple';
+import { ExpressionBrickView } from '../brick/view/components/expression';
+import { CompoundBrickView } from '../brick/view/components/compound';
+import type { BrickConfig } from './types';
+
+export type BrickType = 'simple' | 'expression' | 'compound';
+
+const DEFAULT_STROKE_WIDTH = 1;
+const DEFAULT_SCALE = 1;
+const DEFAULT_COLOR_FG = '#000';
+const DEFAULT_SHADOW = false;
+const DEFAULT_VISIBLE = true;
+const DEFAULT_STATE = 'default';
+
+function makeArgs(config: BrickConfig) {
+  return config.argCount > 0 ? Array(config.argCount).fill({ w: 20, h: 20 }) : [];
+}
+
+function wrap<P extends object>(View: React.ComponentType<P>): React.FC<BrickConfig> {
+  return function WrappedBrickView(cfg: BrickConfig) {
+    const [content, setContent] = React.useState<React.ReactNode>(null);
+
+    React.useEffect(() => {
+      let isMounted = true;
+
+      const renderView = async () => {
+        const common = {
+          label: cfg.label,
+          labelType: 'text' as const,
+          colorBg: cfg.color,
+          colorFg: DEFAULT_COLOR_FG,
+          strokeColor: DEFAULT_COLOR_FG,
+          strokeWidth: DEFAULT_STROKE_WIDTH,
+          scale: DEFAULT_SCALE,
+          shadow: DEFAULT_SHADOW,
+          tooltip: cfg.id,
+          bboxArgs: makeArgs(cfg),
+          visualState: DEFAULT_STATE,
+          isActionMenuOpen: false,
+          isVisible: DEFAULT_VISIBLE,
+        };
+
+        let result: React.ReactNode;
+
+        try {
+          switch (cfg.type) {
+            case 'simple':
+              result = (
+                <SimpleBrickView
+                  {...(common as any)}
+                  topNotch={cfg.notches.top}
+                  bottomNotch={cfg.notches.bottom}
+                />
+              );
+              break;
+            case 'expression':
+              result = (
+                <ExpressionBrickView
+                  {...(common as any)}
+                  topNotch={cfg.notches.top}
+                  bottomNotch={cfg.notches.bottom}
+                />
+              );
+              break;
+            case 'compound':
+              result = (
+                <CompoundBrickView
+                  {...(common as any)}
+                  topNotch={cfg.notches.top}
+                  bottomNotch={cfg.notches.bottom}
+                />
+              );
+              break;
+            default:
+              result = null;
+          }
+
+          const finalResult = (await (result as any)?.then?.((x: React.ReactNode) => x)) ?? result;
+
+          if (isMounted) {
+            setContent(finalResult);
+          }
+        } catch (error) {
+          console.error('Error rendering brick:', error);
+          if (isMounted) {
+            setContent(<div>Error rendering brick</div>);
+          }
+        }
+      };
+
+      renderView();
+
+      return () => {
+        isMounted = false;
+      };
+    }, [cfg]);
+
+    return (
+      content || (
+        <div
+          style={{
+            width: '100%',
+            height: '40px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span>Loading...</span>
+        </div>
+      )
+    );
+  };
+}
+
+export const brickViews: Record<BrickType, React.FC<BrickConfig>> = {
+  simple: wrap(SimpleBrickView),
+  expression: wrap(ExpressionBrickView),
+  compound: wrap(CompoundBrickView),
+};