Skip to content

Commit

Permalink
Clean up sturcture, adjust imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnautov-anton
arnautov-anton committed Jan 23, 2024
1 parent a95f3b5 commit f770382
Show file tree
Hide file tree
Showing 104 changed files with 374 additions and 351 deletions.
66 changes: 46 additions & 20 deletions ...rus/docs/React/basics/getting-started.mdx → docusaurus/docs/React/basics/integration.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
id: getting_started
id: integration
sidebar_position: 2
title: Getting Started
---
Expand All @@ -8,13 +8,39 @@ This section provides a high level overview of the library setup, core component
starting point and you can follow along in your code editor. For a complete, step-by-step guide in terms setting up a React
project or instructions on creating specific files, see our [React Chat tutorial](https://getstream.io/chat/react-chat/tutorial/).

## Your First App with Stream Chat React
## Installation

We recommended using the component library through a package manager. Stream Chat React is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).

### Install with NPM

```bash
npm install stream-chat stream-chat-react
```

### Install with Yarn

```bash
yarn add stream-chat stream-chat-react
```

### Install via CDN

Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
[Installation](./installation.mdx) section.
In case you are not using a package manager, or you wish to build a simple proof of concept in CodePen for example, you can load the library through a direct script link.
If you choose to do this, make sure you explicitly specify the version of the library to prevent breaking releases from affecting your app.

```html
<!-- Replace VERSION with the version of stream-chat and stream-chat-react -->
<script src="https://cdn.jsdelivr.net/npm/stream-chat@VERSION"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@VERSION"></script>
```

With the installation out of the way, let's get started exploring the basics of the library.

## Your First App with Stream Chat React

The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx)
and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their
The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core/chat.mdx)
and [`Channel`](../components/core/channel.mdx) components are React context providers that pass a variety of values to their
children, including UI components, stateful data, and action handler functions.

```jsx
Expand Down Expand Up @@ -109,7 +135,7 @@ a fully functioning chat application.

### Chat

The [`Chat`](../components/core-components/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../components/contexts/chat-context.mdx)
The [`Chat`](../components/core/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../contexts/chat-context.mdx)
to its children, which includes the `StreamChat` client instance. All other components within the library must be nested as children
of `Chat` to maintain proper functionality.

Expand All @@ -121,22 +147,22 @@ const { client } = useChatContext();

### Channel

The [`Channel`](../components/core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
The [`Channel`](../components/core/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
It provides five separate contexts to its children:

:::caution
`EmojiContext` has been removed in version `11.0.0`, see related release guides ([Introducing new reactions](../release-guides/upgrade-to-v11.mdx#introducing-new-reactions), [Dropping support for built-in `EmojiPicker`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and [Dropping support for built-in `EmojiIndex`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex)) to adjust your integration to this new change.
:::

- [`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
- [`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
- [`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
- [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
- [`ChannelStateContext`](../contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
- [`ChannelActionContext`](../contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
- [`ComponentContext`](../contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
- [`EmojiContext`](../contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
- [`TypingContext`](../contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)

### ChannelList

The [`ChannelList`](../components/core-components/channel-list.mdx) component renders a list of channels and provides a preview for each. Though the `ChannelList` is essential in many chat apps,
The [`ChannelList`](../components/core/channel-list.mdx) component renders a list of channels and provides a preview for each. Though the `ChannelList` is essential in many chat apps,
it isn't a required piece of the library. If a `ChannelList` component is used, a channel object should not be placed as a prop on the `Channel`
component, as the `ChannelList` handles channel setting internally.

Expand All @@ -158,23 +184,23 @@ const App = () => (

### Window

The [`Window`](../components/utility-components/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`.
The [`Window`](../components/utility/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`.

### ChannelHeader

The [`ChannelHeader`](../components/utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
The [`ChannelHeader`](../components/utility/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.

### MessageList

The [`MessageList`](../components/core-components/message-list.mdx) component renders a list of messages and consumes the various contexts setup from `Channel`. This component accepts a wide variety of optional props for customization needs.
The [`MessageList`](../components/core/message-list.mdx) component renders a list of messages and consumes the various contexts setup from `Channel`. This component accepts a wide variety of optional props for customization needs.

### MessageInput

The [`MessageInput`](../components/message-input-components/message-input.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the [`MessageInputContext`](../components/contexts/message-input-context.mdx) to its children.
The [`MessageInput`](../components/ui/message-input-components/message-input.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the [`MessageInputContext`](../contexts/message-input-context.mdx) to its children.

### Thread

The [`Thread`](../components/core-components/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components.
The [`Thread`](../components/core/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components.

### Emojis (picker & autocomplete)

Expand All @@ -189,7 +215,7 @@ Make sure to read ["Dropping support for built-in `EmojiPicker`"](../release-gui
In addition to the above referenced UI components, client instantiation, and user connection, you need little other code to get a fully functioning chat application up and running. See below for an example of the complete code.

:::note
Remember our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
Remember our [Theming](../theming/overview.mdx) and [Customizing Components](../customization-guides/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK.
:::

```tsx
Expand Down
35 changes: 3 additions & 32 deletions ...saurus/docs/React/basics/installation.mdx → docusaurus/docs/React/basics/overview.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
id: installation
id: overview
sidebar_position: 1
slug: /
title: Overview
Expand All @@ -22,10 +22,10 @@ Use cases include team and social messaging, virtual events, livestream gaming,

If you are new to our SDK it is best to go through a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/).

After that, our [getting started page](./getting-started.mdx) is a great next step.
After that, our [getting started page](./integration.mdx) is a great next step.

:::tip
If you are integrating our SDK, please pay attention to our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
If you are integrating our SDK, please pay attention to our [Theming](../theming/v1/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs.
:::

## Architecture
Expand All @@ -34,32 +34,3 @@ A common pattern in the library is the use of context provider hooks (see [Conte
This makes customization straightforward, as you can use our exported hooks in your custom components to receive the exact values needed, while also subscribing to context changes.

The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project.

## Installation

We recommended using the component library through a package manager. Stream Chat React is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).

### Install with NPM

```bash
npm install stream-chat stream-chat-react
```

### Install with Yarn

```bash
yarn add stream-chat stream-chat-react
```

### Install via CDN

In case you are not using a package manager, or you wish to build a simple proof of concept in CodePen for example, you can load the library through a direct script link.
If you choose to do this, make sure you explicitly specify the version of the library to prevent breaking releases from affecting your app.

```html
<!-- Replace VERSION with the version of stream-chat and stream-chat-react -->
<script src="https://cdn.jsdelivr.net/npm/stream-chat@VERSION"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@VERSION"></script>
```

With the installation out of the way, let's get started exploring the basics of the library.
2 changes: 1 addition & 1 deletion docusaurus/docs/React/components/_category_.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "Components",
"position": 4
"position": 2
}
4 changes: 0 additions & 4 deletions docusaurus/docs/React/components/core-components/_category_.json
View file

This file was deleted.

4 changes: 4 additions & 0 deletions docusaurus/docs/React/components/core/_category_.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "Core",
"position": 1
}
6 changes: 3 additions & 3 deletions ...mponents/core-components/channel-list.mdx → ...cs/React/components/core/channel-list.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ re-setting the list state, you can customize behavior and UI.
| `channel.truncated` | Updates the channel | [onChannelTruncated](#onchanneltruncated) |
| `channel.updated` | Updates the channel | [onChannelUpdated](#onchannelupdated) |
| `channel.visible` | Adds channel to list | [onChannelVisible](#onchannelvisible) |
| `connection.recovered` | Forces a component render | N/A |
| `connection.recovered` | Forces a component render | N/A |
| `message.new` | Moves channel to top of list | [onMessageNewHandler](#onmessagenewhandler) |
| `notification.added_to_channel` | Moves channel to top of list and starts watching | [onAddedToChannel](#onaddedtochannel) |
| `notification.message_new` | Moves channel to top of list and starts watching | [onMessageNew](#onmessagenew) |
Expand Down Expand Up @@ -329,7 +329,7 @@ Function to override the default behavior when a message is received on a channe
Function to override the default behavior when a message is received on a channel being watched. Handles `message.new` event.

| Type |
|-------------------------------------------------------------------------------------------------------------------------------------|
| ----------------------------------------------------------------------------------------------------------------------------------- |
| `(setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>, event: Event<StreamChatGenerics>) => void` |

### onRemovedFromChannel
Expand Down Expand Up @@ -395,7 +395,7 @@ const App = () => (
```

| Type | Default |
|--------|---------|
| ------ | ------- |
| number | 5000 |

### renderChannels
Expand Down
26 changes: 13 additions & 13 deletions ...ct/components/core-components/channel.mdx → ...us/docs/React/components/core/channel.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ 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:

- [`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`](../../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`)

:::note
The `Channel` component renders an individual `channel` object. For detailed information regarding `channel` objects and their
Expand Down Expand Up @@ -62,7 +62,7 @@ const { typing } = useTypingContext();

## Registering custom components

In case you would like to customize parts of your chat application, you can do that by passing custom components to `Channel` component props. All the title-cased props are reserved for the custom components overriding the SDK defaults. The list of all customizable components - the component context - can be found in the [`ComponentContext` documentation](../contexts/component-context.mdx).
In case you would like to customize parts of your chat application, you can do that by passing custom components to `Channel` component props. All the title-cased props are reserved for the custom components overriding the SDK defaults. The list of all customizable components - the component context - can be found in the [`ComponentContext` documentation](../../contexts/component-context.mdx).

**Example of registering custom Avatar component**

Expand Down Expand Up @@ -364,19 +364,19 @@ Custom UI component to be displayed when the `MessageList` or `VirtualizedMessag
### enrichURLForPreview

A global flag to toggle the URL enrichment and link previews in `MessageInput`. The feature is disabled by default. It can be overridden on `Thread` and `MessageList` level through `additionalMessageInputProps`
or directly on `MessageInput` level through `urlEnrichmentConfig` prop. See the guide [Link Previews in Message Input](../../../guides/customization/link-previews) for more.
or directly on `MessageInput` level through `urlEnrichmentConfig` prop. See the guide [Link Previews in Message Input](../../customization-guides/message-input/link-preview.mdx) for more.

| Type | Default |
| ------- | ------- |
| boolean | false |

### enrichURLForPreviewConfig:
### enrichURLForPreviewConfig

Global configuration for link preview generation in all the MessageInput components. See the guide [Link Previews in Message Input](../../../guides/customization/link-previews) for more.
Global configuration for link preview generation in all the MessageInput components. See the guide [Link Previews in Message Input](../../customization-guides/message-input/link-preview.mdx) for more.

| Type |
| ------------------------------------------------- |
| Omit<URLEnrichmentConfig, 'enrichURLForPreview'\> |
| Type |
| -------------------------------------------------- |
| Omit\<URLEnrichmentConfig, 'enrichURLForPreview'\> |

### FileUploadIcon

Expand Down Expand Up @@ -703,7 +703,7 @@ Custom UI component to display the header of a `Thread`.

### ThreadInput

Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version 1](../../theming/v1/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/v2/introduction.mdx) will use `MessageInputFlat` by default.

| Type | Default |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down
Loading

0 comments on commit f770382

Please sign in to comment.