chore: workflow cleanup and release process adjustments

.github/actions/setup-node/action.yml

@@ -0,0 +1,30 @@
+name: Setup
+description: Sets up Node and installs dependencies
+
+inputs:
+  node-version:
+    description: 'Specify Node version'
+    required: false
+    default: '22'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+
+    - name: Set NODE_VERSION env
+      shell: bash
+      run: echo "NODE_VERSION=$(node --version)" >> $GITHUB_ENV
+
+    - name: Cache dependencies
+      uses: actions/cache@v4
+      with:
+        path: ./node_modules
+        key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('./yarn.lock') }}
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+      shell: bash

.github/workflows/ci.yml

@@ -1,58 +1,37 @@
 name: Test
 
 on: [push]
-env:
-  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   tsc:
     runs-on: ubuntu-latest
-    name: Typescript
+    name: TypeScript
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: 💾 Cache Dependencies
-        uses: actions/cache@v3
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-${{ matrix.node }}-modules-${{ hashFiles('**/yarn.lock') }}
-
-      - name: 🔨 Install Dependencies
-        run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
+      - uses: ./.github/actions/setup-node
 
       - name: 🧪 tsc
-        run: yarn types --noEmit
+        run: yarn types
 
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [22]
-    name: Test with Node ${{ matrix.node }}
+    name: Lint & test with Node
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: 💾 Cache Dependencies
-        uses: actions/cache@v3
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-${{ matrix.node }}-modules-${{ hashFiles('**/yarn.lock') }}
-
-      - name: 🔨 Install Dependencies & Build
-        run: |
-          yarn install --frozen-lockfile --ignore-engines
-          yarn build
+      - uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup-node
+
+      - name: Build SDK
+        run: yarn build
 
-      - name: 🧪 Lint and Test with ${{ matrix.node }}
+      - name: 🧪 Lint and test with Node ${{ env.NODE_VERSION }}
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         run: |
           yarn lint
           yarn coverage
           yarn validate-translations
 
-      - name: 🧪 Validate CommonJS bundle with ${{ matrix.node }}
+      - name: 🧪 Validate CommonJS bundle with Node ${{ env.NODE_VERSION }}
         run: yarn validate-cjs

.github/workflows/pr-check.yml

@@ -5,9 +5,12 @@ on:
     types: [opened, edited, synchronize, reopened]
 
 jobs:
-  lint:
+  pr-title:
     runs-on: ubuntu-latest
     steps:
-      - uses: aslafy-z/conventional-pr-title-action@v3
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup-node
+
+      - name: commitlint
+        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --verbose

.github/workflows/release.yml

@@ -2,81 +2,30 @@ name: Release
 on:
   workflow_dispatch:
     inputs:
-      docs_only:
-        description: Skip package release and publish documentation only
-        default: false
-        type: boolean
-      skip_docs:
-        description: Skip publishing the documentation
-        default: false
-        type: boolean
       dry_run:
-        description: Run package release in "dry run" mode (does not publish either)
+        description: Run package release in "dry run" mode (does not publish)
         default: false
         type: boolean
-      docs_env:
-        description: Pick environment to publish documentation to
-        required: true
-        type: choice
-        default: staging
-        options:
-          - production
-          - staging
 
 jobs:
   package_release:
     name: Release from "${{ github.ref_name }}" branch
     runs-on: ubuntu-latest
     # GH does not allow to limit branches in the workflow_dispatch settings so this here is a safety measure
-    if: ${{ !inputs.docs_only && (startsWith(github.ref_name, 'release') || startsWith(github.ref_name, 'master')) }}
-    env:
-      NODE_OPTIONS: --max_old_space_size=4096
+    if: ${{ inputs.dry_run || startsWith(github.ref_name, 'release') || startsWith(github.ref_name, 'master') }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - name: Install dependencies & Build
-        run: |
-          yarn install --frozen-lockfile
-          yarn run build
-      - name: Validate CommonJS bundle
-        run: yarn validate-cjs
+
+      - uses: ./.github/actions/setup-node
+
       - name: Release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}
           HUSKY: 0
         run: >
           yarn semantic-release
           ${{ inputs.dry_run && '--dry-run' || '' }}
-
-  docs_release:
-    name: Publish documentation from "${{ github.ref_name }}" branch to ${{ inputs.docs_env }}
-    runs-on: ubuntu-latest
-    # skip during dry runs, publish to production only from master or branches with names starting with "release", publish to staging from anywhere
-    if: ${{ !inputs.dry_run && !inputs.skip_docs && (((github.ref_name == 'master' || startsWith(github.ref_name, 'release')) && inputs.docs_env == 'production') || inputs.docs_env == 'staging') }}
-    outputs:
-      target-version: $${{ steps.target-version.outputs }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
-      - name: Merge shared "@stream-io/stream-chat-css" docs
-        run: yarn docs:copy-css-docs
-      - name: Push to stream-chat-docusaurus
-        uses: GetStream/push-stream-chat-docusaurus-action@main
-        with:
-          target-branch: ${{ inputs.docs_env }}
-        env:
-          DOCUSAURUS_GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

.github/workflows/size.yml

@@ -14,7 +14,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

.releaserc.json

@@ -71,12 +71,6 @@
         }
       }
     ],
-    [
-      "@semantic-release/exec",
-      {
-        "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
-      }
-    ],
     [
       "@semantic-release/changelog",
       {

README.md

@@ -42,46 +42,36 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Installation
 
-### Install with NPM
+### With NPM
 
-`npm install react react-dom stream-chat stream-chat-react`
+`npm install stream-chat stream-chat-react`
 
-### Install with Yarn
+### With Yarn
 
-`yarn add react react-dom stream-chat stream-chat-react`
+`yarn add stream-chat stream-chat-react`
 
-### Install via CDN
 
-```
-<script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
-```
-
-## Example Apps
+## Example Applications
 
 We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
 
-## Docs
+## Documentation
 
 We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
 
-The React components are created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/js/) on our website.
-
-##  TypeScript Support
-
-As of version `5.0.0`, the component library has been converted to TypeScript. Please read the [TypeScript guide](https://github.com/GetStream/stream-chat-react/wiki/Typescript-support) for details and implementation assistance.
+The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
 
 ##  Component Reusability
 
-For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `MessageTeam`, without affecting any logic in the app.
+For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
 
 ```jsx
-<Channel Message={MessageTeam}>
+<Channel>
   <Window>
     <ChannelHeader />
-    <MessageList />
+    <WithComponents overrides={{Message: CustomMessageUI}}>
+      <MessageList />
+    </WithComponents>
     <MessageInput />
   </Window>
   <Thread />
@@ -90,11 +80,18 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
+
+```css title="index.css"
+@layer stream, stream-overrides;
+
+@import "stream-chat-react/css/v2/index.css" layer(stream);
+/* or */
+@import "stream-chat-react/dist/css/v2/index.css" layer(stream);
 
-```js
-import 'stream-chat-react/dist/css/v2/index.css';
-import './App.css';
+@layer stream-overrides {
+  /* your overrides */
+}
 ```
 
 ## Internationalization
@@ -113,7 +110,7 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ## Acknowledgements
 
-### Lamejs
+### lamejs
 
 This project uses `lamejs` library under the LGPL license to convert the recorded audio to mp3 format.
 The library source code is dynamically imported and used only if audio recording is enabled.