Skip to content

Commit a29a563

Browse files
jherrjherr
committed
chore: fixing remote add-ons
1 parent f8f4bfb commit a29a563

40 files changed

+4286
-388
lines changed

‎examples/ecommerce-starter/starter-info.json

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,12 @@
77
"link": "https://github.com/jane-smith/ecommerce-starter-starter",
88
"command": {},
99
"shadcnComponents": [],
10-
"framework": "react",
11-
"templates": ["file-router"],
10+
"framework": "react-cra",
11+
"mode": "file-router",
1212
"routes": [],
1313
"warning": "",
1414
"variables": {},
1515
"phase": "add-on",
1616
"type": "starter",
17-
"packageAdditions": {
18-
"scripts": {},
19-
"dependencies": {},
20-
"devDependencies": {}
21-
}
17+
"packageAdditions": {}
2218
}

‎examples/legend-state-add-on/.add-on/assets/src/lib/demo-legend-state.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { observable } from "@legendapp/state";
2+
import { ObservablePersistLocalStorage } from "@legendapp/state/persist-plugins/local-storage";
3+
import { syncObservable } from "@legendapp/state/sync";
4+
5+
type Todo = {
6+
id: number;
7+
text: string;
8+
completed: boolean;
9+
};
10+
// Create an observable
11+
export const todos$ = observable<Todo[]>([]);
12+
13+
// Persist the observable
14+
syncObservable(todos$, {
15+
persist: {
16+
name: "demo-legend-state-todos",
17+
plugin: ObservablePersistLocalStorage,
18+
},
19+
});

‎examples/legend-state-add-on/.add-on/assets/src/routes/demo.legend-state.tsx.ejs

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router';
2+
3+
import { todos$ } from "@/lib/demo-legend-state";
4+
import { For, useObservable } from "@legendapp/state/react";
5+
import { $React } from "@legendapp/state/react-web";
6+
7+
<% if (codeRouter) { %>
8+
import type { RootRoute } from '@tanstack/react-router'
9+
<% } else { %>
10+
export const Route = createFileRoute('/demo/legend-state')({
11+
component: LegendStateDemo,
12+
})
13+
<% } %>;
14+
15+
function TodoForm() {
16+
const todoText$ = useObservable("");
17+
const handleSubmit = (e: React.FormEvent) => {
18+
e.preventDefault();
19+
if (todoText$.peek().trim() === "") return;
20+
todos$.push({
21+
id: Date.now(),
22+
text: todoText$.peek().trim(),
23+
completed: false,
24+
});
25+
todoText$.set("");
26+
};
27+
return (
28+
<form onSubmit={handleSubmit}>
29+
<$React.input
30+
placeholder="Add a todo"
31+
type="text"
32+
$value={todoText$}
33+
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 w-full"
34+
/>
35+
</form>
36+
);
37+
}
38+
function TodoList() {
39+
return (
40+
<ul className="space-y-4">
41+
<For each={todos$} optimized>
42+
{(todo) => (
43+
<li
44+
key={todo.id.get()}
45+
className="inline-flex items-center gap-2 justify-between w-full"
46+
>
47+
<span className={todo.completed.get() ? "line-through" : ""}>
48+
{todo.text.get()}
49+
</span>
50+
<span className="flex items-center gap-2 justify-center">
51+
<$React.input
52+
type="checkbox"
53+
$checked={todo.completed}
54+
className="w-6 h-6 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
55+
/>
56+
<button
57+
type="button"
58+
onClick={() =>
59+
todos$.splice(
60+
todos$.findIndex((t) => t.id.get() === todo.id.get()),
61+
1
62+
)
63+
}
64+
className="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
65+
>
66+
Remove
67+
</button>
68+
</span>
69+
</li>
70+
)}
71+
</For>
72+
</ul>
73+
);
74+
}
75+
76+
function LegendStateDemo() {
77+
return (
78+
<div
79+
className="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
80+
style={{
81+
backgroundImage:
82+
"radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)",
83+
}}
84+
>
85+
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl w-5xl">
86+
<h1 className="text-4xl font-bold mb-5">Legend State Example</h1>
87+
<TodoForm />
88+
<TodoList />
89+
</div>
90+
</div>
91+
);
92+
}
93+
94+
<% if (codeRouter) { %>
95+
export default (parentRoute: RootRoute) => createRoute({
96+
path: '/demo/legend-state',
97+
98+
component: LegendStateDemo,
99+
100+
getParentRoute: () => parentRoute,
101+
})
102+
<% } %>

‎examples/legend-state-add-on/.add-on/info.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"id": "legend-state-add-on-add-on",
3+
"name": "legend-state-add-on-add-on",
4+
"version": "0.0.1",
5+
"description": "Add-on",
6+
"author": "Jane Smith <[email protected]>",
7+
"license": "MIT",
8+
"link": "https://github.com/jane-smith/legend-state-add-on-add-on",
9+
"shadcnComponents": [],
10+
"framework": "react-cra",
11+
"modes": ["file-router"],
12+
"routes": [
13+
{
14+
"url": "/demo/legend-state",
15+
"name": "legend-state",
16+
"jsName": "LegendState",
17+
"path": "./src/routes/demo.legend-state.tsx"
18+
}
19+
],
20+
"warning": "",
21+
"phase": "add-on",
22+
"type": "add-on",
23+
"packageAdditions": {
24+
"dependencies": {
25+
"@legendapp/state": "3.0.0-beta.30"
26+
}
27+
},
28+
"dependsOn": []
29+
}

‎examples/legend-state-add-on/.cta.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"projectName": "legend-state-add-on",
3+
"mode": "file-router",
4+
"typescript": true,
5+
"tailwind": true,
6+
"packageManager": "pnpm",
7+
"git": true,
8+
"targetDir": "/Users/jherr/projects/cta/legend-state-add-on",
9+
"version": 1,
10+
"framework": "react-cra",
11+
"existingAddOns": []
12+
}

‎examples/legend-state-add-on/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

0 commit comments

Comments
 (0)