Merge pull request #1037 from GetStream/lazy-load-emoji-mart

Lazy load emoji mart

Author: DanC5

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [6.4.0](https://github.com/GetStream/stream-chat-react/releases/tag/v6.4.0) 2021-07-07
+
+### ⚠️ BREAKING CHANGES ⚠️ - The following values have been moved to the newly created [`EmojiContext`](https://getstream.io/chat/docs/sdk/react/contexts/emoji_context/):
+
+- `Emoji` - moved from `ComponentContext`
+- `emojiConfig` - moved from `ChannelStateContext`
+- `EmojiIndex` - moved from `ComponentContext`
+- `EmojiPicker` - moved from `ComponentContext`
+
+### Feature
+
+- Lazy load the `emoji-mart` dependency [#1037](https://github.com/GetStream/stream-chat-react/pull/1037)
+
+### Chore
+
+- Remove unused CSS [#1035](https://github.com/GetStream/stream-chat-react/pull/1035)
+
 ## [6.3.0](https://github.com/GetStream/stream-chat-react/releases/tag/v6.3.0) 2021-07-02
 
 ### ⚠️ BREAKING CHANGES ⚠️ - We've removed the following deprecated UI components [#1031](https://github.com/GetStream/stream-chat-react/pull/1031):

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

@@ -41,14 +41,6 @@ The configurations object for the currently active channel.
 | ------ |
 | object |
 
-### emojiConfig
-
-The configuration for Emojis.
-
-| Type        |
-| ----------- |
-| EmojiConfig |
-
 ### error
 
 Error object (if any) in loading the `channel`, otherwise null.

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

@@ -14,7 +14,7 @@ The `ComponentContext` also exposes the hook `useComponentContext`.
 Pull values from context with our custom hook:
 
 ```jsx
-const { Attachment, Avatar, EmojiPicker } = useComponentContext();
+const { Attachment, Avatar, Message } = useComponentContext();
 ```
 
 ## Values
@@ -83,14 +83,6 @@ Custom UI component to override default edit message input.
 | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | component | [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) |
 
-### Emoji
-
-Custom UI component to override default `NimbleEmoji` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
-
-| Type      |
-| --------- |
-| component |
-
 ### EmojiIcon
 
 Custom UI component for emoji button in input.
@@ -99,22 +91,6 @@ Custom UI component for emoji button in input.
 | --------- | ------------------------------------------------------------------------------------------------------------------ |
 | component | [EmojiIconSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) |
 
-### EmojiIndex
-
-Custom class constructor to override default `NimbleEmojiIndex` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
-
-| Type        |
-| ----------- |
-| constructor |
-
-### EmojiPicker
-
-Custom UI component to override default `NimblePicker` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
-
-| Type      |
-| --------- |
-| component |
-
 ### EmptyStateIndicator
 
 Custom UI component to be displayed when the `MessageList` is empty.

docusaurus/docs/React/contexts/emoji-context.mdx

@@ -0,0 +1,50 @@
+---
+id: emoji_context
+sidebar_position: 5
+title: EmojiContext
+---
+
+The `EmojiContext` is established by the `Channel` component and exposes the `useEmojiContext` hook. This context holds
+the UI components and stateful data necessary to render emoji selector functionality.
+
+## Basic Usage
+
+Pull values from context with our custom hook:
+
+```jsx
+const { Emoji, emojiConfig } = useEmojiContext();
+```
+
+## Values
+
+### Emoji
+
+Custom UI component to override default `NimbleEmoji` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
+
+| Type      |
+| --------- |
+| component |
+
+### emojiConfig
+
+The configuration data for emojis, including the rendered JSON data set.
+
+| Type        |
+| ----------- |
+| EmojiConfig |
+
+### EmojiIndex
+
+Custom class constructor to override default `NimbleEmojiIndex` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
+
+| Type        |
+| ----------- |
+| constructor |
+
+### EmojiPicker
+
+Custom UI component to override default `NimblePicker` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).
+
+| Type      |
+| --------- |
+| component |

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

@@ -1,6 +1,6 @@
 ---
 id: message_context
-sidebar_position: 5
+sidebar_position: 6
 title: MessageContext
 ---
 

docusaurus/docs/React/contexts/message-input-context.mdx

@@ -1,11 +1,11 @@
 ---
 id: message_input_context
-sidebar_position: 6
+sidebar_position: 7
 title: MessageInputContext
 ---
 
 The `MessageInputContext` is established within the [`MessageInput`](../message-input-components/message-input.mdx) component.
-The value is the combination of the `MessageInputProps`, `MessageInputState` (returned by the `useMessageInputState` hook), and `cooldownTimerState` (returned by the `useCooldownTimer hook`). 
+The value is the combination of the `MessageInputProps`, `MessageInputState` (returned by the `useMessageInputState` hook), and `cooldownTimerState` (returned by the `useCooldownTimer hook`).
 It provides data to the [Input UI](../message-input-components/input-ui.mdx) component and its children. Use the values stored
 within this context to build a custom Input UI component. You can access the context values by calling the `useMessageInputContext`
 custom hook.

docusaurus/docs/React/contexts/translation-context.mdx

@@ -1,6 +1,6 @@
 ---
 id: translation_context
-sidebar_position: 7
+sidebar_position: 8
 title: TranslationContext
 ---
 

docusaurus/docs/React/contexts/typing-context.mdx

@@ -1,6 +1,6 @@
 ---
 id: typing_context
-sidebar_position: 8
+sidebar_position: 9
 title: TypingContext
 ---
 

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

@@ -10,6 +10,7 @@ It provides four 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`)
 
 :::note

docusaurus/docs/React/custom-code-examples/emoji-picker.mdx

@@ -43,13 +43,14 @@ loaded into the component library.
 
 ## Create the Custom Component
 
-To construct our component, we will utilize the `ChannelStateContext` to get our `emojiConfig` data. This config object contains the `emojiData` we need for
-our `data` prop. Using the `onSelectEmoji` method from the `MessageInputContext`, we can add the onClick functionality to our custom picker. This is what our final code will look like:
+To construct our component, we will utilize the `EmojiContext` to get our `emojiConfig` data. This config object contains the `emojiData` we need for the
+`data` prop on the `Emoji` component. Using the `onSelectEmoji` method from the `MessageInputContext`, we can add the onClick functionality to our custom picker.
+
+This is what our final code will look like:
 
 ```tsx
 export const CustomEmojiPicker = () => {
-  const { emojiConfig } = useChannelStateContext();
-  const { Emoji } = useComponentContext();
+  const { Emoji, emojiConfig } = useEmojiContext();
   const { onSelectEmoji } = useMessageInputContext();
 
   const { emojiData } = emojiConfig || {};