Merge pull request #5 from wpdas/staging

update docs

bos.config.json

@@ -3,7 +3,7 @@
   "mainnetAccount": "alem-lib.near",
   "testnetAccount": "alem-lib.testnet",
   "name": "Alem Docs",
-  "description": "Além is a web3 **JavaScript** / **TypeScript** library for building applications for NEAR BOS with a focus on performance and friendly development.",
+  "description": "Além is a web3 **JavaScript** / **TypeScript** library to create web3 apps for Near BOS.",
   "linktree": {
     "website": "github.com/wpdas/alem"
   },

src/Routes.tsx

@@ -19,6 +19,8 @@ import LoadExternalStyles from "./md/api/LoadExternalStyles";
 import Promisify from "./md/api/Promisify";
 import IsDevelopment from "./md/api/IsDevelopment";
 import BosOverview from "./md/BosOverview";
+import RoutesDocs from "./md/router/RoutesDocs";
+import CreateDebounce from "./md/api/CreateDebounce";
 
 const Routes = () => {
   const AboutPageRoute = createRoute(RoutesPath.about.path, AboutPage);
@@ -35,23 +37,21 @@ const Routes = () => {
     createRoute(RoutesPath.deployingWithGithubActions.path, DeployingWithGithubActions),
 
     // Router
-    createRoute(RoutesPath.routes.path, UseRoutes),
-    createRoute(RoutesPath.createRoute.path, CreateRoute),
+    createRoute(RoutesPath.routes.path, RoutesDocs),
+    createRoute(RoutesPath.useRoutes.path, UseRoutes),
     createRoute(RoutesPath.routeLink.path, RouteLinkDocs),
     createRoute(RoutesPath.navigate.path, Navigate),
-    createRoute(RoutesPath.routerProvider.path, RouterProviderDocs),
-    createRoute(RoutesPath.useLocation.path, GetLocation),
+    createRoute(RoutesPath.getLocation.path, GetLocation),
     createRoute(RoutesPath.useParams.path, UseParams),
-    createRoute(RoutesPath.useRoutes.path, () => <p>Use Routes</p>),
 
     // Context
-    createRoute(RoutesPath.createContext.path, CreateContext),
-    createRoute(RoutesPath.useContext.path, UseContext),
+    createRoute(RoutesPath.createAndUseContext.path, CreateContext),
 
     // APIs
     createRoute(RoutesPath.loadExternalStyles.path, LoadExternalStyles),
     createRoute(RoutesPath.promisify.path, Promisify),
     createRoute(RoutesPath.isDevelopment.path, IsDevelopment),
+    createRoute(RoutesPath.createDebounce.path, CreateDebounce),
 
     // BOS API
     createRoute(RoutesPath.bosProps.path, BosOverview),

src/components/MobileNavBar/index.tsx

@@ -65,7 +65,7 @@ const MobileNavBar = () => {
         </div>
 
         <div>
-          <h3>Router</h3>
+          <h3>Routes</h3>
           {routerItems}
         </div>
 
@@ -75,7 +75,7 @@ const MobileNavBar = () => {
         </div>
 
         <div>
-          <h3>APIs</h3>
+          <h3>Utils</h3>
           {apisItems}
         </div>
 

src/components/Sidebar/index.tsx

@@ -40,7 +40,7 @@ const Sidebar = () => {
       </div>
 
       <div>
-        <h3>Router</h3>
+        <h3>Routes</h3>
         {routerItems}
       </div>
 
@@ -50,7 +50,7 @@ const Sidebar = () => {
       </div>
 
       <div>
-        <h3>APIs</h3>
+        <h3>Utils</h3>
         {apisItems}
       </div>
 

src/md/BosOverview.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const BosOverview = () => {
-   const mdContent = Buffer.from(`IyMgTkVBUiBBUElzIGFuZCBDb21wb25lbnRzCgpUaGUgbmF0aXZlIE5FQVIgVk0gKEJPUykgcmVzb3VyY2VzIGNvbnRpbnVlIHRvIGZ1bmN0aW9uLgoKR2V0IHRvIGtub3cgbW9yZSBhYm91dCB0aGUgQk9TIGJ1aWx0IGluIHJlc291cmNlcyBoZXJlOiBbaHR0cHM6Ly9kb2NzLm5lYXIub3JnL2Jvcy9hcGkvc3RhdGVdKGh0dHBzOi8vZG9jcy5uZWFyLm9yZy9ib3MvYXBpL3N0YXRlKQoKYGBgdHN4Ci8vIE5PVEU6IFRoZXNlIGFyZSBqdXN0IHRoZSBCT1MgZmVhdHVyZSByZWZlcmVuY2VzIHR5cGVzCmltcG9ydCB7CiAgRmlsZXMsCiAgSW5maW5pdGVTY3JvbGwsCiAgSXBmc0ltYWdlVXBsb2FkLAogIE1hcmtkb3duLAogIE5lYXIsCiAgT3ZlcmxheVRyaWdnZXIsCiAgU29jaWFsLAogIFN0YXRlLAogIFN0b3JhZ2UsCiAgVG9vbHRpcCwKICBUeXBlQWhlYWQsCiAgVk0sCiAgV2lkZ2V0LAogIGFzeW5jRmV0Y2gsCiAgY2xpcGJvYXJkLAogIGNvbnRleHQsCiAgZmV0Y2gsCiAgcHJvcHMsCiAgc3RhdGUsCiAgdXNlQ2FjaGUsCiAgdXNlRWZmZWN0LAogIHVzZVN0YXRlLAp9IGZyb20gImFsZW0iOwoKZXhwb3J0IGNvbnN0IENvbXBvbmVudEMgPSAoKSA9PiB7CiAgY29uc29sZS5sb2cocHJvcHMpOyAvLyB3aWxsIHByaW50IHRoZSB3aWRnZXQgcHJvcHMKCiAgcmV0dXJuIDxDb21wb25lbnRBIG5hbWU9IldlbmR6IiAvPjsKfTsKYGBgCg==`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyMgTkVBUiBBUElzIGFuZCBDb21wb25lbnRzCgpUaGUgbmF0aXZlIE5FQVIgVk0gKEJPUykgcmVzb3VyY2VzIGNvbnRpbnVlIHRvIGZ1bmN0aW9uLgoKR2V0IHRvIGtub3cgbW9yZSBhYm91dCB0aGUgQk9TIGJ1aWx0IGluIHJlc291cmNlcyBoZXJlOiBbaHR0cHM6Ly9kb2NzLm5lYXIub3JnL2Jvcy9hcGkvc3RhdGVdKGh0dHBzOi8vZG9jcy5uZWFyLm9yZy9ib3MvYXBpL3N0YXRlKQoKYGBgdHN4Ci8vIE5PVEU6IFRoZXNlIGFyZSBqdXN0IHRoZSBCT1MgZmVhdHVyZSByZWZlcmVuY2VzIHR5cGVzCmltcG9ydCB7CiAgRmlsZXMsCiAgSW5maW5pdGVTY3JvbGwsCiAgSXBmc0ltYWdlVXBsb2FkLAogIE1hcmtkb3duLAogIE5lYXIsCiAgT3ZlcmxheVRyaWdnZXIsCiAgU29jaWFsLAogIFN0YXRlLAogIFN0b3JhZ2UsCiAgVG9vbHRpcCwKICBUeXBlQWhlYWQsCiAgVk0sCiAgV2lkZ2V0LAogIGFzeW5jRmV0Y2gsCiAgY2xpcGJvYXJkLAogIGNvbnRleHQsCiAgZmV0Y2gsCiAgcHJvcHMsCiAgc3RhdGUsCiAgdXNlQ2FjaGUsCiAgdXNlRWZmZWN0LAogIHVzZVN0YXRlLAogIHVzZU1lbW8sCiAgQmlnLAp9IGZyb20gImFsZW0iOwoKZXhwb3J0IGNvbnN0IENvbXBvbmVudEMgPSAoKSA9PiB7CiAgY29uc29sZS5sb2cocHJvcHMpOyAvLyB3aWxsIHByaW50IHRoZSB3aWRnZXQgcHJvcHMKCiAgcmV0dXJuIDxDb21wb25lbnRBIG5hbWU9IldlbmR6IiAvPjsKfTsKYGBgCg==`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/FeatureOverview.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const FeatureOverview = () => {
-   const mdContent = Buffer.from(`IyBGZWF0dXJlIE92ZXJ2aWV3CgpBbGVtIGlzIGEgd2ViMyAqKkphdmFTY3JpcHQqKiAvICoqVHlwZVNjcmlwdCoqIGxpYnJhcnkgZm9yIGJ1aWxkaW5nIHVzZXIgaW50ZXJmYWNlcyBmb3IgTkVBUiBCT1MgREFwcHMuCgotICoqRGVjbGFyYXRpdmU6KiogQWxlbSBtYWtlcyBpdCBwYWlubGVzcyB0byBjcmVhdGUgaW50ZXJhY3RpdmUgVUlzLiBEZXNpZ24gc2ltcGxlIHZpZXdzIGZvciBlYWNoIHN0YXRlIGluIHlvdXIgYXBwbGljYXRpb24sIGFuZCBBbGVtIHdpbGwgZWZmaWNpZW50bHkgdXBkYXRlIGFuZCByZW5kZXIganVzdCB0aGUgcmlnaHQgY29tcG9uZW50cyB3aGVuIHlvdXIgZGF0YSBjaGFuZ2VzLiBEZWNsYXJhdGl2ZSB2aWV3cyBtYWtlIHlvdXIgY29kZSBtb3JlIHByZWRpY3RhYmxlLCBzaW1wbGVyIHRvIHVuZGVyc3RhbmQsIGFuZCBlYXNpZXIgdG8gZGVidWcuCi0gKipDb21wb25lbnQtQmFzZWQ6KiogQnVpbGQgZW5jYXBzdWxhdGVkIGNvbXBvbmVudHMgdGhhdCBtYW5hZ2UgdGhlaXIgb3duIHN0YXRlLCB0aGVuIGNvbXBvc2UgdGhlbSB0byBtYWtlIGNvbXBsZXggVUlzLiBTaW5jZSBjb21wb25lbnQgbG9naWMgaXMgd3JpdHRlbiBpbiBKYXZhU2NyaXB0LCB5b3UgY2FuIGVhc2lseSBwYXNzIHJpY2ggZGF0YSB0aHJvdWdoIHlvdXIgYXBwLgotICoqTGVhcm4gT25jZSwgV3JpdGUgQW55d2hlcmU6KiogV2UgZG9uJ3QgbWFrZSBhc3N1bXB0aW9ucyBhYm91dCB0aGUgcmVzdCBvZiB5b3VyIHRlY2hub2xvZ3kgc3RhY2ssIHNvIHlvdSBjYW4gZGV2ZWxvcCBuZXcgZmVhdHVyZXMgaW4gQWxlbSB3aXRob3V0IHJld3JpdGluZyBleGlzdGluZyBjb2RlLgotICoqQ1NTOioqIEFsZW0gc3VwcG9ydHMgLmNzcyBmaWxlcy4gSnVzdCBjcmVhdGUgdGhlbSBhbmQgdGhleSB3aWxsIGFsbCBiZSBpbmNsdWRlZCBpbiB0aGUgYXBwbGljYXRpb24uCi0gKipSb3V0ZXMgU3lzdGVtOioqIEFuIGludGVncmF0ZWQgcm91dGVyIHN5c3RlbSB0aGF0IG1ha2VzIGl0IHBvc3NpYmxlIHRvIG5hdmlnYXRlIGJldHdlZW4gcGFnZXMgZWFzaWx5LgotICoqTXVjaCBtb3JlOioqIFRha2UgYSBsb29rIGF0IHRoZSBvdGhlciBkb2N1bWVudGF0aW9uIGl0ZW1zIHRvIGxlYXJuIGhvdyB0byB1c2UgYWxsIHRoZSBmZWF0dXJlcyBwcm92aWRlZCBieSBBbGVtLgoKQWxlbSBzdXBwb3J0cyBhbGwgdGhlIHRoaW5ncyB0aGF0IEJPUyBzdXBwb3J0cy4KCiMjIENvbXBvbmVudAoKWW91IGNhbiBjcmVhdGUgYW55IGNvbXBvbmVudCBmaWxlIHVzaW5nICoqSmF2YVNjcmlwdCoqIG9yICoqVHlwZVNjcmlwdCoqLiBUaGUgZW50cnlwb2ludCBtdXN0IGJlIGFuIEFwcCBjb21wb25lbnQgbGlrZSBzbzoKCmBgYHRzeApjb25zdCBBcHAgPSAoKSA9PiB7CiAgcmV0dXJuICgKICAgIDw+CiAgICAgIDxoMT5IZWxsbyBXb3JsZDwvaDE+CiAgICA8Lz4KICApOwp9OwoKZXhwb3J0IGRlZmF1bHQgQXBwOwpgYGAKCiMjIENvbXBvbmVudCBQcm9wcwoKUGFzc2luZyBwcm9wZXJ0aWVzIHRvIGEgY29tcG9uZW50IGlzIHZlcnkgc2ltcGxlLiBKdXN0IHVzZSByZWFjdCdzIGRlZmF1bHRzOgoKYGBgdHN4CmV4cG9ydCBjb25zdCBDb21wb25lbnRBID0gKHsgbmFtZSB9OiB7IG5hbWU6IHN0cmluZyB9KSA9PiB7CiAgcmV0dXJuIDxwPntuYW1lfTwvcD47Cn07CgpleHBvcnQgY29uc3QgQ29tcG9uZW50QiA9ICgpID0+IHsKICByZXR1cm4gPENvbXBvbmVudEEgbmFtZT0iV2VuZHoiIC8+Owp9OwpgYGAK`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBGZWF0dXJlIE92ZXJ2aWV3CgpBbGVtIGlzIGEgd2ViMyAqKkphdmFTY3JpcHQqKiAvICoqVHlwZVNjcmlwdCoqIGxpYnJhcnkgdG8gY3JlYXRlIHdlYjMgYXBwcyBmb3IgTmVhciBCT1MuCgojIyBDb21wb25lbnQKCllvdSBjYW4gY3JlYXRlIGFueSBjb21wb25lbnQgZmlsZSB1c2luZyAqKkphdmFTY3JpcHQqKiBvciAqKlR5cGVTY3JpcHQqKi4gVGhlIGVudHJ5cG9pbnQgbXVzdCBiZSBhbiBBcHAgY29tcG9uZW50IGxpa2Ugc286CgpgYGB0c3gKY29uc3QgQXBwID0gKCkgPT4gewogIHJldHVybiAoCiAgICA8PgogICAgICA8aDE+SGVsbG8gV29ybGQ8L2gxPgogICAgPC8+CiAgKTsKfTsKCmV4cG9ydCBkZWZhdWx0IEFwcDsKYGBgCgojIyBDb21wb25lbnQgUHJvcHMKClBhc3NpbmcgcHJvcGVydGllcyB0byBhIGNvbXBvbmVudCBpcyB2ZXJ5IHNpbXBsZS4gSnVzdCB1c2UgcmVhY3QncyBkZWZhdWx0czoKCmBgYHRzeApleHBvcnQgY29uc3QgQ29tcG9uZW50QSA9ICh7IG5hbWUgfTogeyBuYW1lOiBzdHJpbmcgfSkgPT4gewogIHJldHVybiA8cD57bmFtZX08L3A+Owp9OwoKZXhwb3J0IGNvbnN0IENvbXBvbmVudEIgPSAoKSA9PiB7CiAgcmV0dXJuIDxDb21wb25lbnRBIG5hbWU9IldlbmR6IiAvPjsKfTsKCmV4cG9ydCBjb25zdCBDb21wb25lbnRDID0gKGNvbXBvbmVudFByb3BzOiB7IG5hbWU6IHN0cmluZyB9KSA9PiB7CiAgcmV0dXJuIDxwPntjb21wb25lbnRQcm9wcy5uYW1lfTwvcD47Cn07CmBgYAo=`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/api/CreateDebounce.tsx

@@ -0,0 +1,8 @@
+import { Markdown } from 'alem';
+
+const CreateDebounce = () => {
+   const mdContent = Buffer.from(`IyMgQ3JlYXRlIERlYm91bmNlCgpDcmVhdGUgYSBkZWJvdW5jZWQgbWV0aG9kIHRvIG9idGFpbiB0aGUgZGF0YSBhZnRlciB0aGUgZGVzaXJlZCBpbnRlcnZhbC4KCmBgYHRzeAppbXBvcnQgeyBjcmVhdGVEZWJvdW5jZSB9IGZyb20gImFsZW0iOwoKY29uc3QgTXlDb21wb25lbnQgPSAoKSA9PiB7CiAgY29uc3QgW3dvcmRzLCBzZXRXb3Jkc10gPSB1c2VTdGF0ZSgiIik7CiAgY29uc3Qgb25JbnB1dENoYW5nZSA9IGNyZWF0ZURlYm91bmNlKChldmVudCkgPT4gc2V0V29yZHMoZXZlbnQudGFyZ2V0LnZhbHVlKSwgMTAwMCk7CgogIC8vIFRoaXMgd2lsbCBiZSBjaGFuZ2VkIDEgc2VjIGFmdGVyIHRoZSB1c2VyIHN0b3BzIHR5cGluZy4KICBjb25zb2xlLmxvZyh3b3Jkcyk7CiAgcmV0dXJuIDxpbnB1dCBvbkNoYW5nZT17b25JbnB1dENoYW5nZX0gdHlwZT0idGV4dCIgLz47Cn07CmBgYAoKVGhpcyBmZWF0dXJlIGlzIGFsc28gYXZhaWxhYmxlIHNlcGFyYXRlbHkgaGVyZTogKipbY3JlYXRlRGVib3VuY2VdKGh0dHBzOi8vbmVhci5vcmcvbmVhci93aWRnZXQvQ29tcG9uZW50RGV0YWlsc1BhZ2U/c3JjPWFsZW0tbGliLm5lYXIvd2lkZ2V0L2NyZWF0ZURlYm91bmNlKSoqIGFuZCBjYW4gYmUgaW5qZWN0ZWQgbGlrZSB0aGlzOgoKYGBganN4Ci8vIFNvbWVXaWRnZXQKY29uc3QgeyBjcmVhdGVEZWJvdW5jZSB9ID0gVk0ucmVxdWlyZSgiYWxlbS1saWIubmVhci93aWRnZXQvY3JlYXRlRGVib3VuY2UiKTsKaWYgKCFjcmVhdGVEZWJvdW5jZSkgcmV0dXJuICIiOwoKY29uc3QgW3dvcmRzLCBzZXRXb3Jkc10gPSB1c2VTdGF0ZSgiIik7CmNvbnN0IG9uSW5wdXRDaGFuZ2UgPSBjcmVhdGVEZWJvdW5jZSgoZXZlbnQpID0+IHNldFdvcmRzKGV2ZW50LnRhcmdldC52YWx1ZSksIDEwMDApOwoKLy8gVGhpcyB3aWxsIGJlIGNoYW5nZWQgMSBzZWMgYWZ0ZXIgdGhlIHVzZXIgc3RvcHMgdHlwaW5nLgpjb25zb2xlLmxvZyh3b3Jkcyk7CgpyZXR1cm4gPGlucHV0IG9uQ2hhbmdlPXtvbklucHV0Q2hhbmdlfSB0eXBlPSJ0ZXh0IiAvPjsKYGBgCg==`, "base64").toString("utf-8");
+   return <Markdown text={mdContent} />
+}
+
+export default CreateDebounce;

src/md/api/create-debounce.md

@@ -0,0 +1,32 @@
+## Create Debounce
+
+Create a debounced method to obtain the data after the desired interval.
+
+```tsx
+import { createDebounce } from "alem";
+
+const MyComponent = () => {
+  const [words, setWords] = useState("");
+  const onInputChange = createDebounce((event) => setWords(event.target.value), 1000);
+
+  // This will be changed 1 sec after the user stops typing.
+  console.log(words);
+  return <input onChange={onInputChange} type="text" />;
+};
+```
+
+This feature is also available separately here: **[createDebounce](https://near.org/near/widget/ComponentDetailsPage?src=alem-lib.near/widget/createDebounce)** and can be injected like this:
+
+```jsx
+// SomeWidget
+const { createDebounce } = VM.require("alem-lib.near/widget/createDebounce");
+if (!createDebounce) return "";
+
+const [words, setWords] = useState("");
+const onInputChange = createDebounce((event) => setWords(event.target.value), 1000);
+
+// This will be changed 1 sec after the user stops typing.
+console.log(words);
+
+return <input onChange={onInputChange} type="text" />;
+```

src/md/bos-overview.md

@@ -29,6 +29,8 @@ import {
   useCache,
   useEffect,
   useState,
+  useMemo,
+  Big,
 } from "alem";
 
 export const ComponentC = () => {

src/md/context/CreateContext.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const CreateContext = () => {
-   const mdContent = Buffer.from(`IyMgQ3JlYXRlIENvbnRleHQK`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyMgQ3JlYXRlIENvbnRleHQKClNpbWlsYXIgdG8gUmVhY3QncyBDb250ZXh0IEFQSSwgQWzDqW0gYWxzbyBwcm92aWRlcyBhIHdheSB0byBjcmVhdGUgY29udGV4dHMuIENvbnRleHRzIGFyZSB2ZXJ5IGhlbHBmdWwgd2hlbiB5b3Ugd2FudCB0byBjcmVhdGUgYSBzcGVjaWZpYyBkYXRhIHN0cnVjdHVyZSBhbmQgcGFzcyBpdCB0byBjaGlsZCBjb21wb25lbnRzLgoKQnkgbmF0dXJlLCBpdCBpcyBub3QgcG9zc2libGUgdG8gbWFuaXB1bGF0ZSBwcm92aWRlciBvYmplY3RzIGF0IHRoZSBzYW1lIGxheWVyIGluIHdoaWNoIHRoZXkgYXJlIHVzZWQsIHNpbWlsYXIgdG8gUmVhY3QuCgoqKlNpbXBsZSBFeGFtcGxlOioqCgpgYGB0c3gKLy8gVXNlclByb3ZpZGVyLnRzeAoKaW1wb3J0IHsgY3JlYXRlQ29udGV4dCB9IGZyb20gImFsZW0iOwoKLy8gSW50ZXJmYWNlCmludGVyZmFjZSBVc2VyQ29udGV4dFByb3BzIHsKICBpc0F1dGhlbnRpY2F0ZWQ6IGJvb2xlYW47CiAgbmFtZTogc3RyaW5nOwp9Cgpjb25zdCBVc2VyUHJvdmlkZXIgPSAoKSA9PiB7CiAgLy8gQ3JlYXRlIGEgcHJvdmlkZXIgdXNpbmcgYSByZWZlcmVuY2Uga2V5CiAgLy8gc2V0RGVmYXVsdERhdGE6IHVzZWQgdG8gc2V0IGluaXRpYWwgZGF0YQogIC8vIHVwZGF0ZURhdGE6IHVzZWQgdG8gdXBkYXRlIGRhdGEKICBjb25zdCB7IHNldERlZmF1bHREYXRhLCB1cGRhdGVEYXRhIH0gPSBjcmVhdGVDb250ZXh0PFVzZXJDb250ZXh0UHJvcHM+KCJ1c2VyLXByb3ZpZGVyIik7CgogIC8vIEluaXRpYWwgLyBkZWZhdWx0IGRhdGEKICBzZXREZWZhdWx0RGF0YSh7CiAgICBpc0F1dGhlbnRpY2F0ZWQ6ICEhY29udGV4dC5hY2NvdW50SWQsCiAgICBhY2NvdW50SWQ6IGNvbnRleHQuYWNjb3VudElkLAogIH0pOwp9OwpgYGAKClVzaW5nIGNvbnRleHQgd2l0aCBgdXNlQ29udGV4dGA6CgpgYGB0c3gKaW1wb3J0IFVzZXJQcm92aWRlciBmcm9tICIuL2NvbnRleHRzL1VzZXJQcm92aWRlciI7Cgpjb25zdCBBcHAgPSAoKSA9PiB7CiAgVXNlclByb3ZpZGVyKCk7CgogIHJldHVybiA8Q2hpbGRDb21wb25lbnQgLz47Cn07CmBgYAoKYGBgdHN4CmltcG9ydCB7IHVzZUNvbnRleHQgfSBmcm9tICJhbGVtIjsKCmludGVyZmFjZSBVc2VyQ29udGV4dFByb3BzIHsKICBpc0F1dGhlbnRpY2F0ZWQ6IGJvb2xlYW47CiAgbmFtZTogc3RyaW5nOwp9Cgpjb25zdCBDaGlsZENvbXBvbmVudCA9ICgpID0+IHsKICBjb25zdCB1c2VyID0gdXNlQ29udGV4dDxQcm9qZWN0c0NvbnRleHRQcm9wcz4oInVzZXItY29udGV4dCIpOwoKICBjb25zb2xlLmxvZyh1c2VyKTsKICAvLyB7IGlzQXV0aGVudGljYXRlZDogdHJ1ZSwgYWNjb3VudElkOiAid2VuZGVyc29ucGlyZXMubmVhciIgfQoKICByZXR1cm4gIiI7Cn07CmBgYAoKKipIYW5kbGluZyBhc3luYyBkYXRhOioqCgpgYGB0c3gKLy8gQ2FydFByb3ZpZGVyLnRzeAoKaW1wb3J0IHsgY3JlYXRlQ29udGV4dCwgdXNlQ29udGV4dCwgYXN5bmNGZXRjaCB9IGZyb20gImFsZW0iOwoKLy8gSW50ZXJmYWNlCmludGVyZmFjZSBDYXJ0Q29udGV4dFByb3BzIHsKICBpdGVtczogc3RyaW5nW107CiAgcmVhZHk6IGJvb2xlYW47CgogIC8vIGFjdGlvbnMKICBmZXRjaENhcnRJdGVtczogKCkgPT4gdm9pZDsKfQoKY29uc3QgQ2FydFByb3ZpZGVyID0gKCkgPT4gewogIGNvbnN0IHsgc2V0RGVmYXVsdERhdGEsIHVwZGF0ZURhdGEgfSA9IGNyZWF0ZUNvbnRleHQ8Q2FydENvbnRleHRQcm9wcz4oImNhcnQtcHJvdmlkZXIiKTsKCiAgLy8gSW5pdGlhbCAvIGRlZmF1bHQgZGF0YQogIHNldERlZmF1bHREYXRhKHsKICAgIGl0ZW1zOiBbXSwKICAgIHJlYWR5OiBmYWxzZSwKCiAgICBmZXRjaENhcnRJdGVtczogKCkgPT4gewogICAgICBjb25zdCBzZWxmID0gdXNlQ29udGV4dDxDYXJ0Q29udGV4dFByb3BzPigiY2FydC1jb250ZXh0Iik7CgogICAgICBpZiAoIXNlbGYucmVhZHkpIHsKICAgICAgICBhc3luY0ZldGNoKCJodHRwczovL2FwaS5jb20vY2FydC9pdGVtcyIpLnRoZW4oKHJlc3BvbnNlKSA9PiB7CiAgICAgICAgICAvLyBVcGRhdGUgaXRlbXMKICAgICAgICAgIHVwZGF0ZURhdGEoewogICAgICAgICAgICBpdGVtczogcmVzcG9uc2UuYm9keSwKICAgICAgICAgICAgcmVhZHk6IHRydWUsCiAgICAgICAgICB9KTsKICAgICAgICB9KTsKICAgICAgfQogICAgfSwKICB9KTsKCiAgLy8gKE9wdGlvbmFsKTogQXV0byBmZXRjaCBjYXJ0IGl0ZW1zCiAgY29uc3Qgc2VsZiA9IHVzZUNvbnRleHQ8Q2FydENvbnRleHRQcm9wcz4oImNhcnQtY29udGV4dCIpOwogIGlmICghc2VsZi5yZWFkeSkgewogICAgc2VsZi5mZXRjaENhcnRJdGVtcygpOwogIH0KfTsKYGBgCgpUaGVuIHlvdSBjYW4gdXNlIHRoZSBkYXRhOgoKYGBgdHN4CmltcG9ydCBDYXJ0UHJvdmlkZXIgZnJvbSAiLi9jb250ZXh0cy9DYXJ0UHJvdmlkZXIiOwoKY29uc3QgQXBwID0gKCkgPT4gewogIENhcnRQcm92aWRlcigpOwoKICByZXR1cm4gPENoaWxkQ29tcG9uZW50IC8+Owp9OwpgYGAKCmBgYHRzeAppbXBvcnQgeyB1c2VDb250ZXh0LCB1c2VFZmZlY3QgfSBmcm9tICJhbGVtIjsKCmludGVyZmFjZSBDYXJ0Q29udGV4dFByb3BzIHsKICBpdGVtczogc3RyaW5nW107CiAgcmVhZHk6IGJvb2xlYW47CiAgZmV0Y2hDYXJ0SXRlbXM6ICgpID0+IHZvaWQ7Cn0KCmNvbnN0IENoaWxkQ29tcG9uZW50ID0gKCkgPT4gewogIGNvbnN0IGNhcnQgPSB1c2VDb250ZXh0PENhcnRDb250ZXh0UHJvcHM+KCJjYXJ0LWNvbnRleHQiKTsKCiAgdXNlRWZmZWN0KCgpID0+IHsKICAgIC8vIEZldGNoIGNhcnQgaXRlbXMgKGluIGNhc2UgeW91IGFyZSBub3QgdXNpbmcgdGhlIGF1dG8gZmV0Y2gpCiAgICBjYXJ0LmZldGNoQ2FydEl0ZW1zKCk7CiAgfSwgW10pOwoKICBjb25zb2xlLmxvZyhjYXJ0Lml0ZW1zKTsKICAvLyBbaXRlbTEsIGl0ZW0yLCBpdGVtMywgLi4uXQoKICByZXR1cm4gIiI7Cn07CmBgYAo=`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/context/create-context.md

@@ -1 +1,145 @@
 ## Create Context
+
+Similar to React's Context API, Além also provides a way to create contexts. Contexts are very helpful when you want to create a specific data structure and pass it to child components.
+
+By nature, it is not possible to manipulate provider objects at the same layer in which they are used, similar to React.
+
+**Simple Example:**
+
+```tsx
+// UserProvider.tsx
+
+import { createContext } from "alem";
+
+// Interface
+interface UserContextProps {
+  isAuthenticated: boolean;
+  name: string;
+}
+
+const UserProvider = () => {
+  // Create a provider using a reference key
+  // setDefaultData: used to set initial data
+  // updateData: used to update data
+  const { setDefaultData, updateData } = createContext<UserContextProps>("user-provider");
+
+  // Initial / default data
+  setDefaultData({
+    isAuthenticated: !!context.accountId,
+    accountId: context.accountId,
+  });
+};
+```
+
+Using context with `useContext`:
+
+```tsx
+import UserProvider from "./contexts/UserProvider";
+
+const App = () => {
+  UserProvider();
+
+  return <ChildComponent />;
+};
+```
+
+```tsx
+import { useContext } from "alem";
+
+interface UserContextProps {
+  isAuthenticated: boolean;
+  name: string;
+}
+
+const ChildComponent = () => {
+  const user = useContext<ProjectsContextProps>("user-context");
+
+  console.log(user);
+  // { isAuthenticated: true, accountId: "wendersonpires.near" }
+
+  return "";
+};
+```
+
+**Handling async data:**
+
+```tsx
+// CartProvider.tsx
+
+import { createContext, useContext, asyncFetch } from "alem";
+
+// Interface
+interface CartContextProps {
+  items: string[];
+  ready: boolean;
+
+  // actions
+  fetchCartItems: () => void;
+}
+
+const CartProvider = () => {
+  const { setDefaultData, updateData } = createContext<CartContextProps>("cart-provider");
+
+  // Initial / default data
+  setDefaultData({
+    items: [],
+    ready: false,
+
+    fetchCartItems: () => {
+      const self = useContext<CartContextProps>("cart-context");
+
+      if (!self.ready) {
+        asyncFetch("https://api.com/cart/items").then((response) => {
+          // Update items
+          updateData({
+            items: response.body,
+            ready: true,
+          });
+        });
+      }
+    },
+  });
+
+  // (Optional): Auto fetch cart items
+  const self = useContext<CartContextProps>("cart-context");
+  if (!self.ready) {
+    self.fetchCartItems();
+  }
+};
+```
+
+Then you can use the data:
+
+```tsx
+import CartProvider from "./contexts/CartProvider";
+
+const App = () => {
+  CartProvider();
+
+  return <ChildComponent />;
+};
+```
+
+```tsx
+import { useContext, useEffect } from "alem";
+
+interface CartContextProps {
+  items: string[];
+  ready: boolean;
+  fetchCartItems: () => void;
+}
+
+const ChildComponent = () => {
+  const cart = useContext<CartContextProps>("cart-context");
+
+  useEffect(() => {
+    // Fetch cart items (in case you are not using the auto fetch)
+    cart.fetchCartItems();
+  }, []);
+
+  console.log(cart.items);
+  // [item1, item2, item3, ...]
+
+  return "";
+};
+```