Merge pull request GetStream#1741 from GetStream/theming-v2

.eslintrc.json

@@ -7,6 +7,7 @@
     "markdown",
     "prettier",
     "react-hooks",
+    "import",
     "sort-destructure-keys"
   ],
   "extends": [
@@ -67,6 +68,14 @@
     "valid-typeof": 2,
     "import/prefer-default-export": 0,
     "import/extensions": [0],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true, // TODO: set to false once React is in the dependencies (not devDependencies)
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
+    ],
     "max-classes-per-file": 0,
     "camelcase": 0,
     "react-hooks/rules-of-hooks": 1,

.github/workflows/docusaurus.yml

@@ -12,8 +12,23 @@ env:
 jobs:
   push_docusaurus:
     runs-on: ubuntu-latest
+    outputs:
+      target-version: $${{steps.target-version.outputs}}
     steps:
-      - uses: actions/checkout@v3
+      - name: Pull stream-chat-react
+        uses: actions/checkout@v3
+      # This part here is cloning a second repository
+      # While cloning the repository:
+      #   - it clones the repo into the given `path`
+      #   - it checks out the branch defined at `ref` (version tag)
+      - name: Pull stream-chat-css
+        uses: actions/checkout@v3
+        with:
+          repository: GetStream/stream-chat-css
+          path: stream-chat-css
+          ref: v${{ node -e 'pkg=require("./package.json"); console.log(pkg.dependencies["@stream-io/stream-chat-css"])' }}
+      - name: Merge docs stream-chat-css
+        run: bash scripts/merge-stream-chat-css-docs.sh stream-chat-css/docs
       - name: Push to stream-chat-docusaurus
         uses: GetStream/push-stream-chat-docusaurus-action@main
         with:

.github/workflows/release.yml

@@ -5,7 +5,6 @@ on:
       - master
       - main
       - beta
-
 jobs:
   release:
     name: Release

.ladle/components.tsx

@@ -1,6 +1,7 @@
 import type { GlobalProvider } from '@ladle/react';
 import React from 'react';
 
+import '@stream-io/stream-chat-css/dist/v2/css/index.css';
 import './styles.css';
 
 // https://ladle.dev/docs/providers

.ladle/styles.css

@@ -1,9 +1,18 @@
 .ladle-main {
   padding: 0 1rem 3rem;
 }
+
+.chat-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
 .str-chat {
   height: 700px !important;
 }
+.str-chat-channel {
+  flex-grow: 1;
+}
 
 .str-chat-channel-list {
   overflow: auto;

commitlint.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {

docusaurus/docs/React/_docusaurus-components/GHComponentLink.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const GHComponentLink = ({text, path}) => {
+  return <a target='_blank' href={`https://github.com/GetStream/stream-chat-react/blob/master/src/components${path}`}>{text}</a>
+}
+
+export default GHComponentLink;

docusaurus/docs/React/contexts/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "React Contexts",
-  "position": 8
+  "position": 9
 }

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

@@ -259,6 +259,14 @@ Custom UI component for send button.
 | --------- | -------------------------------------------------------------------------------------------------------------- |
 | component | [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) |
 
+### ThreadHead
+
+Custom UI component to be displayed at the beginning of a thread. By default it is the thread parent message. It is composed of [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Message.tsx) context provider component and [ThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadStart.tsx) component. The latter can be customized by passing custom component to `Channel` props. The `ThreadHead` component defaults to and accepts the same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx).
+
+| Type      | Default                                                                                                                |
+| --------- | ---------------------------------------------------------------------------------------------------------------------- |
+| component | [ThreadHead](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadHead.tsx) |
+
 ### ThreadHeader
 
 Custom UI component to display the header of a `Thread`.

docusaurus/docs/React/custom-code-examples/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Custom Code Examples",
-  "position": 6
+  "position": 7
 }

docusaurus/docs/React/custom-code-examples/channel-search.mdx

@@ -31,7 +31,7 @@ are drilled to the component via the `additionalChannelSearchProps` prop on `Cha
 Since we've enabled the search to also search for channels, let's customize the dropdown results container to fit a design that separates the result by type.
 
 ```jsx
-const CustomDropdown = (props: DropdownContainerProps) => {
+const CustomDropdown = (props: SearchResultsListProps) => {
   const { results, focusedUser, selectResult, SearchResultItem } = props;
 
   let items: ChannelOrUserResponse[] = results.filter((x) => x.cid);
@@ -67,7 +67,7 @@ const CustomDropdown = (props: DropdownContainerProps) => {
 ```
 
 ```jsx
-const DropDown = (props: DropdownContainerProps) => <CustomDropdown {...props} />;
+const DropDown = (props: SearchResultsListProps) => <CustomDropdown {...props} />;
 const additionalProps = {
   DropdownContainer: DropDown
   searchForChannels: true,
@@ -198,7 +198,7 @@ const additionalProps = {
 ```
 
 ```jsx
-  const CustomDropdown = (props: DropdownContainerProps) => {
+  const CustomDropdown = (props: SearchResultsListProps) => {
     const { results, focusedUser, selectResult, SearchResultItem } = props;
 
     let items: ChannelOrUserResponse[] = results.filter(x => x.cid);
@@ -275,7 +275,7 @@ const additionalProps = {
 ```
 
 ```jsx
-  const DropDown = (props: DropdownContainerProps) => <CustomDropdown {...props} />;
+  const DropDown = (props: SearchResultsListProps) => <CustomDropdown {...props} />;
   const SearchResult = (props: SearchResultItemProps) => <CustomResultItem {...props} />;
 
   const additionalProps = {
@@ -338,4 +338,4 @@ const customSearchFunction = async (props: ChannelSearchFunctionParams, event: {
   showChannelSearch
   additionalChannelSearchProps={{searchFunction: customSearchFunction}}
 />
-```
+```

docusaurus/docs/React/hooks/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Custom Hooks",
-  "position": 9
+  "position": 10
 }

docusaurus/docs/React/hooks/message-hooks.mdx

@@ -12,10 +12,6 @@ The Stream Chat React library provides a variety of useful hooks for use in your
 
 A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useActionHandler.ts) to handler function to handle when an action is sent in a `Channel`.
 
-### useBreakpoint
-
-A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useBreakpoint.ts) that returns an object with the device type (ex: 'mobile' \| 'tablet' \| 'full') and width, for responsive development.
-
 ### useDeleteHandler
 
 A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useDeleteHandler.ts) to handle message deletion.
@@ -101,10 +97,6 @@ const MyCustomMessageComponent = () => {
 };
 ```
 
-### useMobileHandler
-
-A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useMobileHandler.ts) to handle click events for mobile devices, returns an event handler.
-
 ### useMuteHandler
 
 A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/hooks/useMuteHandler.ts) to handle muting users. Returns an event handler that processes user muting.
@@ -117,7 +109,7 @@ const MyCustomMessageComponent = () => {
 
   return (
     <div>
-      {message.text
+      {message.text}
        <button onClick={handleMute}>Mute the user that sent this!</button>
     </div>
   );

docusaurus/docs/React/message-components/reactions.mdx

@@ -195,6 +195,14 @@ If true, adds a CSS class that reverses the horizontal positioning of the select
 
 ## ReactionsList Props
 
+### additionalEmojiProps
+
+Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
+
+| Type   |
+| ------ |
+| object |
+
 ### onClick
 
 Custom on click handler for an individual reaction in the list (overrides the function stored in `MessageContext`).
@@ -203,6 +211,14 @@ Custom on click handler for an individual reaction in the list (overrides the fu
 | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['onReactionListClick']](../contexts/message-context.mdx#onreactionlistclick) |
 
+### own_reactions
+
+An array of the own reaction objects to distinguish own reactions visually (overrides `message.own_reactions` from `MessageContext`).
+
+| Type  |
+| ----- |
+| array |
+
 ### reaction_counts
 
 An object that keeps track of the count of each type of reaction on a message (overrides `message.reaction_counts` from `MessageContext`).
@@ -253,6 +269,14 @@ Function that adds/removes a reaction on a message (overrides the function store
 | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
 | (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) |
 
+### own_reactions
+
+An array of the own reaction objects to distinguish own reactions visually (overrides `message.own_reactions` from `MessageContext`).
+
+| Type  |
+| ----- |
+| array |
+
 ### reaction_counts
 
 An object that keeps track of the count of each type of reaction on a message (overrides `message.reaction_counts` from `MessageContext`).

docusaurus/docs/React/resources/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Resources",
-  "position": 11
+  "position": 12
 }

docusaurus/docs/React/troubleshooting/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Troubleshooting",
-  "position": 10
+  "position": 11
 }

docusaurus/docs/React/utility-components/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Utility Components",
-  "position": 7
+  "position": 8
 }

e2e/edit-message.test.ts

@@ -56,7 +56,7 @@ test.describe('edit text message', () => {
 
     user.sees(Attachment.Card).count(2);
     user.sees(Attachment.Gallery).count(0);
-    user.sees(Attachment.Image).count(1);
+    user.sees(Attachment.Image).count(3);
   });
 
   test('message has only 1 attachment after removing all of the links from the message', async ({

e2e/fixtures.mjs

@@ -16,25 +16,29 @@ dotenv.config({ path: `.env.local` });
     E2E_TEST_USER_2,
   } = process.env;
 
-  async function generateMessages(start, stop, channel, parent_id) {
+  async function generateMessages({start, stop, channel, parent_id, quoteMap = {}}) {
     const count = stop - start;
-    let messageToQuote;
+    const messagesToQuote = {};
     const messageResponses = [];
     for (let i = start; i < stop; i++) {
       if (process.stdout.clearLine && process.stdout.cursorTo) {
         printProgress((i - start) / count);
       }
-
+      const indexString = i.toString();
+      const messageToQuote = messagesToQuote[indexString];
       const res = await channel.sendMessage({
         text: `Message ${i}`,
         user: { id: i % 2 ? E2E_TEST_USER_1 : E2E_TEST_USER_2 },
-        ...(i === start + 140 ? { quoted_message_id: messageToQuote.message.id } : {}),
+        ...(messageToQuote ? { quoted_message_id: messageToQuote.message.id } : {}),
         ...(parent_id ? { parent_id } : {}),
       });
 
-      if (i === start + 20) {
-        messageToQuote = res;
+      if (Object.keys(quoteMap).includes(indexString)) {
+        const quotingMessageText = quoteMap[indexString];
+        messagesToQuote[quotingMessageText] = res;
       }
+
+
       messageResponses.push(res);
     }
     return messageResponses;
@@ -58,7 +62,12 @@ dotenv.config({ path: `.env.local` });
     await channel.create();
     await channel.truncate();
 
-    await generateMessages(0, MESSAGES_COUNT, channel);
+    await generateMessages({
+      channel,
+      quoteMap: {'20': '140'},
+      start: 0,
+      stop: MESSAGES_COUNT
+    });
 
     process.stdout.write('\n');
   }
@@ -74,8 +83,42 @@ dotenv.config({ path: `.env.local` });
     await channel.create();
     await channel.truncate();
 
-    const messages = await generateMessages(0, 150, channel);
-    await generateMessages(150, 300, channel, messages.slice(-1)[0].message.id);
+    const messages = await generateMessages({
+      channel,
+      quoteMap: {'99': '149', '137': '148'},
+      start:0,
+      stop: 150
+    });
+
+    await generateMessages({
+      channel,
+      parent_id:messages.slice(-51)[0].message.id,
+      start: 150,
+      stop: 300,
+    });
+
+    await generateMessages({
+      channel,
+      parent_id:messages.slice(-26)[0].message.id,
+      start: 150,
+      stop: 300,
+    });
+
+    await generateMessages({
+      channel,
+      parent_id:messages.slice(-13)[0].message.id,
+      start: 150,
+      stop: 300,
+    });
+
+    await generateMessages({
+      channel,
+      parent_id:messages.slice(-1)[0].message.id,
+      start: 150,
+      stop: 300,
+    });
+
+
 
     process.stdout.write('\n');
   }