@vaiftech/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 VAIF Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,230 @@
+# @vaif/react
+
+React hooks for VAIF Studio - a Backend-as-a-Service platform.
+
+## Installation
+
+```bash
+npm install @vaif/react @vaif/client
+# or
+pnpm add @vaif/react @vaif/client
+# or
+yarn add @vaif/react @vaif/client
+```
+
+## Quick Start
+
+```tsx
+import { VaifProvider } from '@vaif/react';
+import { createVaifClient } from '@vaif/client';
+
+const client = createVaifClient({
+  baseUrl: 'https://api.myproject.vaif.io',
+  apiKey: 'vaif_pk_xxx',
+});
+
+function App() {
+  return (
+    <VaifProvider client={client}>
+      <MyComponent />
+    </VaifProvider>
+  );
+}
+```
+
+## Hooks
+
+### Authentication
+
+```tsx
+import { useAuth, useUser, useSession } from '@vaif/react';
+
+function AuthComponent() {
+  const { user, isLoading, signIn, signUp, signOut } = useAuth();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (!user) {
+    return (
+      <button onClick={() => signIn({ email, password })}>
+        Sign In
+      </button>
+    );
+  }
+
+  return (
+    <div>
+      <p>Welcome, {user.email}</p>
+      <button onClick={signOut}>Sign Out</button>
+    </div>
+  );
+}
+
+// Just the user
+function Profile() {
+  const { user, isLoading } = useUser();
+  return user ? <p>{user.email}</p> : null;
+}
+
+// Session management
+function SessionInfo() {
+  const { session, refresh } = useSession();
+  return <p>Expires: {session?.expiresAt}</p>;
+}
+```
+
+### Data Fetching
+
+```tsx
+import { useQuery, useMutation } from '@vaif/react';
+
+interface Post {
+  id: string;
+  title: string;
+  content: string;
+}
+
+function PostList() {
+  const { data: posts, isLoading, error, refetch } = useQuery<Post>('posts', {
+    filters: [{ field: 'published', operator: 'eq', value: true }],
+    orderBy: [{ field: 'createdAt', direction: 'desc' }],
+    limit: 10,
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <ul>
+      {posts?.map(post => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+
+function CreatePost() {
+  const { create, isCreating } = useMutation<Post>('posts');
+
+  const handleSubmit = async (data: Omit<Post, 'id'>) => {
+    const newPost = await create(data);
+    console.log('Created:', newPost);
+  };
+
+  return (
+    <button onClick={() => handleSubmit({ title: 'New', content: '...' })} disabled={isCreating}>
+      {isCreating ? 'Creating...' : 'Create Post'}
+    </button>
+  );
+}
+```
+
+### Realtime
+
+```tsx
+import { useRealtime, useRealtimeQuery } from '@vaif/react';
+
+// Subscribe to changes
+function MessageListener() {
+  useRealtime<Message>('messages', {
+    event: 'INSERT',
+    onInsert: (message) => {
+      console.log('New message:', message);
+    },
+  });
+
+  return null;
+}
+
+// Query with automatic realtime updates
+function LiveMessages() {
+  const { data: messages } = useRealtimeQuery<Message>('messages', {
+    orderBy: [{ field: 'createdAt', direction: 'desc' }],
+    limit: 50,
+  });
+
+  return (
+    <ul>
+      {messages?.map(msg => (
+        <li key={msg.id}>{msg.content}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Storage
+
+```tsx
+import { useUpload, useDownload, useFile, usePublicUrl } from '@vaif/react';
+
+function FileUpload() {
+  const { upload, progress, isUploading, error } = useUpload();
+
+  const handleUpload = async (file: File) => {
+    const result = await upload(file, `uploads/${file.name}`);
+    console.log('Uploaded:', result?.url);
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={(e) => handleUpload(e.target.files![0])} />
+      {isUploading && <progress value={progress} max={100} />}
+      {error && <p>Error: {error.message}</p>}
+    </div>
+  );
+}
+
+function FileDisplay({ path }: { path: string }) {
+  const url = usePublicUrl(path);
+  return url ? <img src={url} alt="" /> : null;
+}
+```
+
+### Edge Functions
+
+```tsx
+import { useFunction } from '@vaif/react';
+
+function SendEmail() {
+  const { invoke, isInvoking, error, result } = useFunction('send-email');
+
+  const handleSend = async () => {
+    await invoke({
+      to: 'user@example.com',
+      subject: 'Hello',
+    });
+  };
+
+  return (
+    <button onClick={handleSend} disabled={isInvoking}>
+      {isInvoking ? 'Sending...' : 'Send Email'}
+    </button>
+  );
+}
+```
+
+## TypeScript Support
+
+All hooks support TypeScript generics for full type safety:
+
+```tsx
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+const { data } = useQuery<User>('users');
+// data is User[] | undefined
+```
+
+## Related Packages
+
+- [@vaif/client](https://www.npmjs.com/package/@vaif/client) - Core client SDK
+- [@vaif/sdk-expo](https://www.npmjs.com/package/@vaif/sdk-expo) - React Native/Expo SDK
+- [@vaif/cli](https://www.npmjs.com/package/@vaif/cli) - CLI tools
+
+## License
+
+MIT