Merge component folders

docusaurus/docs/React/ui-components/attachment.mdx

@@ -1,6 +1,6 @@
 ---
-id: attachments
-title: Attachments
+id: attachment
+title: Attachment
 ---
 
 import GHComponentLink from '../_docusaurus-components/GHComponentLink';

docusaurus/docs/React/ui-components/channel-list/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Channel List"
+}

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

@@ -6,7 +6,7 @@ title: ChannelList
 
 import CodeBlock from '@theme/CodeBlock';
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 The `ChannelList` component queries an array of `channel` objects from the Stream Chat API and displays as a customizable list
 in the UI. It accepts props for [`filters`](#filters), [`sort`](#sort) and [`options`](#options), which allows you to tailor

docusaurus/docs/React/utility-components/channel-preview-ui.mdx → docusaurus/docs/React/ui-components/channel-list/channel-preview-ui.mdx

@@ -3,7 +3,7 @@ id: channel-preview-ui
 title: ChannelPreview UI
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 The ChannelPreview UI component receives props via the [`ChannelPreview`](./channel-preview.mdx) wrapper, and
 these props are a combination of the `ChannelPreview` props with additional UI specific items. The wrapper also handles the required logic

docusaurus/docs/React/utility-components/channel-preview.mdx → docusaurus/docs/React/ui-components/channel-list/channel-preview.mdx

@@ -3,7 +3,7 @@ id: channel-preview
 title: ChannelPreview
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 The `ChannelPreview` component is a wrapper component that handles the logic and functionality for a provided (or the default) channel preview and ultimately dictates the display via the component's `Preview` prop.
 

docusaurus/docs/React/utility-components/channel-search.mdx → docusaurus/docs/React/ui-components/channel-list/channel-search.mdx

@@ -5,20 +5,20 @@ title: ChannelSearch
 
 import ImageShowcase from '@site/src/components/ImageShowcase';
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
-
-import ImageInactiveSearchBarNoAppMenu from '../assets/inactive-searchbar-no-app-menu.png';
-import ImageInactiveSearchBarWithAppMenu from '../assets/inactive-searchbar-with-app-menu.png';
-import ImageActiveSearchBarNoText from '../assets/active-searchbar-no-text.png';
-import ImageActiveSearchBarWithText from '../assets/active-searchbar-with-text.png';
-import ImageSearchResultsInlineThemeV2 from '../assets/search-results-inline-theme-v2.png';
-import ImageSearchResultsPopupThemeV2 from '../assets/search-results-popup-theme-v2.png';
-import ImageSearchResultsInlineThemeV1 from '../assets/search-results-inline-theme-v1.png';
-import ImageSearchResultsPopupThemeV1 from '../assets/search-results-popup-theme-v1.png';
-import ImageSearchResultsLoadingThemeV2 from '../assets/search-results-loading-theme-v2.png';
-import ImageSearchResultsLoadingThemeV1 from '../assets/search-results-loading-theme-v1.png';
-import ImageSearchResultsEmptyThemeV2 from '../assets/search-results-empty-theme-v2.png';
-import ImageSearchResultsEmptyThemeV1 from '../assets/search-results-empty-theme-v1.png';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
+
+import ImageInactiveSearchBarNoAppMenu from '../../assets/inactive-searchbar-no-app-menu.png';
+import ImageInactiveSearchBarWithAppMenu from '../../assets/inactive-searchbar-with-app-menu.png';
+import ImageActiveSearchBarNoText from '../../assets/active-searchbar-no-text.png';
+import ImageActiveSearchBarWithText from '../../assets/active-searchbar-with-text.png';
+import ImageSearchResultsInlineThemeV2 from '../../assets/search-results-inline-theme-v2.png';
+import ImageSearchResultsPopupThemeV2 from '../../assets/search-results-popup-theme-v2.png';
+import ImageSearchResultsInlineThemeV1 from '../../assets/search-results-inline-theme-v1.png';
+import ImageSearchResultsPopupThemeV1 from '../../assets/search-results-popup-theme-v1.png';
+import ImageSearchResultsLoadingThemeV2 from '../../assets/search-results-loading-theme-v2.png';
+import ImageSearchResultsLoadingThemeV1 from '../../assets/search-results-loading-theme-v1.png';
+import ImageSearchResultsEmptyThemeV2 from '../../assets/search-results-empty-theme-v2.png';
+import ImageSearchResultsEmptyThemeV1 from '../../assets/search-results-empty-theme-v1.png';
 
 `ChannelSearch` is a UI component that searches for chat users and displays the results in a list. It can be used standalone or in the `ChannelList` via the `showChannelSearch` prop (default is false).
 The input searches for users by default, but you can utilize the `searchForChannels` prop to also search for `channels`. Completely override the querying via the `searchFunction` prop.

docusaurus/docs/React/ui-components/message-input/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Message Input"
+}

docusaurus/docs/React/ui-components/input-ui.mdx → docusaurus/docs/React/ui-components/message-input/input-ui.mdx

@@ -3,7 +3,7 @@ id: input-ui
 title: Input UI
 ---
 
-The Input UI component consumes the [`MessageInputContext`](../contexts/message-input-context.mdx) and handles the display and functionality
+The Input UI component consumes the [`MessageInputContext`](../../contexts/message-input-context.mdx) and handles the display and functionality
 for the message input in a channel. The Input UI component is typically a combination of subcomponents that each consume
 context and are responsible for one aspect of the message input (ex: text input or emoji picker).
 

docusaurus/docs/React/ui-components/message-input.mdx → docusaurus/docs/React/ui-components/message-input/message-input.mdx

@@ -4,7 +4,7 @@ title: MessageInput
 ---
 
 The `MessageInput` 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. All of
+displayed in a channel. It provides the [`MessageInputContext`](../../contexts/message-input-context.mdx) to its children. All of
 the input UI components consume the `MessageInputContext` and rely on the stored data for their display and interaction.
 
 ## Basic Usage

docusaurus/docs/React/ui-components/message-list/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Message List"
+}

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

@@ -1,12 +1,13 @@
 ---
-id: message_list
+id: message-list
 sidebar_position: 5
+slug: '/ui-components/message-list/message-list/'
 title: MessageList
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
-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
@@ -21,8 +22,8 @@ const { messages } = useChannelStateContext();
 ```
 
 The `MessageList` has no required props and by default pulls overridable data from the various contexts established
-in the [`Channel`](./channel.mdx) component. Customization of the messages rendered within the list is handled by
-the [Message UI](../ui/message-components/message-ui.mdx) component.
+in the [`Channel`](../channel.mdx) component. Customization of the messages rendered within the list is handled by
+the [Message UI](../message/message-ui.mdx) component.
 
 ## Basic Usage
 

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

@@ -1,10 +1,10 @@
 ---
-id: virtualized_list
+id: virtualized-message-list
 sidebar_position: 6
 title: VirtualizedMessageList
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 The `VirtualizedMessageList` component renders a scrollable list of messages. It differs from the standard `MessageList`
 in that it handles UI virtualization by default. Virtualization is a technique used to emulate large lists of elements by

docusaurus/docs/React/ui-components/message/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Message"
+}

docusaurus/docs/React/ui-components/message-ui-components.mdx → docusaurus/docs/React/ui-components/message/message-ui-components.mdx

@@ -3,7 +3,7 @@ id: message-ui-components
 title: Message UI Components
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
 As described in the [Message UI](./message-ui.mdx) section, our default <GHComponentLink text='MessageSimple' path='/Message/MessageSimple.tsx'/> component is a combination of various UI subcomponents. We export all the building blocks of `MessageSimple`, so a custom Message UI
 component can be built in a similar way. Check out the [Message UI Customization](../../theming/v1/message-ui.mdx) section for an example.

docusaurus/docs/React/ui-components/message-ui.mdx → docusaurus/docs/React/ui-components/message/message-ui.mdx

@@ -3,9 +3,9 @@ id: message-ui
 title: Message UI
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
-import MessageActionsBoxWithCustomAction from '../assets/message-actions-box-custom-actions.png';
+import MessageActionsBoxWithCustomAction from '../../assets/message-actions-box-custom-actions.png';
 
 The Message UI component consumes the [`MessageContext`](../../contexts/message-context.mdx) and handles the display and functionality
 for an individual message in a message list. The Message UI component is typically a combination of subcomponents that each consume

docusaurus/docs/React/ui-components/message.mdx → docusaurus/docs/React/ui-components/message/message.mdx

@@ -3,12 +3,12 @@ id: message
 title: Message
 ---
 
-import GHComponentLink from '../_docusaurus-components/GHComponentLink';
+import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
 
-import MessageActionsBoxWithCustomAction from '../assets/message-actions-box-custom-actions.png';
+import MessageActionsBoxWithCustomAction from '../../assets/message-actions-box-custom-actions.png';
 
 The `Message` component is a React Context provider that wraps all the logic, functionality, and UI for the individual messages
-displayed in a message list. It provides the [`MessageContext`](../contexts/message-context.mdx) to its children. All the message UI components consume the `MessageContext` and rely on the stored data for their display and interaction.
+displayed in a message list. It provides the [`MessageContext`](../../contexts/message-context.mdx) to its children. All the message UI components consume the `MessageContext` and rely on the stored data for their display and interaction.
 
 :::note
 The majority of Stream Chat use cases will not need to use the `Message` component directly. We've documented it here for reference,

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

@@ -1,7 +1,7 @@
 ---
 id: overview-core
 sidebar_position: 1
-slug: /core-components/
+slug: /ui-components/
 title: Important Notice
 ---
 

docusaurus/docs/React/ui-cookbook/attachment/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Attachment"
+}