docs: add JS sdk docs

docs/docs/sdk/configurations.md

@@ -0,0 +1,19 @@
+# Configuration
+
+| key                       | type              | default                                | description |
+| ------------------------- | ----------------- | -------------------------------------- | ----------- |
+| endpoint                  | string            | http://localhost:8080                  |             |
+| redirectLogin             | string            | http://localhost:3000                  |             |
+| redirectSignup            | string            | http://localhost:3000/signup           |             |
+| redirectMagicLinkVerify   | string            | http://localhost:3000/magiclink-verify |             |
+| callbackUrl               | string            | http://localhost:3000/callback         |             |
+| dateFormat                | string            |                                        |             |
+| shortDateFormat           | string            |                                        |             |
+| theme                     | 'dark' or 'light' | 'light'                                |             |
+| billing.successUrl        | string            | http://localhost:3000/success          |             |
+| billing.cancelUrl         | string            | http://localhost:3000/cancel           |             |
+| billing.cancelAfterTrial  | boolean           | true                                   |             |
+| billing.showPerMonthPrice | boolean           | false                                  |             |
+| billing.supportEmail      | string            | ''                                     |             |
+| billing.hideDecimals      | boolean           | false                                  |             |
+| billing.tokenProductId    | string            | ''                                     |             |

docs/docs/sdk/introduction.md

@@ -0,0 +1,58 @@
+# Introduction
+
+Frontier SDK provides wrapper arround [Frontier Apis](/apis/frontier-administration-api) and React components which you can integrate in your web app for user and organization management.
+
+## Setup
+
+Install the sdk in your project.
+
+```sh
+npm i @raystack/frontier
+```
+
+Import the `FrontierProvider` in the root of your project and wrap your application code with it.
+
+```javascript
+import { FrontierProvider } from "@raystack/frontier/react";
+
+const frontierConfig = {};
+
+function App() {
+  return (
+    <FrontierProvider config={frontierConfig}>
+      /* Your app code here */
+    </FrontierProvider>
+  );
+}
+```
+
+To access the frontier instance inside your application, import the `useFrontier` hook in your components.
+
+```javascript
+import { useFrontier } from "@raystack/frontier/react";
+
+export function DemoComponent() {
+  const { client } = useFrontier();
+  const [userLoader, setUserLoader] = useState(true);
+  const [user, setUser] = useState();
+
+  useEffect(() => {
+    async function getCurrentUser() {
+      try {
+        setUserLoader(true);
+        const userResp = await client.frontierServiceGetCurrentUser();
+        if (userResp?.data) {
+          setUseruser(userResp?.data?.user);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setUserLoader(false);
+      }
+    }
+    getCurrentUser();
+  }, [client]);
+
+  return <div>demo</div>;
+}
+```

docs/sidebars.js

@@ -122,6 +122,18 @@ module.exports = {
         require("./docs/apis/sidebar.js")
       ]
     },
+    {
+      type: "category",
+      label: "SDK",
+      link: {
+        type: "doc",
+        id: "sdk/introduction",
+      },
+      items: [
+        "sdk/introduction",
+        "sdk/configurations",
+      ]
+    },
     {
       type: "category",
       label: "Reference",