Chore: Markdown formatting while running lint command

.github/workflows/check-pr.yml

@@ -22,6 +22,6 @@ jobs:
         # for the sdk package
         run: yarn --frozen-lockfile && yarn bootstrap-ci
       - name: Lint
-        run: yarn lint
+        run: yarn lerna-workspaces run lint && cd docusaurus && npx prettier --check '**/*.mdx'
       - name: Test
         run: yarn test:unit

.github/workflows/next-release.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Installation && Build SDK
         run: yarn --frozen-lockfile && yarn bootstrap-ci
       - name: Lint
-        run: yarn lerna-workspaces run lint
+        run: yarn lerna-workspaces run lint && (cd docusaurus; npx prettier --check '**/*.mdx')
       - name: Publish Next Release
         run: GITHUB_SHORT_SHA="$(git rev-parse --short $GITHUB_SHA)" yarn release-next
         env:

.github/workflows/release.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Installation && Build SDK
         run: yarn --frozen-lockfile && yarn bootstrap-ci
       - name: Lint
-        run: yarn lerna-workspaces run lint
+        run: yarn lerna-workspaces run lint && cd docusaurus && npx prettier --check '**/*.mdx'
       - name: Publish Release
         run: yarn release
         env:

docusaurus/docs/reactnative/additional-resources/libraries.mdx

@@ -6,7 +6,7 @@ title: Libraries
 
 ### [React Navigation Docs](https://reactnavigation.org/docs/getting-started/)
 
-Our tutorials, guides and sample apps are all using React Navigation. We recommend using it in 
+Our tutorials, guides and sample apps are all using React Navigation. We recommend using it in
 order to provide better support for all the use cases displayed.
 
 ### [Gesture Handler Docs](https://docs.swmansion.com/react-native-gesture-handler/docs/)
@@ -20,7 +20,7 @@ React Native Markdown Package is used to render markdown on our messages.
 
 ### [Reanimated Lib Docs](https://docs.swmansion.com/react-native-reanimated/docs)
 
-React Native Reanimated is used to create our own beautiful custom animations in our gallery, attachment picker, 
+React Native Reanimated is used to create our own beautiful custom animations in our gallery, attachment picker,
 message actions/reactions and loading indicators/skeletons.
 
 ### [Day.js Docs](https://day.js.org/docs/en/installation/installation)

docusaurus/docs/reactnative/additional-resources/stream.mdx

@@ -12,11 +12,11 @@ In addition we have "cloned" some popular UIs to help demonstrate the flexibilit
 ### [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript)
 
 Stream Chat for React Native uses the Stream Chat JS client under the hood for most interactions with the backend.
-The client documentation covers a wide range of interactions that can be performed, not all of these are used within 
+The client documentation covers a wide range of interactions that can be performed, not all of these are used within
 the Stream Chat for React Native SDK but can be integrated within your own app as required.
 
 ### [API Tutorial](https://getstream.io/chat/get_started/)
 
 To help you get acquainted with the Stream Chat JS client we have an easy to follow tutorial on our website.
-This is a great primer for using the client directly and can also help you understand how the Stream Chat for 
-React Native SDK if functioning under the hood.
+This is a great primer for using the client directly and can also help you understand how the Stream Chat for
+React Native SDK if functioning under the hood.

docusaurus/docs/reactnative/additional-resources/technologies_and_techniques.mdx

@@ -11,11 +11,11 @@ still have decent typing support.
 
 ### [React Context](https://reactjs.org/docs/context.html)
 
-We rely on multiple contexts in our SDK to access components, functions, and data. 
-Context also allows you as a developer to override our defaults for many of these throughout the SDK. 
+We rely on multiple contexts in our SDK to access components, functions, and data.
+Context also allows you as a developer to override our defaults for many of these throughout the SDK.
 Understanding how to draw upon values in context is important to customizing the SDK for your own needs.
 
 ### [React Hooks](https://reactjs.org/docs/hooks-intro.html)
 
-We use/expose a bunch of our component's hooks so users can use them in order to replicate some behaviour/data 
-parsing when creating custom components. Understanding how to work with hooks can come in very handy.
+We use/expose a bunch of our component's hooks so users can use them in order to replicate some behaviour/data
+parsing when creating custom components. Understanding how to work with hooks can come in very handy.

docusaurus/docs/reactnative/basics/client.mdx

@@ -21,29 +21,34 @@ The Stream Chat client, `StreamChat` is a dependency of `stream-chat-react-nativ
 To create a client instance you can call `getInstance` on the client and provide and api key.
 
 ```ts
-import { StreamChat } from 'stream-chat'; 
+import { StreamChat } from 'stream-chat';
 
 const client = StreamChat.getInstance('api_key');
 ```
 
 :::caution
 
 **Usage of `StreamChat.getInstance()` available since stream-chat@2.12.0.**
+
+<br />
+This new Singleton pattern allows you to instantiate a unique StreamChat client, i.e create a StreamChat instance and retrieve
+it wherever you need it on your app to perform API calls. After calling it once, any following <code>
+  getInstance
+</code> call will return the initial StreamChat instance. This will prevent you from accidentally creating multiple StreamChat
+instances, opening multiple WebSockets, and driving up your concurrent connections unnecessarily.
+<br />
 <br />
-This new Singleton pattern allows you to instantiate a unique StreamChat client, i.e create a StreamChat instance and retrieve it wherever you need it on your app to perform API calls.
-After calling it once, any following <code>getInstance</code> call will return the initial StreamChat instance.
-This will prevent you from accidentally creating multiple StreamChat instances, opening multiple WebSockets, and driving up your concurrent connections unnecessarily.
-<br /><br />
 
 Stream Chat is backward compatible. Users can continue using <code>new StreamChat()</code> if desired.
+
 <br />
 
 ```ts
 const client = new StreamChat('api_key');
 ```
 
 Calling <code>new StreamChat()</code> repeatedly will create new copies of the client and in turn new WebSocket connections when <code>connectUser</code> is called.
-If you are using <code>new StreamChat()</code> you need to be vigilant about your use to ensure you are not creating multiple WebSocket connections unnecessarily. 
+If you are using <code>new StreamChat()</code> you need to be vigilant about your use to ensure you are not creating multiple WebSocket connections unnecessarily.
 
 :::
 
@@ -53,13 +58,13 @@ To connect a user a the `connectUser` function should be called and provided wit
 The `user_token` is typically sent from your back end when a user is authenticated.
 
 ```ts
-await client.connectUser( 
-    { 
-        id: 'testUser', 
-        name: 'Test User', 
-    }, 
-    'user_token',
-); 
+await client.connectUser(
+  {
+    id: 'testUser',
+    name: 'Test User',
+  },
+  'user_token',
+);
 ```
 
 It is recommended to not repeatedly call `connectUser` unnecessarily, multiple calls to `connectUser` will result in warnings, and attempting to call `connectUser` before disconnecting a current user will throw an Error.
@@ -70,18 +75,15 @@ The Stream Chat for React Native UI components handle most interactions with the
 
 ### Providing the Client to the UI
 
-To provide the the client to the UI components you simply provide the client instance as the prop `client` to the `Chat` component. 
+To provide the the client to the UI components you simply provide the client instance as the prop `client` to the `Chat` component.
 
 ```tsx
-import { StreamChat } from 'stream-chat'; 
+import { StreamChat } from 'stream-chat';
 import { Chat } from 'stream-chat-react-native';
 
 const client = StreamChat.getInstance('api_key');
 
-export const Screen = () =>
-  <Chat client={client}>
-    {/** App components */}
-  </Chat>
+export const Screen = () => <Chat client={client}>{/** App components */}</Chat>;
 ```
 
 The Stream Chat for React Native UI components then handle interacting with the client internally by accessing the client via [`context`](https://reactjs.org/docs/context.html).
@@ -90,6 +92,7 @@ The Stream Chat for React Native UI components then handle interacting with the
 
 If you are customizing certain components or functionality you may have to interact with the client as well.
 You can access the client provided to the `Chat` component internally via the `useChatContext`.
+
 <br />
 
 ```ts
@@ -159,27 +162,27 @@ You can't add or remove members from channel created using a list of members.
 >
 <TabItem value='channelId'>
 
-  ```ts
-  /**
-   *  Channel created using a channel id
-   */
-  const channel = client.channel(channel_type, 'channel_id', { 
-      name: 'My New Channel', 
-  });
-  ```
+```ts
+/**
+ *  Channel created using a channel id
+ */
+const channel = client.channel(channel_type, 'channel_id', {
+  name: 'My New Channel',
+});
+```
 
 </TabItem>
 <TabItem value='members'>
 
-  ```ts
-  /**
-   *  Channel created using a members list
-   */
-  const channel = client.channel(channel_type, {
-      members: ['userOne', 'userTwo']
-      name: 'My New Channel',
-  });
-  ```
+```ts
+/**
+ *  Channel created using a members list
+ */
+const channel = client.channel(channel_type, {
+    members: ['userOne', 'userTwo']
+    name: 'My New Channel',
+});
+```
 
 </TabItem>
 </Tabs>
@@ -196,16 +199,16 @@ To create a channel on the server you must call `create` or `watch` on a new cha
 >
 <TabItem value='watch'>
 
-  ```ts
-  await channel.watch();
-  ```
+```ts
+await channel.watch();
+```
 
 </TabItem>
 <TabItem value='create'>
 
-  ```ts
-  await channel.create();
-  ```
+```ts
+await channel.create();
+```
 
 </TabItem>
 </Tabs>

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -29,16 +29,16 @@ Install the required packages in your React Native project.
 >
 <TabItem value='yarn'>
 
-  ```bash
-    yarn add stream-chat-react-native
-  ```
+```bash
+  yarn add stream-chat-react-native
+```
 
 </TabItem>
 <TabItem value='npm'>
 
-  ```bash
-    npm install stream-chat-react-native
-  ```
+```bash
+  npm install stream-chat-react-native
+```
 
 </TabItem>
 </Tabs>
@@ -70,16 +70,16 @@ Most if not all of the required packages now support auto-linking so setup shoul
 >
 <TabItem value='yarn'>
 
-  ```bash
-  yarn add @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
-  ```
+```bash
+yarn add @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+```
 
 </TabItem>
 <TabItem value='npm'>
 
-  ```bash
-  npm install @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
-  ```
+```bash
+npm install @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+```
 
 </TabItem>
 </Tabs>
@@ -91,10 +91,10 @@ For iOS on a Mac install the pods `npx pod-install ios`.
 To be able to use the Stream Chat React Native SDK, a few dependencies must meet the following version requirements:
 
 | react-native | stream-chat-react-native (min required) | react-native-reanimated (min required) |
-| - | - | - |
-| 0.65 |  3.9.0 | 2.2.1 |
-| 0.64 |  3.6.2 | 2.2.0 |
-| 0.63 |  3.0.0 | 2.2.0 |
+| ------------ | --------------------------------------- | -------------------------------------- |
+| 0.65         | 3.9.0                                   | 2.2.1                                  |
+| 0.64         | 3.6.2                                   | 2.2.0                                  |
+| 0.63         | 3.0.0                                   | 2.2.0                                  |
 
 ### Additional Steps
 
@@ -107,6 +107,7 @@ To be able to use the Stream Chat React Native SDK, a few dependencies must meet
 :::info
 
 `react-native-gesture-handler` requires the package to be imported at the **top of the entry file** before anything else, this is usually your `App.js` or `index.js` file.
+
 <br />
 
 ```tsx
@@ -130,8 +131,8 @@ If you are planning to use file picker functionality, make sure you enable iClou
 ### AndroidX Support
 
 > AndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated.
-For 0.60, React Native has been migrated over to AndroidX.
-This is a breaking change, and your native code and dependencies will need to be migrated as well.
+> For 0.60, React Native has been migrated over to AndroidX.
+> This is a breaking change, and your native code and dependencies will need to be migrated as well.
 
 (Reference: <https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support>)