@codegenapps/frontend-sdk 1.0.1 → 1.0.2

package/README.md

@@ -14,17 +14,17 @@ This SDK is designed to be highly flexible. It dynamically fetches an API specif
 ## Installation
 
 ```bash
-npm install frontend-sdk # Replace 'frontend-sdk' with your actual package name on npm
+npm install @codegenapps/frontend-sdk
 ```
 
 ## Quick Start
 
-Here's how to initialize the client and perform a query:
+The following example demonstrates how to initialize the client and perform a query in a standard JavaScript environment.
 
 ```javascript
-import cga from 'frontend-sdk';
+import cga from '@codegenapps/frontend-sdk';
 
-// 1. Initialize the client
+// 1. Initialize the client (ideally once when your application starts)
 async function initialize() {
   await cga.init({
     // The base URL of your API
@@ -63,6 +63,101 @@ async function fetchDocuments() {
 initialize().then(fetchDocuments);
 ```
 
+## Usage with Frameworks
+
+This SDK is framework-agnostic. The Quick Start example uses standard JavaScript (`async/await`) that works in any modern environment. Here’s how you might integrate it into popular frameworks.
+
+### React Example
+
+In a React component, you can use the `useEffect` hook to fetch data when the component mounts.
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import cga from '@codegenapps/frontend-sdk';
+
+// Initialize the SDK once in your app's entry point (e.g., index.js)
+// await cga.init({ ... });
+
+function DocumentsList() {
+  const [documents, setDocuments] = useState([]);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function getDocuments() {
+      const { data, error } = await cga
+        .from('documents')
+        .select('id, title')
+        .eq('owner_id', 1)
+        .run();
+
+      if (error) {
+        setError(error);
+      } else {
+        setDocuments(data);
+      }
+      setIsLoading(false);
+    }
+
+    getDocuments();
+  }, []); // The empty dependency array ensures this runs once on mount
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <ul>
+      {documents.map(doc => (
+        <li key={doc.id}>{doc.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Vue.js Example
+
+In a Vue component (using Composition API), you can use the `onMounted` hook.
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue';
+import cga from '@codegenapps/frontend-sdk';
+
+// Initialize the SDK once in your app's entry point (e.g., main.js)
+// await cga.init({ ... });
+
+const documents = ref([]);
+const error = ref(null);
+const isLoading = ref(true);
+
+onMounted(async () => {
+  const { data, error: fetchError } = await cga
+    .from('documents')
+    .select('id, title')
+    .eq('owner_id', 1)
+    .run();
+
+  if (fetchError) {
+    error.value = fetchError;
+  } else {
+    documents.value = data;
+  }
+  isLoading.value = false;
+});
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="error">Error: {{ error.message }}</div>
+  <ul v-else>
+    <li v-for="doc in documents" :key="doc.id">
+      {{ doc.title }}
+    </li>
+  </ul>
+</template>
+```
+
 ## API
 
 ### Initialization
@@ -117,4 +212,4 @@ Executes the query and returns a `Promise` that resolves to `{ data, error }`. *
 
 ## License
 
-MIT
+MIT

package/dist/CgaClient.d.ts

@@ -54,11 +54,11 @@ export declare class CgaClient {
     get auth(): {
         /**
          * Logs in a user.
-         * @param username The user's username.
+         * @param account The user's username.
          * @param password The user's password.
          * @param apiKey The API key required for login.
          */
-        login(username: string, password: string, apiKey: string): Promise<{
+        login(account: string, password: string, apiKey: string): Promise<{
             data: any;
             error: null;
         } | {

package/dist/index.esm.js

@@ -6366,15 +6366,15 @@ class CgaClient {
         return {
             /**
              * Logs in a user.
-             * @param username The user's username.
+             * @param account The user's username.
              * @param password The user's password.
              * @param apiKey The API key required for login.
              */
-            login(username, password, apiKey) {
+            login(account, password, apiKey) {
                 return __awaiter(this, void 0, void 0, function* () {
                     var _a;
                     try {
-                        const response = yield httpClient.post('/auth/login', { username, password }, { headers: { 'X-API-KEY': apiKey } });
+                        const response = yield httpClient.post('/auth/login', { account, password }, { headers: { 'X-API-KEY': apiKey } });
                         return { data: response.data.data, error: null };
                     }
                     catch (error) {