Docs/rn (#229)

## Goal
This PR aims to restructure and align our docs with the decided video
docs structure.

## Good to know
This is an initial docs creation and it still lacks a lot of content
that will be written in the future.
Don't be surprised seeing todo's here and there.

.styles/Vocab/Base/accept.txt

@@ -8,3 +8,15 @@ RTCView
 rxjs
 RxJS
 monorepo
+repo
+(?i)todo
+dialogs
+APIs
+SDKs
+grayscale
+registery
+GH
+(?i)livestream
+performant
+follow
+tokenization

packages/react-native-call-starter-kit/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -20,7 +20,7 @@
        android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
 
     <selector>
-        <!-- 
+        <!--
           This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
           The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
           NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'

packages/react-native-dogfood/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -20,7 +20,7 @@
        android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
 
     <selector>
-        <!-- 
+        <!--
           This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
           The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
           NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'

packages/react-native-sdk/.gitignore

@@ -65,4 +65,4 @@ buck-out/
 /vendor/bundle/
 
 # Ignore generated documentation.. it can always be regenerated
-docusaurus/docs/reactnative/reference/**/*.md
+docusaurus/docs/reactnative/reference/**/*.md

packages/react-native-sdk/README.md

@@ -4,12 +4,16 @@
 
 The documentation can be found in `docusaurus` folder.
 
-Start the docusaurus using `stream-chat-docusaurus-cli`,
+### Install stream-chat-docusaurus-cli
+If the CLI tool is not installed, follow the instructions in [stream-chat-docusaurus-cli repo](https://github.com/GetStream/stream-chat-docusaurus-cli#installation-and-using-the-cli)
+
+### Start the docusaurus using `stream-chat-docusaurus-cli`,
 
 ```
 npx stream-chat-docusaurus -s
 ```
 
 ### Generate Docs from source-code
 
-Whenever source code is changed. Run `yarn generate-docs` again. `stream-chat-docusaurus-cli` will pick up the changes and reload the site automatically.
+Whenever source code is changed. Run `yarn generate-docs` again. 
+`stream-chat-docusaurus-cli` will pick up the changes and reload the site automatically.

packages/react-native-sdk/docusaurus/docs/reactnative/tutorial/meeting_tutorial.mdx → packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/01-tutorial.mdx

@@ -1,10 +1,30 @@
 ---
-id: meeting-tutorial
-sidebar_position: 1
-title: Meeting Tutorial
+id: 01-tutorial
+title: Tutorial
 ---
 
-This document explains how to integrate Stream Video to support Meetings in your Application.
+## Introduction
+
+Hi there and welcome to our Stream Video React Native tutorial.
+
+`StreamVideo` is an SDK that facilitates adding calling (audio and video) support to your apps. It's a performant and highly customizable, allowing you to build various types of calling applications and streaming use cases, such as:
+
+* **Messenger-style applications**: These applications implement Chat as a primary source of communication, with Video secondary.
+* **Meeting-style applications**: Such apps focus primarily on Video, with Chat as a way to communicate while in a call. Eg: Zoom, Google Meet, etc.
+* **Audio Rooms**: Our SDK allows you to build audio-only rooms that allow live communication, such as Twitter Spaces.
+* **Livestreaming**: We support one of the most popular modern use cases - streaming audio and video to audiences. You can replicate apps like Twitch or YouTube Live.
+
+This makes the Stream Video SDK the best-in-class choice when integrating Audio and Video communication in your apps. With all that in mind, let's dive into the tutorial.
+
+## Tutorial Contents
+
+:::info
+In the following tutorial we will focus on building a Meeting-style application, such as Zoom, Google Meet, etc.
+
+If your app resembles a Ring-style application, such as Messenger, then please, follow the guide [Chat With Video](../../guides/06-chat-with-video/).
+:::
+
+We will explain how to integrate Stream Video to support Meetings in your Application.
 
 In this tutorial, we are building a video call application using the Stream Video React SDK. We will be implementing a "Meeting Room" scenario, where users can join and leave the call independently, without causing the call to be terminated. The topics we are covering in this tutorial are:
 
@@ -14,8 +34,6 @@ In this tutorial, we are building a video call application using the Stream Vide
 - Leaving an existing call.
 - View Participants info.
 
-If you are looking to build a "Ring Call" scenario, where the call is dropped, once the number of participants is reduced to 1, then please, follow the guide [Tutorial (Call)](./call_tutorial).
-
 To get started with the guide, ensure you have set up your [development environment for React Native](https://reactnative.dev/docs/environment-setup). Stream Chat supports creating applications using Expo and React Native CLI. But Stream Video currently only supports React Native CLI, so we will only focus on React Native CLI in this documentation.
 
 ## Create a new project
@@ -400,3 +418,20 @@ export const CallParticipansInfoScreen = () => {
   return <CallParticipantsInfoView />;
 };
 ```
+
+## Further Integration
+
+Congratulations on completing the Stream Video React Native SDK tutorial. You've learned how to build two very popular use cases - Meeting and Ringing Calls. However, our SDK supports multiple other use cases and more advanced features. If you're looking to integrate more of our supported functionality, we recommend checking out the following guides:
+
+[//]: # (* [guide]&#40;05-advanced/02-push-notification/01-overview.mdx&#41;)
+(../02-guides/04-socket-events.mdx)
+* [Call Lifecycle](../02-guides/02-call-lifecycle.mdx): It's important to understand the lifecycle of our SDK and Calls to properly build complex use cases for your users.
+* [Call Engine](../02-guides/03-call-engine.mdx): If you're looking to utilize our state machine to the fullest, explore what our internal CallEngine does and how to listen to state.
+* [Deep linking](../05-advanced/01-deeplinking.mdx): Deep linking is very useful for Meeting apps where you can simply send a link for the Call that lets people join.
+* [Push Notifications](../05-advanced/02-push-notifications.mdx): Apps where Ring people and invite them to Calls heavily rely on push notifications. Learn how to integrate them with our SDK.
+
+Alternatively, if you're modeling your app based on popular apps, like Messenger, Telegram, Zoom, Google Meet, Twitter Spaces or Twitch, we have several guides and template projects prepared for you:
+
+* [Chat + Video](../02-guides/06-chat-with-video.mdx): Messenger and Telegram like applications feature Chat as a primary source of communication, with Video being secondary. To build a similar app, follow our Chat + Video guide that provides you with a template project to kick start your app, with all the UI and setup pre-baked.
+* [Audio Rooms](../02-guides/07-audio-rooms.mdx): Some apps feature live audio rooms where people gather to discuss ideas and fun topics. Apps like Twitter Spaces are popular and you can build them using our Audio Rooms guide. It also prepares a template project for you that cuts the time you need to start working on your app.
+* [Livestream](../02-guides/08-livestream.mdx): Last, but not least, our Livestream guide teaches you how to build an app where one person streams their tracks to a group of people in real time. By the end of the guide, you'll have a project that prepares most of the setup for you.

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/02-introduction.mdx

@@ -0,0 +1,18 @@
+---
+slug: /
+id: 02-introduction
+title: Introduction
+---
+
+The [Stream Video React Native SDK](https://github.com/GetStream/stream-video-js) enables you to easily build any type of Video and Audio call experiences in your React Native apps.
+
+> **Note**: The fastest way to get started with the SDK is by trying the [React Native Video Tutorial](01-tutorial.mdx). You'll learn everything about setting up the SDK and starting a video call with other people there.
+
+The **Basics** section provides an overview of the SDK, explains the basic concepts, and shows you how to get started with building video features.
+
+The **Reference** section contains information about core our core modules:
+- **Call** section describes the `Call` class, this object represents the active call the user is part of.
+- **StreamVideoClient** section describes the `StreamVideoClient` class, which is the main entry point to the SDK. It provides methods to create and manage calls.
+- **Hooks** section describes the ready-to-use React hooks provided by the React Bindings SDK. This layer severs as sugar syntax on top of the underlying `StreamVideoClient`, `stateStore`, media devices, and `Call` object and provides a more React-like experience.
+- **Components** section describes the ready-to-use React Native components provided by the SDK, we showcase building blocks to help you build your application.
+- **Interfaces** section describes the UI Components props.

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/03-installation.mdx

@@ -0,0 +1,26 @@
+---
+id: 03-installation
+title: Installation
+---
+
+## Dependencies
+
+All Stream JS libraries are available from the NPM Registery.
+
+Before you add Stream dependencies, update your repositories in the `package.json` file to include these following dependencies:
+
+[//]: # (todo: add dependencies)
+
+### Push Notifications
+
+Follow this [guide](05-advanced/02-push-notification/01-overview.mdx)
+
+## Versioning
+
+Our Stream Video JS libraries do **not** follow semantic versioning.
+
+We increase the minor version whenever breaking changes are introduced. Patch releases only contain smaller fixes and improvements.
+
+You can keep track of all the changes in the Stream Video JS libraries via the [GitHub releases page](https://github.com/GetStream/stream-video-js/releases), and you can also find the release notes of all past releases in our CHANGELOG (TODO create one) file. These will always highlight breaking changes.
+
+We also maintain a separate document, DEPRECATIONS (TODO - create), which lists deprecated constructs in the SDK, with their expected time of further deprecations and eventual removal.

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/04-choosing-the-correct-sdk.mdx

@@ -0,0 +1,7 @@
+---
+id: 04-choosing-the-correct-sdk
+title: Choosing The Right SDK
+---
+
+// TODO - using our RN UI components over client js in combination with react bindings packages.
+

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/05-default-call-launchers.mdx

@@ -0,0 +1,24 @@
+---
+id: 05-default-call-launchers
+title: Using Default Call Launchers
+---
+
+When receiving push notifications and socket events, our [Call Engine](../02-guides/03-call-engine.mdx) processes the data and prepares different states for you to consume.
+
+Most commonly, this state can be used to show Incoming and Outgoing call UI. But you can also show persistent notification banners and similar features to your users, to notify them of the call state.
+
+Let's see how to implement them.
+
+[//]: # (TODO: write guide)
+
+This is all you need to fully implement our default behavior, which allows for a quick and easy integration of Video calling in your apps. There are several things that are automatically integrated now:
+
+* When you **receive ringing calls**, you'll show incoming call UI and its actions.
+* When you **create a ringing call**, you'll show outgoing call UI and its actions.
+* Whenever there's a started call state (Incoming, Outgoing, Active), you'll show a persistent notification that allows the call to **work in the background**.
+* If you trigger the notification action, you'll leave/cancel the call.
+
+Feel free to continue exploring our guides for further integration. If you're using our default input from this guide, check out the following:
+
+* [Push notification guide](../05-advanced/02-push-notifications.mdx) - It pairs well with default inputs, because it further automates the notification handling.
+* [Deep linking guide](../05-advanced/01-deeplinking.mdx) - Similar to push notifications, deep linking is another way to immediately start a call from an event, like clicking on a call link.

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/06-configuring-call-defaults.mdx

@@ -0,0 +1,6 @@
+---
+id: 06-configuring-call-defaults.mdx
+title: Configuring Call Defaults
+---
+
+### Stay tuned for more information on this topic!

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/07-ui-customization-options.mdx

@@ -0,0 +1,16 @@
+---
+id: 07-ui-customization-options
+title: UI Customization Options
+---
+
+## UI Customization Options
+
+// TODO - cover ways we can customize
+
+// Theme customization
+
+// Using Screen level Components
+
+// Using Building Blocks and ViewModel
+
+// Using the LLC/ViewModel and building custom UI

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/08-server-side-integrations.mdx

@@ -0,0 +1,6 @@
+---
+id: 08-server-side-integrations
+title: Server Side Integration
+---
+// TODO mention things like GDPR
+// Things like token generation using client SDKs and similar

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/09-release-notes.mdx

@@ -0,0 +1,7 @@
+---
+id: 009-release-notes
+title: Release Notes
+---
+## Release Notes
+
+// TODO - common major release notes, useful for people who don't read GH's changelog

packages/react-native-sdk/docusaurus/docs/reactnative/01-basics/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Basics"
+}

packages/react-native-sdk/docusaurus/docs/reactnative/02-guides/01-authentication.mdx

@@ -0,0 +1,13 @@
+---
+id: 01-authentication
+title: Authenticating Your Users
+---
+
+## Authenticating Your Users
+
+
+// TODO - mention tokenization, server side stuff
+
+// TODO - mention anon users
+
+// TODO - mention real users and their data, extra data and so on

packages/react-native-sdk/docusaurus/docs/reactnative/02-guides/02-call-lifecycle.mdx

@@ -0,0 +1,41 @@
+---
+id: 02-call-lifecycle
+title: Call Lifecycle
+---
+
+When building your app with **Stream Video**, it's important to understand how the **lifecycle** of your app connects to our client and the Calls you join.
+
+There are two main components that you need to initialize at various points in your app lifecycle:
+
+* **StreamVideoClient** - The main client which lets you perform CRUD operations with calls.
+* **Call** - The call object which handles just one specific call when the user joins as a participant.
+
+Based on your app, you should initialize these at the latest possible time, when the users really need them, since they might not have to use any of the clients unless they want to engage in video calls.
+
+As a high-level overview, you can see the timeline of these three lifecycle scopes in the following diagram.
+
+[//]: # (TODO: add relevant arch. chart diagram)
+
+
+Let's see when it's best to initialize and dispose of these clients.
+
+### StreamVideo
+
+The `StreamVideoClient` **requires an authenticated user** to be created and worked with.
+
+If your application has steps where the user doesn't have to be authenticated, like anonymous browsing, exploring the app after installing, but before creating an account, or similar, then we **don't recommend** initializing the `StreamVideo` client right away.
+
+But as soon as your user is authenticated, you can look into creating the client.
+
+Since the instance contains all the operations to access existing calls, as well as create new ones, it's useful to keep it around when your users have access to different call features of your app.
+
+**Some of these include**:
+
+* Browsing a list of calls
+* Creating new calls or inviting people to existing
+* Ringing a group in chat-based applications or features
+* Generating call URLs for invites
+
+Additionally, the instance creates a Web Socket connection that listens to events like `CallCreated`, which you can use to show incoming call UI to your users or trigger custom business logic.
+
+If your app relies on such events at its core, we recommend to initialize it **as soon as your user is authenticated**. Once you do that, make sure to **keep it in a high level component**, like the an application context, or any other state management lib. of your choice.

packages/react-native-sdk/docusaurus/docs/reactnative/02-guides/03-call-engine.mdx

@@ -0,0 +1,6 @@
+---
+id: 03-call-engine
+title: Call Engine
+---
+
+### Stay tuned for more information on this topic!