Extending documentation

docusaurus/docs/React/components/contexts/component-context.mdx

@@ -24,6 +24,8 @@ A component override functionality which utilises `ComponentContext` under the h
 
 ### Basic Usage of WithComponents
 
+In this case, top-level [`MessageInput`](../message-input-components/message-input.mdx) component reaches for the closest overrides and applies `MessageInputUi1`, the [`Thread`](../core-components/thread.mdx) component uses [`MessageInput`](../message-input-components/message-input.mdx) internally and its UI can be also overriden - in this case, the closest one provides override with component `MessageInputUi2`. If we were to remove this `WithComponents` wrapper over [`Thread`](../core-components/thread.mdx) component, the closest override for [`Thread`](../core-components/thread.mdx)'s [`MessageInput`](../message-input-components/message-input.mdx) component would be `MessageInputUi1`.
+
 ```tsx
 const MessageInputUi1 = () => {
   /*...*/

docusaurus/docs/React/components/core-components/thread-list-item.mdx

@@ -1,4 +1,21 @@
-TODO:
+---
+id: thread-list-item
+title: ThreadListItem
+---
 
-- basic definition
-- activation behavior
+An item component rendered within [`ThreadList` component](./thread-list.mdx). The item is divided into two components:
+
+`ThreadListItem` - a component and provider which renders `ThreadListItemUi`
+`ThreadListItemUi` - a component which renders the actual UI elements
+
+The goal is that as integrator you can provide a different look to your component while preserving the behavior or you can replace the behavior while keeping the default UI or you can change both if you require so.
+
+## Props
+
+### thread
+
+A thread instance provided by the [`ThreadList`](../core-components/thread-list.mdx).
+
+| Type   |
+| ------ |
+| Thread |

docusaurus/docs/React/components/core-components/thread-list.mdx

@@ -3,7 +3,7 @@ id: thread-list
 title: ThreadList
 ---
 
-`ThreadList` is a component which renders individual thread instances ([`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)) stored within `ThreadManager`. It handles pagination triggers and virtualization through the help of the [Virtuoso]() virtualized list component. The rest of the business logic lives within ThreadManager and Thread classes. ThreadManager instance gets activated whenever ThreadList renders - activation is necessary as it tells the SDK that user "sees" this list and can update state accordingly whenever appropriate events arrive.
+`ThreadList` is a component which renders individual thread instances ([`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)) stored within `ThreadManager`. It handles pagination triggers and virtualization through the help of the [Virtuoso](https://virtuoso.dev) virtualized list component. The rest of the business logic lives within ThreadManager and Thread classes. ThreadManager instance gets activated whenever ThreadList renders - activation is necessary as it tells the SDK that user "sees" this list and can update state accordingly whenever appropriate events arrive.
 
 If used in default form and rendered within `ThreadView` component it also allows to set active thread and handles `Thread` activation (similar to `ThreadManager` activation).
 
@@ -20,7 +20,7 @@ If used in default form and rendered within `ThreadView` component it also allow
 
 ### virtuosoProps
 
-Props to be passed to the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api/interfaces/VirtuosoProps/).
+Props to be passed to the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api/interfaces/VirtuosoProps).
 
 | Type   |
 | ------ |

docusaurus/docs/React/guides/custom-threads-view.mdx

@@ -0,0 +1,62 @@
+---
+id: custom-threads-view
+title: Custom Threads View
+keywords: [cookbook, threads, view]
+---
+
+Our SDK comes with [`ChatView`](../components/utility-components/chat-view.mdx) which allows for an easy integration of different views. In this guide we'll show how to implement custom threads view while utilising core components and hooks.
+
+## Required Components & Hooks
+
+These components and hooks are required for your own implementation to work properly:
+
+- `ThreadList`
+- `ThreadListItem` - a provider for `ThreadListItemUi` with thread information, will be used to forward custom click event to the `ThreadListItemUi` button
+- `ThreadProvider` - "adapter" for Thread component to work properly with [`Thread` instance](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)
+- `Thread` - provides [`MessageList`](../components/core-components/message-list.mdx) with [`MessageInput`](../components/message-input-components/message-input.mdx) adjusted for threads
+- `useActiveThread` - takes your selected thread instance and handles its activity state (`Thread.activate()` & `Thread.deactivate()`) based on document focus and visibility
+
+## Building Custom Threads View
+
+```tsx
+import {
+  ThreadList,
+  ThreadListItem,
+  ThreadProvider,
+  Thread,
+  WithComponents,
+  useActiveThread,
+} from 'stream-chat-react';
+
+export const CustomThreadsView = () => {
+  const [activeThread, setActiveThread] = useState(undefined);
+
+  useActiveThread({ activeThread });
+
+  return (
+    <div className='custom-threads-view'>
+      <ThreadList
+        virtuosoProps={{
+          itemContent: (_, thread) => (
+            <ThreadListItem
+              thread={thread}
+              threadListItemUiProps={{
+                'aria-selected': thread === activeThread,
+                onClick: () => {
+                  setActiveThread(thread);
+                },
+              }}
+            />
+          ),
+        }}
+      />
+
+      {activeThread && (
+        <ThreadProvider thread={activeThread}>
+          <Thread />
+        </ThreadProvider>
+      )}
+    </div>
+  );
+};
+```