suaveplan/openspec/changes/enterprise-react-social/proposal.md

OpenSpec Change: enterprise-react-social

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

---

Summary

Deliver @suaveplan/react-social on genesis from scratch at enterprise quality. A bring-your-own-transport social stack: SocialProvider context, feed components (Feed, CreatePost), chat components (ChatWindow, ConversationList, MessageInput, MessageList), hooks (useFeed, usePost, useChat, useConversations, useMessages), and a plugin system (BasePlugin, PluginManager, ChatPlugin) backed by ConnectionManager, FeedManager, PostManager, ConversationManager, and MessageManager. Genesis adds full unit test coverage (main branch shipped with 0% coverage), Storybook for every component, explicit index re-exports, rich-text and media post composing, moderation plugin, 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:^)	SocialError
@suaveplan/events (workspace:^)	Pub/sub transport
@suaveplan/logger (workspace:^)	Structured logging
@suaveplan/react-translate (workspace:^)	i18n for all UI strings
@suaveplan/react-ui (workspace:^)	Radix primitives
@suaveplan/react-rich-text (workspace:^)	Rich post composer
@suaveplan/react-infinite-scroll (workspace:^)	Feed + conversation list
@suaveplan/react-image (workspace:^)	Media post preview
@suaveplan/data-masking (workspace:^)	Moderation plugin
@opentelemetry/api (catalog:observability)	Spans + counters
zod (catalog:forms)	Schema validation
tslib (catalog:build)	TS helpers

External: React 18 peer.

---

Preserved public API surface

// Context
SocialProvider, useSocial

// Feed
Feed, CreatePost
useFeed, usePost
FeedManager, PostManager

// Chat
ChatWindow, ConversationList, MessageInput, MessageList
useChat, useConversations, useMessages
ConversationManager, MessageManager, ChatPlugin

// Plugins
BasePlugin, PluginManager

// Services
ConnectionManager, SocialClient

// Types
SocialPost, SocialComment, SocialReaction, MentionItem,
FeedOptions, PostOptions, ChatMessage, ConversationSummary,
SocialProviderProps, FeedProps, CreatePostProps, ChatWindowProps,
ConversationListProps, MessageInputProps, MessageListProps

---

New additions for genesis

1. SocialError — codes: SOCIAL_CONNECTION_FAILED, SOCIAL_POST_FAILED, SOCIAL_SEND_FAILED.
2. 100% test coverage — all services, hooks, components, and plugins.
3. Storybook coverage — stories for Feed, CreatePost, ChatWindow, ConversationList, MessageInput, MessageList, plus hooks playground.
4. Explicit re-exports — no export * in index.ts.
5. Rich-text composer — CreatePost integrates @suaveplan/react-rich-text.
6. Infinite scroll — Feed and ConversationList use @suaveplan/react-infinite-scroll.
7. Moderation plugin — block/report/profanity-filter via @suaveplan/data-masking.
8. Realtime presence — typing indicators, online status, read receipts via ConnectionManager.
9. Playwright E2E — post create, comment, DM send, typing indicator, read receipt.

---

File layout

react/social/react-social/
  package.json
  tsconfig.json
  vitest.config.ts
  src/
    index.ts
    types/
    context/
      social-provider/ (tsx + types + md + test + index)
    components/
      feed/ (tsx + types + md + test + stories + index)
      create-post/ (tsx + types + md + test + stories + index)
      chat-window/ (tsx + types + md + test + stories + index)
      conversation-list/ (tsx + types + md + test + stories + index)
      message-input/ (tsx + types + md + test + stories + index)
      message-list/ (tsx + types + md + test + stories + index)
    hooks/
      use-feed/ use-post/ use-chat/ use-conversations/ use-messages/
    services/
      connection-manager/ feed-manager/ post-manager/
      conversation-manager/ message-manager/ social-client/
    plugins/
      base-plugin/ plugin-manager/ chat-plugin/ moderation-plugin/
  e2e/
    social.spec.ts