Clean up sturcture, adjust imports

docusaurus/docs/React/basics/getting-started.mdx → docusaurus/docs/React/basics/integration.mdx

@@ -1,5 +1,5 @@
 ---
-id: getting_started
+id: integration
 sidebar_position: 2
 title: Getting Started
 ---
@@ -8,13 +8,39 @@ This section provides a high level overview of the library setup, core component
 starting point and you can follow along in your code editor. For a complete, step-by-step guide in terms setting up a React
 project or instructions on creating specific files, see our [React Chat tutorial](https://getstream.io/chat/react-chat/tutorial/).
 
-## Your First App with Stream Chat React
+## Installation
+
+We recommended using the component library through a package manager. Stream Chat React is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).
+
+### Install with NPM
+
+```bash
+npm install stream-chat stream-chat-react
+```
+
+### Install with Yarn
+
+```bash
+yarn add stream-chat stream-chat-react
+```
+
+### Install via CDN
 
-Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
-[Installation](./installation.mdx) section.
+In case you are not using a package manager, or you wish to build a simple proof of concept in CodePen for example, you can load the library through a direct script link.
+If you choose to do this, make sure you explicitly specify the version of the library to prevent breaking releases from affecting your app.
+
+```html
+<!-- Replace VERSION with the version of stream-chat and stream-chat-react -->
+<script src="https://cdn.jsdelivr.net/npm/stream-chat@VERSION"></script>
+<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@VERSION"></script>
+```
+
+With the installation out of the way, let's get started exploring the basics of the library.
+
+## Your First App with Stream Chat React
 
-The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx)
-and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their
+The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core/chat.mdx)
+and [`Channel`](../components/core/channel.mdx) components are React context providers that pass a variety of values to their
 children, including UI components, stateful data, and action handler functions.
 
 ```jsx
@@ -109,7 +135,7 @@ a fully functioning chat application.
 
 ### Chat
 
-The [`Chat`](../components/core-components/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../components/contexts/chat-context.mdx)
+The [`Chat`](../components/core/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../contexts/chat-context.mdx)
 to its children, which includes the `StreamChat` client instance. All other components within the library must be nested as children
 of `Chat` to maintain proper functionality.
 
@@ -121,22 +147,22 @@ const { client } = useChatContext();
 
 ### Channel
 
-The [`Channel`](../components/core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
+The [`Channel`](../components/core/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
 It provides five separate contexts to its children:
 
 :::caution
 `EmojiContext` has been removed in version `11.0.0`, see related release guides ([Introducing new reactions](../release-guides/upgrade-to-v11.mdx#introducing-new-reactions), [Dropping support for built-in `EmojiPicker`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and [Dropping support for built-in `EmojiIndex`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex)) to adjust your integration to this new change.
 :::
 
-- [`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
-- [`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
-- [`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
-- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
-- [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
+- [`ChannelStateContext`](../contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
+- [`ChannelActionContext`](../contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
+- [`ComponentContext`](../contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
+- [`EmojiContext`](../contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
+- [`TypingContext`](../contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
 
 ### ChannelList
 
-The [`ChannelList`](../components/core-components/channel-list.mdx) component renders a list of channels and provides a preview for each. Though the `ChannelList` is essential in many chat apps,
+The [`ChannelList`](../components/core/channel-list.mdx) component renders a list of channels and provides a preview for each. Though the `ChannelList` is essential in many chat apps,
 it isn't a required piece of the library. If a `ChannelList` component is used, a channel object should not be placed as a prop on the `Channel`
 component, as the `ChannelList` handles channel setting internally.
 
@@ -158,23 +184,23 @@ const App = () => (
 
 ### Window
 
-The [`Window`](../components/utility-components/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`.
+The [`Window`](../components/utility/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`.
 
 ### ChannelHeader
 
-The [`ChannelHeader`](../components/utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
+The [`ChannelHeader`](../components/utility/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
 
 ### MessageList
 
-The [`MessageList`](../components/core-components/message-list.mdx) component renders a list of messages and consumes the various contexts setup from `Channel`. This component accepts a wide variety of optional props for customization needs.
+The [`MessageList`](../components/core/message-list.mdx) component renders a list of messages and consumes the various contexts setup from `Channel`. This component accepts a wide variety of optional props for customization needs.
 
 ### MessageInput
 
-The [`MessageInput`](../components/message-input-components/message-input.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the [`MessageInputContext`](../components/contexts/message-input-context.mdx) to its children.
+The [`MessageInput`](../components/ui/message-input-components/message-input.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the [`MessageInputContext`](../contexts/message-input-context.mdx) to its children.
 
 ### Thread
 
-The [`Thread`](../components/core-components/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components.
+The [`Thread`](../components/core/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components.
 
 ### Emojis (picker & autocomplete)
 
@@ -189,7 +215,7 @@ Make sure to read ["Dropping support for built-in `EmojiPicker`"](../release-gui
 In addition to the above referenced UI components, client instantiation, and user connection, you need little other code to get a fully functioning chat application up and running. See below for an example of the complete code.
 
 :::note
-Remember our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
+Remember our [Theming](../theming/overview.mdx) and [Customizing Components](../customization-guides/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
 :::
 
 ```tsx

docusaurus/docs/React/basics/installation.mdx → docusaurus/docs/React/basics/overview.mdx

@@ -1,5 +1,5 @@
 ---
-id: installation
+id: overview
 sidebar_position: 1
 slug: /
 title: Overview
@@ -22,10 +22,10 @@ Use cases include team and social messaging, virtual events, livestream gaming,
 
 If you are new to our SDK it is best to go through a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
 
-After that, our [getting started page](./getting-started.mdx) is a great next step.
+After that, our [getting started page](./integration.mdx) is a great next step.
 
 :::tip
-If you are integrating our SDK, please pay attention to our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
+If you are integrating our SDK, please pay attention to our [Theming](../theming/v1/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
 :::
 
 ## Architecture
@@ -34,32 +34,3 @@ A common pattern in the library is the use of context provider hooks (see [Conte
 This makes customization straightforward, as you can use our exported hooks in your custom components to receive the exact values needed, while also subscribing to context changes.
 
 The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project.
-
-## Installation
-
-We recommended using the component library through a package manager. Stream Chat React is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).
-
-### Install with NPM
-
-```bash
-npm install stream-chat stream-chat-react
-```
-
-### Install with Yarn
-
-```bash
-yarn add stream-chat stream-chat-react
-```
-
-### Install via CDN
-
-In case you are not using a package manager, or you wish to build a simple proof of concept in CodePen for example, you can load the library through a direct script link.
-If you choose to do this, make sure you explicitly specify the version of the library to prevent breaking releases from affecting your app.
-
-```html
-<!-- Replace VERSION with the version of stream-chat and stream-chat-react -->
-<script src="https://cdn.jsdelivr.net/npm/stream-chat@VERSION"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@VERSION"></script>
-```
-
-With the installation out of the way, let's get started exploring the basics of the library.

docusaurus/docs/React/components/contexts/channel-action-context.mdx → docusaurus/docs/React/contexts/channel-action-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: channel_action_context
-sidebar_position: 3
+id: channel-action-context
 title: ChannelActionContext
 ---
 

docusaurus/docs/React/components/contexts/channel-list-context.mdx → docusaurus/docs/React/contexts/channel-list-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: channel_list_context
-sidebar_position: 11
+id: channel-list-context
 title: ChannelListContext
 ---
 
@@ -25,10 +24,10 @@ import { useChannelListContext } from 'stream-chat-react';
 export const CustomComponent = () => {
   const { channels, setChannels } = useChannelListContext();
   // component logic ...
-  return(
-      {/* rendered elements */}
-  );
-}
+  return {
+    /* rendered elements */
+  };
+};
 ```
 
 ## Value
@@ -38,7 +37,7 @@ export const CustomComponent = () => {
 State representing the array of loaded channels. Channels query is executed by default only within the [`ChannelList` component](../core-components/channel-list.mdx) in the SDK.
 
 | Type        |
-|-------------|
+| ----------- |
 | `Channel[]` |
 
 ### setChannels
@@ -110,5 +109,5 @@ const Sidebar = () => {
 ```
 
 | Type                                  |
-|---------------------------------------|
+| ------------------------------------- |
 | `Dispatch<SetStateAction<Channel[]>>` |

docusaurus/docs/React/components/contexts/channel-state-context.mdx → docusaurus/docs/React/contexts/channel-state-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: channel_state_context
-sidebar_position: 2
+id: channel-state-context
 title: ChannelStateContext
 ---
 

docusaurus/docs/React/components/contexts/chat-context.mdx → docusaurus/docs/React/contexts/chat-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: chat_context
-sidebar_position: 1
+id: chat-context
 title: ChatContext
 ---
 
@@ -50,7 +49,7 @@ The `queryInProgress` values are:
 - `null` - at least one channels page has been loaded and there is no query in progress at the moment
 
 | Type                 |
-|----------------------|
+| -------------------- |
 | `ChannelsQueryState` |
 
 ### closeMobileNav
@@ -63,7 +62,7 @@ The function to close mobile navigation.
 
 ### customClasses
 
-Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
+Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../theming/v1/css-and-theming.mdx)
 for implementation assistance.
 
 | Type   |
@@ -121,7 +120,7 @@ You can override the default behavior by pulling it from context and then utiliz
 
 ### theme
 
-Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
+Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../theming/v1/css-and-theming.mdx#css-variables) of your app.
 
 | Type  |
 | ----- |

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

@@ -1,10 +1,9 @@
 ---
-id: component_context
-sidebar_position: 4
+id: component-context
 title: ComponentContext
 ---
 
-import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../_docusaurus-components/GHComponentLink';
 
 The `ComponentContext` is a one of the context providers exposed by the [`Channel`](../core-components/channel.mdx) component and is
 consumable by all the children of `Channel`. This context provides UI component override options for maximum customization.
@@ -74,8 +73,10 @@ Custom UI component to display a user's avatar.
 Custom UI component to display image resp. a fallback in case of load error, in `<img/>` element. The default resp. custom (from `ComponentContext`) `BaseImage` component is rendered by:
 
 - <GHComponentLink text='Image' path='/Gallery/Image.tsx' /> - single image attachment in message list
-- <GHComponentLink text='Gallery' path='/Gallery/Gallery.tsx' /> - group of image attachments in message list
-- <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx' /> - image uploads preview in message input (composer)
+- <GHComponentLink text='Gallery' path='/Gallery/Gallery.tsx' /> - group of image attachments in message
+  list
+- <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx' /> - image
+  uploads preview in message input (composer)
 
 The `BaseImage` component accepts the same props as `<img/>` element.
 
@@ -335,7 +336,7 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version 1](../../theming/v1/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                             |
 | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

docusaurus/docs/React/components/contexts/emoji-context.mdx → docusaurus/docs/React/contexts/emoji-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: emoji_context
-sidebar_position: 5
+id: emoji-context
 title: EmojiContext
 ---
 

docusaurus/docs/React/components/contexts/message-context.mdx → docusaurus/docs/React/contexts/message-context.mdx

@@ -1,10 +1,9 @@
 ---
-id: message_context
-sidebar_position: 6
+id: message-context
 title: MessageContext
 ---
 
-import MessageActionsBoxWithCustomAction from '../../assets/message-actions-box-custom-actions.png';
+import MessageActionsBoxWithCustomAction from '../assets/message-actions-box-custom-actions.png';
 
 The `MessageContext` is established within the [`Message`](../message-components/message.mdx) component. It provides data to the
 [Message UI](../message-components/message-ui.mdx) component and its children. Use the values stored within this context to build
@@ -339,8 +338,8 @@ An array of users that have read the current message.
 
 Custom function to render message text content.
 
-| Type     | Default                                                                                |
-| -------- | -------------------------------------------------------------------------------------- |
+| Type     | Default                                                                        |
+| -------- | ------------------------------------------------------------------------------ |
 | function | <GHComponentLink text='renderText' path='/Message/renderText/renderText.tsx'/> |
 
 ### setEditingState

docusaurus/docs/React/components/contexts/message-input-context.mdx → docusaurus/docs/React/contexts/message-input-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: message_input_context
-sidebar_position: 7
+id: message-input-context
 title: MessageInputContext
 ---
 
@@ -251,7 +250,7 @@ Function that runs onSubmit to the underlying `textarea` component.
 Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`. Received from `MessageInputProps`.
 
 | Type    | Default |
-|---------|---------|
+| ------- | ------- |
 | boolean | false   |
 
 ### imageOrder

docusaurus/docs/React/components/contexts/message-list-context.mdx → docusaurus/docs/React/contexts/message-list-context.mdx

@@ -1,6 +1,5 @@
 ---
-id: message_list_context
-sidebar_position: 8
+id: message-list-context
 title: MessageListContext
 ---
 
@@ -26,10 +25,10 @@ import { useMessageListContext } from 'stream-chat-react';
 export const CustomComponent = () => {
   const { listElement, scrollToBottom } = useMessageListContext();
   // component logic ...
-  return(
-      {/* rendered elements */}
-  );
-}
+  return {
+    /* rendered elements */
+  };
+};
 ```
 
 ## Value
@@ -39,13 +38,13 @@ export const CustomComponent = () => {
 The scroll container within which the messages and typing indicator are rendered. You may want to perform scroll-to-bottom operations based on the `listElement`'s scroll state.
 
 | Type                     |
-|--------------------------|
+| ------------------------ |
 | `HTMLDivElement \| null` |
 
 ### scrollToBottom
 
 Function that scrolls the `listElement` to the bottom.
 
 | Type         |
-|--------------|
+| ------------ |
 | `() => void` |