@basictech/nextjs 0.1.0 → 0.1.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/nextjs",
-  "version": "0.1.0",
+  "version": "0.1.1-beta.0",
   "description": "",
   "private": false,
   "publishConfig": {
@@ -17,14 +17,23 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "jwt-decode": "^4.0.0"
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "dexie": "^4.0.8",
+    "dexie-observable": "^4.0.1-beta.13",
+    "dexie-react-hooks": "^1.1.7",
+    "dexie-syncable": "^4.0.1-beta.13",
+    "jwt-decode": "^4.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
+    "@repo/typescript-config": "*",
+    "@types/uuid": "^10.0.0",
     "tsup": "^7.2.0",
-    "typescript": "^5.0.0",
-    "@repo/typescript-config": "*"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.3.1",
+    "rxjs": "^7.8.1"
   }
-}
+}

package/readme.md

@@ -0,0 +1,105 @@
+# @basictech/nextjs
+
+A Next.js package for integrating Basic authentication and database functionality into your Next.js applications.
+
+## Installation
+
+```bash
+npm install @basictech/nextjs
+```
+
+## Usage
+
+### 1. Wrap your application with BasicProvider
+
+In your `_app.tsx` or `layout.tsx` file, wrap your application with the `BasicProvider`:
+
+```typescript
+import { BasicProvider } from '@basictech/nextjs';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <BasicProvider project_id="YOUR_PROJECT_ID">
+      <Component {...pageProps} />
+    </BasicProvider>
+  );
+}
+
+export default MyApp;
+```
+
+Replace `YOUR_PROJECT_ID` with your actual Basic project ID.
+
+### 2. Use the useBasic hook
+
+In your components, you can use the `useBasic` hook to access authentication and database functionality:
+
+```typescript
+import { useBasic } from '@basictech/nextjs';
+
+function MyComponent() {
+  const { user, isSignedIn, signin, signout, db } = useBasic();
+
+  if (!isSignedIn) {
+    return <button onClick={signin}>Sign In</button>;
+  }
+
+  return (
+    <div>
+      <h1>Welcome, {user.name}!</h1>
+      <button onClick={signout}>Sign Out</button>
+    </div>
+  );
+}
+```
+
+### 3. Database Operations
+
+You can perform database operations using the `db` object:
+
+```typescript
+const { db } = useBasic();
+
+// Get data
+const getData = async () => {
+  const data = await db.table('myTable').get();
+  console.log(data);
+};
+
+// Add data
+const addData = async () => {
+  const result = await db.table('myTable').add({ key: 'value' });
+  console.log(result);
+};
+
+// Update data
+const updateData = async () => {
+  const result = await db.table('myTable').update('itemId', { key: 'newValue' });
+  console.log(result);
+};
+```
+
+## API Reference
+
+### useBasic()
+
+Returns an object with the following properties and methods:
+
+- `user`: The current user object
+- `isSignedIn`: Boolean indicating if the user is signed in
+- `signin()`: Function to initiate the sign-in process
+- `signout()`: Function to sign out the user
+- `db`: Object for database operations
+
+### db
+
+The `db` object provides the following methods:
+
+- `table(tableName)`: Selects a table for operations
+  - `get()`: Retrieves all items from the table
+  - `add(value)`: Adds a new item to the table
+  - `update(id, value)`: Updates an item in the table
+
+## License
+
+ISC

package/src/componets.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import * as Avatar from '@radix-ui/react-avatar';
+import * as Popover from '@radix-ui/react-popover';
+
+const LoginButton = () => {
+  return (
+    <Popover.Root>
+      {/* Trigger: Avatar that will be clicked */}
+      <Popover.Trigger asChild>
+        <Avatar.Root style={avatarContainerStyle}>
+          <Avatar.Image
+            src="https://via.placeholder.com/150"
+            alt="User Avatar"
+            style={avatarImageStyle}
+          />
+          <Avatar.Fallback delayMs={600} style={avatarFallbackStyle}>
+            U
+          </Avatar.Fallback>
+        </Avatar.Root>
+      </Popover.Trigger>
+
+      {/* Popover content */}
+      <Popover.Portal>
+        <Popover.Content style={popoverContentStyle} sideOffset={10}>
+          <p style={{ marginBottom: '10px' }}>Hello, User!</p>
+          <button style={buttonStyle}>Logout</button>
+          <Popover.Arrow style={popoverArrowStyle} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+// Basic styles
+const avatarContainerStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '40px',
+  height: '40px',
+  borderRadius: '100%',
+  backgroundColor: '#ccc',
+  cursor: 'pointer',
+};
+
+const avatarImageStyle = {
+  width: '100%',
+  height: '100%',
+  borderRadius: '100%',
+//   objectFit: 'cover',
+};
+
+const avatarFallbackStyle = {
+  width: '100%',
+  height: '100%',
+  borderRadius: '100%',
+  backgroundColor: '#007bff',
+  color: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '20px',
+};
+
+const popoverContentStyle = {
+  padding: '20px',
+  borderRadius: '8px',
+//   backgroundColor: 'white',
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
+};
+
+const buttonStyle = {
+  padding: '8px 16px',
+  backgroundColor: '#007bff',
+  color: '#fff',
+  border: 'none',
+  borderRadius: '4px',
+  cursor: 'pointer',
+};
+
+const popoverArrowStyle = {
+  fill: 'white',
+};
+
+export default LoginButton;

package/src/index.ts

@@ -1,8 +1,18 @@
 "use client"
 
-import { useBasic, BasicProvider } from "./AuthContext";
+// import { useBasic, BasicProvider } from "./AuthContext";
+// import { useLiveQuery as useQuery } from "dexie-react-hooks"
 
+import { useBasic, BasicProvider, useQuery } from "@basictech/react"
+import LoginButton from "./componets";
+
+// import dynamic from 'next/dynamic'  
+
+// const BasicSync = dynamic(() => import('./sync'), { ssr: false })
+// import { BasicSync } from "./sync"
 
 export {
-    useBasic, BasicProvider
-}
+    useBasic, BasicProvider, useQuery, LoginButton
+}
+
+

package/src/sync.ts

@@ -0,0 +1,75 @@
+import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
+
+export function sync() {
+    console.log("sync");
+
+    async function storeFileToOPFS(fileName: string, fileContent: string | ArrayBuffer) {
+        if (!('storage' in navigator && 'getDirectory' in navigator.storage)) {
+            console.error('OPFS is not supported in this browser');
+            return;
+        }
+
+        try {
+            const root = await navigator.storage.getDirectory();
+
+            // Create or open a file
+            const fileHandle = await root.getFileHandle(fileName, { create: true });
+
+            const writable = await fileHandle.createWritable();
+
+            await writable.write(fileContent);
+
+            await writable.close();
+
+            console.log(`File "${fileName}" has been stored in OPFS`);
+        } catch (error) {
+            console.error('Error storing file to OPFS:', error);
+        }
+    }
+
+    
+    // storeFileToOPFS(fileName, fileContent);
+
+    const log = console.log;
+    const error = console.error;
+
+    // const start = (sqlite3 : any) => {
+    //     log('Running SQLite3 version', sqlite3.version.libVersion);
+    //     const db = new sqlite3.oo1.DB('/mydb.sqlite3', 'ct');
+
+    //     const result = db.exec('SELECT * FROM sqlite_master');
+    //     // Your SQLite code here.
+    //   };
+
+      const initializeSQLite = async () => {
+        try {
+          log('Loading and initializing SQLite3 module...');
+          const sqlite3 = await sqlite3InitModule({
+            print: log,
+            printErr: error,
+          });
+          log('Done initializing. Running demo...');
+          log(sqlite3.version.libVersion);
+
+          const db = new sqlite3.oo1.DB('/mydb.sqlite3', 'ct');
+          const result = db.exec('SELECT * FROM sqlite_master');
+
+          
+          
+          log(result);
+
+
+        //   start(sqlite3);
+        } catch (err: any) {
+
+          error('Initialization error:', err.name, err.message);
+        }
+      };
+
+    initializeSQLite();
+
+    
+
+
+
+}

package/src/AuthContext.tsx

@@ -1,268 +0,0 @@
-//@ts-nocheck
-import React, { createContext, useContext, useEffect, useState } from 'react'
-import { jwtDecode} from 'jwt-decode'
-
-import { get, add, update, deleteRecord } from './db'
-
-type User = { 
-    name?: string,
-    email?: string,
-    id?: string,
-    primaryEmailAddress?: {
-        emailAddress: string
-    }, 
-    fullName?: string
-}
-
-export const BasicContext = createContext<{ 
-    unicorn: string, 
-    isLoaded: boolean,
-    isSignedIn: boolean,
-    user: User | null,
-    signout: () => void,
-    signin: () => void,
-    getToken: () => Promise<string>,
-    getSignInLink: () => string, 
-    db: any
-}>({
-    unicorn: "🦄", 
-    isLoaded: false,
-    isSignedIn: false,
-    user: null,
-    signout: () => {},
-    signin: () => {},
-    getToken: () => new Promise(() => {}),
-    getSignInLink: () => "",
-    db: {}
-});
-
-type Token = { 
-    access_token: string,
-    token_type: string,
-    expires_in: number,
-    refresh: string,
-} 
-
-export function BasicProvider({children, project_id}: {children: React.ReactNode, project_id: string}) {
-    const [isLoaded, setIsLoaded] = useState(false)
-    const [isSignedIn, setIsSignedIn] = useState(false) 
-    const [token, setToken] = useState<Token | null>(null)
-    const [authCode, setAuthCode] = useState<string | null>(null)
-    const [user, setUser] = useState<User>({}) 
-
-    //todo: 
-    //add random state to signin link & verify random state
-
-    const getSignInLink = () => {
-        console.log('getting sign in link...')
-
-        const randomState = Math.random().toString(36).substring(7);
-
-        let baseUrl = "https://api.basic.tech/auth/authorize"
-        baseUrl += `?client_id=${project_id}`
-        baseUrl += `&redirect_uri=${encodeURIComponent(window.location.href)}`
-        baseUrl += `&response_type=code`
-        baseUrl += `&scope=openid`
-        baseUrl += `&state=1234zyx`
-
-        return baseUrl;
-    }
-
-    const signin = () => { 
-        console.log('signing in: ', getSignInLink()) 
-        const signInLink = getSignInLink()
-        //todo: change to the other thing?
-        window.location.href = signInLink;
-    }
-
-    const signout = () => {
-        console.log('signing out!')
-        setUser({})
-        setIsSignedIn(false)
-        setToken(null)
-        setAuthCode(null)
-        document.cookie = `basic_token=; Secure; SameSite=Strict`;
-    }
-
-    const getToken = async () : Promise<string> => {
-        console.log('getting token...')
-    
-        if (!token) {
-            console.log('no token found')
-            return ''
-        }
-    
-        const decoded = jwtDecode(token?.access_token)
-        const isExpired = decoded.exp && decoded.exp < Date.now() / 1000
-    
-        if (isExpired) {
-            console.log('token is expired - refreshing ...')
-            const newToken = await fetchToken(token?.refresh)
-            return newToken?.access_token || ''
-        }
-    
-        return token?.access_token || ''
-    }
-
-    function getCookie(name: string) {
-        let cookieValue = '';
-        if (document.cookie && document.cookie !== '') {
-            const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i].trim();
-                if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
-                }
-            }
-        }
-        return cookieValue;
-    }
-
-    const fetchToken = async (code: string) => { 
-        const token = await fetch('https://api.basic.tech/auth/token', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({code: code})
-        })
-        .then(response => response.json())
-        .catch(error => console.error('Error:', error))
-
-        if (token.error) {
-            console.log('error fetching token', token.error)
-            return
-        } else { 
-            // console.log('token', token)
-            setToken(token)
-        }
-        return token
-    }
-
-    useEffect(() => {
-        let cookie_token = getCookie('basic_token')
-        if (cookie_token !== '') {
-            setToken(JSON.parse(cookie_token))
-        }
-        
-        if (window.location.search.includes('code')) {
-            let code = window.location.search.split('code=')[1].split('&')[0]
-            // console.log('code found', code)
-            
-            // todo: check state is valid
-            setAuthCode(code) // remove this? dont need to store code?
-            fetchToken(code)
-
-            window.history.pushState({}, document.title, "/");
-
-        } else { 
-            setIsLoaded(true)
-        }
-    }, [])
-
-    useEffect(() => {
-        async function fetchUser (acc_token: string) {
-            const user = await fetch('https://api.basic.tech/auth/userInfo', {
-                method: 'GET',
-                headers: {
-                    'Authorization': `Bearer ${acc_token}`
-                }
-            })
-            .then(response => response.json())
-            .catch(error => console.error('Error:', error))
-
-            if (user.error) {
-                console.log('error fetching user', user.error)
-                // refreshToken()
-                return
-            } else { 
-                // console.log('user', user)
-                document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
-                setUser(user)
-                setIsSignedIn(true)
-                setIsLoaded(true)
-            }
-        }
-
-        async function checkToken () { 
-            if (!token) {
-                console.log('error: no user token found')
-                return
-            }
-
-            const decoded = jwtDecode(token?.access_token)
-            const isExpired = decoded.exp && decoded.exp < Date.now() / 1000
-
-            if (isExpired) {
-                console.log('token is expired - refreshing ...')
-                const newToken = await fetchToken(token?.refresh)
-                fetchUser(newToken.access_token)
-            } else { 
-                fetchUser(token.access_token)
-            }
-        }
-
-        if (token) { 
-            checkToken()
-            setIsLoaded(true)
-        }
-    }, [token])
-
-    
-
-
-    const db = (tableName : string) => {
-        const checkSignIn = () => { 
-            if (!isSignedIn) {
-                throw new Error('cannot use db. user not logged in.')
-            }
-        }
-
-        return { 
-            get: async () => { 
-                checkSignIn() 
-                const tok = await getToken()
-                return get({projectId: project_id, accountId: user.id, tableName: tableName, token: tok } )
-            },
-            add: async (value: any) => { 
-                checkSignIn() 
-                const tok = await getToken()
-                return add({projectId: project_id, accountId: user.id, tableName: tableName, value: value, token: tok } )
-            },
-            update: async (id: string,value : any) => { 
-                checkSignIn() 
-                const tok = await getToken()
-                return update({projectId: project_id, accountId: user.id, tableName: tableName, id: id, value: value, token: tok } )
-            },
-            delete: async (id: string) => { 
-                checkSignIn() 
-                const tok = await getToken()
-                return deleteRecord({projectId: project_id, accountId: user.id, tableName: tableName, id: id, token: tok } )
-            }
-            
-        }
-    
-    }
-
-    return (
-    <BasicContext.Provider value={{
-        unicorn: "🦄",
-        isLoaded,
-        isSignedIn,
-        user,
-        signout,
-        signin,
-        getToken,
-        getSignInLink, 
-        db, 
-        
-    }}>
-    {children}
-    </BasicContext.Provider>
-    )
-  }
-
-export function useBasic() {
-    return useContext(BasicContext);
-  }

package/src/db.ts

@@ -1,55 +0,0 @@
-//@ts-nocheck
-
-const baseUrl = 'https://api.basic.tech';
-// const baseUrl = 'http://localhost:3000';
-
-
-async function get({ projectId, accountId, tableName, token }) {
-    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}`;
-    const response = await fetch(url, {
-        headers: {
-            'Authorization': `Bearer ${token}`
-        }
-    });
-    return response.json();
-}
-
-async function add({ projectId, accountId, tableName, value, token }) {
-    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}`;
-    const response = await fetch(url, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify({"value": value})
-    });
-    return response.json();
-}
-
-async function update({ projectId, accountId, tableName, id, value, token }) {
-    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}/${id}`;
-    const response = await fetch(url, {
-        method: 'PATCH',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify({id: id, value: value})
-    });
-    return response.json();
-}
-
-async function deleteRecord({ projectId, accountId, tableName, id, token }) {
-    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}/${id}`;
-    const response = await fetch(url, {
-        method: 'DELETE',
-        headers: {
-            'Authorization': `Bearer ${token}`
-        }
-    });
-    return response.json();
-}
-
-export { get, add, update, deleteRecord };
-