@fragments-sdk/cli 0.2.2

package/src/viewer/components/BottomPanel.tsx

@@ -0,0 +1,224 @@
+/**
+ * BottomPanel component - the tabbed panel at the bottom of the viewer.
+ * Contains Code, Styles, Accessibility, Actions, and Graph tabs.
+ */
+
+import { memo, useCallback } from 'react';
+import type { SegmentDefinition, SegmentVariant } from '../../core/index.js';
+import clsx from 'clsx';
+import { ResizablePanel } from './ResizablePanel.js';
+import { CodePanel } from './CodePanel.js';
+import { TokenStylePanel } from './TokenStylePanel.js';
+import { AccessibilityPanel } from './AccessibilityPanel.js';
+import { InteractionsPanel } from './InteractionsPanel.js';
+import { ActionsPanel } from './ActionsPanel.js';
+import { ComponentGraph } from './ComponentGraph.js';
+import { ContractPanel } from './ContractPanel.js';
+import type { ActivePanel } from '../hooks/useAppState.js';
+import type { ActionLog } from '../hooks/useActions.js';
+
+interface BottomPanelProps {
+  // Component data
+  segment: SegmentDefinition;
+  variant: SegmentVariant;
+  segments: Array<{ path: string; segment: SegmentDefinition }>;
+
+  // Panel state
+  activePanel: ActivePanel;
+  onPanelChange: (panel: ActivePanel) => void;
+
+  // Figma
+  figmaUrl?: string;
+  figmaStyles: Record<string, string> | null;
+  renderedStyles: Record<string, string> | null;
+  figmaLoading: boolean;
+  figmaError?: string;
+  onFetchFigma: () => void;
+  onRefreshRendered: () => void;
+
+  // Actions
+  actionLogs: ActionLog[];
+  onClearActionLogs: () => void;
+
+  // Navigation
+  onNavigateToComponent: (name: string) => void;
+
+  // Keys
+  previewKey: number;
+  segmentKey: string;
+}
+
+// Tab button component
+interface TabButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  badge?: number;
+}
+
+const TabButton = memo(function TabButton({ active, onClick, children, badge }: TabButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "px-3 py-1 text-xs font-medium rounded relative",
+        active
+          ? "text-primary bg-[--bg-hover]"
+          : "text-tertiary hover:text-secondary"
+      )}
+    >
+      {children}
+      {badge !== undefined && badge > 0 && (
+        <span className="absolute -top-1 -right-1 w-4 h-4 text-[10px] bg-blue-500 text-white rounded-full flex items-center justify-center">
+          {badge > 99 ? '99+' : badge}
+        </span>
+      )}
+    </button>
+  );
+});
+
+export const BottomPanel = memo(function BottomPanel({
+  segment,
+  variant,
+  segments,
+  activePanel,
+  onPanelChange,
+  figmaUrl,
+  figmaStyles,
+  renderedStyles,
+  figmaLoading,
+  figmaError,
+  onFetchFigma,
+  onRefreshRendered,
+  actionLogs,
+  onClearActionLogs,
+  onNavigateToComponent,
+  previewKey,
+  segmentKey,
+}: BottomPanelProps) {
+  const handleStylesClick = useCallback(() => {
+    onPanelChange('styles');
+    onFetchFigma();
+    setTimeout(onRefreshRendered, 100);
+  }, [onPanelChange, onFetchFigma, onRefreshRendered]);
+
+  return (
+    <ResizablePanel
+      visible={true}
+      header={
+        <div className="flex items-center gap-1">
+          <TabButton
+            active={activePanel === 'code'}
+            onClick={() => onPanelChange('code')}
+          >
+            Code
+          </TabButton>
+          {figmaUrl && (
+            <TabButton
+              active={activePanel === 'styles'}
+              onClick={handleStylesClick}
+            >
+              Styles
+            </TabButton>
+          )}
+          <TabButton
+            active={activePanel === 'accessibility'}
+            onClick={() => onPanelChange('accessibility')}
+          >
+            Accessibility
+          </TabButton>
+          {variant?.hasPlayFunction && (
+            <TabButton
+              active={activePanel === 'interactions'}
+              onClick={() => onPanelChange('interactions')}
+            >
+              Interactions
+            </TabButton>
+          )}
+          <TabButton
+            active={activePanel === 'actions'}
+            onClick={() => onPanelChange('actions')}
+            badge={actionLogs.length}
+          >
+            Actions
+          </TabButton>
+          <TabButton
+            active={activePanel === 'graph'}
+            onClick={() => onPanelChange('graph')}
+          >
+            Graph
+          </TabButton>
+          <TabButton
+            active={activePanel === 'contract'}
+            onClick={() => onPanelChange('contract')}
+          >
+            Contract
+          </TabButton>
+        </div>
+      }
+    >
+      {activePanel === 'code' && (
+        <div className="p-4">
+          <CodePanel
+            variant={variant}
+            componentName={segment.meta.name}
+            propDefs={segment.props}
+            compact
+          />
+        </div>
+      )}
+
+      {activePanel === 'styles' && figmaUrl && (
+        <TokenStylePanel
+          figmaUrl={figmaUrl}
+          figmaStyles={figmaStyles}
+          renderedStyles={renderedStyles}
+          figmaLoading={figmaLoading}
+          figmaError={figmaError}
+          onFetchFigma={onFetchFigma}
+          onRefreshRendered={onRefreshRendered}
+        />
+      )}
+
+      {activePanel === 'accessibility' && (
+        <AccessibilityPanel
+          cacheKey={segmentKey}
+          previewKey={previewKey}
+          autoScan={true}
+          componentName={segment.meta.name}
+          variantName={variant.name}
+        />
+      )}
+
+      {activePanel === 'interactions' && (
+        <InteractionsPanel
+          key={segmentKey}
+          variant={variant}
+          previewKey={previewKey}
+        />
+      )}
+
+      {activePanel === 'actions' && (
+        <ActionsPanel
+          logs={actionLogs}
+          onClear={onClearActionLogs}
+        />
+      )}
+
+      {activePanel === 'graph' && (
+        <ComponentGraph
+          segment={segment}
+          allSegments={segments}
+          onNavigate={onNavigateToComponent}
+        />
+      )}
+
+      {activePanel === 'contract' && (
+        <ContractPanel
+          contract={segment.contract}
+          componentName={segment.meta.name}
+        />
+      )}
+    </ResizablePanel>
+  );
+});