Merge pull request #623 from GetStream/v5-docs

V5 docs

.github/workflows/workflow.yml

@@ -59,9 +59,9 @@ jobs:
           STREAM_USER_ID: <dynamic user>
           STREAM_CHANNELS_FILTER: '{"type": "messaging"}'
         run: >
-          yarn vercel pull --yes --environment=${{ github.ref == 'refs/heads/v5' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} &&
-          yarn vercel build ${{ github.ref == 'refs/heads/v5' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} &&
-          yarn vercel deploy ${{ github.ref == 'refs/heads/v5' && '--prod' || '' }} --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+          yarn vercel pull --yes --environment=${{ github.ref == 'refs/heads/master' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} &&
+          yarn vercel build ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} &&
+          yarn vercel deploy ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
       - name: Copy docs from stream-chat-css
         run: npm run ${{ (github.ref == 'refs/heads/v5' || contains(github.head_ref, 'v5')) && 'copy-css-docs:v5' || 'copy-css-docs' }}
       - name: Generate docs

README.md

@@ -57,26 +57,25 @@ Supported Angular versions: **Angular 15-18**
 Run this command if you are using **Angular 18**:
 
 ```shell
-// --force is only required until this issue is solved: https://github.com/tonysamperi/ngx-float-ui/issues/26
-npm install stream-chat-angular@beta ngx-float-ui@18 --force
+npm install stream-chat-angular ngx-float-ui@beta
 ```
 
 Run this command if you are using **Angular 17**:
 
 ```shell
-npm install stream-chat-angular@beta ngx-float-ui@17
+npm install stream-chat-angular ngx-float-ui@17
 ```
 
 Run this command if you are using **Angular 16**:
 
 ```shell
-npm install stream-chat-angular@beta ngx-float-ui@16
+npm install stream-chat-angular ngx-float-ui@16
 ```
 
 Run this command if you are using **Angular 15**:
 
 ```shell
-npm install stream-chat-angular@beta @ngx-translate/core@14 ngx-float-ui@15
+npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
 ```
 
 Supported node verisons: 18+

docusaurus/angular-docusaurus-dontent-docs.plugin.js

@@ -5,13 +5,13 @@ module.exports = {
       {
         lastVersion: "current",
         versions: {
-          5: {
-            label: "v5 (beta)",
-            banner: "unreleased",
-            path: "5",
-          },
           current: {
+            label: "v5",
+          },
+          4: {
             label: "v4",
+            banner: "unmaintained",
+            path: "4",
           },
         },
       },

docusaurus/angular_versioned_docs/version-5/basics/overview.mdx → docusaurus/angular_versioned_docs/version-4/basics/overview.mdx

@@ -30,33 +30,30 @@ We recommend using the component library through a package manager. Stream Chat
 
 ### Install with NPM
 
-Run this command if you are using **Angular 18**:
+Run the following command if you are using **Angular 16** or **Angular 15**:
 
 ```shell
-// --force is only required until this issue is solved: https://github.com/tonysamperi/ngx-float-ui/issues/26
-npm install stream-chat-angular@beta ngx-float-ui@18 --force
+npm install stream-chat-angular stream-chat @ngx-translate/core
 ```
 
-Run this command if you are using **Angular 17**:
+Run the following command if you are using **Angular 14**:
 
 ```shell
-npm install stream-chat-angular@beta ngx-float-ui@17
+npm install stream-chat-angular stream-chat @ngx-translate/core ngx-popperjs@14
 ```
 
-Run this command if you are using **Angular 16**:
+Run the following command if you are using **Angular 13**:
 
 ```shell
-npm install stream-chat-angular@beta ngx-float-ui@16
+npm install stream-chat-angular stream-chat @ngx-translate/core [email protected] ngx-popperjs@13 --legacy-peer-deps
 ```
 
-Run this command if you are using **Angular 15**:
+Run this command if you are using **Angular 12**:
 
 ```shell
-npm install stream-chat-angular@beta @ngx-translate/core@14 ngx-float-ui@15
+npm install stream-chat-angular stream-chat @ngx-translate/core [email protected] ngx-popperjs@12 --legacy-peer-deps
 ```
 
-Supported node verisons: 18+
-
 ## Tutorial
 
 Follow our [tutorial](https://getstream.io/chat/angular/tutorial/) and build your first Stream Angular chat application.

docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx → docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx

@@ -459,26 +459,19 @@ It's important to note that the filtering set above is not applied to [events](h
 To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly:
 
 ```typescript
-private async customAddedToChannelNotificationHandler(
-  clientEvent: ClientEvent,
-  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
-) {
-  if (clientEvent.event.member?.invited) {
-    return;
-  }
-  const channelResponse = clientEvent!.event!.channel!;
-  const newChanel = this.chatService.chatClient.channel(
-    channelResponse.type,
-    channelResponse.id
-  );
-  try {
-    await newChanel.watch();
-    const existingChannels = this.channelService.channels;
-    channelListSetter([newChanel, ...existingChannels]);
-  } catch (error) {
-    console.error('Failed to watch channel', error);
+private customAddedToChannelNotificationHandler(
+    clientEvent: ClientEvent,
+    channelListSetter: (channels: (Channel | ChannelResponse)[]) => void
+  ): void {
+    let channels!: Channel[];
+    this.channelService.channels$
+      .pipe(take(1))
+      .subscribe((c) => (channels = c || []));
+    if (clientEvent.event.member?.invited) {
+      return;
+    }
+    channelListSetter([clientEvent!.event!.channel!, ...channels]);
   }
-}
 ```
 
 Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`:
@@ -504,5 +497,3 @@ this.chatService.events$
     });
   });
 ```
-
-If you're doing this in a component other than `AppComponent`, don't forget to unsubscribe from the `events$` Observable.

docusaurus/angular_versioned_docs/version-5/code-examples/ionic-guide.mdx → docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx

@@ -52,7 +52,7 @@ Add this to your `tsconfig.json` file to the `compilerOptions` part:
 Import CSS in your `global.scss` file:
 
 ```
-@import "~stream-chat-angular/src/assets/styles/scss/index.scss";
+@import "~stream-chat-angular/src/assets/styles/v2/scss/index.scss";
 ```
 
 Add the module imports required by `stream-chat-angular` to the `app.module.ts` file:

docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx → docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx

@@ -6,6 +6,10 @@ title: Responsive layout
 import ChatUILayoutScreenshot from "../assets/chat-ui-layout-screenshot.png";
 import ChannelHeaderWithMenu from "../assets/channel-header-with-menu-screenshot.png";
 
+:::caution
+This example is only applicable if you're using [theme-v2](../theming/introduction.mdx).
+:::
+
 Our SDK gives you maximum control over the layout of your chat application. This tutorial shows you a simple example of creating a layout.
 
 ## Channel list, channel, and thread layout
@@ -75,7 +79,7 @@ Let's start with the thread component:
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 3;
+    z-index: 2;
   }
 
   @media screen and (min-width: 768px) {
@@ -176,7 +180,7 @@ Provide the layout based on the menu state and hide the menu on bigger screens:
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 3;
+    z-index: 2;
   }
 
   @media screen and (min-width: 768px) {

docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx → docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx

@@ -66,7 +66,7 @@ The following section details how the width and height of images and videos uplo
 
 #### Maximum size
 
-You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable. The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
+You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
 
 If you set an invalid value to the variable, you'll see a warning on the browser's console:
 
@@ -122,7 +122,7 @@ The id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
+[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40)
 
 ---
 
@@ -134,30 +134,30 @@ The parent id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
+[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44)
 
 ---
 
 ### attachments
 
-• **attachments**: `Attachment`\<`DefaultStreamChatGenerics`\>[] = `[]`
+• **attachments**: `Attachment`<`DefaultStreamChatGenerics`\>[] = `[]`
 
 The attachments to display
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
+[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48)
 
 ---
 
 ### imageModalStateChange
 
-• `Readonly` **imageModalStateChange**: `EventEmitter`\<`"closed"` \| `"opened"`\>
+• `Readonly` **imageModalStateChange**: `EventEmitter`<`"opened"` \| `"closed"`\>
 
 Emits the state of the image carousel window
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
+[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx → docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx

@@ -41,36 +41,36 @@ You can provide your own attachment preview list component by the [`CustomTempla
 
 ### attachmentUploads$
 
-• **attachmentUploads$**: `undefined` \| `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\>
+• **attachmentUploads$**: `undefined` \| `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\>
 
 A stream that emits the current file uploads and their states
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18)
 
 ---
 
 ### retryAttachmentUpload
 
-• `Readonly` **retryAttachmentUpload**: `EventEmitter`\<`File`\>
+• `Readonly` **retryAttachmentUpload**: `EventEmitter`<`File`\>
 
 An output to notify the parent component if the user tries to retry a failed upload
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22)
 
 ---
 
 ### deleteAttachment
 
-• `Readonly` **deleteAttachment**: `EventEmitter`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>\>
+• `Readonly` **deleteAttachment**: `EventEmitter`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>\>
 
 An output to notify the parent component if the user wants to delete a file
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/8e11a978ee2d9f884aa26b1d22441235f92d8da8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26)
 
 [//]: # "End of generated content"