@pennyfarthing/core 11.3.7 → 11.4.0

package/packages/core/src/public/components/FileTree.tsx

@@ -0,0 +1,379 @@
+/**
+ * FileTree - Display modified files in a tree structure
+ *
+ * Story MSSCI-12710 - FileTree Component
+ *
+ * Features:
+ * - Display modified files with paths and status indicators
+ * - Group files by directory with collapsible sections
+ * - Click to open file in DiffViewer
+ * - Badge showing count of modified files
+ * - Real-time updates as files change
+ */
+
+import React, { useState, useCallback, useMemo, useRef, useEffect, KeyboardEvent } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type FileStatus = 'created' | 'modified' | 'deleted';
+
+export interface FileChange {
+  path: string;
+  status: FileStatus;
+}
+
+export interface FileTreeProps {
+  files: FileChange[];
+  onFileClick?: (file: FileChange) => void;
+}
+
+// =============================================================================
+// Utility Functions
+// =============================================================================
+
+function getDirectory(path: string): string {
+  const lastSlash = path.lastIndexOf('/');
+  if (lastSlash === -1) return 'root';
+  return path.substring(0, lastSlash);
+}
+
+function getFileName(path: string): string {
+  const lastSlash = path.lastIndexOf('/');
+  if (lastSlash === -1) return path;
+  return path.substring(lastSlash + 1);
+}
+
+function groupFilesByDirectory(files: FileChange[]): Map<string, FileChange[]> {
+  const groups = new Map<string, FileChange[]>();
+
+  for (const file of files) {
+    const dir = getDirectory(file.path);
+    const existing = groups.get(dir) || [];
+    existing.push(file);
+    groups.set(dir, existing);
+  }
+
+  return groups;
+}
+
+function countByStatus(files: FileChange[]): { created: number; modified: number; deleted: number } {
+  return files.reduce(
+    (acc, file) => {
+      const status = file.status || 'modified';
+      acc[status] = (acc[status] || 0) + 1;
+      return acc;
+    },
+    { created: 0, modified: 0, deleted: 0 }
+  );
+}
+
+function formatStatusBreakdown(counts: { created: number; modified: number; deleted: number }): string {
+  const parts: string[] = [];
+  if (counts.created > 0) parts.push(`${counts.created} created`);
+  if (counts.modified > 0) parts.push(`${counts.modified} modified`);
+  if (counts.deleted > 0) parts.push(`${counts.deleted} deleted`);
+  return parts.join(', ');
+}
+
+// =============================================================================
+// Status Icon Component
+// =============================================================================
+
+interface StatusIconProps {
+  status: FileStatus | undefined;
+}
+
+function StatusIcon({ status }: StatusIconProps): React.ReactElement {
+  const safeStatus = status || 'modified';
+
+  return (
+    <span
+      data-testid={`status-${safeStatus}`}
+      className={`status-icon status-${safeStatus}`}
+      aria-hidden="true"
+    >
+      {safeStatus === 'created' && '+'}
+      {safeStatus === 'modified' && '~'}
+      {safeStatus === 'deleted' && '-'}
+    </span>
+  );
+}
+
+// =============================================================================
+// File Item Component
+// =============================================================================
+
+interface FileItemProps {
+  file: FileChange;
+  onFileClick?: (file: FileChange) => void;
+  isFocused: boolean;
+  onFocus: () => void;
+}
+
+function FileItem({ file, onFileClick, isFocused, onFocus }: FileItemProps): React.ReactElement {
+  const status = file.status || 'modified';
+  const fileName = getFileName(file.path);
+  const [hasFocus, setHasFocus] = useState(false);
+
+  const handleClick = useCallback(() => {
+    onFileClick?.(file);
+  }, [file, onFileClick]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onFileClick?.(file);
+      }
+    },
+    [file, onFileClick]
+  );
+
+  const handleFocus = useCallback(() => {
+    setHasFocus(true);
+    onFocus();
+  }, [onFocus]);
+
+  const handleBlur = useCallback(() => {
+    setHasFocus(false);
+  }, []);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          role="treeitem"
+          data-testid="file-item"
+          className={`file-item file-${status}${isFocused || hasFocus ? ' focused' : ''}`}
+          tabIndex={0}
+          aria-label={`${fileName}, ${status}`}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        >
+          <StatusIcon status={file.status} />
+          <span className="file-name">{fileName}</span>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{file.path}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// =============================================================================
+// Directory Section Component
+// =============================================================================
+
+interface DirectorySectionProps {
+  directory: string;
+  files: FileChange[];
+  isExpanded: boolean;
+  onToggle: () => void;
+  onFileClick?: (file: FileChange) => void;
+  focusedPath: string | null;
+  onFileFocus: (path: string) => void;
+}
+
+function DirectorySection({
+  directory,
+  files,
+  isExpanded,
+  onToggle,
+  onFileClick,
+  focusedPath,
+  onFileFocus,
+}: DirectorySectionProps): React.ReactElement {
+  return (
+    <Collapsible
+      open={isExpanded}
+      onOpenChange={() => onToggle()}
+      asChild
+    >
+      <div
+        role="group"
+        data-testid={`directory-${directory}`}
+        className="directory-section"
+      >
+        <CollapsibleTrigger asChild>
+          <div className="directory-header">
+            <span
+              className="directory-toggle"
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? 'Collapse' : 'Expand'}
+            >
+              <span className="toggle-icon">{isExpanded ? '▼' : '▶'}</span>
+            </span>
+            <span className="directory-name">{directory === 'root' ? '/' : directory}</span>
+            <span className="directory-count">{files.length}</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="directory-files">
+            {files.map((file, index) => (
+              <FileItem
+                key={`${file.path}-${index}`}
+                file={file}
+                onFileClick={onFileClick}
+                isFocused={focusedPath === file.path}
+                onFocus={() => onFileFocus(file.path)}
+              />
+            ))}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+// =============================================================================
+// FileTree Component
+// =============================================================================
+
+export function FileTree({ files, onFileClick }: FileTreeProps): React.ReactElement {
+  const [collapsedDirs, setCollapsedDirs] = useState<Set<string>>(new Set());
+  const [focusedPath, setFocusedPath] = useState<string | null>(null);
+  const previousFocusedRef = useRef<string | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  // Group files by directory
+  const groupedFiles = useMemo(() => groupFilesByDirectory(files), [files]);
+
+  // Calculate status counts
+  const statusCounts = useMemo(() => countByStatus(files), [files]);
+  const statusTooltip = useMemo(() => formatStatusBreakdown(statusCounts), [statusCounts]);
+
+  // Get sorted directory names
+  const directories = useMemo(() => {
+    const dirs = Array.from(groupedFiles.keys()).sort();
+    // Move 'root' to the end for display
+    const rootIndex = dirs.indexOf('root');
+    if (rootIndex > -1) {
+      dirs.splice(rootIndex, 1);
+      dirs.push('root');
+    }
+    return dirs;
+  }, [groupedFiles]);
+
+  // Preserve focus when files update
+  useEffect(() => {
+    if (focusedPath) {
+      previousFocusedRef.current = focusedPath;
+    }
+  }, [focusedPath]);
+
+  useEffect(() => {
+    // If the previously focused file still exists, try to refocus it
+    if (previousFocusedRef.current) {
+      const stillExists = files.some((f) => f.path === previousFocusedRef.current);
+      if (stillExists) {
+        // The focus will be maintained by the DOM if the element still exists
+        setFocusedPath(previousFocusedRef.current);
+      }
+    }
+  }, [files]);
+
+  const handleToggle = useCallback((dir: string) => {
+    setCollapsedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(dir)) {
+        next.delete(dir);
+      } else {
+        next.add(dir);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleFileFocus = useCallback((path: string) => {
+    setFocusedPath(path);
+  }, []);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+
+    e.preventDefault();
+
+    // Get all visible tree items
+    const treeItems = treeRef.current?.querySelectorAll('[role="treeitem"]');
+    if (!treeItems || treeItems.length === 0) return;
+
+    const items = Array.from(treeItems) as HTMLElement[];
+    const currentIndex = items.findIndex(item => document.activeElement === item);
+
+    let nextIndex: number;
+    if (e.key === 'ArrowDown') {
+      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+    } else {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+    }
+
+    items[nextIndex]?.focus();
+  }, []);
+
+  // Empty state
+  if (files.length === 0) {
+    return (
+      <TooltipProvider delayDuration={300}>
+        <div role="tree" aria-label="Changed files" className="filetree">
+          <Badge
+            variant="secondary"
+            data-testid="file-count-badge"
+            className="file-count-badge"
+            aria-label="0 files changed"
+          >
+            0
+          </Badge>
+          <div className="empty-state">No files changed</div>
+        </div>
+      </TooltipProvider>
+    );
+  }
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div
+        ref={treeRef}
+        role="tree"
+        aria-label="Changed files"
+        className="filetree"
+        onKeyDown={handleKeyDown}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Badge
+              variant="secondary"
+              data-testid="file-count-badge"
+              className="file-count-badge"
+              aria-label={`${files.length} files changed`}
+            >
+              {files.length}
+            </Badge>
+          </TooltipTrigger>
+          <TooltipContent>{statusTooltip}</TooltipContent>
+        </Tooltip>
+        {directories.map((dir) => (
+          <DirectorySection
+            key={dir}
+            directory={dir}
+            files={groupedFiles.get(dir) || []}
+            isExpanded={!collapsedDirs.has(dir)}
+            onToggle={() => handleToggle(dir)}
+            onFileClick={onFileClick}
+            focusedPath={focusedPath}
+            onFileFocus={handleFileFocus}
+          />
+        ))}
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default FileTree;

package/packages/core/src/public/components/FontPicker/FontPicker.css

@@ -0,0 +1,276 @@
+/**
+ * FontPicker Component Styles
+ *
+ * Story MSSCI-12769 - Font Customization
+ */
+
+/* =============================================================================
+   Font Picker Container
+   ============================================================================= */
+
+.font-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* =============================================================================
+   Font Picker Button
+   ============================================================================= */
+
+.font-picker-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary, #0f0f1a);
+  border: 1px solid var(--border, #27272a);
+  border-radius: 0.375rem;
+  color: var(--text-primary, #e4e4e7);
+  cursor: pointer;
+  min-width: 150px;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.font-picker-button:hover {
+  border-color: var(--border-focus);
+  background: var(--bg-secondary);
+}
+
+.font-picker-button:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 79, 70, 229), 0.2);
+}
+
+.font-picker-current {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.font-picker-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.font-picker-chevron {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Font Picker Menu
+   ============================================================================= */
+
+.font-picker-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  background: var(--bg-secondary, #16213e);
+  border: 1px solid var(--border, #27272a);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+  display: none;
+  max-height: 320px;
+  overflow-y: auto;
+  min-width: 220px;
+}
+
+.font-picker-menu.open {
+  display: block;
+}
+
+/* =============================================================================
+   Font Picker Options
+   ============================================================================= */
+
+.font-picker-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary, #16213e);
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--text-primary, #e4e4e7);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.font-picker-option:hover,
+.font-picker-option.focused {
+  background: var(--bg-tertiary, #0f0f1a);
+}
+
+.font-picker-option.active {
+  background: var(--accent);
+  color: white;
+}
+
+.font-picker-option.active:hover {
+  background: var(--accent-hover);
+}
+
+.font-name {
+  flex: 1;
+}
+
+.font-preview {
+  font-size: 1rem;
+  color: var(--text-muted);
+  margin-left: 0.5rem;
+}
+
+.font-picker-option.active .font-preview {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.font-check {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+}
+
+/* =============================================================================
+   Custom Font Input
+   ============================================================================= */
+
+.font-picker-custom-input {
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  width: 100%;
+}
+
+.font-picker-custom-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 79, 70, 229), 0.2);
+}
+
+.font-picker-custom-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* =============================================================================
+   Font Size Picker
+   ============================================================================= */
+
+.font-size-picker {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.font-size-option {
+  padding: 0.375rem 0.625rem;
+  background: var(--bg-tertiary, #0f0f1a);
+  border: none;
+  border-right: 1px solid var(--border, #27272a);
+  color: var(--text-secondary, #a1a1aa);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.font-size-option:last-child {
+  border-right: none;
+}
+
+.font-size-option:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.font-size-option.active {
+  background: var(--accent);
+  color: white;
+}
+
+.font-size-option:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 79, 70, 229), 0.4);
+}
+
+/* =============================================================================
+   Search Input
+   ============================================================================= */
+
+.font-picker-search {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--border, #27272a);
+  position: sticky;
+  top: 0;
+  background: var(--bg-secondary, #16213e);
+  z-index: 1;
+}
+
+.font-picker-search-input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  background: var(--bg-tertiary, #0f0f1a);
+  border: 1px solid var(--border, #27272a);
+  border-radius: 0.25rem;
+  color: var(--text-primary, #e4e4e7);
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+}
+
+.font-picker-search-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.font-picker-search-input::placeholder {
+  color: var(--text-muted, #71717a);
+}
+
+/* =============================================================================
+   Group Headers
+   ============================================================================= */
+
+.font-picker-group-header {
+  padding: 0.375rem 0.75rem 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted, #71717a);
+  user-select: none;
+}
+
+.font-picker-group-header:not(:first-child) {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--border, #27272a);
+  padding-top: 0.5rem;
+}
+
+/* =============================================================================
+   Empty State
+   ============================================================================= */
+
+.font-picker-empty {
+  padding: 0.75rem;
+  text-align: center;
+  color: var(--text-muted, #71717a);
+  font-size: 0.8125rem;
+  font-style: italic;
+}