Merge pull request #236 from GetStream/encapsulate-stream-chat-css

Encapsulate stream chat css

Author: szuperaz

.gitignore

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

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

@@ -3,6 +3,22 @@ id: upgrade-v2
 title: Upgrade from v2
 ---
 
+## Peer dependencies
+
+### 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:

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "prepare": "husky install",
-    "postinstall": "npm run config:dev",
+    "postinstall": "npm run config:dev & npm run copy-css",
     "ng": "ng",
     "prestart": "npm run config:dev && ng build",
     "start": "ng serve sample-app",
@@ -12,7 +12,7 @@
     "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",
+    "build:prod": "npm run copy-css && ng build --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "rm -rf dist & npm run watch & (wait-on dist && ng run stream-chat-angular:test)",
     "test:ci": "ng run stream-chat-angular:test --browsers ChromeHeadlessCustom --watch false",
@@ -31,7 +31,8 @@
     "generate-docs": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs",
     "typedoc:services": "typedoc --cleanOutputDir true --excludeConstructors true --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --out temp-service-docs --exclude '!**/*service.ts' --excludeNotDocumented --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
     "typedoc:components": "typedoc --cleanOutputDir true --excludeConstructors true --sort source-order --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --excludeNotDocumented --out temp-component-docs --exclude '!**/*component.ts' --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
-    "copy-docs": "ts-node copy-generated-service-docs.ts & (ts-node remove-generated-component-docs-content && ts-node copy-generated-component-docs.ts)"
+    "copy-docs": "ts-node copy-generated-service-docs.ts & (ts-node remove-generated-component-docs-content && ts-node copy-generated-component-docs.ts)",
+    "copy-css": "copyfiles --up 4 \"node_modules/@stream-io/stream-chat-css/dist/**/*\" projects/stream-chat-angular/src/assets/styles"
   },
   "lint-staged": {
     "**/*": [
@@ -121,6 +122,7 @@
     "@types/jasmine": "~3.8.0",
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",
+    "copyfiles": "^2.4.1",
     "cypress": "8.4.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

package.json

@@ -1,4 +1,4 @@
-@import "~@stream-io/stream-chat-css/dist/scss/index.scss";
+@import "../../stream-chat-angular/src/assets/styles/scss/index.scss";
 @import "~@ctrl/ngx-emoji-mart/picker";
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 
@@ -42,3 +42,7 @@ body {
     background-image: none !important;
   }
 }
+
+.material-icons {
+  font-family: "Material Icons" !important;
+}

projects/customizations-example/src/styles.scss

@@ -1,4 +1,4 @@
-@import "~@stream-io/stream-chat-css/dist/scss/index.scss";
+@import "../../stream-chat-angular/src/assets/styles/scss/index.scss";
 @import "~@ctrl/ngx-emoji-mart/picker";
 
 body {

projects/sample-app/src/styles.scss

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/stream-chat-angular",
-  "assets": ["src/styles/**/*.scss", "src/assets/**/*"],
+  "assets": ["src/assets/**/*"],
   "lib": {
     "entryFile": "src/public-api.ts"
   },

projects/stream-chat-angular/ng-package.json

@@ -12,8 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
-    "stream-chat": "^4.3.0 || ^5.0.0",
-    "@stream-io/stream-chat-css": "2.6.0"
+    "stream-chat": "^4.3.0 || ^5.0.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",