Feature/shared UI components - #23

Overview

This PR sets up and integrates a shared component package (@docsgraph/ui) to prevent UI code duplication between the web and desktop client targets. It migrates the DocumentListItem component into the shared package as a proof of concept and documents the UI contribution guidelines.

Key Changes

1. Created Shared DocumentListItem Component (packages/ui/src/DocumentListItem.tsx)

• Extracted the inline document list item button markup into a reusable functional component in the shared workspace package.
• Enforces type safety with TypeScript props (DocumentListItemProps) extending standard HTMLAttributes<HTMLButtonElement>.
• Includes id mapping onto the HTML element.

2. Exported Component (packages/ui/src/index.ts)

• Added DocumentListItem and DocumentListItemProps to public exports of the @docsgraph/ui package.

3. Integrated into Frontend (apps/web/src/App.tsx)

• Imported and utilized <DocumentListItem> inside documents.map() rendering of the "Available Documents" list.

4. Documented Guidelines (CONTRIBUTING.md)

• Added a UI Architecture Guidelines section explaining the roles of shared workspace packages vs. platform-specific shell code:
  • Shared UI Components: Platform-agnostic elements reside in packages/ui.
  • Platform-Specific UI: Environment integration and window management code lives in apps/.

Verification & CI Status

• pnpm lint: Passed (0 warnings/errors)
• pnpm typecheck: Passed (0 errors)
• pnpm build: Passed
• pnpm test: Passed (14/14 tests)