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

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.