Merge pull request #259 from GetStream/beta

Beta

Author: szuperaz

.github/workflows/workflow.yml

@@ -3,9 +3,11 @@ on:
   push:
     branches:
       - master
+      - beta
   pull_request:
     branches:
       - master
+      - beta
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -17,7 +19,6 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
-
       - name: Cache node modules
         uses: actions/cache@v1
         with:
@@ -60,6 +61,6 @@ jobs:
       - name: Push to docusaurus
         uses: GetStream/push-stream-chat-docusaurus-action@main
         with:
-          target-branch: ${{ github.ref == 'refs/heads/master' && 'production' || 'staging' }}
+          target-branch: ${{ github.ref == 'refs/heads/master' && 'staging' || 'staging' }}
         env:
           DOCUSAURUS_GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

.gitignore

@@ -54,3 +54,6 @@ Thumbs.db
 
 # Angular environment.ts
 /**/environments/environment.ts
+
+# Encapsulated stream-chat-css
+projects/stream-chat-angular/src/assets/styles

README.md

@@ -54,13 +54,13 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 Run the following command if you are using **Angular 13**:
 
 ```shell
-npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular stream-chat @ngx-translate/core
 ```
 
 Run this command if you are using **Angular 12**:
 
 ```shell
-npm install stream-chat-angular @stream-io/stream-chat-css stream-chat@5 @ngx-translate/core --legacy-peer-deps
+npm install stream-chat-angular stream-chat@5 @ngx-translate/core --legacy-peer-deps
 ```
 
 ## Sample App
@@ -79,6 +79,22 @@ STREAM_USER_TOKEN=<Your user token>
 
 Run `npm start` and navigate to `http://localhost:4200/`.
 
+## Customization examples
+
+This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:
+
+To run the app:
+
+Create a file named `.env` in the root directory with the following content:
+
+```
+STREAM_API_KEY=<Your API key>
+STREAM_USER_ID=<Your user ID>
+STREAM_USER_TOKEN=<Your user token>
+```
+
+Run `npm start:customizations-example` and navigate to `http://localhost:4200/`.
+
 ## Local development
 
 Run `npm install` in the root of the project. You can use the `npm run start:dev` command to start the SampleApp with automatic reloading.

angular.json

@@ -213,6 +213,114 @@
           }
         }
       }
+    },
+    "customizations-example": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/customizations-example",
+      "sourceRoot": "projects/customizations-example/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/customizations-example",
+            "index": "projects/customizations-example/src/index.html",
+            "main": "projects/customizations-example/src/main.ts",
+            "polyfills": "projects/customizations-example/src/polyfills.ts",
+            "tsConfig": "projects/customizations-example/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/customizations-example/src/favicon.ico",
+              "projects/customizations-example/src/assets"
+            ],
+            "styles": ["projects/customizations-example/src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/customizations-example/src/environments/environment.ts",
+                  "with": "projects/customizations-example/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "customizations-example:build:production"
+            },
+            "development": {
+              "browserTarget": "customizations-example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "customizations-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/customizations-example/src/test.ts",
+            "polyfills": "projects/customizations-example/src/polyfills.ts",
+            "tsConfig": "projects/customizations-example/tsconfig.spec.json",
+            "karmaConfig": "projects/customizations-example/karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/customizations-example/src/favicon.ico",
+              "projects/customizations-example/src/assets"
+            ],
+            "styles": ["projects/customizations-example/src/styles.scss"],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/customizations-example/**/*.ts",
+              "projects/customizations-example/**/*.html"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "stream-chat-angular"

copy-generated-service-docs.ts

@@ -31,7 +31,7 @@ fs.readdir(sourcePath, (err: any, files: string[]) => {
       }
 
       // Remove the thre prefix from the title
-      const result = data.replace(/# Class:/g, '#');
+      const result = data.replace(/# Class:/g, '#').replace('<T\\>', '');
 
       fs.writeFile(`${sourcePath}/${file}`, result, 'utf8', (err: any) => {
         if (err) {

docusaurus/docs/Angular/basics/upgrade-v2.mdx

@@ -0,0 +1,119 @@
+---
+id: upgrade-v2
+title: Upgrade from v2
+---
+
+## About v3
+
+This version's main focus was to enhance the customizability of the SDK, the two main features are:
+
+- there are many new customization points where you can provide your own template to override the default UI - our [customization guide](../concepts/customization.mdx) covers this topic in detail
+- you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our [generics guide](../concepts/generics.mdx) explain this topic in more details
+
+Below you can find the list of breaking changes and instructions on how to update your code.
+
+## Peer dependencies
+
+### stream-chat
+
+Upgrade to stream-chat `^6.4.0`.
+
+You might need to update your code if you created custom components/services that used `stream-chat` in your application.
+
+The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:
+
+- If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter instead of the individual `DefaultAttachmentType`, `DefaultChannelType`, `DefaultCommandType`, `DefaultEventType` `DefaultMessageType`, `DefaultReactionType` and `DefaultUserType` parameters.
+- If you are interacting with the `ChannelService` or `ChatClientService` you'll have to provide the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter (or a descended) for message reactions, attachments, commands, channels or events (you don't need to provide it for messages as it's already part of the [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) class)
+
+Our [generics guide](../concepts/generics.mdx) explains this topic in more details.
+
+You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub.
+
+#### Angular 13
+
+Run the following command to updgrade if you're using Angular 13:
+
+```
+npm install [email protected] [email protected]
+```
+
+#### Angular 12
+
+Run the following command to updgrade if you're using Angular 12:
+
+```
+npm install [email protected] stream-chat-angular@3 --legacy-peer-deps
+```
+
+### stream-chat-css
+
+You can drop the `@stream-io/stream-chat-css` dependency because going forward `stream-chat-angular` will encapsulate the library.
+
+Rewrite your stylesheet imports to this:
+
+`~stream-chat-angular/src/assets/styles/scss/index.scss`
+
+Or this if you were using CSS:
+
+`~stream-chat-angular/src/assets/styles/css/index.css`
+
+It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
+
+## Inputs removed in favor of channel capabilities
+
+The following inputs are removed:
+
+| Component/service                                                        | Input name                   | Replacement                                                                                                                                                                                                                                                                                       |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `enabledMessageActionsInput` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
+| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
+| [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
+| [`MessageInputComponent`](../components/MessageInputComponent.mdx)       | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
+| [`MessageComponent`](../components/MessageComponent.mdx)                 | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
+| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReactToMessage`          | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
+| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReceiveReadEvents`       | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
+
+## Centralized customizations
+
+| Description                                                 | Old option                                                      | New option                                                                                          |
+| ----------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| The autocomplete list item template for mentioning users    | `AutocompleteTextareaComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| The autocomplete list item template for commands            | `AutocompleteTextareaComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| Item in the channel list                                    | `ChannelListComponent.customChannelPreviewTemplate`             | [`CustomTemplatesService.customChannelPreviewTemplate$`](../services/CustomTemplatesService.mdx)    |
+| The message input template used when editing a message      | `MessageActionsBoxComponent.messageInputTemplate`               | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
+| The message input template used when editing a message      | `MessageComponent.messageInputTemplate`                         | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
+| The template used for displaying a mention inside a message | `MessageComponent.mentionTemplate`                              | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
+| The autocomplete list item template for mentioning users    | `MessageInputComponent.mentionAutocompleteItemTemplate`         | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| The autocomplete list item template for commands            | `MessageInputComponent.commandAutocompleteItemTemplate`         | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| The template for emoji picker                               | `MessageInputComponent.emojiPickerTemplate$`                    | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
+| The template used to display a message in the message list  | `MessageListComponent.messageTemplate`                          | [`CustomTemplatesService.messageTemplate$ `](../services/CustomTemplatesService.mdx)                |
+| The message input template used when editing a message      | `MessageListComponent.messageInputTemplate`                     | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
+| The template used for displaying a mention inside a message | `MessageListComponent.mentionTemplate`                          | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
+| The typing indicator template used in the message list      | `MessageListComponent.typingIndicatorTemplate`                  | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
+| The typing indicator template used in the message list      | `MessageReactionsComponent.typingIndicatorTemplate`             | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
+| The autocomplete list item template for commands            | `MessageInputConfigService.commandAutocompleteItemTemplate`     | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| The autocomplete list item template for mentioning users    | `MessageInputConfigService.mentionAutocompleteItemTemplate`     | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
+| The template for emoji picker                               | `MessageInputConfigService.emojiPickerTemplate`                 | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
+| The template for channel actions                            | `ChannelHeaderComponent.channelActionsTemplate`                 | [`CustomTemplatesService.channelActionsTemplate$`](../services/CustomTemplatesService.mdx)          |
+
+## `ChatClient.notification$` renamed to `events$`
+
+The `notification$` stream on the [`ChatClientService`](../services/ChatClientService.mdx) was renamed to `events$` as it better represents what this Observable does.
+
+The `events$` stream emits the received [client, notification and user presence events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
+
+The payload of this Observable was renamed from `Notification` to `ClientEvent`.
+
+## Custom action names removed
+
+Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control the authorization of the following message actions:
+
+| Custom action name | Channel capability   | Comment                                      |
+| ------------------ | -------------------- | -------------------------------------------- |
+| `quote`            | `quote-message`      |                                              |
+| `pin`              | `pin-message`        | Currently turned off because not implemented |
+| `flag`             | `flag-message`       |                                              |
+| `edit`             | `update-own-message` |                                              |
+| `edit-any`         | `update-any-message` |                                              |
+
+The `mute` action is removed.