suaveplan/openspec/archive/2026-05-12-enterprise-react-drive-sharing/tasks.md

Tasks: enterprise-react-drive-sharing

Change ID: enterprise-react-drive-sharing Package: @suaveplan/drive-react-sharing Target path: packages/drive/drive-react-sharing Prerequisite packages on Verdaccio: @suaveplan/error, @suaveplan/drive-sharing, @suaveplan/react-translate

---

1. Scaffold

• Create directory tree. Write package.json at 0.1.0, tsconfig.json, vitest.config.ts, scripts.
• Dependencies: @suaveplan/error workspace:^, @suaveplan/drive-sharing workspace:^, @suaveplan/react-translate workspace:^, @opentelemetry/api catalog:observability, zod catalog:forms, tslib catalog:build.

---

2. Error codes and types

• Define DriveSharingError; codes: SHARING_ADD_FAILED, SHARING_REVOKE_FAILED, SHARING_PERMISSION_FAILED.
• Re-export SharePermission from @suaveplan/drive-sharing (no local divergence). Define: ShareRecipient, AccessEntry, PartitionType, ShareDialogProps, PartitionBadgeProps, FileAccessListProps, UseSharingOptions, UseSharingReturn, ShareLinkDialogProps.

---

3. Hooks

useSharing

• Manages recipients array; calls real @suaveplan/drive-sharing engine for addRecipient, removeRecipient, updatePermission. OTel spans: drive.share.add, drive.share.revoke, drive.share.permission.change.
• Write use-sharing.test.ts (≤500 lines): add recipient calls engine, remove recipient calls engine, permission update calls engine, error states. DI-injected engine. { timeout: 10000 }.
• Write use-sharing.md.
• Write use-sharing.stories.tsx (hooks playground with live recipient management).

---

4. Components

PartitionBadge

• Displays partition type (personal / communal / vault / public) with encryption lock icon. All labels via useTranslation.
• Write test, stories (all-four-types, encrypted, playground), md.

FileAccessList

• Read-only list with revoke buttons. Each revoke button has aria-label naming the recipient via useTranslation. OTel drive.share.revoke counter on revoke.
• Write test, stories (default, with-owner, empty, playground), md.

ShareDialog

• Modal dialog with recipients list, permission picker, add-recipient form. Focus trap on open. ESC-to-close. aria-modal, aria-labelledby. All labels via useTranslation.
• Write share-dialog.test.tsx (≤500 lines): renders recipients, add fires useSharing.addRecipient, remove fires removeRecipient, ESC closes, axe-clean. { timeout: 10000 }.
• Write stories (default, with-recipients, vault-partition, empty, playground), md.

ShareLinkDialog

• Generate / revoke shareable link. Accepts scope: SharePermission, expiry?: Date, password?: boolean. Copy-to-clipboard button with aria-live announcement.
• Write test, stories (default, with-expiry, with-password, playground), md.

---

5. E2E

• e2e/drive-sharing.spec.ts — Playwright:
  • Open ShareDialog; add a recipient; verify they appear in the list.
  • Change a recipient's permission; verify dropdown updates.
  • Revoke a recipient; verify they are removed.
  • Navigate the dialog using keyboard only; verify no focus escapes.
  • Test on mobile viewport.

---

6. Verify and publish

• bunx turbo lint typecheck test --filter=@suaveplan/drive-react-sharing — green.
• bunx turbo test:coverage --filter=@suaveplan/drive-react-sharing — 100%.
• bun scripts/publish.ts --package @suaveplan/drive-react-sharing.
• Archive change folder.