Skip to content

Commit

Permalink
Merge branch 'beta' of github.com:GetStream/stream-chat-angular into …
Browse files Browse the repository at this point in the history
…beta
  • Loading branch information
szuperaz committed Mar 18, 2022
2 parents 6c9103d + 8577b55 commit 777b087
Show file tree
Hide file tree
Showing 47 changed files with 1,141 additions and 267 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 the different customization options of our SDK:

To test 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.
Expand Down
108 changes: 108 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
23 changes: 23 additions & 0 deletions docusaurus/docs/Angular/basics/upgrade-v2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,26 @@ The following inputs are removed:
| [`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) |
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@
"postinstall": "npm run config:dev",
"ng": "ng",
"prestart": "npm run config:dev && ng build",
"start": "ng serve",
"start": "ng serve sample-app",
"start:customizations-example": "ng serve customizations-example",
"prestart:dev": "npm run config:dev",
"start:dev": "rm -rf dist & npm run watch & (wait-on dist && ng serve)",
"start:dev": "rm -rf dist & npm run watch & (wait-on dist && ng serve sample-app)",
"start:dev:customizations-example": "rm -rf dist & npm run watch & (wait-on dist && ng serve customizations-example)",
"build": "ng build",
"build:prod": "ng build --configuration production",
"watch": "ng build --watch --configuration development",
Expand All @@ -17,7 +19,7 @@
"lint": "ng lint",
"lint:fix": "ng lint --fix",
"pree2e": "npm run config:dev && ng build",
"e2e": "ng e2e",
"e2e": "ng e2e sample-app",
"pree2e:ci": "npm run config:prod && ng build --configuration production",
"e2e:ci": "ng run sample-app:cypress-run --configuration production",
"config:dev": "ANGULAR_ENV=development ts-node set-env.ts",
Expand Down
17 changes: 17 additions & 0 deletions projects/customizations-example/.browserslistrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
# npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
38 changes: 38 additions & 0 deletions projects/customizations-example/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"extends": "../../.eslintrc.json",
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": [
"projects/customizations-example/tsconfig.app.json",
"projects/customizations-example/tsconfig.spec.json"
],
"createDefaultProgram": true
},
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"rules": {}
}
]
}
44 changes: 44 additions & 0 deletions projects/customizations-example/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["jasmine", "@angular-devkit/build-angular"],
plugins: [
require("karma-jasmine"),
require("karma-chrome-launcher"),
require("karma-jasmine-html-reporter"),
require("karma-coverage"),
require("@angular-devkit/build-angular/plugins/karma"),
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true, // removes the duplicated traces
},
coverageReporter: {
dir: require("path").join(
__dirname,
"../../coverage/customizations-example"
),
subdir: ".",
reporters: [{ type: "html" }, { type: "text-summary" }],
},
reporters: ["progress", "kjhtml"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false,
restartOnFileChange: true,
});
};
Loading

0 comments on commit 777b087

Please sign in to comment.