Initial Commit
This commit is contained in:
109
openspec/changes/enterprise-react-ui-social/proposal.md
Normal file
109
openspec/changes/enterprise-react-ui-social/proposal.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# OpenSpec Change: enterprise-react-ui-social
|
||||
|
||||
- **Change ID**: enterprise-react-ui-social
|
||||
- **Package**: `@suaveplan/react-ui-social`
|
||||
- **Category**: react
|
||||
- **Target path**: `react/social/react-ui-social`
|
||||
- **Status**: PROPOSED
|
||||
- **Date**: 2026-04-24
|
||||
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-ui-social.md`
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Deliver `@suaveplan/react-ui-social` on genesis from scratch at enterprise quality. Two themed component clusters: "FewFaces" (feed/post/reactions/nav/sidebar/profile) and "Luxury" (hospitality hero/nav/footer/accommodation/testimonials), plus general media primitives (`GalleryGrid`, `Lightbox`). Genesis adds Storybook coverage (main branch shipped zero stories), fixes i18n violations (hard-coded "Search FewFaces" and "What's on your mind" strings), splits `FewFacesPost` beyond the 300-line hard limit, adds Playwright E2E, Zod schemas for API shapes, brand-decoupled theming props, and real caption support.
|
||||
|
||||
---
|
||||
|
||||
## Current-state audit (genesis)
|
||||
|
||||
Package does not exist on genesis — fresh build.
|
||||
|
||||
---
|
||||
|
||||
## Available workspace deps on genesis
|
||||
|
||||
| Package | Role |
|
||||
|---|---|
|
||||
| `@suaveplan/error` (`workspace:^`) | `SocialUiError` |
|
||||
| `@suaveplan/react-ui` (`workspace:^`) | Radix primitives + `cn` |
|
||||
| `@suaveplan/react-social` (`workspace:^`) | Social data hooks |
|
||||
| `@suaveplan/react-translate` (`workspace:^`) | i18n — all user-visible strings |
|
||||
| `@suaveplan/react-rich-text` (`workspace:^`) | Rich post composer |
|
||||
| `@suaveplan/react-virtual` (`workspace:^`) | Virtualised timeline |
|
||||
| `@suaveplan/react-infinite-scroll` (`workspace:^`) | Paginated feed |
|
||||
| `@suaveplan/react-file-upload` (`workspace:^`) | Composer attachments |
|
||||
| `@suaveplan/react-image` (`workspace:^`) | Image preview |
|
||||
| `@suaveplan/react-video` (`workspace:^`) | Video posts |
|
||||
| `@opentelemetry/api` (`catalog:observability`) | Spans + counters |
|
||||
| `zod` (`catalog:forms`) | API shape schemas |
|
||||
| `tslib` (`catalog:build`) | TS helpers |
|
||||
|
||||
External: `react-router-dom catalog:routing`, `lucide-react catalog:ui`, React 18 peer.
|
||||
|
||||
---
|
||||
|
||||
## Preserved public API surface
|
||||
|
||||
```ts
|
||||
// FewFaces bundle
|
||||
FewFacesNav, FewFacesSidebar, FewFacesTimeline, FewFacesPost,
|
||||
FewFacesReactions, FewFacesProfile
|
||||
FewFacesNavProps, FewFacesSidebarProps, FewFacesTimelineProps,
|
||||
FewFacesPostProps, ReactionType, ReactionCount, Comment, PostReaction
|
||||
|
||||
// Luxury bundle
|
||||
LuxuryHero, LuxuryNav, LuxuryFooter, AccommodationCard, TestimonialSection
|
||||
LuxuryHeroProps, LuxuryNavProps, LuxuryFooterProps,
|
||||
AccommodationCardProps, TestimonialSectionProps
|
||||
|
||||
// Media
|
||||
GalleryGrid, Lightbox
|
||||
GalleryGridProps, LightboxProps
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## New additions for genesis
|
||||
|
||||
1. **Storybook coverage** — default + playground + a11y + RTL + dark-theme variants for every component (main branch had zero stories).
|
||||
2. **i18n fix** — remove all hard-coded English strings from `FewFacesNav`, `FewFacesTimeline`, `FewFacesPost` and route through `useTranslation`.
|
||||
3. **`FewFacesPost` split** — extract `FewFacesPostReactionsBar` and `FewFacesPostComments` to stay within 300-line hard limit.
|
||||
4. **Real captions** — `FewFacesPost` accepts `captions?: { src; srclang; label }[]` replacing the placeholder `<track>`.
|
||||
5. **Zod schemas** — `PostSchema`, `CommentSchema`, `ReactionSchema`, `AccommodationSchema`, `TestimonialSchema` for API boundary parsing.
|
||||
6. **Theming props** — `branding?: { appName; logo }` on `FewFacesNav`; color-token props on `Luxury*` components.
|
||||
7. **Playwright E2E** — FewFaces timeline, Luxury landing, gallery lightbox.
|
||||
8. **Optimistic reactions** — client-optimistic updates with rollback via `@suaveplan/react-notifications`.
|
||||
|
||||
---
|
||||
|
||||
## File layout
|
||||
|
||||
```text
|
||||
react/social/react-ui-social/
|
||||
package.json
|
||||
tsconfig.json
|
||||
vitest.config.ts
|
||||
src/
|
||||
index.ts
|
||||
schemas/
|
||||
types/
|
||||
few-faces/
|
||||
few-faces-nav/ (tsx + types + md + test + stories + index)
|
||||
few-faces-sidebar/ (tsx + types + md + test + stories + index)
|
||||
few-faces-timeline/ (tsx + types + md + test + stories + index)
|
||||
few-faces-post/ (tsx + types + md + test + stories + index)
|
||||
few-faces-post-reactions-bar/ (tsx + types + index)
|
||||
few-faces-post-comments/ (tsx + types + index)
|
||||
few-faces-reactions/ (tsx + types + md + test + stories + index)
|
||||
few-faces-profile/ (tsx + types + md + test + stories + index)
|
||||
luxury/
|
||||
luxury-hero/ luxury-nav/ luxury-footer/ accommodation-card/ testimonial-section/
|
||||
media/
|
||||
gallery-grid/ lightbox/
|
||||
e2e/
|
||||
few-faces.spec.ts
|
||||
luxury.spec.ts
|
||||
gallery.spec.ts
|
||||
```
|
||||
123
openspec/changes/enterprise-react-ui-social/tasks.md
Normal file
123
openspec/changes/enterprise-react-ui-social/tasks.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user