@leanspec/ui 0.2.14 → 0.2.15-dev.21022397862

package/src/contexts/KeyboardShortcutsContext.tsx

@@ -1,95 +0,0 @@
-import { createContext, useContext, useState, useMemo } from 'react';
-import type { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@leanspec/ui-components';
-
-/**
- * Context value for keyboard shortcuts help dialog state.
- */
-interface KeyboardShortcutsContextValue {
-  /** Whether the keyboard shortcuts help dialog is visible */
-  showHelp: boolean;
-  /** Toggle the keyboard shortcuts help dialog */
-  toggleHelp: () => void;
-}
-
-const KeyboardShortcutsContext = createContext<KeyboardShortcutsContextValue | undefined>(
-  undefined
-);
-
-/**
- * Keyboard shortcuts help dialog component.
- * Shows available keyboard shortcuts in a modal dialog.
- */
-function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
-  const { t } = useTranslation('common');
-  const shortcuts = [
-    { key: 'h', description: t('keyboardShortcuts.items.dashboard') },
-    { key: 'g', description: t('keyboardShortcuts.items.specs') },
-    { key: 's', description: t('keyboardShortcuts.items.stats') },
-    { key: 'd', description: t('keyboardShortcuts.items.dependencies') },
-    { key: ',', description: t('keyboardShortcuts.items.settings') },
-    { key: '/', description: t('keyboardShortcuts.items.search') },
-    { key: '⌘ + K', description: t('keyboardShortcuts.items.quickSearch') },
-  ];
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
-      onClick={onClose}
-    >
-      <div
-        className="bg-background border rounded-lg shadow-lg p-6 max-w-md w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h3 className="text-lg font-medium mb-4">{t('keyboardShortcuts.title')}</h3>
-        <div className="space-y-2">
-          {shortcuts.map((s) => (
-            <div key={s.key} className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">{s.description}</span>
-              <kbd className="px-2 py-1 text-xs bg-secondary rounded border">{s.key}</kbd>
-            </div>
-          ))}
-        </div>
-        <Button onClick={onClose} variant="secondary" size="sm" className="mt-4 w-full">
-          {t('actions.close')}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Provider for keyboard shortcuts help dialog state.
- * Wraps the app to provide global keyboard shortcuts help functionality.
- */
-export function KeyboardShortcutsProvider({ children }: { children: ReactNode }) {
-  const [showHelp, setShowHelp] = useState(false);
-
-  const value = useMemo(
-    () => ({
-      showHelp,
-      toggleHelp: () => setShowHelp((prev) => !prev),
-    }),
-    [showHelp]
-  );
-
-  return (
-    <KeyboardShortcutsContext.Provider value={value}>
-      {children}
-      {showHelp && <KeyboardShortcutsHelp onClose={() => setShowHelp(false)} />}
-    </KeyboardShortcutsContext.Provider>
-  );
-}
-
-/**
- * Hook to access keyboard shortcuts context.
- * Must be used within a KeyboardShortcutsProvider.
- */
-export function useKeyboardShortcuts() {
-  const context = useContext(KeyboardShortcutsContext);
-  if (context === undefined) {
-    throw new Error('useKeyboardShortcuts must be used within a KeyboardShortcutsProvider');
-  }
-  return context;
-}

package/src/contexts/LayoutContext.tsx

@@ -1,45 +0,0 @@
-import { createContext, useContext, useState, useMemo } from 'react';
-import type { ReactNode } from 'react';
-
-/**
- * Layout context value for managing layout-specific UI state.
- * Currently manages mobile sidebar visibility.
- */
-interface LayoutContextValue {
-  /** Whether the mobile main sidebar is open */
-  mobileSidebarOpen: boolean;
-  /** Toggle the mobile main sidebar */
-  toggleMobileSidebar: () => void;
-}
-
-const LayoutContext = createContext<LayoutContextValue | undefined>(undefined);
-
-/**
- * Provider for layout-specific UI state.
- * Wraps the Layout component to provide mobile sidebar state management.
- */
-export function LayoutProvider({ children }: { children: ReactNode }) {
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-
-  const value = useMemo(
-    () => ({
-      mobileSidebarOpen,
-      toggleMobileSidebar: () => setMobileSidebarOpen((prev) => !prev),
-    }),
-    [mobileSidebarOpen]
-  );
-
-  return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
-}
-
-/**
- * Hook to access layout context.
- * Must be used within a LayoutProvider.
- */
-export function useLayout() {
-  const context = useContext(LayoutContext);
-  if (context === undefined) {
-    throw new Error('useLayout must be used within a LayoutProvider');
-  }
-  return context;
-}

package/src/contexts/ProjectContext.tsx

@@ -1,163 +0,0 @@
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
-import { api } from '../lib/api';
-import i18n from '../lib/i18n';
-import type { Project, ProjectValidationResponse, ProjectsResponse } from '../types/api';
-
-interface ProjectContextValue {
-  currentProject: Project | null;
-  projects: Project[];
-  availableProjects: Project[];
-  favoriteProjects: Project[];
-  loading: boolean;
-  error: string | null;
-  switchProject: (projectId: string) => Promise<void>;
-  addProject: (
-    path: string,
-    options?: { favorite?: boolean; color?: string; name?: string; description?: string | null }
-  ) => Promise<Project>;
-  updateProject: (
-    projectId: string,
-    updates: Partial<Pick<Project, 'name' | 'color' | 'favorite' | 'description'>>
-  ) => Promise<Project | undefined>;
-  removeProject: (projectId: string) => Promise<void>;
-  toggleFavorite: (projectId: string) => Promise<void>;
-  refreshProjects: () => Promise<void>;
-  validateProject: (projectId: string) => Promise<ProjectValidationResponse>;
-}
-
-const ProjectContext = createContext<ProjectContextValue | null>(null);
-
-const STORAGE_KEY = 'leanspec-current-project';
-
-export function ProjectProvider({ children }: { children: ReactNode }) {
-  const [currentProject, setCurrentProject] = useState<Project | null>(null);
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [favoriteProjects, setFavoriteProjects] = useState<Project[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const applyProjects = useCallback((data: ProjectsResponse) => {
-    const normalized = data.projects || [];
-    setProjects(normalized);
-    setFavoriteProjects(normalized.filter((project: Project) => project.favorite));
-
-    const storedId = localStorage.getItem(STORAGE_KEY);
-    const nextCurrent = (storedId ? normalized.find((p: Project) => p.id === storedId) || null : null)
-      || normalized[0]
-      || null;
-
-    setCurrentProject(nextCurrent);
-    if (nextCurrent) {
-      localStorage.setItem(STORAGE_KEY, nextCurrent.id);
-      api.setCurrentProjectId(nextCurrent.id);
-    } else {
-      api.setCurrentProjectId(null);
-    }
-  }, []);
-
-  const refreshProjects = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data: ProjectsResponse = await api.getProjects();
-      applyProjects(data);
-    } catch (err: unknown) {
-      console.error('Failed to load projects', err);
-      setError(i18n.t('projects.errors.load', { ns: 'common' }));
-    } finally {
-      setLoading(false);
-    }
-  }, [applyProjects]);
-
-  const switchProject = useCallback(async (projectId: string) => {
-    if (projectId === currentProject?.id) return;
-
-    setLoading(true);
-    setError(null);
-    try {
-      localStorage.setItem(STORAGE_KEY, projectId);
-      const data: ProjectsResponse = await api.getProjects();
-      applyProjects(data);
-    } catch (err: unknown) {
-      console.error('Failed to switch project', err);
-      setError(i18n.t('projects.errors.switch', { ns: 'common' }));
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  }, [applyProjects, currentProject?.id]);
-
-  const addProject = useCallback(async (
-    path: string,
-    options?: { favorite?: boolean; color?: string; name?: string; description?: string | null }
-  ): Promise<Project> => {
-    setError(null);
-    const project = await api.createProject(path, options);
-    await refreshProjects();
-    await switchProject(project.id);
-    return project;
-  }, [refreshProjects, switchProject]);
-
-  const updateProject = useCallback(async (
-    projectId: string,
-    updates: Partial<Pick<Project, 'name' | 'color' | 'favorite' | 'description'>>
-  ) => {
-    setError(null);
-    const updated = await api.updateProject(projectId, updates);
-    await refreshProjects();
-    return updated;
-  }, [refreshProjects]);
-
-  const removeProject = useCallback(async (projectId: string) => {
-    setError(null);
-    await api.deleteProject(projectId);
-    if (currentProject?.id === projectId) {
-      localStorage.removeItem(STORAGE_KEY);
-    }
-    await refreshProjects();
-  }, [currentProject?.id, refreshProjects]);
-
-  const toggleFavorite = useCallback(async (projectId: string) => {
-    const project = projects.find((p) => p.id === projectId);
-    const nextFavorite = !(project?.favorite ?? false);
-    await updateProject(projectId, { favorite: nextFavorite });
-  }, [projects, updateProject]);
-
-  const validateProject = useCallback(async (projectId: string) => {
-    return api.validateProject(projectId);
-  }, []);
-
-  useEffect(() => {
-    refreshProjects();
-  }, [refreshProjects]);
-
-  return (
-    <ProjectContext.Provider
-      value={{
-        currentProject,
-        projects,
-        availableProjects: projects,
-        favoriteProjects,
-        loading,
-        error,
-        switchProject,
-        addProject,
-        updateProject,
-        removeProject,
-        toggleFavorite,
-        refreshProjects,
-        validateProject,
-      }}
-    >
-      {children}
-    </ProjectContext.Provider>
-  );
-}
-
-export function useProject() {
-  const context = useContext(ProjectContext);
-  if (!context) {
-    throw new Error('useProject must be used within a ProjectProvider');
-  }
-  return context;
-}

package/src/contexts/ThemeContext.tsx

@@ -1,90 +0,0 @@
-import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
-
-type Theme = 'light' | 'dark' | 'system';
-
-interface ThemeContextValue {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  resolvedTheme: 'light' | 'dark';
-}
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-const STORAGE_KEY = 'leanspec-theme';
-
-function getSystemTheme(): 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(() => {
-    if (typeof window === 'undefined') return 'system';
-    return (localStorage.getItem(STORAGE_KEY) as Theme) || 'system';
-  });
-
-  const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
-
-  // Apply theme to document
-  useEffect(() => {
-    const root = document.documentElement;
-
-    // Add changing-theme class to disable transitions
-    root.classList.add('changing-theme');
-
-    // Update theme classes
-    root.classList.remove('light', 'dark');
-    root.classList.add(resolvedTheme);
-
-    // Remove changing-theme class after a brief delay to allow DOM to update
-    const timeoutId = setTimeout(() => {
-      root.classList.remove('changing-theme');
-    }, 50);
-
-    return () => clearTimeout(timeoutId);
-  }, [resolvedTheme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    if (theme !== 'system') return;
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = () => {
-      const root = document.documentElement;
-
-      // Add changing-theme class to disable transitions
-      root.classList.add('changing-theme');
-
-      // Update theme classes
-      root.classList.remove('light', 'dark');
-      root.classList.add(getSystemTheme());
-
-      // Remove changing-theme class after a brief delay
-      setTimeout(() => {
-        root.classList.remove('changing-theme');
-      }, 50);
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
-
-  const setTheme = (newTheme: Theme) => {
-    setThemeState(newTheme);
-    localStorage.setItem(STORAGE_KEY, newTheme);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}

package/src/contexts/index.ts

@@ -1,7 +0,0 @@
-export { ProjectProvider, useProject } from './ProjectContext';
-export { ThemeProvider, useTheme } from './ThemeContext';
-export { LayoutProvider, useLayout } from './LayoutContext';
-export {
-  KeyboardShortcutsProvider,
-  useKeyboardShortcuts,
-} from './KeyboardShortcutsContext';

package/src/hooks/useKeyboardShortcuts.ts

@@ -1,87 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-export interface KeyboardShortcut {
-  key: string;
-  ctrl?: boolean;
-  meta?: boolean;
-  shift?: boolean;
-  description: string;
-  action: () => void;
-}
-
-export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      // Don't trigger shortcuts when typing in inputs
-      if (
-        event.target instanceof HTMLInputElement ||
-        event.target instanceof HTMLTextAreaElement ||
-        event.target instanceof HTMLSelectElement
-      ) {
-        return;
-      }
-
-      for (const shortcut of shortcuts) {
-        const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
-        const ctrlMatch = shortcut.ctrl ? (event.ctrlKey || event.metaKey) : true;
-        const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
-
-        if (keyMatch && ctrlMatch && shiftMatch) {
-          event.preventDefault();
-          shortcut.action();
-          return;
-        }
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [shortcuts]);
-}
-
-export function useGlobalShortcuts() {
-  const navigate = useNavigate();
-  const { projectId } = useParams<{ projectId: string }>();
-  const basePath = projectId ? `/projects/${projectId}` : '/projects/default';
-
-  const shortcuts: KeyboardShortcut[] = [
-    {
-      key: 'h',
-      description: 'Go to dashboard (home)',
-      action: useCallback(() => navigate(basePath), [basePath, navigate]),
-    },
-    {
-      key: 'g',
-      description: 'Go to specs list',
-      action: useCallback(() => navigate(`${basePath}/specs`), [basePath, navigate]),
-    },
-    {
-      key: 's',
-      description: 'Go to stats',
-      action: useCallback(() => navigate(`${basePath}/stats`), [basePath, navigate]),
-    },
-    {
-      key: 'd',
-      description: 'Go to dependencies',
-      action: useCallback(() => navigate(`${basePath}/dependencies`), [basePath, navigate]),
-    },
-    {
-      key: ',',
-      description: 'Go to settings',
-      action: useCallback(() => navigate(`${basePath}/settings`), [basePath, navigate]),
-    },
-    {
-      key: '/',
-      description: 'Focus search (on specs page)',
-      action: useCallback(() => {
-        const searchInput = document.querySelector<HTMLInputElement>('input[type="text"]');
-        searchInput?.focus();
-      }, []),
-    },
-  ];
-
-  useKeyboardShortcuts(shortcuts);
-
-  return shortcuts;
-}