nextgraph-react

helpers/nextgraph-react/LICENSE-APACHE2

@@ -0,0 +1,16 @@
+Apache 2.0 License
+
+Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

helpers/nextgraph-react/LICENSE-MIT

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+All rights reserved.
+
+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.

helpers/nextgraph-react/README.md

@@ -0,0 +1,4 @@
+# nextgraph-react
+
+`nextgraph-react` provides tool and hooks for authentication with a NextGraph Wallet, LDO and React.
+

helpers/nextgraph-react/dist/esm/NextGraphAuthContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+// There is no initial value for this context. It will be given in the provider
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const NextGraphAuthContext = createContext(undefined);
+export function useNextGraphAuth() {
+    return useContext(NextGraphAuthContext);
+}
+//# sourceMappingURL=NextGraphAuthContext.js.map

helpers/nextgraph-react/dist/esm/NextGraphAuthContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextGraphAuthContext.js","sourceRoot":"","sources":["../../src/NextGraphAuthContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYlD,+EAA+E;AAC/E,6DAA6D;AAC7D,aAAa;AACb,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAwB,SAAS,CAAC,CAAC;AAEpF,MAAM,UAAU,gBAAgB;IAC5B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC5C,CAAC"}

helpers/nextgraph-react/dist/esm/createBrowserNGReactMethods.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { NextGraphAuthContext, useNextGraphAuth } from "./NextGraphAuthContext.js";
+import { default as ng, init } from "nextgraphweb";
+/**
+ * Creates special react methods specific to the NextGraph Auth
+ * @param dataset the connectedLdoDataset with a nextGraphConnectedPlugin
+ * @returns { BrowserNGLdoProvider, useNextGraphAuth }
+ */
+export function createBrowserNGReactMethods(dataset) {
+    const BrowserNGLdoProvider = ({ children, }) => {
+        const [session, setSession] = useState({
+            ng: undefined,
+        });
+        const [ranInitialAuthCheck, setRanInitialAuthCheck] = useState(false);
+        const runInitialAuthCheck = useCallback(async () => {
+            //console.log("runInitialAuthCheck called", ranInitialAuthCheck)
+            if (ranInitialAuthCheck)
+                return;
+            //console.log("init called");
+            setRanInitialAuthCheck(true);
+            // TODO: export the types for the session object coming from NG.
+            await init((event) => {
+                //console.log("called back in react", event)
+                // callback
+                // once you receive event.status == "loggedin"
+                // you can use the full API
+                if (event.status == "loggedin") {
+                    setSession({
+                        ng,
+                        sessionId: event.session.session_id, //FIXME: sessionId should be a Number.
+                        protectedStoreId: event.session.protected_store_id,
+                        privateStoreId: event.session.private_store_id,
+                        publicStoreId: event.session.public_store_id
+                    }); // TODO: add event.session.user too
+                    dataset.setContext("nextgraph", {
+                        ng,
+                        sessionId: event.session.session_id
+                    });
+                }
+                else if (event.status == "cancelled" || event.status == "error" || event.status == "loggedout") {
+                    setSession({ ng: undefined });
+                    dataset.setContext("nextgraph", {
+                        ng: undefined,
+                    });
+                }
+            }, true // singleton: boolean (will your app create many docs in the system, or should it be launched as a unique instance)
+            , []); //list of AccessRequests (for now, leave this empty)
+        }, []);
+        const login = useCallback(async () => {
+            await ng.login();
+        }, []);
+        const logout = useCallback(async () => {
+            await ng.logout();
+        }, []);
+        useEffect(() => {
+            runInitialAuthCheck();
+        }, []);
+        const nextGraphAuthFunctions = useMemo(() => ({
+            runInitialAuthCheck,
+            login,
+            logout,
+            session,
+            ranInitialAuthCheck,
+        }), [
+            login,
+            logout,
+            ranInitialAuthCheck,
+            runInitialAuthCheck,
+            session,
+        ]);
+        return (_jsx(NextGraphAuthContext.Provider, { value: nextGraphAuthFunctions, children: children }));
+    };
+    return {
+        BrowserNGLdoProvider,
+        useNextGraphAuth: useNextGraphAuth
+    };
+}
+;
+//# sourceMappingURL=createBrowserNGReactMethods.js.map

helpers/nextgraph-react/dist/esm/createBrowserNGReactMethods.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBrowserNGReactMethods.js","sourceRoot":"","sources":["../../src/createBrowserNGReactMethods.tsx"],"names":[],"mappings":"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"}

helpers/nextgraph-react/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./createBrowserNGReactMethods.js";
+//# sourceMappingURL=index.js.map

helpers/nextgraph-react/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

helpers/nextgraph-react/dist/types/NextGraphAuthContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Functions for authenticating with NextGraph
+ */
+export interface NGWalletAuthFunctions {
+    login: () => Promise<void>;
+    logout: () => Promise<void>;
+    session: unknown;
+    ranInitialAuthCheck: boolean;
+}
+export declare const NextGraphAuthContext: import("react").Context<NGWalletAuthFunctions>;
+export declare function useNextGraphAuth(): NGWalletAuthFunctions;
+//# sourceMappingURL=NextGraphAuthContext.d.ts.map

helpers/nextgraph-react/dist/types/NextGraphAuthContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextGraphAuthContext.d.ts","sourceRoot":"","sources":["../../src/NextGraphAuthContext.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAKD,eAAO,MAAM,oBAAoB,gDAAkD,CAAC;AAEpF,wBAAgB,gBAAgB,IAAI,qBAAqB,CAExD"}

helpers/nextgraph-react/dist/types/createBrowserNGReactMethods.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { useNextGraphAuth } from "./NextGraphAuthContext.js";
+import type { ConnectedLdoDataset, ConnectedPlugin } from "@ldo/connected";
+import type { NextGraphConnectedPlugin } from "@ldo/connected-nextgraph";
+/**
+ * Creates special react methods specific to the NextGraph Auth
+ * @param dataset the connectedLdoDataset with a nextGraphConnectedPlugin
+ * @returns { BrowserNGLdoProvider, useNextGraphAuth }
+ */
+export declare function createBrowserNGReactMethods(dataset: ConnectedLdoDataset<(NextGraphConnectedPlugin | ConnectedPlugin)[]>): {
+    BrowserNGLdoProvider: React.FunctionComponent<{
+        children?: React.ReactNode | undefined;
+    }>;
+    useNextGraphAuth: typeof useNextGraphAuth;
+};
+//# sourceMappingURL=createBrowserNGReactMethods.d.ts.map

helpers/nextgraph-react/dist/types/createBrowserNGReactMethods.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBrowserNGReactMethods.d.ts","sourceRoot":"","sources":["../../src/createBrowserNGReactMethods.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAwB,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAInF,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,KAAK,EAAE,wBAAwB,EAA6B,MAAM,0BAA0B,CAAC;AAEpG;;;;GAIG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,mBAAmB,CAAC,CAAC,wBAAwB,GAAG,eAAe,CAAC,EAAE,CAAC;;;;;EAgG7E"}

helpers/nextgraph-react/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./createBrowserNGReactMethods.js";
+//# sourceMappingURL=index.d.ts.map

helpers/nextgraph-react/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

helpers/nextgraph-react/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "nextgraph-react",
+  "version": "0.1.1-alpha.1",
+  "description": "A React library for LDO and NextGraph",
+  "type": "module",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rimraf dist && npm run build:esm",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "test": "vitest run --coverage",
+    "prepublishOnly": " npm run build",
+    "lint": "eslint src/** --fix --no-error-on-unmatched-pattern"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.nextgraph.org/NextGraph/nextgraph-rs"
+  },
+  "collaborators": [
+    "Niko PLP <niko@nextgraph.org>"
+  ],
+  "license": "MIT/Apache-2.0",
+  "homepage": "https://nextgraph.org",
+  "author": "Niko PLP",
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@ldo/rdf-utils": "^1.0.0-alpha.11",
+    "@rdfjs/types": "^1.0.1",
+    "@testing-library/react": "^14.1.2",
+    "start-server-and-test": "^2.0.3",
+    "whatwg-fetch": "^3.6.20",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@ldo/connected": "^1.0.0-alpha.15",
+    "@ldo/connected-nextgraph": "^1.0.0-alpha.15",
+    "nextgraphweb": "^0.1.1-alpha.4",
+    "@ldo/react": "^1.0.0-alpha.15",
+    "@rdfjs/data-model": "^1.2.0",
+    "cross-fetch": "^3.1.6"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

helpers/nextgraph-react/src/createBrowserNGReactMethods.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { FunctionComponent, PropsWithChildren } from "react";
-import { NextGraphAuthContext, useNextGraphAuth } from "./NextGraphAuthContext";
+import { NextGraphAuthContext, useNextGraphAuth } from "./NextGraphAuthContext.js";
 
 import {default as ng, init} from "nextgraphweb";
 

helpers/nextgraph-react/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./createBrowserNGReactMethods.js";
+

helpers/nextgraph-react/tsconfig.esm.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "NodeNext",
+    "lib": [
+      "ES2021"
+    ],
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/types",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "nodenext",
+    "declaration": true,
+    "declarationMap": true,
+    "isolatedModules": true,
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/dist",
+    "**/coverage",
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ]
+}

helpers/nextgraph-react/vitest.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    coverage: {
+      provider: "istanbul",
+    },
+  },
+});

ng-sdk-js/example-webapp-react-socialquery/src/Contact.tsx

@@ -45,7 +45,6 @@ export const Contact: FunctionComponent = ({nuri}) => {
   const [skills, setSkills] = React.useState([ 0, 0, 0, 0, 0, 0, 0, 0, 0 ]);
 
   React.useEffect(() => {
-    //contact.hasRating?.map((r)=> {if (r.skill) console.log(r.rated,r.skill["@id"].substring(24))});
     let nextSkills = skills.map((s) => {
       return 0;
     });

ng-sdk-js/example-webapp-react-socialquery/src/Contacts.tsx

@@ -14,7 +14,6 @@ export const Contacts: FunctionComponent = () => {
 
   useResource(session.sessionId ? "did:ng:"+session.privateStoreId : undefined, { subscribe: true });
   let myContainer = useSubject(ContainerShapeType, session.sessionId ? "did:ng:"+(session.privateStoreId.substring(0,46)) : undefined);
-  //console.log(myContainer.contains?.toJSON())
   if (session.sessionId) {
     container_overlay = session.privateStoreId.substring(46) as string;
   }

ng-sdk-js/example-webapp-react-socialquery/src/MakeContact.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, FunctionComponent, useCallback, useState } from "react";
-import { useLdo, dataset } from './reactMethods';
+import { useLdo, dataset, useNextGraphAuth } from './reactMethods';
 import { SocialContactShapeType } from "./.ldo/contact.shapeTypes.ts";
 
 export const MakeContact: FunctionComponent = () => {
@@ -7,6 +7,7 @@ export const MakeContact: FunctionComponent = () => {
   const [email, setEmail] = useState("");
 
   const { createData, commitData } = useLdo();
+  const { session } = useNextGraphAuth();
   
   const onSubmit = useCallback(
     async (e: FormEvent<HTMLFormElement>) => {
@@ -16,7 +17,7 @@ export const MakeContact: FunctionComponent = () => {
       if (new_name.trim().length > 2 && new_email.trim().length > 6 && new_email.indexOf("@") >= 0) { 
         setName("");
         setEmail("");
-        const resource = await dataset.createResource("nextgraph");
+        const resource = await dataset.createResource("nextgraph", { primaryClass: "social:contact" });
         if (!resource.isError) {
           //console.log("Created resource:", resource.uri);
 
@@ -33,6 +34,7 @@ export const MakeContact: FunctionComponent = () => {
           if (result.isError) {
               console.error(result.message);
           }
+          await session.ng.update_header(session.sessionId, resource.uri.substring(0,53), new_name);
         }
       }
     },

ng-sdk-js/example-webapp-react-socialquery/src/main.tsx

@@ -1,10 +1,9 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('app')!).render(
-  // <StrictMode>
+
     <App />
-  // </StrictMode>,
+
 )

ng-sdk-js/example-webapp-react-socialquery/src/reactMethods.ts

@@ -1,6 +1,6 @@
 import { nextGraphConnectedPlugin } from "@ldo/connected-nextgraph";
 import { createLdoReactMethods } from "@ldo/react";
-import { createBrowserNGReactMethods } from "./createBrowserNGReactMethods";
+import { createBrowserNGReactMethods } from "nextgraph-react";
 
 export const {
   dataset,