docs: reorganize sidebar, fix ordering and no broken links (#1842)

CHANGELOG.md

@@ -565,14 +565,14 @@ Both `listener.js` and usage of key codes were outdated and caused unnecessary i
 * onBlur prop for ChatAutoComplete ([c9897f4](https://github.com/GetStream/stream-chat-react/commit/c9897f422d0d04d606f149965b510bee749e0151)), closes [#1345](https://github.com/GetStream/stream-chat-react/issues/1345)
 * support choosing a giphy version ([0d97fc6](https://github.com/GetStream/stream-chat-react/commit/0d97fc62d4e5f166162e1d375689196305fad420))
 
-### ⚠️ BREAKING CHANGES ⚠️  
+### ⚠️ BREAKING CHANGES ⚠️
 
 * All types now accept a single generic ([help article](https://getstream.io/chat/docs/sdk/react/customization/typescript_and_generics/))
 
 
 ## [7.0.0](https://github.com/GetStream/stream-chat-react/releases/tag/v7.0.0) 2022-02-10
 
-### ⚠️ BREAKING CHANGES ⚠️  
+### ⚠️ BREAKING CHANGES ⚠️
 
 - Replace stale `react-images` dependency with `react-image-gallery`, removed `ModalImage` [#1318](https://github.com/GetStream/stream-chat-react/pull/1318)
 - Add support for accessibility through the use of semantic HTML, ARIA attributes. Updates include changing HTML elements to different types as necessary [#1314](https://github.com/GetStream/stream-chat-react/pull/1314) and [#1294](https://github.com/GetStream/stream-chat-react/pull/1294)

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

@@ -15,8 +15,8 @@ project or instructions on creating specific files, see our [React Chat tutorial
 Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
 [Installation](./installation.mdx) section.
 
-The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../core-components/chat.mdx)
-and [`Channel`](../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-components/chat.mdx)
+and [`Channel`](../components/core-components/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
@@ -128,7 +128,7 @@ a fully functioning chat application.
 
 ### Chat
 
-The [`Chat`](../core-components/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../contexts/chat-context.mdx)
+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)
 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.
 
@@ -140,18 +140,18 @@ const { client } = useChatContext();
 
 ### Channel
 
-The [`Channel`](../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-components/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:
 
-- [`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`)
-- [`TypingContext`](../contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
+- [`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`)
+- [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
 
 ### ChannelList
 
-The [`ChannelList`](../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-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,
 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.
 
@@ -173,28 +173,32 @@ const App = () => (
 
 ### Window
 
-The [`Window`](../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-components/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`](../utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
+The [`ChannelHeader`](../components/utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
 
 ### MessageList
 
-The [`MessageList`](../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-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.
 
 ### MessageInput
 
-The [`MessageInput`](../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.
+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.
 
 ### Thread
 
-The [`Thread`](../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-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.
 
 ## Summary
 
 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.
+:::
+
 <ReviewNote
   id='179e58f8-22fb-11ed-909b-a4bb6d26ac2f'
 >

docusaurus/docs/React/basics/installation.mdx

@@ -18,6 +18,16 @@ Use cases include team and social messaging, virtual events, livestream gaming,
 - Read state and typing indicators
 - Channel and message lists
 
+## Where to get started
+
+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.
+
+:::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.
+:::
+
 ## Architecture
 
 A common pattern in the library is the use of context provider hooks (see [Contexts](./contexts/chat_context)). These custom hooks allow for effective value sharing between parent components and their children.

docusaurus/docs/React/components/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 4
+}

docusaurus/docs/React/contexts/_category_.json → docusaurus/docs/React/components/contexts/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "React Contexts",
-  "position": 10
+  "position": 5
 }

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

@@ -4,7 +4,7 @@ sidebar_position: 1
 title: ChatContext
 ---
 
-import ReviewNote from '../_docusaurus-components/ReviewNote';
+import ReviewNote from '../../_docusaurus-components/ReviewNote';
 
 The `ChatContext` is exposed by the [`Chat`](../core-components/chat.mdx) component. Since `Chat` wraps the entire chat application, all other components in the library
 have access to the values stored in this context. You can access the context values by calling the `useChatContext` custom hook.
@@ -52,7 +52,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](../customization/css-and-theming.mdx)
+Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
 for implementation assistance.
 
 | Type   |
@@ -128,7 +128,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](../customization/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](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
 
 | Type  |
 | ----- |
@@ -142,7 +142,7 @@ Deprecated and to be removed in a future major release. Use the `customStyles` p
 
 ### themeVersion
 
-Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../theming/introduction.mdx).
+Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../guides/theming/css-and-theming.mdx).
 
 |   Type         |  Default  |
 | -------------- | --------- |

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

@@ -4,7 +4,7 @@ sidebar_position: 4
 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.
@@ -295,7 +295,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](../theming/introduction.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
 
 | Type | Default |
 | --------- | ------------------------------------------------------------------------------------------------------------------ |

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

@@ -4,7 +4,7 @@ sidebar_position: 6
 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
@@ -265,7 +265,7 @@ An array of users that have been muted by the connected user.
 
 | Type   | Default                                                               |
 | ------ | --------------------------------------------------------------------- |
-| Mute[] | [ChannelStateContext['mutes']](../contexts/channel-state-context.mdx) |
+| Mute[] | [ChannelStateContext['mutes']](./channel-state-context.mdx) |
 
 ### onMentionsClickMessage
 

docusaurus/docs/React/core-components/_category_.json → docusaurus/docs/React/components/core-components/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Core Components",
-  "position": 3
+  "position": 4
 }

docusaurus/docs/React/core-components/channel-list.mdx → docusaurus/docs/React/components/core-components/channel-list.mdx

@@ -1,12 +1,12 @@
 ---
 id: channel_list
-sidebar_position: 2
+sidebar_position: 3
 title: ChannelList
 ---
 import CodeBlock from '@theme/CodeBlock';
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
-import ReviewNote from '../_docusaurus-components/ReviewNote';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
+import ReviewNote from '../../_docusaurus-components/ReviewNote';
 
 
 The `ChannelList` component queries an array of `channel` objects from the Stream Chat API and displays as a customizable list

docusaurus/docs/React/core-components/channel.mdx → docusaurus/docs/React/components/core-components/channel.mdx

@@ -1,9 +1,9 @@
 ---
 id: channel
-sidebar_position: 3
+sidebar_position: 4
 title: Channel
 ---
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 The `Channel` component is a React Context provider that wraps all the logic, functionality, and UI for an individual chat channel.
 It provides five separate contexts to its children:
@@ -546,7 +546,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](../theming/introduction.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                               |
 |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

docusaurus/docs/React/core-components/chat.mdx → docusaurus/docs/React/components/core-components/chat.mdx

@@ -1,10 +1,10 @@
 ---
 id: chat
-sidebar_position: 1
+sidebar_position: 2
 title: Chat
 ---
 
-import ReviewNote from '../_docusaurus-components/ReviewNote';
+import ReviewNote from '../../_docusaurus-components/ReviewNote';
 
 The `Chat` 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
@@ -49,7 +49,7 @@ const channel = client.channel('messaging', {
 
 ### customClasses
 
-Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../customization/css-and-theming.mdx)
+Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
 for implementation assistance.
 
 | Type   |
@@ -64,7 +64,7 @@ for implementation assistance.
 
 ### customStyles
 
-Object containing custom styles to override the default CSS variables. See [CSS and Theming](../customization/css-and-theming.mdx)
+Object containing custom styles to override the default CSS variables. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
 for implementation assistance.
 
 | Type   |
@@ -137,7 +137,7 @@ When the screen width is at a mobile breakpoint, whether or not the mobile navig
 
 ### theme
 
-Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/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](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
 
 | Type  |
 | ----- |

docusaurus/docs/React/core-components/message-list.mdx → docusaurus/docs/React/components/core-components/message-list.mdx

@@ -1,13 +1,13 @@
 ---
 id: message_list
-sidebar_position: 4
+sidebar_position: 5
 title: MessageList
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
-import ReviewNote from '../_docusaurus-components/ReviewNote';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
+import ReviewNote from '../../_docusaurus-components/ReviewNote';
 
-import MessageActionsBoxWithCustomAction from '../assets/message-actions-box-custom-actions.png';
+import MessageActionsBoxWithCustomAction from '../../assets/message-actions-box-custom-actions.png';
 
 The `MessageList` component renders a scrollable list of messages. The UI for each individual message is rendered
 conditionally based on its `message.type` value. The list renders date separators, message reactions, new message notifications, system
@@ -167,7 +167,7 @@ If true, picking a reaction from the `ReactionSelector` component will close the
 
 ### customMessageActions
 
-An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../../message-components/message_ui/#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
+An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](../message-components/message_ui/#message-actions-box) is rendered. The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.
 
 ```jsx
 const customActions = {

docusaurus/docs/React/components/core-components/overview.mdx

@@ -0,0 +1,7 @@
+---
+id: overview-core
+sidebar_position: 1
+title: Important Notice
+---
+
+The Core Components are lower level components in our SDK, they support the higher level components and UI components. You should only be dealing with the Core Components directly in specific cases or when our higher level components are not suitable for your usecase.