Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions apps/create-hypergraph-app/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2024-present Geo Browser, PB LLC and other contributors

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.
42 changes: 42 additions & 0 deletions apps/create-hypergraph-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# @graphprotocol/create-hypergraph-app

CLI toolchain to scaffold a [Hypergraph-enabled](https://github.com/graphprotocol/hypergraph) application with a given template.

Inspiration takes from the `vite`, `nextjs`, and `effect` create app command tools.

## Scaffolding a hypergraph app

With NPM:

```bash
npm create hypergraph-app@latest
```

With Yarn:

```bash
yarn create hypergraph-app
```

With PNPM:

```bash
pnpm create hypergraph-app@latest
```

With Bun:

```bash
bun create hypergraph-app
```

Then follow the given prompts.

### Currently Supported Templates

- vite + react

## References

- [create vite app](https://github.com/vitejs/vite/tree/main/packages/create-vite)
- [create effect app](https://effect.website/docs/getting-started/create-effect-app/)
30 changes: 30 additions & 0 deletions apps/create-hypergraph-app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@graphprotocol/create-hypergraph-app",
"version": "0.0.1",
"description": "CLI toolchain to scaffold a hypergraph-enabled application with a given template.",
"type": "module",
"bin": {
"create-hypergraph-app": "dist/bin.js",
"cha": "dist/bin.js"
},
"files": ["dist", "template-*"],
"repository": {
"type": "git",
"url": "git+https://github.com/graphprotocol/hypergraph.git",
"directory": "apps/create-hypergraph-app"
},
"publishConfig": {
"access": "public",
"directory": "dist",
"linkDirectory": false
},
"keywords": ["The Graph", "Web3", "Knowledge Graph", "Hypergraph", "TypeSyncs"],
"license": "MIT",
"engines": {
"node": ">=20"
},
"bugs": {
"url": "https://github.com/graphprotocol/hypergraph/issues"
},
"homepage": "https://github.com/graphprotocol/hypergraph/tree/main/apps/create-hypergraph-app#readme"
}
24 changes: 24 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Ignore artifacts:
build
dist
4 changes: 4 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"printWidth": 120
}
3 changes: 3 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/README.md
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to add more to this about how to interact with the schema.ts file/hypergraph. Will think on it. Will also add notes on using the typesync studio, once it is ready

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good idea 👍

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Hypergraph + Vite + React

This template is a minimal setup for a [Hypergraph](https://github.com/graphprotocol/hypergraph) app using Vite and React.
21 changes: 21 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
28 changes: 28 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
13 changes: 13 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hypergraph App Template | Vite + React</title>
<link rel="icon" type="image/svg+xml" href="/hypergraph.svg" />
</head>
<body class="h-full w-full">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions apps/create-hypergraph-app/template-vite-react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"private": true,
"name": "hypergraph-vite-react-template",
"description": "A template for a Hypergraph app using vite+react",
"version": "v1.0.0",
"type": "module",
"scripts": {
"build": "tsc -b && vite build",
"dev": "vite --force",
"preview": "vite preview",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@graphprotocol/grc-20": "^0.21.6",
"@graphprotocol/hypergraph": "0.0.14",
"@graphprotocol/hypergraph-react": "0.0.14",
"@graphprotocol/typesync": "^0.0.3",
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-tooltip": "^1.2.7",
"@tailwindcss/vite": "^4.1.11",
"@tanstack/react-query": "^5.83.0",
"@tanstack/react-router": "^1.129.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"effect": "^3.17.0",
"lucide-react": "^0.525.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.1.11",
"vite": "^7.0.5"
},
"devDependencies": {
"@eslint/js": "^9.31.0",
"@tanstack/router-plugin": "^1.129.2",
"@types/node": "^24.0.15",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.7.0",
"eslint": "^9.31.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.3.0",
"prettier": "^3.6.2",
"tw-animate-css": "^1.3.5",
"typescript": "~5.8.3",
"typescript-eslint": "^8.38.0"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-react';
import { useRouter } from '@tanstack/react-router';

export function Logout() {
const { logout } = useHypergraphApp();
const { authenticated } = useHypergraphAuth();
const router = useRouter();

const handleLogout = () => {
logout();
router.navigate({
to: '/login',
});
};

return (
<button type="button" onClick={handleLogout} disabled={!authenticated}>
Logout
</button>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { Button } from '@/components/ui/button';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { TooltipProvider } from '@/components/ui/tooltip';
import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-react';
import { Link, useRouter } from '@tanstack/react-router';
import { SpacesMenu } from './spaces-menu';

export function Navbar() {
const { authenticated } = useHypergraphAuth();
const { redirectToConnect, logout } = useHypergraphApp();
const router = useRouter();

const handleSignIn = () => {
redirectToConnect({
storage: localStorage,
connectUrl: 'https://hypergraph-connect.vercel.app/',
successUrl: `${window.location.origin}/authenticate-success`,
appId: '93bb8907-085a-4a0e-83dd-62b0dc98e793',
redirectFn: (url: URL) => {
window.location.href = url.toString();
},
});
};

const handleLogout = () => {
logout();
router.navigate({
to: '/login',
});
};

return (
<TooltipProvider>
<nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 relative z-[9998]">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
<NavigationMenu viewport={false}>
<NavigationMenuList>
<NavigationMenuItem>
<Link to="/">
<NavigationMenuLink className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1">
Home
</NavigationMenuLink>
</Link>
</NavigationMenuItem>

<NavigationMenuItem>
<Link to="/explore-public-knowledge">
<NavigationMenuLink className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1">
Explore Public Knowledge
</NavigationMenuLink>
</Link>
</NavigationMenuItem>

<NavigationMenuItem>
<NavigationMenuTrigger>My Spaces</NavigationMenuTrigger>
{authenticated ? (
<SpacesMenu />
) : (
<NavigationMenuContent>
<div className="w-[240px] py-4 text-center text-muted-foreground">
<p>
Sign in to access your
<br />
private and public spaces
</p>
</div>
</NavigationMenuContent>
)}
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>

{/* Auth Button */}
<div className="flex items-center space-x-4">
{authenticated ? (
<Button onClick={handleLogout} variant="outline">
Logout
</Button>
) : (
<Button onClick={handleSignIn}>Sign in with Geo Connect</Button>
)}
</div>
</div>
</div>
</nav>
</TooltipProvider>
);
}
Loading
Loading