feat: Support @stream-io/stream-chat-css, make it as default

README.md

@@ -35,7 +35,7 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 ### Install with NPM
 
 ```
-npm install stream-chat-angular stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
 ```
 
 **Important note** If you are using **Angular 12** you will need to add `--legacy-peer-deps` flag as `@ngx-translate/core`'s newest version only supports Angular 13.

docusaurus/docs/Angular/basics/overview.mdx

@@ -30,7 +30,7 @@ We recommended using the component library through a package manager. Stream Cha
 ### Install with NPM
 
 ```bash
-npm install stream-chat-angular stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
 ```
 
 ## Tutorial

docusaurus/docs/Angular/concepts/themeing-and-css.mdx

@@ -71,7 +71,7 @@ To override pre-defined library styles, follow this simple process:
 For example:
 
 ```scss
-import 'stream-chat-css/dist/css/index.css';
+@import "~@stream-io/stream-chat-css/dist/css/index.css";
 
 /* Your CSS here */
 ```
@@ -81,9 +81,6 @@ import 'stream-chat-css/dist/css/index.css';
 As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
 what you need by importing individual scss files. The imports should happen in your root stylesheet.
 
-Here's a complete [list of scss files](https://unpkg.com/browse/stream-chat-css@1.0.17/dist/scss/) broken down by size and with the
-option of filtering by version.
-
 :::note
 If not importing our entire bundled CSS, individually importing the SDK's scss files is the better alternative to copy and pasting
 our stylesheets and then customizing that code in your application. The CSS in the library does change occasionally, and you want

introduction/introduction.md

@@ -8,7 +8,7 @@ The Angular Chat Messaging Component Library includes everything you need to bui
   - npm - https://www.npmjs.com/package/stream-chat-angular
 - **Component styles** - We maintain a separate repository for the stylesheets of the web chat UI components.
   - Source - https://github.com/GetStream/stream-chat-css
-  - npm - https://www.npmjs.com/package/stream-chat-css
+  - npm - https://www.npmjs.com/package/@stream-io/stream-chat-css
 
 We recommend you use our component SDK. Chat applications have a lot of moving parts and the Chat Component SDK handles all the stateful chat logic for you to make integration easy. Furthermore, the components offered are highly customisable allowing you to seamlessly incorporate your chat application into your existing application experience. That being said, for various reasons you may choose to build all of your chat UI components yourself, in which case you can still use our Component SDK and take adventage of the Angular services.
 

package.json

@@ -78,14 +78,14 @@
     "@angular/router": "~12.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
+    "@stream-io/stream-chat-css": "1.0.26",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",
     "dotenv": "^10.0.0",
     "pretty-bytes": "^5.6.0",
     "rxjs": "~6.6.0",
     "stream-chat": "^4.3.0",
-    "stream-chat-css": "^1.0.23",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

projects/sample-app/src/styles.scss

@@ -1,4 +1,4 @@
-@import "~stream-chat-css/dist/scss/index.scss";
+@import "~@stream-io/stream-chat-css/dist/scss/index.scss";
 
 body {
   margin: 0;

projects/stream-chat-angular/README.md

@@ -35,7 +35,7 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 ### Install with NPM
 
 ```
-npm install stream-chat-angular stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
 ```
 
 **Important note** If you are using **Angular 12** you will need to add `--legacy-peer-deps` flag as `@ngx-translate/core`'s newest version only supports Angular 13.

projects/stream-chat-angular/package.json

@@ -13,7 +13,16 @@
     "@angular/core": "^12.2.0 || ^13.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
     "stream-chat": "^4.3.0",
-    "stream-chat-css": "^1.0.23"
+    "stream-chat-css": "1.0.23",
+    "@stream-io/stream-chat-css": "1.0.26"
+  },
+  "peerDependenciesMeta": {
+    "stream-chat-css": {
+      "optional": true
+    },
+    "@stream-io/stream-chat-css": {
+      "optional": true
+    }
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

tutorial/tutorial.md

@@ -155,7 +155,7 @@ Replace the content of the `app.component.html` with the following code:
 Add the following code to your root stylesheet (`styles.scss` if you are using SCSS):
 
 ```scss
-@import "~stream-chat-css/dist/scss/index.scss";
+@import "~@stream-io/stream-chat-css/dist/scss/index.scss";
 
 body {
   margin: 0;
@@ -165,7 +165,7 @@ body {
 **Important note** If you are using **CSS** stylesheets, you should add the following import instead:
 
 ```css
-@import "~stream-chat-css/dist/css/index.css";
+@import "~@stream-io/stream-chat-css/dist/css/index.css";
 ```
 
 5. Modify `tsconfig.json`