Initial Commit

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

@@ -0,0 +1,119 @@
+# 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
+
+```ts
+// 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
+
+```text
+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
+```