Skip to content

Commit fbb3556

Browse files
authored
docs: add AI migration guide and drop legacy stream-chat-css wiring (#3129)
### 🎯 Goal **Add** `ai-docs/ai-migration.md` β€” a token-optimized, execution-only guide for coding agents performing the v13 β†’ v14 migration. Distills the 62 confirmed breaking changes from `ai-docs/breaking-changes.md` into ordered phases, rename lists, and code-level rewrites. **Prune** the now-legacy `@stream-io/stream-chat-css` wiring. The package is no longer installed (absent from `package.json` and `yarn.lock`; `dist/` has no `scss/`, `css/v2/`, or `assets/`), but stale tooling and docs around it remained. This PR removes those references so the repo reflects reality. ### πŸ›  Implementation details **New `ai-docs/ai-migration.md`** (~415 lines), organized into 8 ordered phases: 1. Source of Truth + import/symbol renames (read installed `.d.ts` files; never rely on pretraining knowledge) 2. Removed symbols with code-level rewrites (HOCs, `MessageOptions`, `EditMessageForm`, `MessageListNotifications`, `ConnectionStatus`, etc.) 3. Move UI overrides from `Channel` / `ChannelList` props to `WithComponents` 4. Composer / edit / cooldown rewrites 5. Message-actions model (`messageActionSet`, `quick-dropdown-toggle`, `handleDelete` semantics) 6. Search, sidebar, `ChatView`, explicit query limits 7. Behavior changes that compile cleanly (timestamps, date separator, typing indicator, etc.) 8. CSS / DOM / selector audit Style is optimized for token efficiency: bullet lists instead of markdown tables (no pipe/padding overhead), no commit SHAs, no audit metadata, no motivation prose. Verification section is package-manager agnostic (detects `pnpm` / `yarn` / `bun` / `npm` from lockfiles). **Legacy `@stream-io/stream-chat-css` cleanup:** - Remove `ai-docs/DEPRECATED_API_REMOVAL_PLAN.md` β€” superseded by the new guide. - Remove `./dist/scss/*` and `./scss/*` entries from `package.json` `exports` β€” `dist/scss/` is no longer emitted. - Delete `scripts/copy-css.sh` β€” not wired into the build script; unreferenced outside stale docs. - Delete `scripts/merge-stream-chat-css-docs.sh` β€” copies docs into `./docusaurus/docs/React`, a directory that no longer exists in this repo. - Drop the `@stream-io/stream-chat-css` entry from `.github/dependabot.yml` since the package isn't installed. - Update `CLAUDE.md` to reflect the current 4-step build (`build-translations`, `vite build`, `tsc`, `build-styling`) and the single-source styling tree under `src/styling/`. ### 🎨 UI Changes N/A β€” docs + build tooling only.
1 parent f8c9600 commit fbb3556

File tree

8 files changed

+481
-188
lines changed

8 files changed

+481
-188
lines changed

β€Ž.github/dependabot.ymlβ€Ž

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ updates:
55
schedule:
66
interval: 'daily'
77
allow:
8-
- dependency-name: '@stream-io/stream-chat-css'
98
- dependency-name: 'stream-chat'
109
labels:
1110
- stream-dependencies

β€ŽCLAUDE.mdβ€Ž

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
1717
```bash
1818
# Development (requires Node 24 β€” see .nvmrc)
1919
yarn install # Setup
20-
yarn build # Full build (CSS, translations, Vite, types, SCSS)
20+
yarn build # Full build (translations, Vite, types, SCSS)
2121
yarn test # Run Jest tests
2222
yarn test <pattern> # Run specific test (e.g., yarn test Channel)
2323
yarn lint-fix # Fix all lint/format issues (prettier + eslint)
@@ -258,29 +258,23 @@ When deprecating, use `@deprecated` JSDoc tag with reason and docs link. Commit
258258

259259
## Build System
260260

261-
The build runs 5 steps in parallel via `concurrently`:
261+
The build runs 4 steps in parallel via `concurrently`:
262262

263-
1. **`copy-css.sh`** β€” Copies pre-built CSS/SCSS/assets from `@stream-io/stream-chat-css` into `dist/`
264-
2. **`build-translations`** β€” Extracts `t()` calls from source via `i18next-cli`
265-
3. **`vite build`** β€” Bundles 3 entry points (index, emojis, mp3-encoder) as CJS + ESM, no minification
266-
4. **`tsc`** β€” Generates `.d.ts` type declarations only (`tsconfig.lib.json`)
267-
5. **`build-styling`** β€” Compiles `src/styling/index.scss` β†’ `dist/css/index.css`
263+
1. **`build-translations`** β€” Extracts `t()` calls from source via `i18next-cli`
264+
2. **`vite build`** β€” Bundles 3 entry points (index, emojis, mp3-encoder) as CJS + ESM, no minification
265+
3. **`tsc`** β€” Generates `.d.ts` type declarations only (`tsconfig.lib.json`) to `dist/types/`
266+
4. **`build-styling`** β€” Compiles `src/styling/index.scss` β†’ `dist/css/index.css`
268267

269268
All steps write to separate directories under `dist/` so they don't conflict.
270269

271270
## Styling Architecture
272271

273-
### Dual-Layer CSS System
274-
275-
This repo has **two style sources**:
276-
277-
1. **`@stream-io/stream-chat-css`** (external dep) β€” Base design system. Copied to `dist/css/v2/` and `dist/scss/v2/` at build time. Organized as `*-layout.scss` (structure) + `*-theme.scss` (colors/typography) per component.
278-
2. **`src/styling/`** (this repo) β€” Component styles, theme variables, animations. Compiled to `dist/css/index.css`.
272+
All component styles live in `src/styling/` (master entry: `src/styling/index.scss`) and in `src/components/*/styling/index.scss`. The Sass build compiles the tree to `dist/css/index.css`. There is no longer any step that pulls CSS/SCSS from an external design-system package.
279273

280274
### CSS Layers (cascade order, low β†’ high)
281275

282276
```
283-
css-reset β†’ stream (v2 base) β†’ stream-new (compiled index.css) β†’ stream-overrides β†’ stream-app-overrides
277+
css-reset β†’ stream-new (compiled index.css) β†’ stream-overrides β†’ stream-app-overrides
284278
```
285279

286280
See `examples/vite/src/index.scss` for reference implementation. Layers eliminate the need for `!important`.
@@ -300,23 +294,16 @@ See `examples/vite/src/index.scss` for reference implementation. Layers eliminat
300294
- **Date/time**: `Streami18n` class wraps i18next + Dayjs with per-locale calendar formats
301295
- **When adding translatable strings**: Use `t()` from `useTranslationContext()`, then run `yarn build-translations` to update JSON files. All 12 language files must have non-empty values.
302296

303-
## Styling Architecture
304-
305-
### Dual-Layer CSS System
306-
307-
Styles come from two sources:
308-
309-
1. **`@stream-io/stream-chat-css`** β€” Base design system (copied to `dist/css/v2/` and `dist/scss/v2/` via `scripts/copy-css.sh`). Layout and theme SCSS split per component (`*-layout.scss` + `*-theme.scss`).
310-
2. **`src/styling/`** β€” SDK-specific styles compiled to `dist/css/index.css` via Sass. Master entry: `src/styling/index.scss`.
297+
## Styling Architecture (Theming & Build Details)
311298

312-
Component styles live in `src/components/*/styling/index.scss` and are imported by the master stylesheet.
299+
All styles live in `src/styling/` (master entry: `src/styling/index.scss`) and in `src/components/*/styling/index.scss`. Component styles are imported by the master stylesheet and compiled to `dist/css/index.css` via Sass.
313300

314301
### CSS Layers & Theming
315302

316303
CSS layers control cascade order (no `!important` needed):
317304

318305
```
319-
css-reset β†’ stream (v2 base) β†’ stream-new (compiled SDK CSS) β†’ stream-overrides β†’ stream-app-overrides
306+
css-reset β†’ stream-new (compiled SDK CSS) β†’ stream-overrides β†’ stream-app-overrides
320307
```
321308

322309
See `examples/vite/src/index.scss` for the reference layer setup.
@@ -329,13 +316,12 @@ See `examples/vite/src/index.scss` for the reference layer setup.
329316

330317
### Build System
331318

332-
`yarn build` runs 5 tasks in parallel via `concurrently`:
319+
`yarn build` runs 4 tasks in parallel via `concurrently`:
333320

334-
1. `scripts/copy-css.sh` β€” Copies `stream-chat-css` assets into `dist/`
335-
2. `yarn build-translations` β€” Extracts `t()` calls via `i18next-cli`
336-
3. `vite build` β€” Bundles 3 entry points (index, emojis, mp3-encoder) as ESM + CJS
337-
4. `tsc --project tsconfig.lib.json` β€” Generates `.d.ts` type declarations only
338-
5. `yarn build-styling` β€” Compiles SCSS to `dist/css/index.css`
321+
1. `yarn build-translations` β€” Extracts `t()` calls via `i18next-cli`
322+
2. `vite build` β€” Bundles 3 entry points (index, emojis, mp3-encoder) as ESM + CJS
323+
3. `tsc --project tsconfig.lib.json` β€” Generates `.d.ts` type declarations to `dist/types/`
324+
4. `yarn build-styling` β€” Compiles SCSS to `dist/css/index.css`
339325

340326
**Library entry points** (from `package.json` exports):
341327

0 commit comments

Comments
Β (0)