# 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.