Store demo page update

Author: jherr

templates/react/add-on/store/assets/src/lib/demo-store.ts

@@ -1,5 +1,13 @@
-import { Store } from '@tanstack/store'
+import { Derived, Store } from '@tanstack/store'
 
 export const store = new Store({
-  count: 0,
+  firstName: 'Jane',
+  lastName: 'Smith',
 })
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()

templates/react/add-on/store/assets/src/routes/demo.store.page1.tsx.ejs

@@ -0,0 +1,75 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+
+import { fullName, store } from '../lib/demo-store'
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/store')({
+  component: DemoStore,
+})
+<% } %>
+
+function FirstName() {
+  const firstName = useStore(store, (state) => state.firstName)
+  return (
+    <input
+      type="text"
+      value={firstName}
+      onChange={(e) =>
+        store.setState((state) => ({ ...state, firstName: e.target.value }))
+      }
+      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function LastName() {
+  const lastName = useStore(store, (state) => state.lastName)
+  return (
+    <input
+      type="text"
+      value={lastName}
+      onChange={(e) =>
+        store.setState((state) => ({ ...state, lastName: e.target.value }))
+      }
+      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function FullName() {
+  const fName = useStore(fullName)
+  return (
+    <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+      {fName}
+    </div>
+  )
+}
+
+function DemoStore() {
+  return (
+    <div
+      className="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
+        <h1 className="text-4xl font-bold mb-5">Store Example</h1>
+        <FirstName />
+        <LastName />
+        <FullName />
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store',
+  component: DemoStore,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

templates/react/add-on/store/assets/src/routes/demo.store.page2.tsx.ejs

@@ -6,12 +6,8 @@
   "templates": ["file-router", "code-router"],
   "routes": [
     {
-      "url": "/demo/store/page1",
-      "name": "Store Pg 1"
-    },
-    {
-      "url": "/demo/store/page2",
-      "name": "Store Pg 2"
+      "url": "/demo/store",
+      "name": "Store"
     }
   ]
 }