Initial Commit

openspec/changes/enterprise-react-ui-social/tasks.md

@@ -0,0 +1,123 @@
+# Tasks: enterprise-react-ui-social
+
+**Change ID**: enterprise-react-ui-social
+**Package**: `@suaveplan/react-ui-social`
+**Target path**: `react/social/react-ui-social`
+**Prerequisite packages on Verdaccio**: `@suaveplan/error`, `@suaveplan/react-ui`, `@suaveplan/react-social`, `@suaveplan/react-translate`, `@suaveplan/react-rich-text`, `@suaveplan/react-virtual`, `@suaveplan/react-infinite-scroll`, `@suaveplan/react-file-upload`, `@suaveplan/react-image`, `@suaveplan/react-video`
+
+---
+
+## 0. Pre-flight (non-negotiable)
+
+- [ ] 0.1 Confirm clean working tree (`git status` reports nothing) and no in-flight worktrees with uncommitted work (`git worktree list` then `git status` in each)
+- [ ] 0.2 If any worktrees exist under `.claude/worktrees/`, account for each one: still-active agent, work-pending-merge, or stale-and-prune. Stale worktrees MUST be removed (`git worktree remove`) before opening a new one — code that has been lost twice on main is the failure mode this guards against.
+- [ ] 0.3 Confirm the package set in `MANIFEST.md` matches `find packages -maxdepth 3 -name package.json` count. Drift here means a prior change archived without regenerating the manifest.
+
+## 1. Scaffold
+
+- [ ] Create directory tree. Write `package.json` at `0.1.0`, `tsconfig.json`, `vitest.config.ts`, scripts.
+- [ ] Dependencies: `@suaveplan/error workspace:^`, `@suaveplan/react-ui workspace:^`, `@suaveplan/react-social workspace:^`, `@suaveplan/react-translate workspace:^`, `@suaveplan/react-rich-text workspace:^`, `@suaveplan/react-virtual workspace:^`, `@suaveplan/react-infinite-scroll workspace:^`, `@suaveplan/react-file-upload workspace:^`, `@suaveplan/react-image workspace:^`, `@suaveplan/react-video workspace:^`, `react-router-dom catalog:routing`, `lucide-react catalog:ui`, `@opentelemetry/api catalog:observability`, `zod catalog:forms`, `tslib catalog:build`.
+
+---
+
+## 2. Schemas and types
+
+- [ ] Define `SocialUiError`; codes: `SOCIAL_UI_RENDER_FAILED`.
+- [ ] Define Zod schemas: `PostSchema`, `CommentSchema`, `ReactionSchema`, `AccommodationSchema`, `TestimonialSchema`.
+- [ ] Define all prop types: `FewFacesNavProps`, `FewFacesSidebarProps`, `FewFacesTimelineProps`, `FewFacesPostProps`, `FewFacesReactionsProps`, `FewFacesProfileProps`, `LuxuryHeroProps`, `LuxuryNavProps`, `LuxuryFooterProps`, `AccommodationCardProps`, `TestimonialSectionProps`, `GalleryGridProps`, `LightboxProps`.
+
+---
+
+## 3. FewFaces bundle
+
+### FewFacesNav
+
+- [ ] Top nav with search field, notifications icon, avatar. Accepts `branding?: { appName; logo }` to decouple from "FewFaces" brand strings. All labels via `useTranslation`.
+- [ ] Write test, stories (default, branded, RTL, playground), md.
+
+### FewFacesSidebar
+
+- [ ] Quick-links panel; accepts `links[]` prop. All labels via `useTranslation`.
+- [ ] Write test, stories (default, collapsed, playground), md.
+
+### FewFacesTimeline
+
+- [ ] Virtualised feed via `@suaveplan/react-virtual` + infinite scroll via `@suaveplan/react-infinite-scroll`. Composer at top uses `@suaveplan/react-rich-text`. All strings via `useTranslation`.
+- [ ] Write test, stories (default, loading, empty, playground), md.
+
+### FewFacesPost (+ sub-components)
+
+- [ ] Parent component ≤250 lines; extract `FewFacesPostReactionsBar` and `FewFacesPostComments` as sibling files.
+- [ ] Accepts `captions?: { src: string; srclang: string; label: string }[]` for video captions.
+- [ ] Optimistic reactions with rollback.
+- [ ] Write test (≤500 lines), stories (default, with-reactions, with-comments, video-with-captions, playground), md.
+
+### FewFacesReactions
+
+- [ ] Reaction picker chip with `ReactionType` enum (like/love/laugh/wow/sad/angry). All labels via `useTranslation`.
+- [ ] Write test, stories (default, with-counts, playground), md.
+
+### FewFacesProfile
+
+- [ ] Profile header (cover photo, avatar, name, bio) + tabs (Posts/About/Friends). All tab labels via `useTranslation`.
+- [ ] Write test, stories (default, own-profile, friends-tab, playground), md.
+
+---
+
+## 4. Luxury bundle
+
+### LuxuryHero
+
+- [ ] Full-width hero with CTA. Accepts `colorTokens?: { bg; text; cta }` for brand theming.
+- [ ] Write test, stories (default, dark, custom-theme, playground), md.
+
+### LuxuryNav
+
+- [ ] Top nav with logo, links, CTA button. Accepts `branding?: { appName; logo }`.
+- [ ] Write test, stories (default, dark, playground), md.
+
+### LuxuryFooter
+
+- [ ] Footer with columns, links, social icons. All labels via `useTranslation`.
+- [ ] Write test, stories (default, minimal, playground), md.
+
+### AccommodationCard
+
+- [ ] Hotel/room card with amenity badges, price, availability CTA. Zod-validates `AccommodationSchema`.
+- [ ] Write test, stories (default, sold-out, with-badges, playground), md.
+
+### TestimonialSection
+
+- [ ] Auto-advance carousel with reduced-motion support and manual pagination.
+- [ ] Write test, stories (default, manual, reduced-motion, playground), md.
+
+---
+
+## 5. Media primitives
+
+### GalleryGrid
+
+- [ ] Masonry/grid layout with keyboard navigation, accessible lightbox trigger.
+- [ ] Write test, stories (default, masonry, empty, playground), md.
+
+### Lightbox
+
+- [ ] Keyboard-nav focus trap, `aria-live` announcements, deep-link `?photoId=`. Uses `@suaveplan/react-image` for lazy loading.
+- [ ] Write test, stories (default, with-caption, rtl, playground), md.
+
+---
+
+## 6. E2E
+
+- [ ] `e2e/few-faces.spec.ts` — Playwright: timeline renders posts, like reaction updates count, post-compose with rich text.
+- [ ] `e2e/luxury.spec.ts` — Playwright: hero CTA visible, accommodation card renders price, testimonial carousel advances.
+- [ ] `e2e/gallery.spec.ts` — Playwright: gallery grid renders images, lightbox opens/closes, keyboard navigation works.
+
+---
+
+## 7. Verify and publish
+
+- [ ] `bunx turbo lint typecheck test --filter=@suaveplan/react-ui-social` — green.
+- [ ] `bunx turbo test:coverage --filter=@suaveplan/react-ui-social` — 100%.
+- [ ] `bun scripts/publish.ts --package @suaveplan/react-ui-social`.
+- [ ] Archive change folder.