docs: Add tutorial #73

feat: Update stream-chat, make stream-chat-css a peer dependency

docs: Add tutorial

docs: Expand theming docs

docs: Add missing channel header docs

Author: szuperaz

docusaurus/docs/Angular/assets/channel-header-screenshot.png

@@ -0,0 +1,56 @@
+---
+id: channel-header
+sidebar_position: 12
+title: Channel header
+---
+
+import ChannelHeaderScreenshot from "../assets/channel-header-screenshot.png";
+
+The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about the difference between members and watchers [here](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members).
+
+**Example 1** - Channel header:
+
+<img src={ChannelHeaderScreenshot} width="500" />
+
+## Customization
+
+If you want to, you can create your own custom channel header, here is how to use it:
+
+```html
+<stream-channel-list></stream-channel-list>
+<stream-channel>
+  <custom-channel-header></custom-channel-header>
+  <stream-message-list></stream-message-list>
+  <stream-notification-list></stream-notification-list>
+  <stream-message-input></stream-message-input>
+</stream-channel>
+```
+
+If you create your own channel header, you can use the [`ChannelService`](../services/channel.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts). Here is a simple implementation of a custom channel header to guide you:
+
+```typescript
+@Component({
+  selector: "custom-channel-header",
+  template: `
+    <button (click)="toggleMenu()">Menu</button>
+    {{ activeChannel?.data?.name }}
+  `,
+  styles: [],
+})
+export class ChannelHeaderComponent {
+  activeChannel: Channel | undefined;
+
+  constructor(
+    private channelService: ChannelService,
+    private channelListToggleService: ChannelListToggleService
+  ) {
+    this.channelService.activeChannel$.subscribe(
+      (c) => (this.activeChannel = c)
+    );
+  }
+
+  toggleMenu() {
+    this.channelListToggleService.toggle();
+  }
+}
+```

docusaurus/docs/Angular/components/channel-header.mdx

@@ -1,7 +1,7 @@
 ---
 id: themeing
 sidebar_position: 1
-title: Themeing
+title: Themeing and CSS
 ---
 
 import LightThemeScreenshot from "../assets/light-theme-screenshot.png";
@@ -55,3 +55,37 @@ The result:
 **Example 2** - Custom dark theme
 
 <img src={CustomDarkThemeScreenshot} width="900" />
+
+## Overriding CSS
+
+To override pre-defined library styles, follow this simple process:
+
+- Import our bundled CSS into your root stylesheet. We maintain a separate repository, [stream-chat-css](https://github.com/GetStream/stream-chat-css), which houses all of the SCSS files for the components.
+
+- Use the browser inspector or view the library code and locate default styles you wish to override
+
+- Add selectors to your local CSS file to override our defaults.
+
+- Add your local CSS selectors after Stream's bundled CSS
+
+For example:
+
+```scss
+import 'stream-chat-css/dist/css/index.css';
+
+/* Your CSS here */
+```
+
+## Importing scss Files
+
+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/[email protected]/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
+to keep up to date with these to ensure no problems arise by falling behind in important styling updates.
+:::

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

@@ -64,7 +64,7 @@
     "dotenv": "^10.0.0",
     "pretty-bytes": "^5.6.0",
     "rxjs": "~6.6.0",
-    "stream-chat": "^4.1.0",
+    "stream-chat": "^4.3.0",
     "stream-chat-css": "1.0.18",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",

package-lock.json

@@ -6,7 +6,6 @@
     "entryFile": "src/public-api.ts"
   },
   "allowedNonPeerDependencies": [
-    "stream-chat-css",
     "dayjs",
     "@ctrl/ngx-emoji-mart",
     "uuidv4",

package.json

@@ -5,13 +5,13 @@
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0",
     "@ngx-translate/core": "^13.0.0",
-    "stream-chat": "^4.1.0"
+    "stream-chat": "^4.3.0",
+    "stream-chat-css": "1.0.18"
   },
   "dependencies": {
     "@ctrl/ngx-emoji-mart": "^6.0.1",
     "dayjs": "^1.10.7",
     "pretty-bytes": "^5.6.0",
-    "stream-chat-css": "1.0.18",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12"
   }