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

OpenSpec Change: enterprise-react-drive-sharing

• Change ID: enterprise-react-drive-sharing
• Package: @suaveplan/drive-react-sharing
• Category: react
• Target path: packages/drive/drive-react-sharing
• Status: PROPOSED
• Date: 2026-04-24
• Reference spec: /mnt/s/web/suaveplan/enterprise/react-drive-sharing.md

---

Summary

Deliver @suaveplan/drive-react-sharing on genesis from scratch at enterprise quality. React UI for shared drive resource management: ShareDialog (recipients list, permission picker, add/remove), PartitionBadge (type + encryption indicator), FileAccessList (read-only list with revoke), and useSharing hook. Genesis consolidates the three overlapping permission type names into one canonical union, adds a useSharing Storybook demo, wires useSharing to the real @suaveplan/drive-sharing engine, adds OTel counters for share actions, full accessibility, and Playwright E2E.

---

Current-state audit (genesis)

Package does not exist on genesis — fresh build.

---

Available workspace deps on genesis

Package	Role
@suaveplan/error (workspace:^)	DriveSharingError
@suaveplan/drive-sharing (workspace:^)	Sharing engine + canonical permission types
@suaveplan/react-translate (workspace:^)	i18n for all UI strings
@opentelemetry/api (catalog:observability)	drive.share.* counters + spans
zod (catalog:forms)	Prop validation
tslib (catalog:build)	TS helpers

External: React 18 peer.

---

Preserved public API surface

// Components
ShareDialog, PartitionBadge, FileAccessList

// Hook
useSharing

// Types (consolidated from three overlapping names)
SharePermission, ShareRecipient, AccessEntry, PartitionType,
ShareDialogProps, PartitionBadgeProps, FileAccessListProps,
UseSharingOptions, UseSharingReturn

---

New additions for genesis

1. DriveSharingError — codes: SHARING_ADD_FAILED, SHARING_REVOKE_FAILED, SHARING_PERMISSION_FAILED.
2. Consolidated permission types — SharePermission re-exported from @suaveplan/drive-sharing; AccessPermission and SharingPermission aliases removed.
3. Real engine integration — useSharing calls @suaveplan/drive-sharing engine (not an in-memory stub).
4. useSharing Storybook demo — hooks playground story (main branch had none).
5. OTel counters — drive.share.add, drive.share.revoke, drive.share.permission.change spans.
6. Accessibility — ShareDialog focus trap, ESC-to-close, aria-modal, aria-labelledby; axe-core in all stories.
7. Playwright E2E — add recipient, remove recipient, change permission, keyboard-only, mobile viewport.
8. Link sharing — generate/revoke shareable links with scope, expiry, and password.

---

File layout

packages/drive/drive-react-sharing/
  package.json
  tsconfig.json
  vitest.config.ts
  src/
    index.ts
    types/
    components/
      share-dialog/ (tsx + types + md + test + stories + index)
      partition-badge/ (tsx + types + md + test + stories + index)
      file-access-list/ (tsx + types + md + test + stories + index)
      share-link-dialog/ (tsx + types + md + test + stories + index)
    hooks/
      use-sharing/ (ts + md + test + stories + index)
  e2e/
    drive-sharing.spec.ts