Docs/add more docs (#14)

* chore(): update docusaurus and add more docs

* chore(): add more docs, update docusaurus, etc

* chore(): extract design-system docs

* chore(): add more docs and extractions

* chore(): cleanup and fix links

* chore(): fix broken links

* chore(): fix broken links

* chore(): re-trigger cf

* chore(): fix link to release-interface

* chore(): fix links

* chore(): rebuild

* chore(): remove links

* chore(): reconfigure index pages

* chore(): fix links

* chore(): fix links

* chore(): fix links

* chore(): revert changes

* chore(): trigger rebuild

.gitignore

@@ -112,5 +112,11 @@ dist
 *.gz
 
 # generated docs folders
-docs/react-hooks/
-docs/sdk/api-reference/
+docs/react-hooks/hooks
+docs/sdk/api-reference
+docs/event-bus/ui-events
+docs/event-bus/global-events
+docs/design-system/design-system-core
+docs/design-system/design-system-components
+docs/composedb-models/*
+!docs/composedb-models/_category_.json

docs/composedb-models/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "ComposeDB Models",
+  "position": 90
+}

docs/design-system/_category.json → docs/design-system/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Design System",
-  "position": 4
+  "position": 70
 }

docs/design-system/index.md

@@ -7,13 +7,13 @@ sidebar_label: Design System
 AKASHA Core's Design System is a library of UI components built with [Twind](https://twind.dev/), a tailwind-in-js solution. The components implement the visual design language of AKASHA, and can be customised with tailwind style directives through the `customStyle` property.
 
 It is split into two distinct libraries
-- [Core](./core) 
-- [Components](./components)
+- [Core](./design-system-core/)
+- [Components](./design-system-components/)
 
 For a showcase of the components you can visit our [storybook](https://storybook-awf.netlify.app/), and check out the DSCORE and DSCOMPONENTS sections.
 
 To use a component, import it from the corresponding package. For example, to use a Stack, which is defined under `Core`, you import it like so:
 
 ```tsx
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-```
+```

docs/dev-quickstart.md

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 2
-pagination_next: integrations/applications/create-an-app
+pagination_next: extensions/index
 ---
 
 # Development Quickstart
@@ -84,6 +84,9 @@ Follow the comments from the example env file on how to fill in the values.
 ```bash
 $ yarn build:all
 ```
+:::info
+If you encounter errors please refer to the [Troubleshooting](./troubleshooting.md) section of this documentation
+:::
 
 ## Running the application
 
@@ -101,4 +104,5 @@ You will need to accept the certificate in your browser.
 :::
 
 **Congrats!** You're ready to start developing.
-Let's start by [creating a super simple app](/docs/integrations/applications/create-an-app.md).
+
+Before diving into creating simple app, let's learn more about [extensions](/docs/extensions/index.md). Once you're ready, you can start by [building a super simple app](/docs/extension-tutorials/create-an-app.md)

docs/event-bus/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Event Bus",
+  "position": 1000
+}

docs/event-bus/_global_event_bus.md

@@ -0,0 +1,27 @@
+# Global Event Bus
+
+## Usage
+Global event bus is provided by the sdk.
+
+Example usage:
+```ts
+import getSDK from '@akashaorg/awf-sdk';
+import { filter } from 'rxjs';
+import { GlobalEventBusData, WEB3_EVENTS } from '@akashaorg/typings/lib/sdk';
+
+// get the event bus
+const globalChannel = getSDK().api.globalChannel;
+
+// filter the events
+const observable = globalChannel.pipe(filter(data => data.event === WEB3_EVENTS.CHAIN_CHANGED));
+
+// subscribe to data
+const subscription = observable.subscribe((event: GlobalEventBusData<{ chainId: number }>) => {
+  // chaindId = event.data.chainId;
+});
+
+// afterwards, when you are done with the subscription
+// you can also unsubscribe it
+
+// subscription.unsubscribe();
+```

docs/event-bus/_ui_event_bus.md

@@ -0,0 +1,7 @@
+# UI Event Bus
+
+
+## Usage
+Events bus is created by the AppLoader and passed down as a prop to both the registration function and to the root component.
+<!-- this is merged into the main readme so the link here should be absolute  -->
+For more information please see [Event Bus](/docs/event-bus/index.md) section.

docs/event-bus/index.md

@@ -0,0 +1,30 @@
+# Event Bus
+Extensions often need to communicate and react to changes occuring in other extensions. For example, when a user logs in through the
+Authentication App, almost all of other extensions needs to update their state accordingly. Managing such inter-extension communication
+is done using an event bus.
+
+In short, an event bus allows publish/subscribe-style communication between different integrations without being directly dependent to
+each other. Extensions can emit or subscribe to these events independently which reduces inter-extension dependency.
+
+## UIEvents Bus
+
+UI event bus is accessible as props in root component of the integration `(props.uiEvents)`. Currently this event bus is used to trigger UI changes such as showing/hiding the sidebar, mounting/unmounting extension-points, trigger theme change across all integrations, etc. The UI event bus is a `rxjs Subject`.
+
+## GlobalEvent Bus
+
+Global event bus is accessible through the sdk `(sdk.api.globalChannel)`. Almost all calls to the sdk APIs methods will also trigger an event on the global event bus.
+The Global event bus is a `rxjs ReplaySubject`.
+
+
+## Why not using plugin system for inter-app communication?
+Using the plugin system for inter-extension communication is perfectly fine but it comes with some drawbacks when compared to an event bus:
+
+- **Tight Coupling**: direct api calls create a tighter coupling between extensions.
+- **Point-to-point Communication**: Plugins usually facilitate point-to-point communication, which can be less efficient when multiple extensions need to react to the same change.
+- **Increased Complexity**: Updates to a plugin are not automatically reflected in the view so developers still needs to come up with their own synchronization mechanisms.
+- **Static Contracts**: Using plugins for inter-extension communication create static contracts that needs to be maintained, versioned, etc.
+
+
+::::info
+We will merge this 2 event buses in the future.
+::::

docs/extension-publishing/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Extension Publishing",
+  "position": 50
+}

docs/extension-publishing/index.md

@@ -0,0 +1,22 @@
+# Publishing extension
+
+All the extension must be first published to the extensions registry to be discoverable in the Extensions App.
+The following section will guide you through the extension publishing process.
+
+## Enable dev-mode
+
+Enabling dev-mode will allow you to create draft extensions in the Extensions App.
+Draft extensions are not yet published and only available in the browser used to create them (are saved client-side).
+
+:::caution
+This section is a work in progress.
+:::
+
+<!--
+-- first enable dev-mode
+
+-- create app in UI
+... add description ...
+
+-- after creating the app in the UI,
+-- run npm init and set the name exactly the same as in the UI -->

docs/extension-tutorials/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Extensions Tutorials",
+  "position": 40
+}