diff --git a/CHANGELOG.md b/CHANGELOG.md index 55b1f2aa0..d5f874b1c 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx index 5de546d9a..568c86f6a 100644 --- a/docusaurus/docs/React/basics/getting-started.mdx +++ b/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. +::: + diff --git a/docusaurus/docs/React/basics/installation.mdx b/docusaurus/docs/React/basics/installation.mdx index ce7a25c2e..32e8ff555 100644 --- a/docusaurus/docs/React/basics/installation.mdx +++ b/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. diff --git a/docusaurus/docs/React/components/_category_.json b/docusaurus/docs/React/components/_category_.json new file mode 100644 index 000000000..52e6a4866 --- /dev/null +++ b/docusaurus/docs/React/components/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Components", + "position": 4 +} diff --git a/docusaurus/docs/React/contexts/_category_.json b/docusaurus/docs/React/components/contexts/_category_.json similarity index 66% rename from docusaurus/docs/React/contexts/_category_.json rename to docusaurus/docs/React/components/contexts/_category_.json index c3269383a..d122477f3 100644 --- a/docusaurus/docs/React/contexts/_category_.json +++ b/docusaurus/docs/React/components/contexts/_category_.json @@ -1,4 +1,4 @@ { "label": "React Contexts", - "position": 10 + "position": 5 } diff --git a/docusaurus/docs/React/contexts/channel-action-context.mdx b/docusaurus/docs/React/components/contexts/channel-action-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/channel-action-context.mdx rename to docusaurus/docs/React/components/contexts/channel-action-context.mdx diff --git a/docusaurus/docs/React/contexts/channel-state-context.mdx b/docusaurus/docs/React/components/contexts/channel-state-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/channel-state-context.mdx rename to docusaurus/docs/React/components/contexts/channel-state-context.mdx diff --git a/docusaurus/docs/React/contexts/chat-context.mdx b/docusaurus/docs/React/components/contexts/chat-context.mdx similarity index 93% rename from docusaurus/docs/React/contexts/chat-context.mdx rename to docusaurus/docs/React/components/contexts/chat-context.mdx index 122e0b55d..9d4305e65 100644 --- a/docusaurus/docs/React/contexts/chat-context.mdx +++ b/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 | | -------------- | --------- | diff --git a/docusaurus/docs/React/contexts/component-context.mdx b/docusaurus/docs/React/components/contexts/component-context.mdx similarity index 98% rename from docusaurus/docs/React/contexts/component-context.mdx rename to docusaurus/docs/React/components/contexts/component-context.mdx index 3ef3b02db..c361f0079 100644 --- a/docusaurus/docs/React/contexts/component-context.mdx +++ b/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 | | --------- | ------------------------------------------------------------------------------------------------------------------ | diff --git a/docusaurus/docs/React/contexts/emoji-context.mdx b/docusaurus/docs/React/components/contexts/emoji-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/emoji-context.mdx rename to docusaurus/docs/React/components/contexts/emoji-context.mdx diff --git a/docusaurus/docs/React/contexts/message-context.mdx b/docusaurus/docs/React/components/contexts/message-context.mdx similarity index 98% rename from docusaurus/docs/React/contexts/message-context.mdx rename to docusaurus/docs/React/components/contexts/message-context.mdx index 18e7f7dc6..26aa35e9e 100644 --- a/docusaurus/docs/React/contexts/message-context.mdx +++ b/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 diff --git a/docusaurus/docs/React/contexts/message-input-context.mdx b/docusaurus/docs/React/components/contexts/message-input-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/message-input-context.mdx rename to docusaurus/docs/React/components/contexts/message-input-context.mdx diff --git a/docusaurus/docs/React/contexts/translation-context.mdx b/docusaurus/docs/React/components/contexts/translation-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/translation-context.mdx rename to docusaurus/docs/React/components/contexts/translation-context.mdx diff --git a/docusaurus/docs/React/contexts/typing-context.mdx b/docusaurus/docs/React/components/contexts/typing-context.mdx similarity index 100% rename from docusaurus/docs/React/contexts/typing-context.mdx rename to docusaurus/docs/React/components/contexts/typing-context.mdx diff --git a/docusaurus/docs/React/core-components/_category_.json b/docusaurus/docs/React/components/core-components/_category_.json similarity index 68% rename from docusaurus/docs/React/core-components/_category_.json rename to docusaurus/docs/React/components/core-components/_category_.json index 285d80931..44d0026d5 100644 --- a/docusaurus/docs/React/core-components/_category_.json +++ b/docusaurus/docs/React/components/core-components/_category_.json @@ -1,4 +1,4 @@ { "label": "Core Components", - "position": 3 + "position": 4 } diff --git a/docusaurus/docs/React/core-components/channel-list.mdx b/docusaurus/docs/React/components/core-components/channel-list.mdx similarity index 99% rename from docusaurus/docs/React/core-components/channel-list.mdx rename to docusaurus/docs/React/components/core-components/channel-list.mdx index cc927487e..114a4e1a4 100644 --- a/docusaurus/docs/React/core-components/channel-list.mdx +++ b/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 diff --git a/docusaurus/docs/React/core-components/channel.mdx b/docusaurus/docs/React/components/core-components/channel.mdx similarity index 98% rename from docusaurus/docs/React/core-components/channel.mdx rename to docusaurus/docs/React/components/core-components/channel.mdx index 93bedfa65..3c535b9e8 100644 --- a/docusaurus/docs/React/core-components/channel.mdx +++ b/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 | |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| diff --git a/docusaurus/docs/React/core-components/chat.mdx b/docusaurus/docs/React/components/core-components/chat.mdx similarity index 92% rename from docusaurus/docs/React/core-components/chat.mdx rename to docusaurus/docs/React/components/core-components/chat.mdx index 24fd49fe8..94cfeca23 100644 --- a/docusaurus/docs/React/core-components/chat.mdx +++ b/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 | | ----- | diff --git a/docusaurus/docs/React/core-components/message-list.mdx b/docusaurus/docs/React/components/core-components/message-list.mdx similarity index 97% rename from docusaurus/docs/React/core-components/message-list.mdx rename to docusaurus/docs/React/components/core-components/message-list.mdx index 36a984f90..c72a825cd 100644 --- a/docusaurus/docs/React/core-components/message-list.mdx +++ b/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 = { diff --git a/docusaurus/docs/React/components/core-components/overview.mdx b/docusaurus/docs/React/components/core-components/overview.mdx new file mode 100644 index 000000000..c14102376 --- /dev/null +++ b/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. diff --git a/docusaurus/docs/React/core-components/thread.mdx b/docusaurus/docs/React/components/core-components/thread.mdx similarity index 96% rename from docusaurus/docs/React/core-components/thread.mdx rename to docusaurus/docs/React/components/core-components/thread.mdx index c14e84a6a..a5a4bff4f 100644 --- a/docusaurus/docs/React/core-components/thread.mdx +++ b/docusaurus/docs/React/components/core-components/thread.mdx @@ -1,10 +1,10 @@ --- id: thread -sidebar_position: 6 +sidebar_position: 7 title: Thread --- -import ReviewNote from '../_docusaurus-components/ReviewNote'; +import ReviewNote from '../../_docusaurus-components/ReviewNote'; The `Thread` 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. Each piece of @@ -188,7 +188,7 @@ If true, displays the thread at 100% width of its parent container, useful for m ### Input -Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. 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 thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. 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 | |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| diff --git a/docusaurus/docs/React/core-components/virtualized-list.mdx b/docusaurus/docs/React/components/core-components/virtualized-list.mdx similarity index 98% rename from docusaurus/docs/React/core-components/virtualized-list.mdx rename to docusaurus/docs/React/components/core-components/virtualized-list.mdx index 5641e082c..247dab47c 100644 --- a/docusaurus/docs/React/core-components/virtualized-list.mdx +++ b/docusaurus/docs/React/components/core-components/virtualized-list.mdx @@ -1,11 +1,11 @@ --- id: virtualized_list -sidebar_position: 5 +sidebar_position: 6 title: VirtualizedMessageList --- -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 `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 diff --git a/docusaurus/docs/React/message-components/_category_.json b/docusaurus/docs/React/components/message-components/_category_.json similarity index 69% rename from docusaurus/docs/React/message-components/_category_.json rename to docusaurus/docs/React/components/message-components/_category_.json index 3cbbc5476..dc6f180da 100644 --- a/docusaurus/docs/React/message-components/_category_.json +++ b/docusaurus/docs/React/components/message-components/_category_.json @@ -1,4 +1,4 @@ { "label": "Message Components", - "position": 4 + "position": 1 } diff --git a/docusaurus/docs/React/message-components/attachment.mdx b/docusaurus/docs/React/components/message-components/attachment.mdx similarity index 89% rename from docusaurus/docs/React/message-components/attachment.mdx rename to docusaurus/docs/React/components/message-components/attachment.mdx index d24bfabc4..ea6b530c0 100644 --- a/docusaurus/docs/React/message-components/attachment.mdx +++ b/docusaurus/docs/React/components/message-components/attachment.mdx @@ -4,12 +4,12 @@ sidebar_position: 3 title: Attachments --- -import GHComponentLink from '../_docusaurus-components/GHComponentLink'; -import ReviewNote from '../_docusaurus-components/ReviewNote'; -import ImageSizingScreenshot1 from '../assets/ImageSizing1.png'; -import ImageSizingScreenshot2 from '../assets/ImageSizing2.png'; -import ImageSizingScreenshot3 from '../assets/ImageSizing3.png'; -import AttachmentSizeWarning from '../assets/AttachmentSizeWarning.png'; +import GHComponentLink from '../../_docusaurus-components/GHComponentLink'; +import ReviewNote from '../../_docusaurus-components/ReviewNote'; +import ImageSizingScreenshot1 from '../../assets/ImageSizing1.png'; +import ImageSizingScreenshot2 from '../../assets/ImageSizing2.png'; +import ImageSizingScreenshot3 from '../../assets/ImageSizing3.png'; +import AttachmentSizeWarning from '../../assets/AttachmentSizeWarning.png'; The `Attachment` component takes a list of message attachments and conditionally renders the UI of each individual attachment based upon its type. The following table shows the attachment UI components that will be rendered for various attachment types: @@ -112,7 +112,7 @@ The following section details how the width and height of images and videos uplo #### Maximum size -You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). +You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../../guides/theming/css-and-theming.mdx) CSS variable (available only in [theme-v2](../../guides/theming/css-and-theming.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel). If you set an invalid value to the variable, you'll see a warning on the browser's console: @@ -126,7 +126,7 @@ For example if an image has `max-width` and `max-height` set to `300px` and the #### Aspect ratio -The following description is applicable for [theme-v2](../theming/introduction.mdx). +The following description is applicable for [theme-v2](../../guides/theming/css-and-theming.mdx). The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are: diff --git a/docusaurus/docs/React/message-components/message-ui.mdx b/docusaurus/docs/React/components/message-components/message-ui.mdx similarity index 98% rename from docusaurus/docs/React/message-components/message-ui.mdx rename to docusaurus/docs/React/components/message-components/message-ui.mdx index e2dc83f17..69527561a 100644 --- a/docusaurus/docs/React/message-components/message-ui.mdx +++ b/docusaurus/docs/React/components/message-components/message-ui.mdx @@ -4,9 +4,9 @@ sidebar_position: 2 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 @@ -120,7 +120,7 @@ We recommend building a Message UI component in a similar way. You can mix and m in a layout that meets your design specifications. All of these UI subcomponents are exported by the library and may be used within your custom Message UI component. Each subcomponent consumes the `MessageContext` and requires no/minimal props to run. -For a detailed example, review the [Message UI Customization](../customization/message-ui.mdx) example. +For a detailed example, review the [Message UI Customization](../../guides/theming/message-ui.mdx) example. ### Message options diff --git a/docusaurus/docs/React/message-components/message.mdx b/docusaurus/docs/React/components/message-components/message.mdx similarity index 96% rename from docusaurus/docs/React/message-components/message.mdx rename to docusaurus/docs/React/components/message-components/message.mdx index 9629b666b..9690a8ee9 100644 --- a/docusaurus/docs/React/message-components/message.mdx +++ b/docusaurus/docs/React/components/message-components/message.mdx @@ -4,10 +4,10 @@ sidebar_position: 1 title: Message --- -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 `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. @@ -65,7 +65,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 = { diff --git a/docusaurus/docs/React/message-components/reactions.mdx b/docusaurus/docs/React/components/message-components/reactions.mdx similarity index 94% rename from docusaurus/docs/React/message-components/reactions.mdx rename to docusaurus/docs/React/components/message-components/reactions.mdx index 74ebb9110..460c2a13c 100644 --- a/docusaurus/docs/React/message-components/reactions.mdx +++ b/docusaurus/docs/React/components/message-components/reactions.mdx @@ -4,7 +4,7 @@ sidebar_position: 4 title: Reactions --- -import GHComponentLink from '../_docusaurus-components/GHComponentLink'; +import GHComponentLink from '../../_docusaurus-components/GHComponentLink'; The Stream Chat API provides built-in support for adding reactions to messages. The component library provides three default components to enable reaction selection and display: @@ -62,7 +62,7 @@ The `defaultMinimalEmojis` data set that populates the default reaction options component library. To override the default selection set, provide your own array of `MinimalEmoji` type objects and pass into the `reactionOptions` -prop on the `ReactionSelector` component. You can also override the default [handleReaction](../contexts/message-context.mdx#handlereaction) +prop on the `ReactionSelector` component. You can also override the default [handleReaction](./components/contexts/message-context.mdx#handlereaction) function by adding the `handleReaction` prop. :::caution @@ -106,7 +106,7 @@ const CustomMessage = () => { ``` To completely override the `ReactionSelector` and `ReactionsList` components in `MessageSimple`, pass your own custom components as props -to the [`Channel`](../core-components/channel.mdx). +to the [`Channel`](./components/core-components/channel.mdx). ```jsx const CustomReactionSelector = (props) => { @@ -161,7 +161,7 @@ Function that adds/removes a reaction on a message (overrides the function store | Type | Default | |---------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| -| (reactionType: string, event: React.BaseSyntheticEvent) => Promise | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) | +| (reactionType: string, event: React.BaseSyntheticEvent) => Promise | [MessageContextValue['handleReaction']](./components/contexts/message-context.mdx#handlereaction) | ### latest_reactions @@ -219,7 +219,7 @@ Custom on click handler for an individual reaction in the list (overrides the fu | Type | Default | | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -| (event: React.BaseSyntheticEvent) => Promise \| void | [MessageContextValue['onReactionListClick']](../contexts/message-context.mdx#onreactionlistclick) | +| (event: React.BaseSyntheticEvent) => Promise \| void | [MessageContextValue['onReactionListClick']](./components/contexts/message-context.mdx#onreactionlistclick) | ### own_reactions @@ -277,7 +277,7 @@ Function that adds/removes a reaction on a message (overrides the function store | Type | Default | | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | -| (reactionType: string, event: React.BaseSyntheticEvent) => Promise | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) | +| (reactionType: string, event: React.BaseSyntheticEvent) => Promise | [MessageContextValue['handleReaction']](./components/contexts/message-context.mdx#handlereaction) | ### own_reactions diff --git a/docusaurus/docs/React/message-components/ui-components.mdx b/docusaurus/docs/React/components/message-components/ui-components.mdx similarity index 97% rename from docusaurus/docs/React/message-components/ui-components.mdx rename to docusaurus/docs/React/components/message-components/ui-components.mdx index 341447d7f..cee9ea887 100644 --- a/docusaurus/docs/React/message-components/ui-components.mdx +++ b/docusaurus/docs/React/components/message-components/ui-components.mdx @@ -4,12 +4,12 @@ sidebar_position: 5 title: UI Components --- -import GHComponentLink from '../_docusaurus-components/GHComponentLink'; -import ReviewNote from '../_docusaurus-components/ReviewNote'; +import GHComponentLink from '../../_docusaurus-components/GHComponentLink'; +import ReviewNote from '../../_docusaurus-components/ReviewNote'; As described in the [Message UI](./message-ui.mdx) section, our default 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](../customization/message-ui.mdx) section for an example. +component can be built in a similar way. Check out the [Message UI Customization](../../guides/theming/message-ui.mdx) section for an example. { diff --git a/docusaurus/docs/React/utility-components/channel-preview.mdx b/docusaurus/docs/React/components/utility-components/channel-preview.mdx similarity index 97% rename from docusaurus/docs/React/utility-components/channel-preview.mdx rename to docusaurus/docs/React/components/utility-components/channel-preview.mdx index 42f9e6722..9e37fa147 100644 --- a/docusaurus/docs/React/utility-components/channel-preview.mdx +++ b/docusaurus/docs/React/components/utility-components/channel-preview.mdx @@ -4,7 +4,7 @@ sidebar_position: 3 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. diff --git a/docusaurus/docs/React/utility-components/channel-search.mdx b/docusaurus/docs/React/components/utility-components/channel-search.mdx similarity index 90% rename from docusaurus/docs/React/utility-components/channel-search.mdx rename to docusaurus/docs/React/components/utility-components/channel-search.mdx index 19ecef47d..a72fcdac7 100644 --- a/docusaurus/docs/React/utility-components/channel-search.mdx +++ b/docusaurus/docs/React/components/utility-components/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. @@ -49,7 +49,7 @@ The `ChannelSearch` component renders 2 components: 1. the search input 2. the search results list -If opted in the use of [theme version 2](../theming/introduction.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered. +If opted in the use of [theme version 2](../../guides/theming/css-and-theming.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered. ### Search input vs.SearchResults state @@ -158,7 +158,7 @@ The `ChannelSearch` offers possibility to keep the search results open meanwhile ### AppMenu -Application menu / drop-down to be displayed when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../theming/introduction.mdx). No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../custom-code-examples/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection). +Application menu / drop-down to be displayed when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../../guides/theming/css-and-theming.mdx). No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../../guides/customization/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection). | Type | Default | |-----------------------|-------------| diff --git a/docusaurus/docs/React/utility-components/date-separator.mdx b/docusaurus/docs/React/components/utility-components/date-separator.mdx similarity index 100% rename from docusaurus/docs/React/utility-components/date-separator.mdx rename to docusaurus/docs/React/components/utility-components/date-separator.mdx diff --git a/docusaurus/docs/React/utility-components/indicators.mdx b/docusaurus/docs/React/components/utility-components/indicators.mdx similarity index 98% rename from docusaurus/docs/React/utility-components/indicators.mdx rename to docusaurus/docs/React/components/utility-components/indicators.mdx index d669ecc70..c95f9e696 100644 --- a/docusaurus/docs/React/utility-components/indicators.mdx +++ b/docusaurus/docs/React/components/utility-components/indicators.mdx @@ -4,7 +4,7 @@ sidebar_position: 7 title: Indicators --- -import GHComponentLink from '../_docusaurus-components/GHComponentLink'; +import GHComponentLink from '../../_docusaurus-components/GHComponentLink'; The Stream Chat React component library provides a variety components that show the status of items loading, queries from the API, network issues, and also a typing indicator: diff --git a/docusaurus/docs/React/utility-components/window.mdx b/docusaurus/docs/React/components/utility-components/window.mdx similarity index 100% rename from docusaurus/docs/React/utility-components/window.mdx rename to docusaurus/docs/React/components/utility-components/window.mdx diff --git a/docusaurus/docs/React/custom-code-examples/_category_.json b/docusaurus/docs/React/custom-code-examples/_category_.json deleted file mode 100644 index 6be8b1d46..000000000 --- a/docusaurus/docs/React/custom-code-examples/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Custom Code Examples", - "position": 8 -} diff --git a/docusaurus/docs/React/customization/_category_.json b/docusaurus/docs/React/customization/_category_.json deleted file mode 100644 index 7a7c2ab6a..000000000 --- a/docusaurus/docs/React/customization/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "General Customization", - "position": 6 -} diff --git a/docusaurus/docs/React/guides/3rd-party-video/_category_.json b/docusaurus/docs/React/guides/3rd-party-video/_category_.json new file mode 100644 index 000000000..0d65be0f9 --- /dev/null +++ b/docusaurus/docs/React/guides/3rd-party-video/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Integrating 3rd Party Video", + "position": 25 +} diff --git a/docusaurus/docs/React/custom-code-examples/video-integration-100ms.mdx b/docusaurus/docs/React/guides/3rd-party-video/video-integration-100ms.mdx similarity index 98% rename from docusaurus/docs/React/custom-code-examples/video-integration-100ms.mdx rename to docusaurus/docs/React/guides/3rd-party-video/video-integration-100ms.mdx index 128a13e06..7cc068a76 100644 --- a/docusaurus/docs/React/custom-code-examples/video-integration-100ms.mdx +++ b/docusaurus/docs/React/guides/3rd-party-video/video-integration-100ms.mdx @@ -4,13 +4,13 @@ sidebar_position: 23 title: 100ms Video Integration --- -import HMSGuideAfter from '../assets/HMSGuideAfter.png'; -import HMSGuideBefore from '../assets/HMSGuideBefore.png'; -import CleanSetup from '../assets/CleanSetup.png'; -import BasicStreamSetup from '../assets/BasicStreamSetup.png'; -import ChannelHeaderVideo from '../assets/ChannelHeaderVideo.png'; -import AgoraDashboardRoles from '../assets/AgoraDashboardRoles.png'; -import AgoraDashboardSetPermission from '../assets/AgoraDashboardSetPermission.png'; +import HMSGuideAfter from '../../assets/HMSGuideAfter.png'; +import HMSGuideBefore from '../../assets/HMSGuideBefore.png'; +import CleanSetup from '../../assets/CleanSetup.png'; +import BasicStreamSetup from '../../assets/BasicStreamSetup.png'; +import ChannelHeaderVideo from '../../assets/ChannelHeaderVideo.png'; +import AgoraDashboardRoles from '../../assets/AgoraDashboardRoles.png'; +import AgoraDashboardSetPermission from '../../assets/AgoraDashboardSetPermission.png'; ## Introduction diff --git a/docusaurus/docs/React/guides/_category_.json b/docusaurus/docs/React/guides/_category_.json new file mode 100644 index 000000000..c59a630d3 --- /dev/null +++ b/docusaurus/docs/React/guides/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Guides", + "position": 3 +} diff --git a/docusaurus/docs/React/custom-code-examples/channel-list-infinite-scroll.mdx b/docusaurus/docs/React/guides/channel-list-infinite-scroll.mdx similarity index 100% rename from docusaurus/docs/React/custom-code-examples/channel-list-infinite-scroll.mdx rename to docusaurus/docs/React/guides/channel-list-infinite-scroll.mdx diff --git a/docusaurus/docs/React/custom-code-examples/channel-users-list.mdx b/docusaurus/docs/React/guides/channel-users-list.mdx similarity index 100% rename from docusaurus/docs/React/custom-code-examples/channel-users-list.mdx rename to docusaurus/docs/React/guides/channel-users-list.mdx diff --git a/docusaurus/docs/React/guides/customization/_category_.json b/docusaurus/docs/React/guides/customization/_category_.json new file mode 100644 index 000000000..aa5ba53fb --- /dev/null +++ b/docusaurus/docs/React/guides/customization/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Customizing Components", + "position": 2, + "collapsed": true +} diff --git a/docusaurus/docs/React/custom-code-examples/adding-notification.mdx b/docusaurus/docs/React/guides/customization/adding-notification.mdx similarity index 92% rename from docusaurus/docs/React/custom-code-examples/adding-notification.mdx rename to docusaurus/docs/React/guides/customization/adding-notification.mdx index 895784a89..4b153919c 100644 --- a/docusaurus/docs/React/custom-code-examples/adding-notification.mdx +++ b/docusaurus/docs/React/guides/customization/adding-notification.mdx @@ -4,10 +4,10 @@ sidebar_position: 6 title: Message List Notifications --- -import CustomNotification from '../assets/CustomNotification.png'; +import CustomNotification from '../../assets/CustomNotification.png'; In this example, we demonstrate how to use the method `addNotification` pulled from the -[`ChannelActionContext`](../contexts/channel-action-context.mdx#addNotification) in order to add a custom +[`ChannelActionContext`](../../components/contexts/channel-action-context.mdx#addNotification) in order to add a custom notification message to the `MessageList` at our desired time specification. ## addNotification Method diff --git a/docusaurus/docs/React/custom-code-examples/channel-header.mdx b/docusaurus/docs/React/guides/customization/channel-header.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/channel-header.mdx rename to docusaurus/docs/React/guides/customization/channel-header.mdx index 319f899b5..6f43d55f3 100644 --- a/docusaurus/docs/React/custom-code-examples/channel-header.mdx +++ b/docusaurus/docs/React/guides/customization/channel-header.mdx @@ -4,7 +4,7 @@ sidebar_position: 9 title: Channel Header --- -import CustomChannelHeader from '../assets/CustomChannelHeader.png'; +import CustomChannelHeader from '../../assets/CustomChannelHeader.png'; In this example, we will demonstrate how to use a custom `ChannelHeader` component instead of the default. Unlike most of the other library components where a prop on a parent component will override the default, for this component all you need to do is use your custom component in place of the library's header option. diff --git a/docusaurus/docs/React/custom-code-examples/channel-list-preview.mdx b/docusaurus/docs/React/guides/customization/channel-list-preview.mdx similarity index 90% rename from docusaurus/docs/React/custom-code-examples/channel-list-preview.mdx rename to docusaurus/docs/React/guides/customization/channel-list-preview.mdx index 83b611dd4..044df24a5 100644 --- a/docusaurus/docs/React/custom-code-examples/channel-list-preview.mdx +++ b/docusaurus/docs/React/guides/customization/channel-list-preview.mdx @@ -1,14 +1,14 @@ --- id: channel_list_preview -sidebar_position: 1 +sidebar_position: 3 title: Channel List and Preview --- -import CustomPreview from '../assets/CustomPreview.png'; +import CustomPreview from '../../assets/CustomPreview.png'; ## How-to Guide for Customizing the ChannelList UI -To customize the UI for the [`ChannelList`](../core-components/channel-list.mdx) you need to focus on the two components that dictate the UI, the list and preview components. These are set via the optional `List` and `Preview` props, and if nothing is provided they default to +To customize the UI for the [`ChannelList`](../../components/core-components/channel-list.mdx) you need to focus on the two components that dictate the UI, the list and preview components. These are set via the optional `List` and `Preview` props, and if nothing is provided they default to [`ChannelListMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) and [`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx). @@ -111,7 +111,7 @@ const CustomLoadingIndicator = () => { ## The Preview Prop Component The component set via the `Preview` prop (or the default) dictates the design and click functionality of an individual channel in the list that we built above. -Ultimately, these UI components are rendered via the [`ChannelPreview`](../utility-components/channel-preview.mdx) wrapper component. +Ultimately, these UI components are rendered via the [`ChannelPreview`](../../components/utility-components/channel-preview.mdx) wrapper component. Here is a guide to build a custom UI component to override the default using the large variety of props provided. The code snippet below includes the bare minimum code that would be required for standard preview functionality (click handler and active channel selection), and anything additional would be to satisfy unique requirements. @@ -130,7 +130,7 @@ export const CustomPreview = (props: ChannelPreviewUIComponentProps) => { }; ``` -Let's take advantage of the SDK's [CSS classes](../customization/css-and-theming.mdx) for styling. We'll import the bundled CSS into the file where the application is instantiated then apply a class to the button element. +Let's take advantage of the SDK's [CSS classes](../theming/css-and-theming.mdx) for styling. We'll import the bundled CSS into the file where the application is instantiated then apply a class to the button element. ```tsx import '@stream-io/stream-chat-css/dist/css/index.css'; @@ -145,7 +145,7 @@ Next, let's add a little bit more useful information to the component using more This context also exposes the client which makes it possible to use API methods. :::note -For a complete overview of the available props in the custom component, take a look at the [ChannelPreview UI props](../utility-components/channel-preview-ui.mdx#props) section. +For a complete overview of the available props in the custom component, take a look at the [ChannelPreview UI props](../../components/utility-components/channel-preview-ui.mdx#props) section. ::: **The Final Code:** diff --git a/docusaurus/docs/React/custom-code-examples/channel-search.mdx b/docusaurus/docs/React/guides/customization/channel-search.mdx similarity index 93% rename from docusaurus/docs/React/custom-code-examples/channel-search.mdx rename to docusaurus/docs/React/guides/customization/channel-search.mdx index 6d47b9b86..21ea18bf7 100644 --- a/docusaurus/docs/React/custom-code-examples/channel-search.mdx +++ b/docusaurus/docs/React/guides/customization/channel-search.mdx @@ -4,15 +4,15 @@ sidebar_position: 4 title: Channel Search --- -import CustomChannelSearch from '../assets/CustomChannelSearch.png'; +import CustomChannelSearch from '../../assets/CustomChannelSearch.png'; ## How-to Guide for Customizing ChannelSearch -In this example, we will customize the [`ChannelSearch`](../core-components/channel-list.mdx#channelsearch) component. Though this component can be used standalone, we will do our customization when it's established in the `ChannelList`. Here is a guide that outlines how to +In this example, we will customize the [`ChannelSearch`](../../components/core-components/channel-list.mdx#channelsearch) component. Though this component can be used standalone, we will do our customization when it's established in the `ChannelList`. Here is a guide that outlines how to override the default `DropdownContainer`, `SearchResultItem`, and `SearchResultsHeader` components, as well as use several other useful props. :::note -A complete override of this component is possible by utilizing the [`ChannelSearch`](../core-components/channel-list.mdx#channelsearch) prop on `ChannelList`. +A complete override of this component is possible by utilizing the [`ChannelSearch`](../../components/core-components/channel-list.mdx#channelsearch) prop on `ChannelList`. ::: ### Step 1 - Setting Up For Success @@ -342,7 +342,7 @@ const customSearchFunction = async (props: ChannelSearchFunctionParams, event: { ### Adding menu -As of the version 10.0.0, users can add app menu into the `SearchBar`. In case you would like to display menu button next to the search input, you can do that by adding [`AppMenu` component](../utility-components/channel-search.mdx/#appmenu) to the `ChannelSearch` props. The display of `AppMenu` is then toggled by clicking on the menu button. `AppMenu` can be rendered as a drop-down or even a modal. In our example we will render a drop-down menu. +As of the version 10.0.0, users can add app menu into the `SearchBar`. In case you would like to display menu button next to the search input, you can do that by adding [`AppMenu` component](../../components/utility-components/channel-search.mdx/#appmenu) to the `ChannelSearch` props. The display of `AppMenu` is then toggled by clicking on the menu button. `AppMenu` can be rendered as a drop-down or even a modal. In our example we will render a drop-down menu. :::caution The SDK does not provide any default `AppMenu` component and so you will have to write your CSS for it to be styled correctly. diff --git a/docusaurus/docs/React/custom-code-examples/emoji-picker.mdx b/docusaurus/docs/React/guides/customization/emoji-picker.mdx similarity index 94% rename from docusaurus/docs/React/custom-code-examples/emoji-picker.mdx rename to docusaurus/docs/React/guides/customization/emoji-picker.mdx index 08be4c712..5780a35cf 100644 --- a/docusaurus/docs/React/custom-code-examples/emoji-picker.mdx +++ b/docusaurus/docs/React/guides/customization/emoji-picker.mdx @@ -4,7 +4,7 @@ sidebar_position: 10 title: Emoji Picker --- -import CustomEmojiPicker from '../assets/CustomEmojiPicker.png'; +import CustomEmojiPicker from '../../assets/CustomEmojiPicker.png'; In this example, we will demonstrate how to create a custom Emoji Picker component that can be used in the `MessageInput`. This component will replace the default [`EmojiPicker`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EmojiPicker.tsx) @@ -30,7 +30,7 @@ export interface BaseEmoji { ``` In this example we will use only the ID and select existing emojis. For a more detailed example of how to construct these emoji objects, please see the -[Reactions Selector and List](./reactions.mdx) section. Below is the array of breakfast emojis we will use: +[Reactions Selector and List](../theming/reactions.mdx) section. Below is the array of breakfast emojis we will use: ```tsx const customEmojis = ['fried_egg', 'croissant', 'bacon', 'waffle', 'pancakes', 'doughnut']; diff --git a/docusaurus/docs/React/custom-code-examples/gallery.mdx b/docusaurus/docs/React/guides/customization/gallery.mdx similarity index 95% rename from docusaurus/docs/React/custom-code-examples/gallery.mdx rename to docusaurus/docs/React/guides/customization/gallery.mdx index 20fad5a28..7bc3d22c4 100644 --- a/docusaurus/docs/React/custom-code-examples/gallery.mdx +++ b/docusaurus/docs/React/guides/customization/gallery.mdx @@ -4,7 +4,7 @@ sidebar_position: 11 title: Image Gallery --- -import Gallery from '../assets/Gallery.png'; +import Gallery from '../../assets/Gallery.png'; In this example, we demonstrate how to replace our default image [`Gallery`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) component with a custom implementation. The `Gallery` component is a child of `Attachment`, so we'll need @@ -57,7 +57,7 @@ const CustomGallery: React.FC = (props) => { In order to render our `CustomGallery` component, we need to supply it as a prop to the [`Attachment`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) component. The resulting `CustomAttachment` component is then added to `Channel`, so it can be injected into the -`ComponentContext` and consumed within the [Message UI](../message-components/message-ui.mdx) component. +`ComponentContext` and consumed within the [Message UI](../../components/message-components/message-ui.mdx) component. ```tsx const CustomAttachment: React.FC = (props) => ( diff --git a/docusaurus/docs/React/custom-code-examples/giphy-preview.mdx b/docusaurus/docs/React/guides/customization/giphy-preview.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/giphy-preview.mdx rename to docusaurus/docs/React/guides/customization/giphy-preview.mdx index 20ea1b0d5..a93b3457e 100644 --- a/docusaurus/docs/React/custom-code-examples/giphy-preview.mdx +++ b/docusaurus/docs/React/guides/customization/giphy-preview.mdx @@ -4,7 +4,7 @@ sidebar_position: 20 title: Giphy Preview --- -import GiphyPreview from '../assets/GiphyPreview.png'; +import GiphyPreview from '../../assets/GiphyPreview.png'; This example demonstrates how to build a custom component to override the default `GiphyPreviewMessage` component that is rendered optionally in the `VirtualizedMessageList`. diff --git a/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx b/docusaurus/docs/React/guides/customization/override-submit-handler.mdx similarity index 81% rename from docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx rename to docusaurus/docs/React/guides/customization/override-submit-handler.mdx index c02e20cb6..ca58b8545 100644 --- a/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx +++ b/docusaurus/docs/React/guides/customization/override-submit-handler.mdx @@ -4,9 +4,9 @@ sidebar_position: 5 title: Input Submit Handler --- -import SubmitHandler from '../assets/SubmitHandler.png'; +import SubmitHandler from '../../assets/SubmitHandler.png'; -In this example, we demonstrate how to provide custom logic and override the [`MessageInput`](../message-input-components/message-input.mdx) +In this example, we demonstrate how to provide custom logic and override the [`MessageInput`](../../components/message-input-components/message-input.mdx) component's default submit handler function. Our custom handler function will bold any message text. ## overrideSubmitHandler Prop @@ -16,7 +16,7 @@ conclusion of the underlying `textarea` element's [`handleSubmit`](https://githu function. :::note -You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the [`handleSubmit`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts) function from the [`MessageInputContext`](../contexts/message-input-context.mdx). The `handleSubmit` function allows you to pass custom message data through its second parameter `customMessageData`. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to [`Channel`](../core-components/channel.mdx) props `EditMessageInput` or `Input` respectively. +You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the [`handleSubmit`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts) function from the [`MessageInputContext`](../../components/contexts/message-input-context.mdx). The `handleSubmit` function allows you to pass custom message data through its second parameter `customMessageData`. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to [`Channel`](../../components/core-components/channel.mdx) props `EditMessageInput` or `Input` respectively. ::: The `overrideSubmitHandler` function receives three arguments, the message to be sent, the `cid` (channel type prepended to channel id) @@ -37,7 +37,7 @@ type MessageToSend = { ``` :::important -Call the `sendMessage` function from the [`ChannelActionContext`](../contexts/channel-action-context.mdx#sendmessage) within +Call the `sendMessage` function from the [`ChannelActionContext`](../../components/contexts/channel-action-context.mdx#sendmessage) within your custom function to ensure a message is sent to the active channel. ::: diff --git a/docusaurus/docs/React/guides/customization/overview.mdx b/docusaurus/docs/React/guides/customization/overview.mdx new file mode 100644 index 000000000..7f7defbf8 --- /dev/null +++ b/docusaurus/docs/React/guides/customization/overview.mdx @@ -0,0 +1,8 @@ +--- +id: customization-overview +sidebar_position: 1 +slug: /guides/customization/ +title: Overview +--- + +When [Theming](../theming/overview.mdx) is not enough for how you want our chat SDK to look and behave, customization is the next step. By customizing specific components you can make precise adjustments to the look and feel of our SDK exactly where you need them. diff --git a/docusaurus/docs/React/custom-code-examples/pin-indicator.mdx b/docusaurus/docs/React/guides/customization/pin-indicator.mdx similarity index 96% rename from docusaurus/docs/React/custom-code-examples/pin-indicator.mdx rename to docusaurus/docs/React/guides/customization/pin-indicator.mdx index 2ef551d08..0b75e2aab 100644 --- a/docusaurus/docs/React/custom-code-examples/pin-indicator.mdx +++ b/docusaurus/docs/React/guides/customization/pin-indicator.mdx @@ -4,9 +4,9 @@ sidebar_position: 19 title: Pin Indicator and Permissions --- -import CustomPinMessage from '../assets/CustomPinMessage.png'; -import CustomPinMessagePinned from '../assets/CustomPinMessagePinned.png'; -import CustomPinMessagePinnedHover from '../assets/CustomPinMessagePinnedHover.png'; +import CustomPinMessage from '../../assets/CustomPinMessage.png'; +import CustomPinMessagePinned from '../../assets/CustomPinMessagePinned.png'; +import CustomPinMessagePinnedHover from '../../assets/CustomPinMessagePinnedHover.png'; In this example, we will demonstrate how to create a custom pin indicator component for pinned messages, as well as set custom permissions for pinning. diff --git a/docusaurus/docs/React/custom-code-examples/suggestion-list.mdx b/docusaurus/docs/React/guides/customization/suggestion-list.mdx similarity index 88% rename from docusaurus/docs/React/custom-code-examples/suggestion-list.mdx rename to docusaurus/docs/React/guides/customization/suggestion-list.mdx index 155ab2ee9..1be60007a 100644 --- a/docusaurus/docs/React/custom-code-examples/suggestion-list.mdx +++ b/docusaurus/docs/React/guides/customization/suggestion-list.mdx @@ -4,20 +4,20 @@ sidebar_position: 14 title: Suggestion List --- -import Suggestion1 from '../assets/Suggestions1.png'; -import Suggestion2 from '../assets/Suggestions2.png'; -import Suggestion3 from '../assets/Suggestions3.png'; +import Suggestion1 from '../../assets/Suggestions1.png'; +import Suggestion2 from '../../assets/Suggestions2.png'; +import Suggestion3 from '../../assets/Suggestions3.png'; In this example, we will demonstrate how to customize the autocomplete suggestion list items that -appear above the `MessageInput` component when one of the supported [`autocompleteTriggers`](../contexts/message-input-context.mdx#autocompletetriggers) +appear above the `MessageInput` component when one of the supported [`autocompleteTriggers`](../../components/contexts/message-input-context.mdx#autocompletetriggers) is entered into the text input. -The [`Channel`](../core-components/channel.mdx) component accepts three props that adjust the look and feel of the autocomplete +The [`Channel`](../../components/core-components/channel.mdx) component accepts three props that adjust the look and feel of the autocomplete suggestion list: -- [`AutocompleteSuggestionHeader`](../core-components/channel.mdx#autocompletesuggestionheader) -- [`AutocompleteSuggestionItem`](../core-components/channel.mdx#autocompletesuggestionitem) -- [`AutocompleteSuggestionList`](../core-components/channel.mdx#autocompletesuggestionlist) +- [`AutocompleteSuggestionHeader`](../../components/core-components/channel.mdx#autocompletesuggestionheader) +- [`AutocompleteSuggestionItem`](../../components/core-components/channel.mdx#autocompletesuggestionitem) +- [`AutocompleteSuggestionList`](../../components/core-components/channel.mdx#autocompletesuggestionlist) Below we show how to create custom header and list items, while leaving the list container unchanged. @@ -50,7 +50,7 @@ const SuggestionHeader: React.FC = (props) => { ``` :::tip -To customize `autocompleteTriggers`, pass your own [`TriggerProvider`](../core-components/channel.mdx#triggerprovider) +To customize `autocompleteTriggers`, pass your own [`TriggerProvider`](../../components/core-components/channel.mdx#triggerprovider) component to `Channel`. ::: diff --git a/docusaurus/docs/React/custom-code-examples/system-message.mdx b/docusaurus/docs/React/guides/customization/system-message.mdx similarity index 93% rename from docusaurus/docs/React/custom-code-examples/system-message.mdx rename to docusaurus/docs/React/guides/customization/system-message.mdx index c322744c5..5aaa78969 100644 --- a/docusaurus/docs/React/custom-code-examples/system-message.mdx +++ b/docusaurus/docs/React/guides/customization/system-message.mdx @@ -4,15 +4,15 @@ sidebar_position: 8 title: System Message --- -import CustomSystemMessage from '../assets/CustomSystemMessage.png'; -import SystemMessage from '../assets/SystemMessage.png'; +import CustomSystemMessage from '../../assets/CustomSystemMessage.png'; +import SystemMessage from '../../assets/SystemMessage.png'; -A system message is a message generated by a system event, such as updating the channel or muting a user. These are sent from the backend and displayed via the `VirtualizedMessageList` and `MessageList` components automatically. +A system message is a message generated by a system event, such as updating the channel or muting a user. These are sent from the backend and displayed via the `VirtualizedMessageList` and `MessageList` components automatically. In this guide, we will override the default component with a custom one. ### The Default System Message Component -For reference, the default system message component, [`EventComponent`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) (image below) is very simple and displays all pertinent information about the event that occurred. +For reference, the default system message component, [`EventComponent`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) (image below) is very simple and displays all pertinent information about the event that occurred. Default System Message for Chat @@ -86,4 +86,4 @@ const App = () => ( ### The Result: -Custom System Message in the Message List \ No newline at end of file +Custom System Message in the Message List diff --git a/docusaurus/docs/React/custom-code-examples/thread-header.mdx b/docusaurus/docs/React/guides/customization/thread-header.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/thread-header.mdx rename to docusaurus/docs/React/guides/customization/thread-header.mdx index a2cd2b454..4c3e3aade 100644 --- a/docusaurus/docs/React/custom-code-examples/thread-header.mdx +++ b/docusaurus/docs/React/guides/customization/thread-header.mdx @@ -4,7 +4,7 @@ sidebar_position: 12 title: Thread Header --- -import CustomThreadHeader from '../assets/CustomThreadHeader.png'; +import CustomThreadHeader from '../../assets/CustomThreadHeader.png'; In this example we will demonstrate how to make a custom `ThreadHeader` component utilizing the props that are passed to an open `Thread`. diff --git a/docusaurus/docs/React/custom-code-examples/typing-indicator.mdx b/docusaurus/docs/React/guides/customization/typing-indicator.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/typing-indicator.mdx rename to docusaurus/docs/React/guides/customization/typing-indicator.mdx index 875bd9718..394cb7887 100644 --- a/docusaurus/docs/React/custom-code-examples/typing-indicator.mdx +++ b/docusaurus/docs/React/guides/customization/typing-indicator.mdx @@ -4,7 +4,7 @@ sidebar_position: 15 title: Typing Indicator --- -import TypingIndicator from '../assets/TypingIndicator.png'; +import TypingIndicator from '../../assets/TypingIndicator.png'; In this example, we will demonstrate how to build a custom `TypingIndicator` using the default component as a guide. diff --git a/docusaurus/docs/React/custom-code-examples/livestream-setup.mdx b/docusaurus/docs/React/guides/livestream-setup.mdx similarity index 100% rename from docusaurus/docs/React/custom-code-examples/livestream-setup.mdx rename to docusaurus/docs/React/guides/livestream-setup.mdx diff --git a/docusaurus/docs/React/custom-code-examples/multiple-channel-lists.mdx b/docusaurus/docs/React/guides/multiple-channel-lists.mdx similarity index 100% rename from docusaurus/docs/React/custom-code-examples/multiple-channel-lists.mdx rename to docusaurus/docs/React/guides/multiple-channel-lists.mdx diff --git a/docusaurus/docs/React/guides/theming/_category_.json b/docusaurus/docs/React/guides/theming/_category_.json new file mode 100644 index 000000000..f1a954e58 --- /dev/null +++ b/docusaurus/docs/React/guides/theming/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Theming", + "position": 1, + "collapsed": true +} diff --git a/docusaurus/docs/React/guides/theming/actions/_category_.json b/docusaurus/docs/React/guides/theming/actions/_category_.json new file mode 100644 index 000000000..24f37a261 --- /dev/null +++ b/docusaurus/docs/React/guides/theming/actions/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Actions", + "position": 2 +} diff --git a/docusaurus/docs/React/custom-code-examples/attachment-actions.mdx b/docusaurus/docs/React/guides/theming/actions/attachment-actions.mdx similarity index 95% rename from docusaurus/docs/React/custom-code-examples/attachment-actions.mdx rename to docusaurus/docs/React/guides/theming/actions/attachment-actions.mdx index c7ea7ee02..e0e30a07a 100644 --- a/docusaurus/docs/React/custom-code-examples/attachment-actions.mdx +++ b/docusaurus/docs/React/guides/theming/actions/attachment-actions.mdx @@ -4,8 +4,8 @@ sidebar_position: 7 title: Attachment Actions --- -import AttachmentActions1 from '../assets/AttachmentActions1.png'; -import AttachmentActions2 from '../assets/AttachmentActions2.png'; +import AttachmentActions1 from '../../../assets/AttachmentActions1.png'; +import AttachmentActions2 from '../../../assets/AttachmentActions2.png'; In this example, we connect several different parts of the library to create a user experience where we add custom attachment actions to uploaded images. Images will render with "Love" and "Loathe" buttons, which on click will post @@ -93,7 +93,7 @@ const CustomAttachmentActions: React.FC = (props) => { In order to render our `CustomAttachmentActions` component, we need to supply it as a prop to the [`Attachment`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) component. The resulting `CustomAttachment` component is then added to `Channel`, so it can be injected into the -`ComponentContext` and consumed within the [Message UI](../message-components/message-ui.mdx) component. +`ComponentContext` and consumed within the [Message UI](../../../components/message-components/message-ui.mdx) component. ```tsx const CustomAttachment: React.FC = (props) => ( @@ -107,7 +107,7 @@ const CustomAttachment: React.FC = (props) => ( To add our `attachmentActions` to an uploaded image and trigger the render of the `CustomAttachmentActions` component, we provide custom logic to override the `MessageInput` component's default submit handling behavior. For a detailed, -step-by-step example, see the [Input Submit Handler](./override-submit-handler.mdx) custom code example. +step-by-step example, see the [Input Submit Handler](../../override-submit-handler.mdx) custom code example. Simply put, if an `image` type message attachment exists, we update the `attachments` array on the `message` object by adding the `attachmentActions`. diff --git a/docusaurus/docs/React/custom-code-examples/geolocation-attachment.mdx b/docusaurus/docs/React/guides/theming/actions/geolocation-attachment.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/geolocation-attachment.mdx rename to docusaurus/docs/React/guides/theming/actions/geolocation-attachment.mdx index 4259116a6..8368aae02 100644 --- a/docusaurus/docs/React/custom-code-examples/geolocation-attachment.mdx +++ b/docusaurus/docs/React/guides/theming/actions/geolocation-attachment.mdx @@ -4,10 +4,10 @@ sidebar_position: 17 title: Geolocation Attachment --- -import Geolocation1 from '../assets/Geolocation1.png'; -import Geolocation2 from '../assets/Geolocation2.png'; -import Geolocation3 from '../assets/Geolocation3.png'; -import Geolocation4 from '../assets/Geolocation4.png'; +import Geolocation1 from '../../../assets/Geolocation1.png'; +import Geolocation2 from '../../../assets/Geolocation2.png'; +import Geolocation3 from '../../../assets/Geolocation3.png'; +import Geolocation4 from '../../../assets/Geolocation4.png'; In this comprehensive example, we demonstrate how to build a location sharing feature. Chat users will have the ability to send their location to a channel through a custom `Attachment` component that displays diff --git a/docusaurus/docs/React/custom-code-examples/mentions-hover-click.mdx b/docusaurus/docs/React/guides/theming/actions/mentions-hover-click.mdx similarity index 97% rename from docusaurus/docs/React/custom-code-examples/mentions-hover-click.mdx rename to docusaurus/docs/React/guides/theming/actions/mentions-hover-click.mdx index 2b17da09a..cb0856837 100644 --- a/docusaurus/docs/React/custom-code-examples/mentions-hover-click.mdx +++ b/docusaurus/docs/React/guides/theming/actions/mentions-hover-click.mdx @@ -4,8 +4,8 @@ sidebar_position: 13 title: Mentions Actions --- -import MentionClick from '../assets/MentionClick.png'; -import MentionHover from '../assets/MentionHover.png'; +import MentionClick from '../../../assets/MentionClick.png'; +import MentionHover from '../../../assets/MentionHover.png'; In this example, we will demonstrate how to utilize custom functions that run on hover and click of a mentioned user in a message. We pass `onMentionsHover` and `onMentionsClick` functions as props to the `Channel` component to achieve the desired result. diff --git a/docusaurus/docs/React/custom-code-examples/message-actions.mdx b/docusaurus/docs/React/guides/theming/actions/message-actions.mdx similarity index 89% rename from docusaurus/docs/React/custom-code-examples/message-actions.mdx rename to docusaurus/docs/React/guides/theming/actions/message-actions.mdx index af944ea46..de9087669 100644 --- a/docusaurus/docs/React/custom-code-examples/message-actions.mdx +++ b/docusaurus/docs/React/guides/theming/actions/message-actions.mdx @@ -4,7 +4,7 @@ sidebar_position: 3 title: Message Actions --- -import CustomMessageAction from '../assets/CustomMessageAction.png'; +import CustomMessageAction from '../../../assets/CustomMessageAction.png'; In this example, we will demonstrate how to add a custom message action. By default, the component library supports the following message actions: @@ -18,7 +18,7 @@ the following message actions: - `react` - `reply` -The `MessageList` component accepts a prop called [`customMessageActions`](../core-components/message-list.mdx#custommessageactions). +The `MessageList` component accepts a prop called [`customMessageActions`](../../../components/core-components/message-list.mdx#custommessageactions). This prop is an object type, with the key serving as the name of the action and the value as the handler function to be run on click. In the simple example below, we'll add a custom option `Yell`, which will call a window alert on click. diff --git a/docusaurus/docs/React/custom-code-examples/connection-status.mdx b/docusaurus/docs/React/guides/theming/connection-status.mdx similarity index 86% rename from docusaurus/docs/React/custom-code-examples/connection-status.mdx rename to docusaurus/docs/React/guides/theming/connection-status.mdx index ffadac8a1..2811dd02f 100644 --- a/docusaurus/docs/React/custom-code-examples/connection-status.mdx +++ b/docusaurus/docs/React/guides/theming/connection-status.mdx @@ -4,12 +4,12 @@ sidebar_position: 16 title: Connection Status --- -import ConnectionStatus from '../assets/ConnectionStatus.png'; +import ConnectionStatus from '../../assets/ConnectionStatus.png'; This example will show you how to change the message text in the `ConnectionStatus` component. This status appears when there is a connection issue with the Stream Chat API. -This component is established within the `MessageList` via the `DefaultMessageListNotifications` component in the same file. For a complete override of all of these notifications, see this [detailed example](./adding-notification.mdx), but in this smaller guide -we will replace just the text of one of the components using the Stream [`i18n instance`](../customization/translations.mdx). +This component is established within the `MessageList` via the `DefaultMessageListNotifications` component in the same file. For a complete override of all of these notifications, see this [detailed example](../adding-notification.mdx), but in this smaller guide +we will replace just the text of one of the components using the Stream [`i18n instance`](./translations.mdx). ## Implementation diff --git a/docusaurus/docs/React/customization/css-and-theming.mdx b/docusaurus/docs/React/guides/theming/css-and-theming.mdx similarity index 93% rename from docusaurus/docs/React/customization/css-and-theming.mdx rename to docusaurus/docs/React/guides/theming/css-and-theming.mdx index b3b12289b..64a7d6f08 100644 --- a/docusaurus/docs/React/customization/css-and-theming.mdx +++ b/docusaurus/docs/React/guides/theming/css-and-theming.mdx @@ -1,23 +1,23 @@ --- id: css_and_theming -sidebar_position: 4 +sidebar_position: 6 title: CSS and Theming (deprecated) keywords: [v1, theme-v1, theming-v1, theming, css] --- -import Theming1 from '../assets/Theming1.png'; -import Theming2 from '../assets/Theming2.png'; -import Theming3 from '../assets/Theming3.png'; +import Theming1 from '../../assets/Theming1.png'; +import Theming2 from '../../assets/Theming2.png'; +import Theming3 from '../../assets/Theming3.png'; :::caution -This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](../theming/introduction.mdx). +This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](./css-and-theming.mdx). ::: While the components in the React Chat library come with basic styling, the look and feel can easily be adjusted to fit your specifications. For small and precise changes, individual CSS classes can be overridden. -For larger, theme-related adjustments, the `Chat` component accepts [`customStyles`](../core-components/chat.mdx#customstyles) -and [`customClasses`](../core-components/chat.mdx#customclasses) props. The `customStyles` prop allows you to toggle +For larger, theme-related adjustments, the `Chat` component accepts [`customStyles`](../../components/core-components/chat.mdx#customstyles) +and [`customClasses`](../../components/core-components/chat.mdx#customclasses) props. The `customStyles` prop allows you to toggle a large selection of CSS variables and the `customClasses` prop allows you to provide your own classes that override the default container CSS. diff --git a/docusaurus/docs/React/customization/input-ui.mdx b/docusaurus/docs/React/guides/theming/input-ui.mdx similarity index 96% rename from docusaurus/docs/React/customization/input-ui.mdx rename to docusaurus/docs/React/guides/theming/input-ui.mdx index 97c44fd06..dfcffb8d1 100644 --- a/docusaurus/docs/React/customization/input-ui.mdx +++ b/docusaurus/docs/React/guides/theming/input-ui.mdx @@ -1,6 +1,6 @@ --- id: input_ui -sidebar_position: 2 +sidebar_position: 3 title: Message Input UI --- @@ -12,7 +12,7 @@ new input with custom logic. ### Styling -The default [Input UI](../message-input-components/input-ui.mdx) component comes with predefined styles and CSS classes. The easiest way +The default [Input UI](../../components/message-input-components/input-ui.mdx) component comes with predefined styles and CSS classes. The easiest way to customize styling is to write your own CSS and override the default values. To get a sense of all the classes and styles applied to the `MessageInput` and its child components, you can either inspect the DOM inside your browser. @@ -33,7 +33,7 @@ functions and more complex and logic-based parts of the component (ex: the `doIm function that handles the uploading of image attachments). :::note -For a complete overview of props, take a look at the [MessageInput props](../message-input-components/message-input.mdx#props) section. +For a complete overview of props, take a look at the [MessageInput props](../../components/message-input-components/message-input.mdx#props) section. ::: ### Override UI Components diff --git a/docusaurus/docs/React/customization/message-ui.mdx b/docusaurus/docs/React/guides/theming/message-ui.mdx similarity index 96% rename from docusaurus/docs/React/customization/message-ui.mdx rename to docusaurus/docs/React/guides/theming/message-ui.mdx index ec0caf9ba..589811b5d 100644 --- a/docusaurus/docs/React/customization/message-ui.mdx +++ b/docusaurus/docs/React/guides/theming/message-ui.mdx @@ -1,15 +1,15 @@ --- id: message_ui -sidebar_position: 1 +sidebar_position: 4 title: Message UI --- -import CustomMessage from '../assets/CustomMessage.png'; +import CustomMessage from '../../assets/CustomMessage.png'; ## How-to Guide for Building a Custom Message Using pre-built UI components from the library, the following guide walks you through the process of building a custom -[Message UI](../message-components/message-ui.mdx) component that looks great and comes packed with functionality. This +[Message UI](../../components/message-components/message-ui.mdx) component that looks great and comes packed with functionality. This component must be added to either the `Channel` or `MessageList` component via the `Message` prop. All the message UI components in this example have access to the `MessageContext`, and therefore can call the `useMessageContext` @@ -20,7 +20,7 @@ custom hook. The return value from this hook contains all the values and functio The custom Message UI component built below imports and uses the following UI components: - [`Attachment`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) - displays the - attachments included with a message. See the [Attachments section](../message-components/attachment.mdx) for information on types + attachments included with a message. See the [Attachments section](../../components/message-components/attachment.mdx) for information on types and props. - [`Avatar`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) - displays the image of the diff --git a/docusaurus/docs/React/guides/theming/overview.mdx b/docusaurus/docs/React/guides/theming/overview.mdx new file mode 100644 index 000000000..e6358533b --- /dev/null +++ b/docusaurus/docs/React/guides/theming/overview.mdx @@ -0,0 +1,10 @@ +--- +id: theming-overview +sidebar_position: 1 +slug: /guides/theming/ +title: Overview +--- + +After initial integration of our SDK, theming is the best option allowing you to alter the appearance and behaviour of our SDK. Through theming you should be able to create a chat experience that is fully on brand for your situation. + +In case theming our SDK is not enough, please look into our SDK [customization](../customization/overview.mdx) options instead. Customization allows you the outright replace specific components in our SDK, allowing you to add just the right amount of customization you need. diff --git a/docusaurus/docs/React/custom-code-examples/reactions.mdx b/docusaurus/docs/React/guides/theming/reactions.mdx similarity index 89% rename from docusaurus/docs/React/custom-code-examples/reactions.mdx rename to docusaurus/docs/React/guides/theming/reactions.mdx index 9f7998500..0fca7e465 100644 --- a/docusaurus/docs/React/custom-code-examples/reactions.mdx +++ b/docusaurus/docs/React/guides/theming/reactions.mdx @@ -1,11 +1,11 @@ --- id: reactions -sidebar_position: 2 +sidebar_position: 17 title: Reaction Selector and List --- -import CustomReactionSelector from '../assets/CustomReactionSelector.png'; -import CustomReactionsList from '../assets/CustomReactionsList.png'; +import CustomReactionSelector from '../../assets/CustomReactionSelector.png'; +import CustomReactionsList from '../../assets/CustomReactionsList.png'; In this example, we will demonstrate how to override the library's default reaction set, which can be found stored as the [`defaultMinimalEmojis`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/emojiData.ts) @@ -76,9 +76,9 @@ const results = emojiIndex.search('arrow'); // returns an array of emoji object ### Override the Default Set To override the default set of reactions, add your custom set to the `reactionOptions` prop on both the -[`ReactionSelector`](../message-components/reactions.mdx#reactionselector-props) component and your list component, -either [`ReactionsList`](../message-components/reactions.mdx#reactionslist-props) or -[`SimpleReactionsList`](../message-components/reactions.mdx#simplereactionslist-props) if using one of the library defaults. +[`ReactionSelector`](../../components/message-components/reactions.mdx#reactionselector-props) component and your list component, +either [`ReactionsList`](../../components/message-components/reactions.mdx#reactionslist-props) or +[`SimpleReactionsList`](../../components/message-components/reactions.mdx#simplereactionslist-props) if using one of the library defaults. ```jsx const customReactions = [ @@ -113,8 +113,8 @@ list component so the display for processed reactions has the same emoji objects ### The Final Code -Putting all the pieces together and building upon the [custom message](../customization/message-ui.mdx#how-it-fits-together) -in the General Customization section, we are left with the following code for our [Message UI](../message-components/message-ui.mdx) +Putting all the pieces together and building upon the [custom message](./message-ui.mdx#how-it-fits-together) +in the General Customization section, we are left with the following code for our [Message UI](../../components/message-components/message-ui.mdx) component: ```jsx diff --git a/docusaurus/docs/React/customization/translations.mdx b/docusaurus/docs/React/guides/theming/translations.mdx similarity index 97% rename from docusaurus/docs/React/customization/translations.mdx rename to docusaurus/docs/React/guides/theming/translations.mdx index 427af75d4..23ad25aa1 100644 --- a/docusaurus/docs/React/customization/translations.mdx +++ b/docusaurus/docs/React/guides/theming/translations.mdx @@ -4,10 +4,10 @@ sidebar_position: 5 title: Translation and i18n --- -import Diacritics from '../assets/Diacritics.png'; -import Localization1 from '../assets/Localization1.png'; -import Localization2 from '../assets/Localization2.png'; -import Transliteration from '../assets/Transliteration.png'; +import Diacritics from '../../assets/Diacritics.png'; +import Localization1 from '../../assets/Localization1.png'; +import Localization2 from '../../assets/Localization2.png'; +import Transliteration from '../../assets/Transliteration.png'; The Stream Chat React component library uses the [`i18next`](https://www.npmjs.com/package/i18next) dependency to create a [`Streami18n`](https://github.com/GetStream/stream-chat-react/blob/master/src/i18n/Streami18n.ts) class constructor that handles language translation of our UI components. The Stream Chat API also supports automatic translation of diff --git a/docusaurus/docs/React/customization/typescript.mdx b/docusaurus/docs/React/guides/typescript.mdx similarity index 98% rename from docusaurus/docs/React/customization/typescript.mdx rename to docusaurus/docs/React/guides/typescript.mdx index a7d93088d..75ef94884 100644 --- a/docusaurus/docs/React/customization/typescript.mdx +++ b/docusaurus/docs/React/guides/typescript.mdx @@ -119,7 +119,7 @@ const { channel } = useChannelStateContext(); ``` :::tip -To see an example of extending the default `Attachment` type, see the [Geolocation Attachment](../custom-code-examples/geolocation-attachment.mdx#custom-map-attachment) +To see an example of extending the default `Attachment` type, see the [Geolocation Attachment](./theming/actions/geolocation-attachment.mdx#custom-map-attachment) custom code example. ::: diff --git a/docusaurus/docs/React/hooks/_category_.json b/docusaurus/docs/React/hooks/_category_.json index 3dec9da4d..4f4b472dc 100644 --- a/docusaurus/docs/React/hooks/_category_.json +++ b/docusaurus/docs/React/hooks/_category_.json @@ -1,4 +1,4 @@ { "label": "Custom Hooks", - "position": 11 + "position": 5 } diff --git a/docusaurus/docs/React/hooks/channel-list-hooks.mdx b/docusaurus/docs/React/hooks/channel-list-hooks.mdx index 16ddb3791..c186f61a1 100644 --- a/docusaurus/docs/React/hooks/channel-list-hooks.mdx +++ b/docusaurus/docs/React/hooks/channel-list-hooks.mdx @@ -9,7 +9,7 @@ The list's state variable is then updated accordingly via the hooks. Rather than exporting these individual hooks for customization purposes, many of these event listeners accept custom handler functions, which allows you to override the library's default event response behavior. -To view the list of these custom handler functions to override (if there is one), see the `ChannelList` [documentation](../core-components/channel-list.mdx/#event-listeners). +To view the list of these custom handler functions to override (if there is one), see the `ChannelList` [documentation](../components/core-components/channel-list.mdx/#event-listeners). ## Hooks diff --git a/docusaurus/docs/React/hooks/message-input-hooks.mdx b/docusaurus/docs/React/hooks/message-input-hooks.mdx index ecd3480c7..df58985dc 100644 --- a/docusaurus/docs/React/hooks/message-input-hooks.mdx +++ b/docusaurus/docs/React/hooks/message-input-hooks.mdx @@ -4,11 +4,11 @@ sidebar_position: 3 title: MessageInput Hooks --- -The `MessageInput` component uses a variety of custom hooks to assemble the [`MessageInputContext`](../contexts/message-input-context.mdx). -These hooks can also be useful when building a custom [Input UI](../message-input-components/input-ui.mdx) component. +The `MessageInput` component uses a variety of custom hooks to assemble the [`MessageInputContext`](../components/contexts/message-input-context.mdx). +These hooks can also be useful when building a custom [Input UI](../components/message-input-components/input-ui.mdx) component. The main provided hook, [`useMessageInputState`](#usemessageinputstate), uses a group of smaller, helper hooks which are segmented by functionality. Other hooks provided include [`useCooldownTimer`](#usecooldowntimer) -and the several hooks used by the [`DefaultTriggerProvider`](../message-input-components/ui-components.mdx/#defaulttriggerprovider). +and the several hooks used by the [`DefaultTriggerProvider`](../components/message-input-components/ui-components.mdx/#defaulttriggerprovider). ## Hooks diff --git a/docusaurus/docs/React/release-guides/_category_.json b/docusaurus/docs/React/release-guides/_category_.json index be4c1802a..6d491cf2a 100644 --- a/docusaurus/docs/React/release-guides/_category_.json +++ b/docusaurus/docs/React/release-guides/_category_.json @@ -1,4 +1,4 @@ { "label": "Release guides", - "position": 13 + "position": 6 } diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx index e274735a7..567b82339 100644 --- a/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx +++ b/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx @@ -18,7 +18,7 @@ import EmptyChannelList from '../assets/theme-v2-empty-channel-list.png'; import EmptyMessageList from '../assets/theme-v2-empty-message-list.png'; import ScrollToBottomButton from '../assets/theme-v2-scroll-to-bottom-button-theme-v1.png'; -The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../theming/introduction.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed. +The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../guides/theming/css-and-theming.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed. We have tried to introduce as few breaking changes as possible. We have not removed classes but rather added new ones that are exclusively used with the theming V2 stylesheet. Also, where possible, V1 and V2 components have been introduced for backwards compatibility (the V1 components are used unless opted into theme version 2). @@ -58,7 +58,7 @@ There is a new prop `head` that allows you to render a custom React Element at t The default message component in virtualized Thread is now `MessageSimple` and not `FixedHeightMessage`. The `FixedHeightMessage` component has been deprecated and will be removed in the next release v11. -Moreover, we have added a new prop `groupStyles` with the same purpose as in [non-virtualized `MessageList`](../core-components/message-list.mdx/#groupstyles). +Moreover, we have added a new prop `groupStyles` with the same purpose as in [non-virtualized `MessageList`](../components/core-components/message-list.mdx/#groupstyles). #### Thread @@ -170,7 +170,7 @@ The new theming V2 provides default styles if no theme class is set. These style #### ChannelSearch -The `ChannelSearch` component has been revamped and upgraded. It now provides richer functionality and wider possibilities of customization for those, who opt into use of theme V2. The component capabilities are described in [ChannelSearch documentation](../utility-components/channel-search.mdx) in more depth +The `ChannelSearch` component has been revamped and upgraded. It now provides richer functionality and wider possibilities of customization for those, who opt into use of theme V2. The component capabilities are described in [ChannelSearch documentation](../components/utility-components/channel-search.mdx) in more depth #### ChannelPreview diff --git a/docusaurus/docs/React/resources/_category_.json b/docusaurus/docs/React/resources/_category_.json index 060038ff3..b7be31ee6 100644 --- a/docusaurus/docs/React/resources/_category_.json +++ b/docusaurus/docs/React/resources/_category_.json @@ -1,4 +1,4 @@ { "label": "Resources", - "position": 14 + "position": 8 } diff --git a/docusaurus/docs/React/theming/_category_.json b/docusaurus/docs/React/theming/_category_.json index e65c62039..90aab7f6f 100644 --- a/docusaurus/docs/React/theming/_category_.json +++ b/docusaurus/docs/React/theming/_category_.json @@ -1,4 +1,4 @@ { "label": "Theming and CSS", - "position": 7 + "position": 2 } diff --git a/docusaurus/docs/React/troubleshooting/_category_.json b/docusaurus/docs/React/troubleshooting/_category_.json index efbc1ac24..c1e1ed732 100644 --- a/docusaurus/docs/React/troubleshooting/_category_.json +++ b/docusaurus/docs/React/troubleshooting/_category_.json @@ -1,4 +1,4 @@ { "label": "Troubleshooting", - "position": 12 + "position": 7 } diff --git a/docusaurus/docs/React/troubleshooting/troubleshooting.mdx b/docusaurus/docs/React/troubleshooting/troubleshooting.mdx index 344e04523..a08ba102f 100644 --- a/docusaurus/docs/React/troubleshooting/troubleshooting.mdx +++ b/docusaurus/docs/React/troubleshooting/troubleshooting.mdx @@ -8,11 +8,11 @@ For information regarding some common troubleshooting and support issues, please ### Context Providers -The Stream Chat React SDK uses a variety of [Context Providers](../contexts/chat-context.mdx) that share values and data to all their children. This is instead of prop drilling through many levels of components. +The Stream Chat React SDK uses a variety of [Context Providers](../components/contexts/chat-context.mdx) that share values and data to all their children. This is instead of prop drilling through many levels of components. If you're creating a custom component, utilizing our contexts via our custom hooks makes this process very straightforward. A common issue is when one of the exposed hooks from a context provider is being utilized, but not within the related Context. Each value you pull will be undefined. -A good resource for knowing which of our components are Context Providers is within [Core Components](../core-components/chat.mdx). +A good resource for knowing which of our components are Context Providers is within [Core Components](../components/core-components/chat.mdx). ### User Roles and Permission Policies