Merge pull request #78 from GetStream/staging

feat[WD-618]: Video Docs updates

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged

.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+build
+coverage
+.docusaurus

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "avoid",
+  "semi": false,
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@(.*)$", "^[./]"],
+  "importOrderCaseInsensitive": true,
+  "importOrderParserPlugins": ["jsx", "typescript"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

README.md

@@ -82,23 +82,23 @@ For example for React Native, there is a file at `/docusaurus/reactnative-docusa
 module.exports = {
   plugins: [
     [
-      '@docusaurus/plugin-content-docs',
+      "@docusaurus/plugin-content-docs",
       {
-        lastVersion: '3.x.x',
+        lastVersion: "3.x.x",
         versions: {
           current: {
-            label: '4.0.0',
-            banner: 'unreleased',
-            path: '4.0.0',
+            label: "4.0.0",
+            banner: "unreleased",
+            path: "4.0.0",
           },
-          '3.x.x': {
-            label: '3.x.x',
+          "3.x.x": {
+            label: "3.x.x",
           },
         },
       },
     ],
   ],
-};
+}
 ```
 
 ## Sidebars
@@ -117,7 +117,7 @@ To share content between multiple SDKs, put markdown files in the `shared` direc
 Then, import and render the shared content using mdx:
 
 ```mdx
-import SharedContent from '../../../shared/_example-shared-content.md';
+import SharedContent from "../../../shared/_example-shared-content.md"
 
 <SharedContent />
 ```
@@ -171,13 +171,13 @@ To make use of the `<ImageShowcase />` component, remember to add the correct im
 Example of how to use it:
 
 ```jsx
-import ImageShowcase from '@site/src/components/ImageShowcase';
+import ImageShowcase from "@site/src/components/ImageShowcase"
 
-import channelList from '../assets/channel_list.png';
-import messageInput from '../assets/message_input.png';
-import messageList from '../assets/message_list.png';
+import channelList from "../assets/channel_list.png"
+import messageInput from "../assets/message_input.png"
+import messageList from "../assets/message_list.png"
 
-<ImageShowcase
+;<ImageShowcase
   items={[
     {
       image: channelList,
@@ -186,12 +186,12 @@ import messageList from '../assets/message_list.png';
           <code>ChannelList</code> can be used with no props
         </span>
       ),
-      alt: 'Example of how to use channelList component',
+      alt: "Example of how to use channelList component",
     },
-    { image: messageInput, caption: 'Message input design' },
-    { image: messageList, caption: 'Message list sample' },
+    { image: messageInput, caption: "Message input design" },
+    { image: messageList, caption: "Message list sample" },
   ]}
-/>;
+/>
 ```
 
 ![Example ImageShowcase desktop](./assets/images/Example_showcase.png)
@@ -205,12 +205,12 @@ You can also add border to the images using the boolean prop `border` like the f
     {
       image: image1,
       caption: <span>Images with border 🙂</span>,
-      alt: 'Example of custom message',
+      alt: "Example of custom message",
     },
     {
       image: image2,
       caption: <span>Another one!</span>,
-      alt: 'Example of custom message part 2',
+      alt: "Example of custom message part 2",
     },
   ]}
 />

babel.config.js

@@ -1,4 +1,4 @@
 /* eslint-disable no-undef */
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+}

constants.js

@@ -1,51 +1,54 @@
 const folderMapping = {
-  android: 'Android',
-  flutter: 'Flutter',
-  ios: 'iOS',
-  react: 'React',
-  reactnative: 'React Native',
-  angular: 'Angular',
-  api: 'API',
-};
+  android: "Android",
+  flutter: "Flutter",
+  ios: "iOS",
+  react: "React",
+  reactnative: "React Native",
+  angular: "Angular",
+  api: "API",
+}
 
 const platformMapping = {
-  android: 'android',
-  flutter: 'flutter-dart',
-  ios: 'ios-swift',
-  react: 'react',
-  reactnative: 'react-native',
-  angular: 'angular',
-  api: 'api',
-};
+  android: "android",
+  flutter: "flutter-dart",
+  ios: "ios-swift",
+  react: "react",
+  reactnative: "react-native",
+  angular: "angular",
+  api: "api",
+}
 
 const languageMapping = {
-  android: 'kotlin',
-  flutter: 'dart',
-  ios: 'swift',
-  react: 'javascript',
-  reactnative: 'javascript',
-  angular: 'javascript',
-  api: 'javascript',
-};
+  android: "kotlin",
+  flutter: "dart",
+  ios: "swift",
+  react: "javascript",
+  reactnative: "javascript",
+  angular: "javascript",
+  api: "javascript",
+}
 
-const PRODUCT = process.env.PRODUCT;
+const PRODUCT = process.env.PRODUCT
 let DOCUSAURUS_INDEX =
-  process.env.DEPLOYMENT_ENV === 'production'
-    ? `DOCUSAURUS${PRODUCT === 'video' ? '_VIDEO' : ''}`
-    : `DOCUSAURUS${PRODUCT === 'video' ? '_VIDEO' : ''}_STG`;
-const CMS_INDEX = 'DOCS';
+  process.env.DEPLOYMENT_ENV === "production"
+    ? `DOCUSAURUS${PRODUCT === "video" ? "_VIDEO" : ""}`
+    : `DOCUSAURUS${PRODUCT === "video" ? "_VIDEO" : ""}_STG`
+const CMS_INDEX = "DOCS"
 
-const IGNORED_DIRECTORIES = ['common-content'];
+const IGNORED_DIRECTORIES = ["common-content"]
 
 const SDK_ORDER = [
-  'react',
-  'ios',
-  'android',
-  'reactnative',
-  'flutter',
-  'angular',
-  'api',
-];
+  "react",
+  "ios",
+  "android",
+  "reactnative",
+  "flutter",
+  "angular",
+  "api",
+]
+
+const ignoredVideoSDKsStaging = ["angular"]
+const ignoredVideoSDKsProduction = ["angular", "reactnative"]
 
 module.exports = {
   IGNORED_DIRECTORIES,
@@ -55,4 +58,6 @@ module.exports = {
   platformMapping,
   languageMapping,
   SDK_ORDER,
-};
+  ignoredVideoSDKsStaging,
+  ignoredVideoSDKsProduction,
+}