Skip to content

Commit 8d1d291

Browse files
nikgrafnikgraf
committed
add tinybase
1 parent 2cc1c84 commit 8d1d291

File tree

18 files changed

+2336
-36
lines changed

18 files changed

+2336
-36
lines changed

‎apps/events/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"react": "^18.3.1",
2222
"react-dom": "^18.3.1",
2323
"tailwind-merge": "^2.5.2",
24-
"tailwindcss-animate": "^1.0.7"
24+
"tailwindcss-animate": "^1.0.7",
25+
"tinybase": "^5.3.0"
2526
},
2627
"devDependencies": {
2728
"@eslint/js": "^9.9.0",

‎apps/events/src/App.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
transition: filter 300ms;
13+
}
14+
.logo:hover {
15+
filter: drop-shadow(0 0 2em #646cffaa);
16+
}
17+
.logo.react:hover {
18+
filter: drop-shadow(0 0 2em #61dafbaa);
19+
}
20+
21+
@keyframes logo-spin {
22+
from {
23+
transform: rotate(0deg);
24+
}
25+
to {
26+
transform: rotate(360deg);
27+
}
28+
}
29+
30+
@media (prefers-reduced-motion: no-preference) {
31+
a:nth-of-type(2) .logo {
32+
animation: logo-spin infinite 20s linear;
33+
}
34+
}
35+
36+
.card {
37+
padding: 2em;
38+
}
39+
40+
.read-the-docs {
41+
color: #888;
42+
}

‎apps/events/src/App.tsx‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,48 @@
11
import { hello } from "graph-framework";
2-
import { Page } from "./components/app-events-page";
2+
import { createStore } from "tinybase";
3+
import { Provider, useCreateStore } from "tinybase/ui-react";
4+
import { Inspector } from "tinybase/ui-react-inspector";
5+
import { EventsPage } from "./components/events-page";
36

47
export function App() {
5-
return (
6-
<>
7-
<p>{hello()}</p>
8+
const store = useCreateStore(() => {
9+
// Create the TinyBase Store and initialize the Store's data
10+
return createStore()
11+
.setTable("spaces", {
12+
abc: { name: "GeoBrowser" },
13+
})
14+
.setTable("events", {
15+
"6ea749ab": {
16+
name: "Tech Conference 2023",
17+
date: "2023-09-15",
18+
location: "San Francisco, CA",
19+
description:
20+
"Join us for the biggest tech conference of the year, featuring keynote speakers from leading tech companies.",
21+
},
22+
ef9ae3d7: {
23+
name: "Music Festival",
24+
date: "2023-10-01",
25+
location: "Austin, TX",
26+
description:
27+
"A three-day music extravaganza featuring top artists from around the world.",
28+
},
29+
"607f12a6": {
30+
name: "Food & Wine Expo",
31+
date: "2023-11-05",
32+
location: "New York, NY",
33+
description:
34+
"Explore culinary delights and fine wines from renowned chefs and vintners.",
35+
},
36+
});
37+
});
838

9-
<Page />
10-
</>
39+
return (
40+
<Provider store={store}>
41+
<>
42+
<p>{hello()}</p>
43+
<EventsPage />
44+
</>
45+
<Inspector />
46+
</Provider>
1147
);
1248
}

‎apps/events/src/components/app-events-page.tsx‎ renamed to ‎apps/events/src/components/events-page.tsx‎

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,10 @@ import {
99
CardHeader,
1010
CardTitle,
1111
} from "@/components/ui/card";
12+
import { useTable } from "tinybase/ui-react";
1213

13-
export function Page() {
14-
const events = [
15-
{
16-
id: 1,
17-
name: "Tech Conference 2023",
18-
date: "2023-09-15",
19-
location: "San Francisco, CA",
20-
description:
21-
"Join us for the biggest tech conference of the year, featuring keynote speakers from leading tech companies.",
22-
},
23-
{
24-
id: 2,
25-
name: "Music Festival",
26-
date: "2023-10-01",
27-
location: "Austin, TX",
28-
description:
29-
"A three-day music extravaganza featuring top artists from around the world.",
30-
},
31-
{
32-
id: 3,
33-
name: "Food & Wine Expo",
34-
date: "2023-11-05",
35-
location: "New York, NY",
36-
description:
37-
"Explore culinary delights and fine wines from renowned chefs and vintners.",
38-
},
39-
];
14+
export function EventsPage() {
15+
const events = useTable("events");
4016

4117
return (
4218
<div className="flex flex-col min-h-screen">
@@ -73,8 +49,8 @@ export function Page() {
7349
Upcoming Events
7450
</h1>
7551
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
76-
{events.map((event) => (
77-
<Card key={event.id}>
52+
{Object.entries(events).map(([id, event]) => (
53+
<Card key={id}>
7854
<CardHeader>
7955
<CardTitle>{event.name}</CardTitle>
8056
<CardDescription>

‎apps/my-tinybase-app/.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
logs
2+
*.log
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*
6+
pnpm-debug.log*
7+
lerna-debug.log*
8+
9+
node_modules
10+
dist
11+
dist-ssr
12+
*.local
13+
14+
.vscode/*
15+
!.vscode/extensions.json
16+
.idea
17+
.DS_Store
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎apps/my-tinybase-app/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# vite-tinybase-ts-react
2+
3+
This is a [Vite](https://vitejs.dev/) template for a simple
4+
[TinyBase](https://tinybase.org/) app, using TypeScript and React, and also
5+
demonstrating the TinyBase ui-react-dom module UI components.
6+
7+
<img width="847" alt="image" src="https://github.com/user-attachments/assets/cbc29a9f-7b26-4018-8359-e08706a31704">
8+
9+
## Instructions
10+
11+
1. Make a copy of this template into a new directory:
12+
13+
```sh
14+
npx tiged tinyplex/vite-tinybase-ts-react my-tinybase-app
15+
```
16+
17+
2. Go into the directory:
18+
19+
```sh
20+
cd my-tinybase-app
21+
```
22+
23+
3. Install the dependencies:
24+
25+
```sh
26+
npm install
27+
```
28+
29+
4. Run the application:
30+
31+
```sh
32+
npm run dev
33+
```
34+
35+
5. Go the URL shown and enjoy!
36+
37+
## Other templates
38+
39+
There are ten templates for TinyBase, of which this is one:
40+
41+
| | Template | Language | React | Plus |
42+
| --- | ---------------------------------------------------------------------------------------------- | ---------- | ----- | ------------------- |
43+
| | [vite-tinybase](https://github.com/tinyplex/vite-tinybase) | JavaScript | No | |
44+
| | [vite-tinybase-ts](https://github.com/tinyplex/vite-tinybase-ts) | TypeScript | No | |
45+
| | [vite-tinybase-react](https://github.com/tinyplex/vite-tinybase-react) | JavaScript | Yes | |
46+
| 👉 | [vite-tinybase-ts-react](https://github.com/tinyplex/vite-tinybase-ts-react) | TypeScript | Yes | |
47+
| | [vite-tinybase-ts-react-sync](https://github.com/tinyplex/vite-tinybase-ts-react-sync) | TypeScript | Yes | Synchronization |
48+
| | [vite-tinybase-ts-react-pglite](https://github.com/tinyplex/vite-tinybase-ts-react-pglite) | TypeScript | Yes | PGlite |
49+
| | [vite-tinybase-ts-react-crsqlite](https://github.com/tinyplex/vite-tinybase-ts-react-crsqlite) | TypeScript | Yes | CR-SQLite |
50+
| | [tinybase-ts-react-partykit](https://github.com/tinyplex/tinybase-ts-react-partykit) | TypeScript | Yes | PartyKit |
51+
| | [tinybase-ts-react-electricsql](https://github.com/tinyplex/tinybase-ts-react-electricsql) | TypeScript | Yes | ElectricSQL |
52+
| | [expo/examples/with-tinybase](https://github.com/expo/examples/tree/master/with-tinybase) | JavaScript | Yes | React Native & Expo |
53+
54+
## License
55+
56+
This template has no license, and so you can use it however you want!
57+
[TinyBase](https://github.com/tinyplex/tinybase/blob/main/LICENSE) and
58+
[Vite](https://github.com/vitejs/vite/blob/main/LICENSE) themselves are both MIT
59+
licensed.

‎apps/my-tinybase-app/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
11+
/>
12+
<title>A TinyBase App</title>
13+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/src/index.tsx"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)