@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/FileTree.tsx

@@ -1,379 +0,0 @@
-/**
- * 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/src/public/components/FontPicker/FontPicker.css

@@ -1,276 +0,0 @@
-/**
- * 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;
-}