fix: add rtk selector to collaborative stores

Author: ishita1805

src/content/docs/realtime/realtimekit/collaborative-stores/index.mdx

@@ -6,21 +6,49 @@ sidebar:
   order: 7
 ---
 
+import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
+import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
+
 The RealtimeKit Stores API allows you to create multiple key-value pair realtime stores. Users can subscribe to changes in a store and receive real-time updates. Data is stored until a [session](/realtime/realtimekit/concepts/meeting/#session) is active.
 
+<RTKSDKSelector />
+
 ### Create a Store
 
 You can create a realtime store (changes are synced with other users):
 
-| Param     | Type | Description | Required |
-| --------- | --- | --- | --- |
-| `name` | string | Name of the store | true |
+| Param  | Type   | Description       | Required |
+| ------ | ------ | ----------------- | -------- |
+| `name` | string | Name of the store | true     |
 
 To create a store:
 
-```ts
+<RTKCodeSnippet id="web-react">
+
+    ```ts
+
+const stores = useRealtimeKitSelector((m) => m.stores);
+const store = stores.create('myStore');
+
+````
+</RTKCodeSnippet>
+<RTKCodeSnippet id="web-angular">
+
+    ```ts
+
 const store = meeting.stores.create('myStore');
-```
+
+````
+
+</RTKCodeSnippet>
+<RTKCodeSnippet id="web-web-components">
+
+    ```ts
+
+const store = meeting.stores.create('myStore');
+
+````
+</RTKCodeSnippet>
 
 :::note
 This method must be executed for every user.
@@ -30,55 +58,152 @@ This method must be executed for every user.
 
 You can add, update or delete entires in a store:
 
-| Param | Type       | Description                                                 | Required |
-| ----- | ---------- | ----------------------------------------------------------- | -------- |
+| Param   | Type       | Description                                                 | Required |
+| ------- | ---------- | ----------------------------------------------------------- | -------- |
 | `key`   | string     | Unique identifier used to store/update a value in the store | Yes      |
 | `value` | StoreValue | Value that can be stored agains a key                       | Yes      |
 
+<RTKCodeSnippet id="web-react">
 
 ```ts
 type StoreValue = string | number | object | array;
+````
+
+```ts
+const stores = useRealtimeKitSelector((m) => m.stores.stores);
+const store = stores.get("myStore");
+
+await store.set("user", { name: "John Doe" });
+
+await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }
+
+await store.delete("user");
 ```
+
+</RTKCodeSnippet>
+<RTKCodeSnippet id="web-angular">
+
+```ts
+type StoreValue = string | number | object | array;
+```
+
 ```ts
 const { stores } = meeting.stores;
-const store = stores.get('myStore');
+const store = stores.get("myStore");
+
+await store.set("user", { name: "John Doe" });
+
+await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }
+
+await store.delete("user");
+```
+
+</RTKCodeSnippet>
+<RTKCodeSnippet id="web-web-components">
+
+```ts
+type StoreValue = string | number | object | array;
+```
+
+```ts
+const { stores } = meeting.stores;
+const store = stores.get("myStore");
 
-await store.set('user', { name: 'John Doe' });
+await store.set("user", { name: "John Doe" });
 
-await store.update('user', { age: 34 });  // { name: 'John Doe', age: 34 }
+await store.update("user", { age: 34 }); // { name: 'John Doe', age: 34 }
 
-await store.delete('user');
+await store.delete("user");
 ```
 
+</RTKCodeSnippet>
+
 :::note
 The `set` method overwrites the existing value, while the `update` method updates the existing value.
-    
+
 For example, if the stored value is `['a', 'b']` and you call `update` with `['c']`, the final value will be `['a', 'b', 'c']`.
 :::
 
-
 ### Subscribe to a Store
 
 You can attach event listeners on a store's key, which fire when the value changes.
 
+<RTKCodeSnippet id="web-react">
 ```ts
-const { stores } = meeting.stores;
+const stores = useRealtimeKitSelector((m) => m.stores.stores);
 const store = stores.get('myStore');
 store.subscribe('key', (data) => { 
     console.log(data);
 });
 
 // subscribe to all keys of a store
-store.subscribe('*', (data) => { 
+store.subscribe('\*', (data) => {
+console.log(data);
+});
+
+store.unsubscribe('key');
+
+````
+
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+```ts
+const { stores } = meeting.stores;
+const store = stores.get('myStore');
+store.subscribe('key', (data) => {
+    console.log(data);
+});
+
+// subscribe to all keys of a store
+store.subscribe('\*', (data) => {
+console.log(data);
+});
+
+store.unsubscribe('key');
+
+````
+
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+```ts
+const { stores } = meeting.stores;
+const store = stores.get('myStore');
+store.subscribe('key', (data) => { 
     console.log(data);
 });
 
+// subscribe to all keys of a store
+store.subscribe('\*', (data) => {
+console.log(data);
+});
+
 store.unsubscribe('key');
-```
+
+````
+
+</RTKCodeSnippet>
 
 ### Fetch Store Data
 
 You can fetch the data stored in the store:
+
+<RTKCodeSnippet id="web-react">
+```ts
+const stores = useRealtimeKitSelector((m) => m.stores.stores);
+const store = stores.get('myStore');
+
+// fetch value for a specific key
+const data = store.get('key');
+
+// fetch all the data in the store
+const data = store.getAll();
+````
+
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
 ```ts
 const { stores } = meeting.stores;
 const store = stores.get('myStore');
@@ -88,4 +213,22 @@ const data = store.get('key');
 
 // fetch all the data in the store
 const data = store.getAll();
-```
+
+````
+
+</RTKCodeSnippet>
+
+
+<RTKCodeSnippet id="web-web-components">
+```ts
+const { stores } = meeting.stores;
+const store = stores.get('myStore');
+
+// fetch value for a specific key
+const data = store.get('key');
+
+// fetch all the data in the store
+const data = store.getAll();
+````
+
+</RTKCodeSnippet>