Skip to content

Commit 8577b55

Browse files
szuperazszuperaz
authored
Merge pull request #228 from GetStream/extended-customizations
feat: Cantralized customizations #222
2 parents e11c932 + a5a8c11 commit 8577b55

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1141
-267
lines changed

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,22 @@ STREAM_USER_TOKEN=<Your user token>
7979

8080
Run `npm start` and navigate to `http://localhost:4200/`.
8181

82+
## Customization examples
83+
84+
This repository includes a sample app that showcases the different customization options of our SDK:
85+
86+
To test the app:
87+
88+
Create a file named `.env` in the root directory with the following content:
89+
90+
```
91+
STREAM_API_KEY=<Your API key>
92+
STREAM_USER_ID=<Your user ID>
93+
STREAM_USER_TOKEN=<Your user token>
94+
```
95+
96+
Run `npm start:customizations-example` and navigate to `http://localhost:4200/`.
97+
8298
## Local development
8399

84100
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‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,114 @@
213213
}
214214
}
215215
}
216+
},
217+
"customizations-example": {
218+
"projectType": "application",
219+
"schematics": {
220+
"@schematics/angular:component": {
221+
"style": "scss"
222+
},
223+
"@schematics/angular:application": {
224+
"strict": true
225+
}
226+
},
227+
"root": "projects/customizations-example",
228+
"sourceRoot": "projects/customizations-example/src",
229+
"prefix": "app",
230+
"architect": {
231+
"build": {
232+
"builder": "@angular-devkit/build-angular:browser",
233+
"options": {
234+
"outputPath": "dist/customizations-example",
235+
"index": "projects/customizations-example/src/index.html",
236+
"main": "projects/customizations-example/src/main.ts",
237+
"polyfills": "projects/customizations-example/src/polyfills.ts",
238+
"tsConfig": "projects/customizations-example/tsconfig.app.json",
239+
"inlineStyleLanguage": "scss",
240+
"assets": [
241+
"projects/customizations-example/src/favicon.ico",
242+
"projects/customizations-example/src/assets"
243+
],
244+
"styles": ["projects/customizations-example/src/styles.scss"],
245+
"scripts": []
246+
},
247+
"configurations": {
248+
"production": {
249+
"budgets": [
250+
{
251+
"type": "initial",
252+
"maximumWarning": "500kb",
253+
"maximumError": "1mb"
254+
},
255+
{
256+
"type": "anyComponentStyle",
257+
"maximumWarning": "2kb",
258+
"maximumError": "4kb"
259+
}
260+
],
261+
"fileReplacements": [
262+
{
263+
"replace": "projects/customizations-example/src/environments/environment.ts",
264+
"with": "projects/customizations-example/src/environments/environment.prod.ts"
265+
}
266+
],
267+
"outputHashing": "all"
268+
},
269+
"development": {
270+
"buildOptimizer": false,
271+
"optimization": false,
272+
"vendorChunk": true,
273+
"extractLicenses": false,
274+
"sourceMap": true,
275+
"namedChunks": true
276+
}
277+
},
278+
"defaultConfiguration": "production"
279+
},
280+
"serve": {
281+
"builder": "@angular-devkit/build-angular:dev-server",
282+
"configurations": {
283+
"production": {
284+
"browserTarget": "customizations-example:build:production"
285+
},
286+
"development": {
287+
"browserTarget": "customizations-example:build:development"
288+
}
289+
},
290+
"defaultConfiguration": "development"
291+
},
292+
"extract-i18n": {
293+
"builder": "@angular-devkit/build-angular:extract-i18n",
294+
"options": {
295+
"browserTarget": "customizations-example:build"
296+
}
297+
},
298+
"test": {
299+
"builder": "@angular-devkit/build-angular:karma",
300+
"options": {
301+
"main": "projects/customizations-example/src/test.ts",
302+
"polyfills": "projects/customizations-example/src/polyfills.ts",
303+
"tsConfig": "projects/customizations-example/tsconfig.spec.json",
304+
"karmaConfig": "projects/customizations-example/karma.conf.js",
305+
"inlineStyleLanguage": "scss",
306+
"assets": [
307+
"projects/customizations-example/src/favicon.ico",
308+
"projects/customizations-example/src/assets"
309+
],
310+
"styles": ["projects/customizations-example/src/styles.scss"],
311+
"scripts": []
312+
}
313+
},
314+
"lint": {
315+
"builder": "@angular-eslint/builder:lint",
316+
"options": {
317+
"lintFilePatterns": [
318+
"projects/customizations-example/**/*.ts",
319+
"projects/customizations-example/**/*.html"
320+
]
321+
}
322+
}
323+
}
216324
}
217325
},
218326
"defaultProject": "stream-chat-angular"

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,26 @@ The following inputs are removed:
1616
| [`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. |
1717
| [`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. |
1818
| [`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 |
19+
20+
## Centralized customizations
21+
22+
| Description | Old option | New option |
23+
| ----------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
24+
| The autocomplete list item template for mentioning users | `AutocompleteTextareaComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
25+
| The autocomplete list item template for commands | `AutocompleteTextareaComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
26+
| Item in the channel list | `ChannelListComponent.customChannelPreviewTemplate` | [`CustomTemplatesService.customChannelPreviewTemplate$`](../services/CustomTemplatesService.mdx) |
27+
| The message input template used when editing a message | `MessageActionsBoxComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx) |
28+
| The message input template used when editing a message | `MessageComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx) |
29+
| The template used for displaying a mention inside a message | `MessageComponent.mentionTemplate` | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx) |
30+
| The autocomplete list item template for mentioning users | `MessageInputComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
31+
| The autocomplete list item template for commands | `MessageInputComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
32+
| The template for emoji picker | `MessageInputComponent.emojiPickerTemplate$` | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx) |
33+
| The template used to display a message in the message list | `MessageListComponent.messageTemplate` | [`CustomTemplatesService.messageTemplate$ `](../services/CustomTemplatesService.mdx) |
34+
| The message input template used when editing a message | `MessageListComponent.messageInputTemplate` | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx) |
35+
| The template used for displaying a mention inside a message | `MessageListComponent.mentionTemplate` | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx) |
36+
| The typing indicator template used in the message list | `MessageListComponent.typingIndicatorTemplate` | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx) |
37+
| The typing indicator template used in the message list | `MessageReactionsComponent.typingIndicatorTemplate` | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx) |
38+
| The autocomplete list item template for commands | `MessageInputConfigService.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
39+
| The autocomplete list item template for mentioning users | `MessageInputConfigService.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
40+
| The template for emoji picker | `MessageInputConfigService.emojiPickerTemplate` | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx) |
41+
| The template for channel actions | `ChannelHeaderComponent.channelActionsTemplate` | [`CustomTemplatesService.channelActionsTemplate$`](../services/CustomTemplatesService.mdx) |

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
"postinstall": "npm run config:dev",
77
"ng": "ng",
88
"prestart": "npm run config:dev && ng build",
9-
"start": "ng serve",
9+
"start": "ng serve sample-app",
10+
"start:customizations-example": "ng serve customizations-example",
1011
"prestart:dev": "npm run config:dev",
11-
"start:dev": "rm -rf dist & npm run watch & (wait-on dist && ng serve)",
12+
"start:dev": "rm -rf dist & npm run watch & (wait-on dist && ng serve sample-app)",
13+
"start:dev:customizations-example": "rm -rf dist & npm run watch & (wait-on dist && ng serve customizations-example)",
1214
"build": "ng build",
1315
"build:prod": "ng build --configuration production",
1416
"watch": "ng build --watch --configuration development",
@@ -17,7 +19,7 @@
1719
"lint": "ng lint",
1820
"lint:fix": "ng lint --fix",
1921
"pree2e": "npm run config:dev && ng build",
20-
"e2e": "ng e2e",
22+
"e2e": "ng e2e sample-app",
2123
"pree2e:ci": "npm run config:prod && ng build --configuration production",
2224
"e2e:ci": "ng run sample-app:cypress-run --configuration production",
2325
"config:dev": "ANGULAR_ENV=development ts-node set-env.ts",

‎projects/customizations-example/.browserslistrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR
17+
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

‎projects/customizations-example/.eslintrc.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"extends": "../../.eslintrc.json",
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"parserOptions": {
8+
"project": [
9+
"projects/customizations-example/tsconfig.app.json",
10+
"projects/customizations-example/tsconfig.spec.json"
11+
],
12+
"createDefaultProgram": true
13+
},
14+
"rules": {
15+
"@angular-eslint/directive-selector": [
16+
"error",
17+
{
18+
"type": "attribute",
19+
"prefix": "app",
20+
"style": "camelCase"
21+
}
22+
],
23+
"@angular-eslint/component-selector": [
24+
"error",
25+
{
26+
"type": "element",
27+
"prefix": "app",
28+
"style": "kebab-case"
29+
}
30+
]
31+
}
32+
},
33+
{
34+
"files": ["*.html"],
35+
"rules": {}
36+
}
37+
]
38+
}

‎projects/customizations-example/karma.conf.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: "",
7+
frameworks: ["jasmine", "@angular-devkit/build-angular"],
8+
plugins: [
9+
require("karma-jasmine"),
10+
require("karma-chrome-launcher"),
11+
require("karma-jasmine-html-reporter"),
12+
require("karma-coverage"),
13+
require("@angular-devkit/build-angular/plugins/karma"),
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true, // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require("path").join(
29+
__dirname,
30+
"../../coverage/customizations-example"
31+
),
32+
subdir: ".",
33+
reporters: [{ type: "html" }, { type: "text-summary" }],
34+
},
35+
reporters: ["progress", "kjhtml"],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ["Chrome"],
41+
singleRun: false,
42+
restartOnFileChange: true,
43+
});
44+
};

0 commit comments

Comments
 (0)