Skip to content

Commit 9410153

Browse files
committed
feat: remove legacy style components (#2394)
BREAKING CHANGE: stylesheet import path changed & v1 stylesheet has been dropped, see release guide for more information BREAKING CHANGE: theme v1 related markup and classNames have been removed BREAKING CHANGE: `themeVersion` property has been removed from `ChatContext`
1 parent 0a1b6dc commit 9410153

File tree

427 files changed

+23891
-5520
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

427 files changed

+23891
-5520
lines changed

docusaurus/docs/React/basics/overview.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@ Use cases include team and social messaging, virtual events, livestream gaming,
1414
- Text input commands (ex: Giphy and @mentions)
1515
- Image and file uploads
1616
- Video playback
17+
- Audio recording
1718
- Read state and typing indicators
1819
- Channel and message lists
1920

2021
## Where to get started
2122

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

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

@@ -32,4 +33,4 @@ If you are integrating our SDK, please pay attention to our [Theming](../theming
3233
A common pattern in the library is the use of context provider hooks. These custom hooks allow for effective value sharing between parent components and their children.
3334
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.
3435

35-
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.
36+
The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions for adding the library to your React project.

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

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { channel, watchers } = useChannelStateContext();
1818

1919
### acceptedFiles
2020

21-
A list of accepted file upload types.
21+
The value is forwarded to the context from the `Channel` component [prop `acceptedFiles`](../../components/core-components/channel.mdx#acceptedfiles).
2222

2323
| Type |
2424
| -------- |
@@ -48,9 +48,24 @@ The configurations object for the currently active channel.
4848
| ------ |
4949
| object |
5050

51+
### channelUnreadUiState
52+
53+
The read state maintained for use by components representing channel unread state (for example `UnreadMessagesSeparator`, `UnreadMessagesNotification`).
54+
55+
| Property | Type | Description |
56+
| --------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
57+
| **last_read** | `Date` | Date when the channel was marked read the last time. |
58+
| **unread_messages** | `number` | The count of unread messages in a given channel. Unread count refers only to foreign (not own) unread messages. |
59+
| **first_unread_message_id** | `string` or `undefined` | The ID of the message that was marked unread (`notification.mark_unread` event). The value is available only when a message is marked unread. Therefore, cannot be relied on to place unread messages UI. |
60+
| **last_read_message_id** | `string` or `undefined` | The ID of the message preceding the first unread message. |
61+
62+
| Type |
63+
| ---------------------- |
64+
| `ChannelUnreadUiState` |
65+
5166
### dragAndDropWindow
5267

53-
If true, chat users will be able to drag and drop file uploads to the entire channel window.
68+
The value is forwarded to the context from the `Channel` component [prop `dragAndDropWindow`](../../components/core-components/channel.mdx#draganddropwindow).
5469

5570
| Type | Default |
5671
| ------- | ------- |
@@ -66,8 +81,7 @@ Number of milliseconds to debounce firing the URL enrichment queries when typing
6681

6782
### enrichURLForPreview
6883

69-
A global flag to toggle the URL enrichment and link previews in `MessageInput`. By default, the feature is disabled. It can be overridden on Thread and MessageList level through `additionalMessageInputProps`
70-
or directly on `MessageInput` level through `urlEnrichmentConfig` prop.
84+
The value is forwarded to the context from the `Channel` component [prop `enrichURLForPreview`](../../components/core-components/channel.mdx#enrichurlforpreview).
7185

7286
| Type | Default |
7387
| ------- | ------- |
@@ -91,18 +105,18 @@ Custom function to identify URLs in a string for later generation of link previe
91105

92106
### giphyVersion
93107

94-
The giphy version to use when displaying giphies.
108+
The value is forwarded to the context from the `Channel` component [prop `giphyVersion`](../../components/core-components/channel.mdx#giphyversion).
95109

96-
| Type |
97-
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
98-
| `'original'` \| `'fixed_height'` \| `'fixed_height_still'` \| `'fixed_height_downsampled'` \| `'fixed_width'` \| `'fixed_width_still'` \| `'fixed_width_downsampled'` |
110+
| Type | Default |
111+
| ------ | -------------- |
112+
| string | 'fixed_height' |
99113

100114
### imageAttachmentSizeHandler
101115

102-
A custom function to provide size configuration for image attachments
116+
The value is forwarded to the context from the `Channel` component [prop `imageAttachmentSizeHandler`](../../components/core-components/channel.mdx#imageattachmentsizehandler).
103117

104-
| Type |
105-
| ---------------------------------------------------------------- |
118+
| Type |
119+
| ----------------------------------------------------------------- |
106120
| `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |
107121

108122
### hasMore
@@ -145,7 +159,7 @@ Boolean for the `channel` loading more messages.
145159
| ------- |
146160
| boolean |
147161

148-
### loadingMoreNewer?
162+
### loadingMoreNewer
149163

150164
Flag signalling whether newer messages are being loaded as the user scrolls down in the message list. Used internally by `VirtualizedMessageList`.
151165

@@ -155,7 +169,7 @@ Flag signalling whether newer messages are being loaded as the user scrolls down
155169

156170
### maxNumberOfFiles
157171

158-
The maximum number of attachments allowed per `message`, defaults to the Stream Chat API maximum.
172+
The value is forwarded to the context from the `Channel` component [prop `maxNumberOfFiles`](../../components/core-components/channel.mdx#maxnumberoffiles).
159173

160174
| Type | Default |
161175
| ------ | ------- |
@@ -179,7 +193,7 @@ Array of [message objects](https://getstream.io/chat/docs/javascript/message_for
179193

180194
### multipleUploads
181195

182-
Whether to allow multiple attachment uploads on a message.
196+
The value is forwarded to the context from the `Channel` component [prop `multipleUploads`](../../components/core-components/channel.mdx#multipleuploads).
183197

184198
| Type | Default |
185199
| ------- | ------- |
@@ -209,21 +223,6 @@ Custom function to react to link preview dismissal. See the guide [Link Previews
209223
| ------------------------------------ |
210224
| `(linkPreview: LinkPreview) => void` |
211225

212-
### channelUnreadUiState
213-
214-
The read state maintained for use by components representing channel unread state (for example `UnreadMessagesSeparator`, `UnreadMessagesNotification`).
215-
216-
| Property | Type | Description |
217-
|-----------------------------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
218-
| **last_read** | `Date` | Date when the channel was marked read the last time. |
219-
| **unread_messages** | `number` | The count of unread messages in a given channel. Unread count refers only to foreign (not own) unread messages. |
220-
| **first_unread_message_id** | `string` or `undefined` | The ID of the message that was marked unread (`notification.mark_unread` event). The value is available only when a message is marked unread. Therefore, cannot be relied on to place unread messages UI. |
221-
| **last_read_message_id** | `string` or `undefined` | The ID of the message preceding the first unread message. |
222-
223-
| Type |
224-
|-----------------------|
225-
| `ChannelUnreadUiState` |
226-
227226
### pinnedMessages
228227

229228
The messages that are pinned in the `channel`.
@@ -258,7 +257,7 @@ Flag signalling whether the scroll to the bottom is prevented. Used internally b
258257

259258
### shouldGenerateVideoThumbnail
260259

261-
You can turn on/off thumbnail generation for video attachments
260+
The value is forwarded to the context from the `Channel` component [prop `shouldGenerateVideoThumbnail`](../../components/core-components/channel.mdx#shouldgeneratevideothumbnail).
262261

263262
| Type |
264263
| --------- |
@@ -306,7 +305,7 @@ Flag signalling whether the scroll to the bottom is prevented in thread. Used in
306305

307306
### videoAttachmentSizeHandler
308307

309-
A custom function to provide size configuration for video attachments
308+
The value is forwarded to the context from the `Channel` component [prop `videoAttachmentSizeHandler`](../../components/core-components/channel.mdx#videoattachmentsizehandler).
310309

311310
| Type |
312311
| ----------------------------------------------------------------- |

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

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { client, setActiveChannel } = useChatContext();
1818

1919
### client
2020

21-
The `StreamChat` client instance. Any methods from the `stream-chat-js` API interface can be run off this object.
21+
The value is forwarded to the context from the `Chat` component [prop `client`](../../components/core-components/chat.mdx#client).
2222

2323
| Type |
2424
| ------ |
@@ -49,7 +49,7 @@ The `queryInProgress` values are:
4949
- `null` - at least one channels page has been loaded and there is no query in progress at the moment
5050

5151
| Type |
52-
|----------------------|
52+
| -------------------- |
5353
| `ChannelsQueryState` |
5454

5555
### closeMobileNav
@@ -62,8 +62,7 @@ The function to close mobile navigation.
6262

6363
### customClasses
6464

65-
Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
66-
for implementation assistance.
65+
The value is forwarded to the context from the `Chat` component [prop `customClasses`](../../components/core-components/chat.mdx#customclasses)
6766

6867
| Type |
6968
| ------ |
@@ -120,25 +119,15 @@ You can override the default behavior by pulling it from context and then utiliz
120119

121120
### theme
122121

123-
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.
122+
The value is forwarded to the context from the `Chat` component [prop `theme`](../../components/core-components/chat.mdx#theme)
124123

125-
| Type |
126-
| ----- |
127-
| Theme |
128-
129-
### themeVersion
130-
131-
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).
132-
133-
| Type | Default |
134-
| -------------- | ------- |
135-
| `'1'` \| `'2'` | `'1'` |
124+
| Type |
125+
| ------ |
126+
| string |
136127

137128
### useImageFlagEmojisOnWindow
138129

139-
Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead.
140-
Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending
141-
on the platform). Set this prop to true if you want to use these custom emojis for Windows users.
130+
The value is forwarded to the context from the `Chat` component [prop `useImageFlagEmojisOnWindow`](../../components/core-components/chat.mdx#useimageflagemojisonwindow).
142131

143132
| Type | Default |
144133
| ------- | ------- |

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@ Custom UI component to display a attachment previews in `MessageInput`.
3636
| --------- | ---------------------------------------------------------------------------------------------- |
3737
| component | <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx'/> |
3838

39-
### AutocompleteSuggestionHeader
40-
41-
Custom UI component to override the default suggestion header component.
42-
43-
| Type | Default |
44-
| --------- | ------------------------------------------------------------------------ |
45-
| component | <GHComponentLink text='Header' path='/AutoCompleteTextarea/Header.tsx'/> |
46-
4739
### AutocompleteSuggestionItem
4840

4941
Custom UI component to override the default suggestion Item component.
@@ -346,11 +338,11 @@ Custom UI component to display the header of a `Thread`.
346338

347339
### ThreadInput
348340

349-
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.
341+
Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.
350342

351-
| Type | Default |
352-
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
353-
| component | <GHComponentLink text='MessageInputSmall (theme v1)' path='/MessageInput/MessageInputSmall.tsx'/> / <GHComponentLink text='MessageInputFlat (theme v2)' path='/MessageInput/MessageInputFlat.tsx'/> |
343+
| Type | Default |
344+
| --------- | ------------------------------------------------------------------------------------ |
345+
| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |
354346

355347
### ThreadStart
356348

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

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: Channel
66
import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
77

88
The `Channel` component is a React Context provider that wraps all the logic, functionality, and UI for an individual chat channel.
9-
It provides five separate contexts to its children:
9+
It provides four separate contexts to its children:
1010

1111
- [`ChannelStateContext`](../contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
1212
- [`ChannelActionContext`](../contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
@@ -142,14 +142,6 @@ Custom UI component to display an attachment previews in `MessageInput`.
142142
| --------- | ---------------------------------------------------------------------------------------------- |
143143
| component | <GHComponentLink text='AttachmentPreviewList' path='/MessageInput/AttachmentPreviewList.tsx'/> |
144144

145-
### AutocompleteSuggestionHeader
146-
147-
Custom UI component to override the default suggestion header component.
148-
149-
| Type | Default |
150-
| --------- | ------------------------------------------------------------------------ |
151-
| component | <GHComponentLink text='Header' path='/AutoCompleteTextarea/Header.tsx'/> |
152-
153145
### AutocompleteSuggestionItem
154146

155147
Custom UI component to override the default suggestion Item component.
@@ -439,14 +431,6 @@ export const MessageInput = (props: MessageInputProps) => {
439431
| ------- | ------- |
440432
| boolean | true |
441433

442-
### markReadOnMount
443-
444-
Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount.
445-
446-
| Type | Default |
447-
| ------- | ------- |
448-
| boolean | true |
449-
450434
### Input
451435

452436
Custom UI component handling how the message input is rendered.
@@ -479,6 +463,14 @@ Custom UI component to render while the `MessageList` is loading new messages.
479463
| --------- | ------------------------------------------------------------------------------- |
480464
| component | <GHComponentLink text='LoadingIndicator' path='/Loading/LoadingIndicator.tsx'/> |
481465

466+
### markReadOnMount
467+
468+
Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount.
469+
470+
| Type | Default |
471+
| ------- | ------- |
472+
| boolean | true |
473+
482474
### maxNumberOfFiles
483475

484476
The maximum number of attachments allowed per message, defaults to the Stream Chat API maximum.
@@ -691,11 +683,11 @@ Custom UI component to display the header of a `Thread`.
691683

692684
### ThreadInput
693685

694-
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.
686+
Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.
695687

696-
| Type | Default |
697-
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
698-
| component | <GHComponentLink text='MessageInputSmall (theme v1)' path='/MessageInput/MessageInputSmall.tsx'/> / <GHComponentLink text='MessageInputFlat (theme v2)' path='/MessageInput/MessageInputFlat.tsx'/> |
688+
| Type | Default |
689+
| --------- | ------------------------------------------------------------------------------------ |
690+
| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |
699691

700692
### ThreadStart
701693

0 commit comments

Comments
 (0)