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