add tinybase

Author: nikgraf

apps/events/package.json

@@ -21,7 +21,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tinybase": "^5.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

apps/events/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

apps/events/src/App.tsx

@@ -1,12 +1,58 @@
 import { hello } from "graph-framework";
-import { Page } from "./components/app-events-page";
+import { useEffect } from "react";
+import { createStore } from "tinybase";
+import { Provider, useCreateStore } from "tinybase/ui-react";
+import { Inspector } from "tinybase/ui-react-inspector";
+import { EventsPage } from "./components/events-page";
 
 export function App() {
-  return (
-    <>
-      <p>{hello()}</p>
+  const store = useCreateStore(() => {
+    // Create the TinyBase Store and initialize the Store's data
+    return createStore()
+      .setTable("spaces", {
+        abc: { name: "GeoBrowser" },
+      })
+      .setTable("events", {
+        "6ea749ab": {
+          name: "Tech Conference 2023",
+          date: "2023-09-15",
+          location: "San Francisco, CA",
+          description:
+            "Join us for the biggest tech conference of the year, featuring keynote speakers from leading tech companies.",
+        },
+        ef9ae3d7: {
+          name: "Music Festival",
+          date: "2023-10-01",
+          location: "Austin, TX",
+          description:
+            "A three-day music extravaganza featuring top artists from around the world.",
+        },
+        "607f12a6": {
+          name: "Food & Wine Expo",
+          date: "2023-11-05",
+          location: "New York, NY",
+          description:
+            "Explore culinary delights and fine wines from renowned chefs and vintners.",
+        },
+      });
+  });
+
+  useEffect(() => {
+    const listenerId = store.addTablesListener((a, b) =>
+      console.log("Tables changed!", a, b)
+    );
+    return () => {
+      store.delListener(listenerId);
+    };
+  }, []);
 
-      <Page />
-    </>
+  return (
+    <Provider store={store}>
+      <>
+        <p>{hello()}</p>
+        <EventsPage />
+      </>
+      <Inspector />
+    </Provider>
   );
 }

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

@@ -9,34 +9,17 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useAddRowCallback, useTable } from "tinybase/ui-react";
 
-export function Page() {
-  const events = [
-    {
-      id: 1,
-      name: "Tech Conference 2023",
-      date: "2023-09-15",
-      location: "San Francisco, CA",
-      description:
-        "Join us for the biggest tech conference of the year, featuring keynote speakers from leading tech companies.",
-    },
-    {
-      id: 2,
-      name: "Music Festival",
-      date: "2023-10-01",
-      location: "Austin, TX",
-      description:
-        "A three-day music extravaganza featuring top artists from around the world.",
-    },
-    {
-      id: 3,
-      name: "Food & Wine Expo",
-      date: "2023-11-05",
-      location: "New York, NY",
-      description:
-        "Explore culinary delights and fine wines from renowned chefs and vintners.",
-    },
-  ];
+export function EventsPage() {
+  const events = useTable("events");
+
+  const addEvent = useAddRowCallback("events", () => ({
+    name: "New Event",
+    date: "2023-12-31",
+    location: "New York, NY",
+    description: "A new event",
+  }));
 
   return (
     <div className="flex flex-col min-h-screen">
@@ -72,15 +55,25 @@ export function Page() {
             <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none mb-8">
               Upcoming Events
             </h1>
+            <Button
+              onClick={() => {
+                addEvent();
+              }}
+            >
+              Add Event
+            </Button>
             <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {events.map((event) => (
-                <Card key={event.id}>
+              {Object.entries(events).map(([id, event]) => (
+                <Card key={id}>
                   <CardHeader>
                     <CardTitle>{event.name}</CardTitle>
                     <CardDescription>
                       <div className="flex items-center mt-2">
                         <CalendarDays className="mr-2 h-4 w-4" />
-                        {new Date(event.date).toLocaleDateString()}
+                        {
+                          // @ts-expect-error tinybase types issue
+                          new Date(event.date).toLocaleDateString()
+                        }
                       </div>
                       <div className="flex items-center mt-2">
                         <MapPin className="mr-2 h-4 w-4" />