refactor (client): Move client out of react build (#722)

* refactor (client): Move out of react build

* refactor (apiclient): Rename client to API client and other changes

* chore (apiClient): Rename package

* chore (apiClient): rename export folder name

* chore (apiClient): rename export folder name

* chore (apiClient): redundant folder name

* chore (apiClient): redundant folder name

* chore (sdks): update pnpm-lock file

* chore (sdks): rename excluding folder

* fix (sdk): prefer workspace package locally

* chore (api-client): rename api-client

sdks/js/.npmrc

@@ -1,2 +1,3 @@
 auto-install-peers = true
-strict-peer-dependencies = false
+strict-peer-dependencies = false
+link-workspace-packages=true

sdks/js/packages/core/api-client/index.ts

@@ -0,0 +1,4 @@
+import { V1Beta1 } from './V1Beta1';
+
+export * from './data-contracts';
+export const ApiClient = V1Beta1;

sdks/js/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/frontier",
-  "version": "0.8.17",
+  "version": "0.29.0",
   "description": "A js library for frontier",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -49,6 +49,12 @@
       "import": "./react/dist/index.mjs",
       "module": "./react/dist/index.mjs",
       "require": "./react/dist/index.js"
+    },
+    "./api-client": {
+      "types": "./api-client/dist/index.d.ts",
+      "import": "./api-client/dist/index.mjs",
+      "module": "./api-client/dist/index.mjs",
+      "require": "./api-client/dist/index.js"
     }
   },
   "devDependencies": {

sdks/js/packages/core/react/contexts/FrontierContext.tsx

@@ -13,7 +13,7 @@ import {
   FrontierProviderProps
 } from '../../shared/types';
 
-import { V1Beta1 } from '../../client/V1Beta1';
+import { V1Beta1 } from '../../api-client/V1Beta1';
 import {
   V1Beta1AuthStrategy,
   V1Beta1BillingAccount,
@@ -23,7 +23,7 @@ import {
   V1Beta1Plan,
   V1Beta1Subscription,
   V1Beta1User
-} from '../../client/data-contracts';
+} from '../../api-client/data-contracts';
 import Frontier from '../frontier';
 import {
   getActiveSubscription,

sdks/js/packages/core/react/frontier.ts

@@ -1,4 +1,4 @@
-import { V1Beta1 } from '../client/V1Beta1';
+import { V1Beta1 } from '../api-client/V1Beta1';
 import { FrontierClient } from '../src';
 
 // Create a class to hold the singleton instance

sdks/js/packages/core/src/index.ts

@@ -1,5 +1,5 @@
-import { V1Beta1 } from '../client/V1Beta1';
+import { V1Beta1 } from '../api-client/V1Beta1';
 
-export * from '../client/V1Beta1';
-export * from '../client/data-contracts';
+export * from '../api-client/V1Beta1';
+export * from '../api-client/data-contracts';
 export const FrontierClient = V1Beta1;

sdks/js/packages/core/tsup.config.ts

@@ -16,12 +16,18 @@ export default defineConfig(() => [
       js: "'use client'"
     },
     format: ['cjs', 'esm'],
-    external: ['react', 'svelte', 'vue', 'solid-js'],
+    external: ['react', 'svelte', 'vue', 'solid-js', 'api-client/*'],
     dts: true,
     loader: {
       '.svg': 'dataurl',
       '.png': 'dataurl'
     },
     esbuildPlugins: [cssModulesPlugin()]
-  }
+  },
+  {
+    entry: ['api-client/index.ts'],
+    format: ['cjs', 'esm'],
+    outDir: 'api-client/dist',
+    dts: true,
+  },
 ]);

sdks/js/packages/sdk-demo/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@raystack/apsara": "^0.17.1",
-    "@raystack/frontier": "0.28.4",
+    "@raystack/frontier": "^0.29.0",
     "next": "14.2.5",
     "next-http-proxy-middleware": "^1.2.6",
     "react": "^18",

sdks/js/packages/sdk-demo/src/api/frontier.ts

@@ -0,0 +1,11 @@
+import { ApiClient } from '@raystack/frontier/api-client'
+import config from '@/config/frontier';
+
+const client = new ApiClient({
+    baseUrl: config.endpoint,
+    baseApiParams: {
+        credentials: 'include'
+    }
+});
+
+export default client

sdks/js/packages/sdk-demo/src/app/callback/page.tsx

@@ -1,23 +1,26 @@
 'use client';
 
 import { useEffect, useCallback, Suspense } from 'react';
-import { useFrontier } from '@raystack/frontier/react';
+import frontierClient from '@/api/frontier';
 import { Flex } from '@raystack/apsara';
 import { redirect, useSearchParams } from 'next/navigation';
 import useAuthRedirect from '@/hooks/useAuthRedirect';
 
+
 function Callback() {
-  const { client } = useFrontier();
+
 
   const searchParams = useSearchParams();
 
   const callFrontierCallback = useCallback(async () => {
     const state = searchParams?.get('state');
     const code = searchParams?.get('code');
 
+
+
     try {
       if (state && code) {
-        const resp = await client?.frontierServiceAuthCallback({ state, code });
+        const resp = await frontierClient?.frontierServiceAuthCallback({ state, code });
         if (resp?.status === 200) {
           redirect('/');
         } else {
@@ -27,7 +30,7 @@ function Callback() {
     } catch (err) {
       redirect('/login');
     }
-  }, [client, searchParams]);
+  }, [searchParams]);
 
   useEffect(() => {
     callFrontierCallback();

sdks/js/packages/sdk-demo/src/app/page.tsx

@@ -1,11 +1,14 @@
 'use client';
 import AuthContext from '@/contexts/auth';
-import { Flex } from '@raystack/apsara';
+import { Button, Flex } from '@raystack/apsara';
 import { useFrontier } from '@raystack/frontier/react';
+
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 import { useContext, useEffect } from 'react';
 
+import frontierClient from '@/api/frontier'
+
 export default function Home() {
   const { isAuthorized } = useContext(AuthContext);
   const { organizations } = useFrontier();
@@ -15,13 +18,22 @@ export default function Home() {
     }
   }, [isAuthorized]);
 
+
+  async function logout() {
+    const resp = await frontierClient?.frontierServiceAuthLogout();
+    if (resp?.status === 200) {
+      window.location.reload()
+    }
+  }
+
   return (
     <main>
       <Flex
         justify="center"
         align="center"
         style={{ height: '100vh', width: '100vw' }}
       >
+        <Button data-test-id='[logout-button]' onClick={logout}>Logout</Button>
         <Flex direction="column">
           {organizations.map(org => (
             <Flex