Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ updates:
schedule:
interval: 'daily'
allow:
- dependency-name: '@stream-io/stream-chat-css'
- dependency-name: 'stream-chat'
labels:
- stream-dependencies
46 changes: 16 additions & 30 deletions CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
```bash
# Development (requires Node 24 β€” see .nvmrc)
yarn install # Setup
yarn build # Full build (CSS, translations, Vite, types, SCSS)
yarn build # Full build (translations, Vite, types, SCSS)
yarn test # Run Jest tests
yarn test <pattern> # Run specific test (e.g., yarn test Channel)
yarn lint-fix # Fix all lint/format issues (prettier + eslint)
Expand Down Expand Up @@ -258,29 +258,23 @@ When deprecating, use `@deprecated` JSDoc tag with reason and docs link. Commit

## Build System

The build runs 5 steps in parallel via `concurrently`:
The build runs 4 steps in parallel via `concurrently`:

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

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

## Styling Architecture

### Dual-Layer CSS System

This repo has **two style sources**:

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.
2. **`src/styling/`** (this repo) β€” Component styles, theme variables, animations. Compiled to `dist/css/index.css`.
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.

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

```
css-reset β†’ stream (v2 base) β†’ stream-new (compiled index.css) β†’ stream-overrides β†’ stream-app-overrides
css-reset β†’ stream-new (compiled index.css) β†’ stream-overrides β†’ stream-app-overrides
```

See `examples/vite/src/index.scss` for reference implementation. Layers eliminate the need for `!important`.
Expand All @@ -300,23 +294,16 @@ See `examples/vite/src/index.scss` for reference implementation. Layers eliminat
- **Date/time**: `Streami18n` class wraps i18next + Dayjs with per-locale calendar formats
- **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.

## Styling Architecture

### Dual-Layer CSS System

Styles come from two sources:

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`).
2. **`src/styling/`** β€” SDK-specific styles compiled to `dist/css/index.css` via Sass. Master entry: `src/styling/index.scss`.
## Styling Architecture (Theming & Build Details)

Component styles live in `src/components/*/styling/index.scss` and are imported by the master stylesheet.
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.

### CSS Layers & Theming

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

```
css-reset β†’ stream (v2 base) β†’ stream-new (compiled SDK CSS) β†’ stream-overrides β†’ stream-app-overrides
css-reset β†’ stream-new (compiled SDK CSS) β†’ stream-overrides β†’ stream-app-overrides
```

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

### Build System

`yarn build` runs 5 tasks in parallel via `concurrently`:
`yarn build` runs 4 tasks in parallel via `concurrently`:

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

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

Expand Down
Loading
Loading