diff --git a/examples/tutorial/README.md b/examples/tutorial/README.md index f44abc851e..442b170cfb 100644 --- a/examples/tutorial/README.md +++ b/examples/tutorial/README.md @@ -1,19 +1,22 @@ This folder contains the source code for [Chat React tutorial](https://github.com/GetStream/getstream.io-tutorials/blob/main/chat/tutorials/react-tutorial.mdx). It contains multiple versions of apps representing the tutorial steps. +The tutorial app is wired against the local `stream-chat-react` checkout so each step stays aligned with the current SDK implementation. + ## Setup 1. Copy create a `.env` file next to the `.env.example` file. 2. Copy the contents of `.env.example` file into `.env` file and populate the credentials -## Run individual app examples +## Run the tutorial browser + +```shell +yarn dev +``` + +`yarn dev` starts a simple tutorial browser that lets you switch between all steps from one sidebar. + +## Build the tutorial browser ```shell -yarn dev:client-setup -yarn dev:client-setup -yarn dev:core-component-setup -yarn dev:channel-list -yarn dev:custom-ui-components -yarn dev:custom-attachment-type -yarn dev:emoji-picker -yarn dev:livestream +yarn build ``` diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json index 6be9f9eaf8..258263e9c4 100644 --- a/examples/tutorial/package.json +++ b/examples/tutorial/package.json @@ -4,41 +4,30 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev:client-setup": "vite --mode 1-client-setup", - "dev:core-component-setup": "vite --mode 2-core-component-setup", - "dev:channel-list": "vite --mode 3-channel-list", - "dev:custom-ui-components": "vite --mode 4-custom-ui-components", - "dev:custom-attachment-type": "vite --mode 5-custom-attachment-type", - "dev:emoji-picker": "vite --mode 6-emoji-picker", - "dev:livestream": "vite --mode 7-livestream", - "build:client-setup": "vite build --mode 1-client-setup", - "build:core-component-setup": "vite build --mode 2-core-component-setup", - "build:channel-list": "vite build --mode 3-channel-list", - "build:custom-ui-components": "vite build --mode 4-custom-ui-components", - "build:custom-attachment-type": "vite build --mode 5-custom-attachment-type", - "build:emoji-picker": "vite build --mode 6-emoji-picker", - "build:livestream": "vite build --mode 7-livestream", - "build:all": "concurrently \"npm run build:client-setup\" \"npm run build:core-component-setup\" \"npm run build:channel-list\" \"npm run build:custom-ui-components\" \"npm run build:custom-attachment-type\" \"npm run build:emoji-picker\" \"npm run build:livestream\"", - "lint": "eslint ." + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" }, "dependencies": { - "react": "^19.1.0", - "react-dom": "^19.1.0", - "stream-chat": "^9.0.0", - "stream-chat-react": "^13.0.0" + "@emoji-mart/data": "link:../../node_modules/@emoji-mart/data", + "emoji-mart": "link:../../node_modules/emoji-mart", + "react": "link:../../node_modules/react", + "react-dom": "link:../../node_modules/react-dom", + "stream-chat": "link:../../node_modules/stream-chat", + "stream-chat-react": "link:../../" }, "devDependencies": { - "@eslint/js": "^9.25.0", - "@types/react": "^19.1.2", - "@types/react-dom": "^19.1.2", - "@vitejs/plugin-react": "^4.4.1", - "concurrently": "^9.1.2", - "eslint": "^9.25.0", - "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-react-refresh": "^0.4.19", - "globals": "^16.0.0", - "typescript": "~5.8.3", - "typescript-eslint": "^8.30.1", - "vite": "^6.4.1" + "@eslint/js": "^9.39.4", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "eslint": "^9.39.4", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.4.0", + "typescript": "^5.9.3", + "typescript-eslint": "^8.57.2", + "vite": "^8.0.3" } } diff --git a/examples/tutorial/src/1-client-setup/App.tsx b/examples/tutorial/src/1-client-setup/App.tsx index a3fe2b6c62..f94e0cd22b 100644 --- a/examples/tutorial/src/1-client-setup/App.tsx +++ b/examples/tutorial/src/1-client-setup/App.tsx @@ -1,10 +1,5 @@ import { Chat, useCreateChatClient } from 'stream-chat-react'; - -// your Stream app information -const apiKey = 'REPLACE_WITH_API_KEY'; -const userId = 'REPLACE_WITH_USER_ID'; -const userName = 'REPLACE_WITH_USER_NAME'; -const userToken = 'REPLACE_WITH_USER_TOKEN'; +import { apiKey, userId, userName, userToken } from './credentials'; const App = () => { const client = useCreateChatClient({ diff --git a/examples/tutorial/src/2-core-component-setup/App.tsx b/examples/tutorial/src/2-core-component-setup/App.tsx index 8dad437231..3ff70f8ef8 100644 --- a/examples/tutorial/src/2-core-component-setup/App.tsx +++ b/examples/tutorial/src/2-core-component-setup/App.tsx @@ -5,20 +5,16 @@ import { Chat, Channel, ChannelHeader, - MessageInput, + MessageComposer, MessageList, Thread, Window, } from 'stream-chat-react'; -import 'stream-chat-react/dist/css/v2/index.css'; +import 'stream-chat-react/dist/css/index.css'; // additionally import './layout.css'; - -const apiKey = 'REPLACE_WITH_API_KEY'; -const userId = 'REPLACE_WITH_USER_ID'; -const userName = 'REPLACE_WITH_USER_NAME'; -const userToken = 'REPLACE_WITH_USER_TOKEN'; +import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials'; const user: User = { id: userId, @@ -37,16 +33,24 @@ const App = () => { useEffect(() => { if (!client) return; - const channel = client.channel('messaging', 'custom_channel_id', { - image: 'https://getstream.io/random_png/?name=react', - name: 'Talk about React', - members: [userId], - }); + 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], + }); - setChannel(channel); + await nextChannel.watch(); + setChannel(nextChannel); + }; + + initChannel().catch((error) => { + console.error('Failed to initialize tutorial channel', error); + }); }, [client]); if (!client) return