fix(examples): clean up tutorial examples for v14 (#3089)

### 🎯 Goal

Align tutorial examples with v14 conventions and simplify the code to
make the tutorial easier to follow.

### 🛠 Implementation details

- **CSS layers**: renamed `base`/`theme` → `stream`/`stream-overrides`
to match v14 naming conventions
- **Layout CSS**: simplified across all steps — removed background
gradients, redundant rules, and standardized widths
- **Channel initialization**: simplified patterns (removed unnecessary
`channel.watch()` calls where ChannelList handles it, used `isReady`
boolean instead of storing channel in state)
- **Step 4 (custom UI)**: replaced CSS classes with inline styles for
`CustomChannelListItem`
- **Step 5 (custom attachment)**: removed unused `ChannelList` and
related imports
- **Step 6 (emoji picker)**: fixed `WithComponents`/`Chat` nesting order
- **Step 7 (livestream)**: replaced custom `tutorial-livestream` theme
with generic `str-chat__theme-custom`

### 🎨 UI Changes

No visual regressions — changes are structural/convention cleanup only.

Author: oliverlaz

examples/tutorial/src/2-core-component-setup/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import type { User, Channel as StreamChannel } from 'stream-chat';
+import { type User, Channel as StreamChannel } from 'stream-chat';
 import {
   useCreateChatClient,
   Chat,
@@ -12,7 +12,6 @@ import {
 } from 'stream-chat-react';
 
 import 'stream-chat-react/dist/css/index.css';
-// additionally
 import './layout.css';
 import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
 
@@ -33,27 +32,19 @@ const App = () => {
   useEffect(() => {
     if (!client) return;
 
-    const initChannel = async () => {
-      const nextChannel = client.channel('messaging', 'react-tutorial', {
-        image: 'https://getstream.io/random_png/?name=react-v14',
-        name: 'Talk about React',
-        members: [userId],
-      });
-
-      await nextChannel.watch();
-      setChannel(nextChannel);
-    };
-
-    initChannel().catch((error) => {
-      console.error('Failed to initialize tutorial channel', error);
+    const channel = client.channel('messaging', 'custom_channel_id', {
+      image: 'https://getstream.io/random_png/?name=react',
+      name: 'Talk about React',
+      members: [userId],
     });
+
+    setChannel(channel);
   }, [client]);
 
   if (!client) return <div>Setting up client & connection...</div>;
-  if (!channel) return <div>Loading tutorial channel...</div>;
 
   return (
-    <Chat client={client} theme='str-chat__theme-custom'>
+    <Chat client={client}>
       <Channel channel={channel}>
         <Window>
           <ChannelHeader />

examples/tutorial/src/3-channel-list/App.tsx

@@ -1,11 +1,4 @@
-import { useEffect, useState } from 'react';
-import type {
-  User,
-  Channel as StreamChannel,
-  ChannelSort,
-  ChannelFilters,
-  ChannelOptions,
-} from 'stream-chat';
+import type { User, ChannelSort, ChannelFilters, ChannelOptions } from 'stream-chat';
 import {
   useCreateChatClient,
   Chat,
@@ -37,39 +30,18 @@ const options: ChannelOptions = {
 };
 
 const App = () => {
-  const [channel, setChannel] = useState<StreamChannel>();
   const client = useCreateChatClient({
     apiKey,
     tokenOrProvider: userToken,
     userData: user,
   });
 
-  useEffect(() => {
-    if (!client) return;
-
-    const initChannel = async () => {
-      const nextChannel = client.channel('messaging', 'react-tutorial', {
-        image: 'https://getstream.io/random_png/?name=react-v14',
-        name: 'Talk about React',
-        members: [userId],
-      });
-
-      await nextChannel.watch();
-      setChannel(nextChannel);
-    };
-
-    initChannel().catch((error) => {
-      console.error('Failed to initialize tutorial channel', error);
-    });
-  }, [client]);
-
   if (!client) return <div>Setting up client & connection...</div>;
-  if (!channel) return <div>Loading tutorial channel...</div>;
 
   return (
     <Chat client={client} theme='str-chat__theme-custom'>
       <ChannelList filters={filters} sort={sort} options={options} />
-      <Channel channel={channel}>
+      <Channel>
         <Window>
           <ChannelHeader />
           <MessageList />

examples/tutorial/src/3-channel-list/layout.css

@@ -1,52 +1,42 @@
-@layer base, theme;
-@import 'stream-chat-react/dist/css/index.css' layer(base);
+@layer stream, stream-overrides;
+@import 'stream-chat-react/dist/css/index.css' layer(stream);
 
-@layer theme {
-    .str-chat__theme-custom {
-        --brand-50: #edf7f7;
-        --brand-100: #e0f2f1;
-        --brand-150: #b2dfdb;
-        --brand-200: #80cbc4;
-        --brand-300: #4db6ac;
-        --brand-400: #26a69a;
-        --brand-500: #009688;
-        --brand-600: #00897b;
-        --brand-700: #00796b;
-        --brand-800: #00695c;
-        --brand-900: #004d40;
-        --accent-primary: var(--brand-500);
-        --radius-full: 18px;
-        --str-chat__channel-list-width: min(360px, 32%);
-    }
+@layer stream-overrides {
+  .str-chat__theme-custom {
+    --brand-50: #edf7f7;
+    --brand-100: #e0f2f1;
+    --brand-150: #b2dfdb;
+    --brand-200: #80cbc4;
+    --brand-300: #4db6ac;
+    --brand-400: #26a69a;
+    --brand-500: #009688;
+    --brand-600: #00897b;
+    --brand-700: #00796b;
+    --brand-800: #00695c;
+    --brand-900: #004d40;
+    --accent-primary: var(--brand-500);
+    --radius-full: 6px;
+  }
 }
 
 html,
 body,
 #root {
-    height: 100%;
+  height: 100%;
 }
 body {
-    margin: 0;
-    background: linear-gradient(180deg, #f4f7ff 0%, #e8f4f3 100%);
+  margin: 0;
 }
 #root {
-    display: flex;
-    min-height: 100%;
-}
-
-.str-chat {
-    flex: 1;
+  display: flex;
 }
 
 .str-chat__channel-list {
-    width: min(360px, 32%);
+  width: 30%;
 }
-
-.str-chat__channel,
-.str-chat__thread {
-    width: 100%;
+.str-chat__channel {
+  width: 100%;
 }
-
 .str-chat__thread {
-    width: min(420px, 45%);
+  width: 45%;
 }

examples/tutorial/src/4-custom-ui-components/App.tsx

@@ -1,11 +1,5 @@
-import { useEffect, useState } from 'react';
-import type {
-  Channel as StreamChannel,
-  ChannelFilters,
-  ChannelOptions,
-  ChannelSort,
-  User,
-} from 'stream-chat';
+import React, { useEffect, useState } from 'react';
+import type { ChannelFilters, ChannelOptions, ChannelSort, User } from 'stream-chat';
 import {
   Chat,
   Channel,
@@ -15,10 +9,10 @@ import {
   MessageComposer,
   MessageList,
   Thread,
-  WithComponents,
   Window,
-  useMessageContext,
+  WithComponents,
   useCreateChatClient,
+  useMessageContext,
   type ChannelListItemUIProps,
 } from 'stream-chat-react';
 
@@ -61,24 +55,30 @@ const CustomChannelListItem = ({
   return (
     <button
       aria-pressed={active}
-      className='tutorial-channel-list-item'
       onClick={handleClick}
+      style={{
+        width: '100%',
+        padding: '12px',
+        display: 'flex',
+        gap: '12px',
+        border: 'none',
+        background: active ? '#d3f2ef' : 'transparent',
+        textAlign: 'left',
+        cursor: 'pointer',
+        borderRadius: '20px',
+      }}
       type='button'
     >
       <ChannelAvatar
         imageUrl={displayImage ?? channel.data?.image}
         size='xl'
         userName={displayTitle ?? channel.data?.name ?? 'Channel'}
       />
-      <div className='tutorial-channel-list-item__content'>
-        <div className='tutorial-channel-list-item__title'>
-          {displayTitle ?? channel.data?.name ?? 'Unnamed Channel'}
-        </div>
-        {latestMessagePreview && (
-          <div className='tutorial-channel-list-item__preview'>
-            {latestMessagePreview}
-          </div>
-        )}
+      <div style={{ flex: 1 }}>
+        <div>{displayTitle ?? channel.data?.name ?? 'Unnamed Channel'}</div>
+        {latestMessagePreview ? (
+          <div style={{ fontSize: '14px', opacity: 0.75 }}>{latestMessagePreview}</div>
+        ) : null}
       </div>
     </button>
   );
@@ -115,7 +115,7 @@ const CustomMessage = () => {
 };
 
 const App = () => {
-  const [channel, setChannel] = useState<StreamChannel>();
+  const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
     apiKey,
     tokenOrProvider: userToken,
@@ -126,14 +126,14 @@ const App = () => {
     if (!client) return;
 
     const initChannel = async () => {
-      const nextChannel = client.channel('messaging', 'react-tutorial', {
+      const channel = client.channel('messaging', 'react-tutorial', {
         image: 'https://getstream.io/random_png/?name=react-v14',
         name: 'Talk about React',
         members: [userId],
       });
 
-      await nextChannel.watch();
-      setChannel(nextChannel);
+      await channel.watch();
+      setIsReady(true);
     };
 
     initChannel().catch((error) => {
@@ -142,7 +142,7 @@ const App = () => {
   }, [client]);
 
   if (!client) return <div>Setting up client & connection...</div>;
-  if (!channel) return <div>Loading tutorial channel...</div>;
+  if (!isReady) return <div>Loading tutorial channel...</div>;
 
   return (
     <WithComponents
@@ -153,7 +153,7 @@ const App = () => {
     >
       <Chat client={client} theme='str-chat__theme-custom'>
         <ChannelList filters={filters} sort={sort} options={options} />
-        <Channel channel={channel}>
+        <Channel>
           <Window>
             <ChannelHeader />
             <MessageList />