@basictech/nextjs 0.1.0 → 0.2.0-beta.1

package/dist/index.mjs

@@ -1,244 +1,81 @@
 "use client";
 
-// src/AuthContext.tsx
-import { createContext, useContext, useEffect, useState } from "react";
-import { jwtDecode } from "jwt-decode";
+// src/index.ts
+import { useBasic, BasicProvider, useQuery } from "@basictech/react";
 
-// src/db.ts
-var baseUrl = "https://api.basic.tech";
-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, 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();
-}
-
-// src/AuthContext.tsx
-import { jsx } from "react/jsx-runtime";
-var BasicContext = createContext({
-  unicorn: "\u{1F984}",
-  isLoaded: false,
-  isSignedIn: false,
-  user: null,
-  signout: () => {
-  },
-  signin: () => {
-  },
-  getToken: () => new Promise(() => {
-  }),
-  getSignInLink: () => "",
-  db: {}
-});
-function BasicProvider({ children, project_id }) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [isSignedIn, setIsSignedIn] = useState(false);
-  const [token, setToken] = useState(null);
-  const [authCode, setAuthCode] = useState(null);
-  const [user, setUser] = useState({});
-  const getSignInLink = () => {
-    console.log("getting sign in link...");
-    const randomState = Math.random().toString(36).substring(7);
-    let baseUrl2 = "https://api.basic.tech/auth/authorize";
-    baseUrl2 += `?client_id=${project_id}`;
-    baseUrl2 += `&redirect_uri=${encodeURIComponent(window.location.href)}`;
-    baseUrl2 += `&response_type=code`;
-    baseUrl2 += `&scope=openid`;
-    baseUrl2 += `&state=1234zyx`;
-    return baseUrl2;
-  };
-  const signin = () => {
-    console.log("signing in: ", getSignInLink());
-    const signInLink = getSignInLink();
-    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 () => {
-    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() / 1e3;
-    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) {
-    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) => {
-    const token2 = await fetch("https://api.basic.tech/auth/token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ code })
-    }).then((response) => response.json()).catch((error) => console.error("Error:", error));
-    if (token2.error) {
-      console.log("error fetching token", token2.error);
-      return;
-    } else {
-      setToken(token2);
-    }
-    return token2;
-  };
-  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];
-      setAuthCode(code);
-      fetchToken(code);
-      window.history.pushState({}, document.title, "/");
-    } else {
-      setIsLoaded(true);
-    }
-  }, []);
-  useEffect(() => {
-    async function fetchUser(acc_token) {
-      const user2 = await fetch("https://api.basic.tech/auth/userInfo", {
-        method: "GET",
-        headers: {
-          "Authorization": `Bearer ${acc_token}`
+// src/componets.tsx
+import * as Avatar from "@radix-ui/react-avatar";
+import * as Popover from "@radix-ui/react-popover";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoginButton = () => {
+  return /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Avatar.Root, { style: avatarContainerStyle, children: [
+      /* @__PURE__ */ jsx(
+        Avatar.Image,
+        {
+          src: "https://via.placeholder.com/150",
+          alt: "User Avatar",
+          style: avatarImageStyle
         }
-      }).then((response) => response.json()).catch((error) => console.error("Error:", error));
-      if (user2.error) {
-        console.log("error fetching user", user2.error);
-        return;
-      } else {
-        document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
-        setUser(user2);
-        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() / 1e3;
-      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) => {
-    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, token: tok });
-      },
-      add: async (value) => {
-        checkSignIn();
-        const tok = await getToken();
-        return add({ projectId: project_id, accountId: user.id, tableName, value, token: tok });
-      },
-      update: async (id, value) => {
-        checkSignIn();
-        const tok = await getToken();
-        return update({ projectId: project_id, accountId: user.id, tableName, id, value, token: tok });
-      },
-      delete: async (id) => {
-        checkSignIn();
-        const tok = await getToken();
-        return deleteRecord({ projectId: project_id, accountId: user.id, tableName, id, token: tok });
-      }
-    };
-  };
-  return /* @__PURE__ */ jsx(BasicContext.Provider, { value: {
-    unicorn: "\u{1F984}",
-    isLoaded,
-    isSignedIn,
-    user,
-    signout,
-    signin,
-    getToken,
-    getSignInLink,
-    db
-  }, children });
-}
-function useBasic() {
-  return useContext(BasicContext);
-}
+      ),
+      /* @__PURE__ */ jsx(Avatar.Fallback, { delayMs: 600, style: avatarFallbackStyle, children: "U" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, { style: popoverContentStyle, sideOffset: 10, children: [
+      /* @__PURE__ */ jsx("p", { style: { marginBottom: "10px" }, children: "Hello, User!" }),
+      /* @__PURE__ */ jsx("button", { style: buttonStyle, children: "Logout" }),
+      /* @__PURE__ */ jsx(Popover.Arrow, { style: popoverArrowStyle })
+    ] }) })
+  ] });
+};
+var avatarContainerStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "40px",
+  height: "40px",
+  borderRadius: "100%",
+  backgroundColor: "#ccc",
+  cursor: "pointer"
+};
+var avatarImageStyle = {
+  width: "100%",
+  height: "100%",
+  borderRadius: "100%"
+  //   objectFit: 'cover',
+};
+var avatarFallbackStyle = {
+  width: "100%",
+  height: "100%",
+  borderRadius: "100%",
+  backgroundColor: "#007bff",
+  color: "white",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "20px"
+};
+var popoverContentStyle = {
+  padding: "20px",
+  borderRadius: "8px",
+  //   backgroundColor: 'white',
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)"
+};
+var buttonStyle = {
+  padding: "8px 16px",
+  backgroundColor: "#007bff",
+  color: "#fff",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer"
+};
+var popoverArrowStyle = {
+  fill: "white"
+};
+var componets_default = LoginButton;
 export {
   BasicProvider,
-  useBasic
+  componets_default as LoginButton,
+  useBasic,
+  useQuery
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/AuthContext.tsx","../src/db.ts"],"sourcesContent":["//@ts-nocheck\nimport React, { createContext, useContext, useEffect, useState } from 'react'\nimport { jwtDecode} from 'jwt-decode'\n\nimport { get, add, update, deleteRecord } from './db'\n\ntype User = { \n    name?: string,\n    email?: string,\n    id?: string,\n    primaryEmailAddress?: {\n        emailAddress: string\n    }, \n    fullName?: string\n}\n\nexport const BasicContext = createContext<{ \n    unicorn: string, \n    isLoaded: boolean,\n    isSignedIn: boolean,\n    user: User | null,\n    signout: () => void,\n    signin: () => void,\n    getToken: () => Promise<string>,\n    getSignInLink: () => string, \n    db: any\n}>({\n    unicorn: \"🦄\", \n    isLoaded: false,\n    isSignedIn: false,\n    user: null,\n    signout: () => {},\n    signin: () => {},\n    getToken: () => new Promise(() => {}),\n    getSignInLink: () => \"\",\n    db: {}\n});\n\ntype Token = { \n    access_token: string,\n    token_type: string,\n    expires_in: number,\n    refresh: string,\n} \n\nexport function BasicProvider({children, project_id}: {children: React.ReactNode, project_id: string}) {\n    const [isLoaded, setIsLoaded] = useState(false)\n    const [isSignedIn, setIsSignedIn] = useState(false) \n    const [token, setToken] = useState<Token | null>(null)\n    const [authCode, setAuthCode] = useState<string | null>(null)\n    const [user, setUser] = useState<User>({}) \n\n    //todo: \n    //add random state to signin link & verify random state\n\n    const getSignInLink = () => {\n        console.log('getting sign in link...')\n\n        const randomState = Math.random().toString(36).substring(7);\n\n        let baseUrl = \"https://api.basic.tech/auth/authorize\"\n        baseUrl += `?client_id=${project_id}`\n        baseUrl += `&redirect_uri=${encodeURIComponent(window.location.href)}`\n        baseUrl += `&response_type=code`\n        baseUrl += `&scope=openid`\n        baseUrl += `&state=1234zyx`\n\n        return baseUrl;\n    }\n\n    const signin = () => { \n        console.log('signing in: ', getSignInLink()) \n        const signInLink = getSignInLink()\n        //todo: change to the other thing?\n        window.location.href = signInLink;\n    }\n\n    const signout = () => {\n        console.log('signing out!')\n        setUser({})\n        setIsSignedIn(false)\n        setToken(null)\n        setAuthCode(null)\n        document.cookie = `basic_token=; Secure; SameSite=Strict`;\n    }\n\n    const getToken = async () : Promise<string> => {\n        console.log('getting token...')\n    \n        if (!token) {\n            console.log('no token found')\n            return ''\n        }\n    \n        const decoded = jwtDecode(token?.access_token)\n        const isExpired = decoded.exp && decoded.exp < Date.now() / 1000\n    \n        if (isExpired) {\n            console.log('token is expired - refreshing ...')\n            const newToken = await fetchToken(token?.refresh)\n            return newToken?.access_token || ''\n        }\n    \n        return token?.access_token || ''\n    }\n\n    function getCookie(name: string) {\n        let cookieValue = '';\n        if (document.cookie && document.cookie !== '') {\n            const cookies = document.cookie.split(';');\n            for (let i = 0; i < cookies.length; i++) {\n                const cookie = cookies[i].trim();\n                if (cookie.substring(0, name.length + 1) === (name + '=')) {\n                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));\n                    break;\n                }\n            }\n        }\n        return cookieValue;\n    }\n\n    const fetchToken = async (code: string) => { \n        const token = await fetch('https://api.basic.tech/auth/token', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application/json'\n            },\n            body: JSON.stringify({code: code})\n        })\n        .then(response => response.json())\n        .catch(error => console.error('Error:', error))\n\n        if (token.error) {\n            console.log('error fetching token', token.error)\n            return\n        } else { \n            // console.log('token', token)\n            setToken(token)\n        }\n        return token\n    }\n\n    useEffect(() => {\n        let cookie_token = getCookie('basic_token')\n        if (cookie_token !== '') {\n            setToken(JSON.parse(cookie_token))\n        }\n        \n        if (window.location.search.includes('code')) {\n            let code = window.location.search.split('code=')[1].split('&')[0]\n            // console.log('code found', code)\n            \n            // todo: check state is valid\n            setAuthCode(code) // remove this? dont need to store code?\n            fetchToken(code)\n\n            window.history.pushState({}, document.title, \"/\");\n\n        } else { \n            setIsLoaded(true)\n        }\n    }, [])\n\n    useEffect(() => {\n        async function fetchUser (acc_token: string) {\n            const user = await fetch('https://api.basic.tech/auth/userInfo', {\n                method: 'GET',\n                headers: {\n                    'Authorization': `Bearer ${acc_token}`\n                }\n            })\n            .then(response => response.json())\n            .catch(error => console.error('Error:', error))\n\n            if (user.error) {\n                console.log('error fetching user', user.error)\n                // refreshToken()\n                return\n            } else { \n                // console.log('user', user)\n                document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;\n                setUser(user)\n                setIsSignedIn(true)\n                setIsLoaded(true)\n            }\n        }\n\n        async function checkToken () { \n            if (!token) {\n                console.log('error: no user token found')\n                return\n            }\n\n            const decoded = jwtDecode(token?.access_token)\n            const isExpired = decoded.exp && decoded.exp < Date.now() / 1000\n\n            if (isExpired) {\n                console.log('token is expired - refreshing ...')\n                const newToken = await fetchToken(token?.refresh)\n                fetchUser(newToken.access_token)\n            } else { \n                fetchUser(token.access_token)\n            }\n        }\n\n        if (token) { \n            checkToken()\n            setIsLoaded(true)\n        }\n    }, [token])\n\n    \n\n\n    const db = (tableName : string) => {\n        const checkSignIn = () => { \n            if (!isSignedIn) {\n                throw new Error('cannot use db. user not logged in.')\n            }\n        }\n\n        return { \n            get: async () => { \n                checkSignIn() \n                const tok = await getToken()\n                return get({projectId: project_id, accountId: user.id, tableName: tableName, token: tok } )\n            },\n            add: async (value: any) => { \n                checkSignIn() \n                const tok = await getToken()\n                return add({projectId: project_id, accountId: user.id, tableName: tableName, value: value, token: tok } )\n            },\n            update: async (id: string,value : any) => { \n                checkSignIn() \n                const tok = await getToken()\n                return update({projectId: project_id, accountId: user.id, tableName: tableName, id: id, value: value, token: tok } )\n            },\n            delete: async (id: string) => { \n                checkSignIn() \n                const tok = await getToken()\n                return deleteRecord({projectId: project_id, accountId: user.id, tableName: tableName, id: id, token: tok } )\n            }\n            \n        }\n    \n    }\n\n    return (\n    <BasicContext.Provider value={{\n        unicorn: \"🦄\",\n        isLoaded,\n        isSignedIn,\n        user,\n        signout,\n        signin,\n        getToken,\n        getSignInLink, \n        db, \n        \n    }}>\n    {children}\n    </BasicContext.Provider>\n    )\n  }\n\nexport function useBasic() {\n    return useContext(BasicContext);\n  }","//@ts-nocheck\n\nconst baseUrl = 'https://api.basic.tech';\n// const baseUrl = 'http://localhost:3000';\n\n\nasync function get({ projectId, accountId, tableName, token }) {\n    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}`;\n    const response = await fetch(url, {\n        headers: {\n            'Authorization': `Bearer ${token}`\n        }\n    });\n    return response.json();\n}\n\nasync function add({ projectId, accountId, tableName, value, token }) {\n    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}`;\n    const response = await fetch(url, {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application/json',\n            'Authorization': `Bearer ${token}`\n        },\n        body: JSON.stringify({\"value\": value})\n    });\n    return response.json();\n}\n\nasync function update({ projectId, accountId, tableName, id, value, token }) {\n    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}/${id}`;\n    const response = await fetch(url, {\n        method: 'PATCH',\n        headers: {\n            'Content-Type': 'application/json',\n            'Authorization': `Bearer ${token}`\n        },\n        body: JSON.stringify({id: id, value: value})\n    });\n    return response.json();\n}\n\nasync function deleteRecord({ projectId, accountId, tableName, id, token }) {\n    const url = `${baseUrl}/project/${projectId}/db/${accountId}/${tableName}/${id}`;\n    const response = await fetch(url, {\n        method: 'DELETE',\n        headers: {\n            'Authorization': `Bearer ${token}`\n        }\n    });\n    return response.json();\n}\n\nexport { get, add, update, deleteRecord };\n\n"],"mappings":"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","names":["baseUrl","token","user"]}
+{"version":3,"sources":["../src/index.ts","../src/componets.tsx"],"sourcesContent":["\"use client\"\n\n// import { useBasic, BasicProvider } from \"./AuthContext\";\n// import { useLiveQuery as useQuery } from \"dexie-react-hooks\"\n\nimport { useBasic, BasicProvider, useQuery } from \"@basictech/react\"\nimport LoginButton from \"./componets\";\n\n// import dynamic from 'next/dynamic'  \n\n// const BasicSync = dynamic(() => import('./sync'), { ssr: false })\n// import { BasicSync } from \"./sync\"\n\nexport {\n    useBasic, BasicProvider, useQuery, LoginButton\n}\n\n\n","import React from 'react';\nimport * as Avatar from '@radix-ui/react-avatar';\nimport * as Popover from '@radix-ui/react-popover';\n\nconst LoginButton = () => {\n  return (\n    <Popover.Root>\n      {/* Trigger: Avatar that will be clicked */}\n      <Popover.Trigger asChild>\n        <Avatar.Root style={avatarContainerStyle}>\n          <Avatar.Image\n            src=\"https://via.placeholder.com/150\"\n            alt=\"User Avatar\"\n            style={avatarImageStyle}\n          />\n          <Avatar.Fallback delayMs={600} style={avatarFallbackStyle}>\n            U\n          </Avatar.Fallback>\n        </Avatar.Root>\n      </Popover.Trigger>\n\n      {/* Popover content */}\n      <Popover.Portal>\n        <Popover.Content style={popoverContentStyle} sideOffset={10}>\n          <p style={{ marginBottom: '10px' }}>Hello, User!</p>\n          <button style={buttonStyle}>Logout</button>\n          <Popover.Arrow style={popoverArrowStyle} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n// Basic styles\nconst avatarContainerStyle = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '40px',\n  height: '40px',\n  borderRadius: '100%',\n  backgroundColor: '#ccc',\n  cursor: 'pointer',\n};\n\nconst avatarImageStyle = {\n  width: '100%',\n  height: '100%',\n  borderRadius: '100%',\n//   objectFit: 'cover',\n};\n\nconst avatarFallbackStyle = {\n  width: '100%',\n  height: '100%',\n  borderRadius: '100%',\n  backgroundColor: '#007bff',\n  color: 'white',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: '20px',\n};\n\nconst popoverContentStyle = {\n  padding: '20px',\n  borderRadius: '8px',\n//   backgroundColor: 'white',\n  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',\n};\n\nconst buttonStyle = {\n  padding: '8px 16px',\n  backgroundColor: '#007bff',\n  color: '#fff',\n  border: 'none',\n  borderRadius: '4px',\n  cursor: 'pointer',\n};\n\nconst popoverArrowStyle = {\n  fill: 'white',\n};\n\nexport default LoginButton;\n"],"mappings":";;;AAKA,SAAS,UAAU,eAAe,gBAAgB;;;ACJlD,YAAY,YAAY;AACxB,YAAY,aAAa;AAOjB,SACE,KADF;AALR,IAAM,cAAc,MAAM;AACxB,SACE,qBAAS,cAAR,EAEC;AAAA,wBAAS,iBAAR,EAAgB,SAAO,MACtB,+BAAQ,aAAP,EAAY,OAAO,sBAClB;AAAA;AAAA,QAAQ;AAAA,QAAP;AAAA,UACC,KAAI;AAAA,UACJ,KAAI;AAAA,UACJ,OAAO;AAAA;AAAA,MACT;AAAA,MACA,oBAAQ,iBAAP,EAAgB,SAAS,KAAK,OAAO,qBAAqB,eAE3D;AAAA,OACF,GACF;AAAA,IAGA,oBAAS,gBAAR,EACC,+BAAS,iBAAR,EAAgB,OAAO,qBAAqB,YAAY,IACvD;AAAA,0BAAC,OAAE,OAAO,EAAE,cAAc,OAAO,GAAG,0BAAY;AAAA,MAChD,oBAAC,YAAO,OAAO,aAAa,oBAAM;AAAA,MAClC,oBAAS,eAAR,EAAc,OAAO,mBAAmB;AAAA,OAC3C,GACF;AAAA,KACF;AAEJ;AAGA,IAAM,uBAAuB;AAAA,EAC3B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AACV;AAEA,IAAM,mBAAmB;AAAA,EACvB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA;AAEhB;AAEA,IAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEA,IAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,cAAc;AAAA;AAAA,EAEd,WAAW;AACb;AAEA,IAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AACV;AAEA,IAAM,oBAAoB;AAAA,EACxB,MAAM;AACR;AAEA,IAAO,oBAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/nextjs",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.1",
   "description": "",
   "private": false,
   "publishConfig": {
@@ -17,14 +17,17 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "jwt-decode": "^4.0.0"
+    "@basictech/react": "0.2.0-beta.1",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.2"
   },
   "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": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
-}
+}

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
+}
+
+