Skip to content

Commit b732a4a

Browse files
jlowinjlowin
authored
Overhaul apps docs (#3915)
1 parent 5c2ff1b commit b732a4a

36 files changed

Lines changed: 3567 additions & 1295 deletions

‎docs/apps/architecture.mdx‎

Lines changed: 48 additions & 49 deletions
Large diffs are not rendered by default.

‎docs/apps/demos/bar-chart.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Prefab</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
8+
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
9+
</head>
10+
<body>
11+
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
12+
<script id="prefab:initial-data" type="application/json">{
13+
"$prefab": {
14+
"version": "0.2"
15+
},
16+
"view": {
17+
"cssClass": "pf-app-root",
18+
"type": "Div",
19+
"children": [
20+
{
21+
"cssClass": "p-6",
22+
"type": "Column",
23+
"children": [
24+
{
25+
"type": "BarChart",
26+
"data": [
27+
{
28+
"quarter": "Q1",
29+
"revenue": 42000,
30+
"costs": 28000
31+
},
32+
{
33+
"quarter": "Q2",
34+
"revenue": 51000,
35+
"costs": 31000
36+
},
37+
{
38+
"quarter": "Q3",
39+
"revenue": 47000,
40+
"costs": 29000
41+
},
42+
{
43+
"quarter": "Q4",
44+
"revenue": 63000,
45+
"costs": 35000
46+
}
47+
],
48+
"series": [
49+
{
50+
"dataKey": "revenue",
51+
"label": "Revenue"
52+
},
53+
{
54+
"dataKey": "costs",
55+
"label": "Costs"
56+
}
57+
],
58+
"xAxis": "quarter",
59+
"height": 250,
60+
"stacked": false,
61+
"horizontal": false,
62+
"barRadius": 4,
63+
"showLegend": true,
64+
"showTooltip": true,
65+
"animate": true,
66+
"showGrid": true,
67+
"showYAxis": true,
68+
"yAxisFormat": "auto"
69+
}
70+
]
71+
}
72+
]
73+
}
74+
}</script>
75+
</body>
76+
</html>

‎docs/apps/demos/bar-chart.py‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
from prefab_ui.app import PrefabApp
2+
from prefab_ui.components import Column
3+
from prefab_ui.components.charts import BarChart, ChartSeries
4+
5+
data = [
6+
{"quarter": "Q1", "revenue": 42000, "costs": 28000},
7+
{"quarter": "Q2", "revenue": 51000, "costs": 31000},
8+
{"quarter": "Q3", "revenue": 47000, "costs": 29000},
9+
{"quarter": "Q4", "revenue": 63000, "costs": 35000},
10+
]
11+
12+
with PrefabApp() as app:
13+
with Column(css_class="p-6"):
14+
BarChart(
15+
data=data,
16+
series=[
17+
ChartSeries(data_key="revenue", label="Revenue"),
18+
ChartSeries(data_key="costs", label="Costs"),
19+
],
20+
x_axis="quarter",
21+
show_legend=True,
22+
height=250,
23+
)

‎docs/apps/demos/contacts.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Prefab</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
8+
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
9+
</head>
10+
<body>
11+
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
12+
<script id="prefab:initial-data" type="application/json">{
13+
"$prefab": {
14+
"version": "0.2"
15+
},
16+
"view": {
17+
"cssClass": "pf-app-root",
18+
"type": "Div",
19+
"children": [
20+
{
21+
"cssClass": "gap-4 p-6",
22+
"type": "Column",
23+
"children": [
24+
{
25+
"type": "DataTable",
26+
"columns": [
27+
{
28+
"key": "name",
29+
"header": "Name",
30+
"sortable": true
31+
},
32+
{
33+
"key": "email",
34+
"header": "Email",
35+
"sortable": false
36+
},
37+
{
38+
"key": "category",
39+
"header": "Category",
40+
"sortable": false
41+
}
42+
],
43+
"rows": [
44+
{
45+
"name": "Arthur Dent",
46+
"email": "arthur@earth.com",
47+
"category": {
48+
"type": "Badge",
49+
"label": "Customer",
50+
"variant": "success"
51+
}
52+
},
53+
{
54+
"name": "Ford Prefect",
55+
"email": "ford@betelgeuse.org",
56+
"category": {
57+
"type": "Badge",
58+
"label": "Partner",
59+
"variant": "secondary"
60+
}
61+
},
62+
{
63+
"name": "Trillian Astra",
64+
"email": "trillian@heartofgold.com",
65+
"category": {
66+
"type": "Badge",
67+
"label": "Customer",
68+
"variant": "success"
69+
}
70+
},
71+
{
72+
"name": "Zaphod Beeblebrox",
73+
"email": "zaphod@galaxy.gov",
74+
"category": {
75+
"type": "Badge",
76+
"label": "Vendor",
77+
"variant": "outline"
78+
}
79+
}
80+
],
81+
"search": true,
82+
"paginated": false,
83+
"pageSize": 10
84+
},
85+
{
86+
"type": "Separator",
87+
"orientation": "horizontal"
88+
},
89+
{
90+
"content": "Add Contact",
91+
"type": "H3"
92+
},
93+
{
94+
"cssClass": "gap-4",
95+
"type": "Form",
96+
"onSubmit": {
97+
"action": "showToast",
98+
"message": "Contact saved! (preview demo \u2014 no backend wired)",
99+
"variant": "success"
100+
},
101+
"children": [
102+
{
103+
"cssClass": "gap-4",
104+
"type": "Row",
105+
"children": [
106+
{
107+
"name": "name",
108+
"type": "Input",
109+
"inputType": "text",
110+
"placeholder": "Full name",
111+
"disabled": false,
112+
"readOnly": false,
113+
"required": true
114+
},
115+
{
116+
"name": "email",
117+
"type": "Input",
118+
"inputType": "text",
119+
"placeholder": "name@example.com",
120+
"disabled": false,
121+
"readOnly": false,
122+
"required": true
123+
}
124+
]
125+
},
126+
{
127+
"name": "category",
128+
"type": "Select",
129+
"size": "default",
130+
"disabled": false,
131+
"required": false,
132+
"invalid": false,
133+
"children": [
134+
{
135+
"type": "SelectOption",
136+
"value": "Customer",
137+
"label": "Customer",
138+
"selected": false,
139+
"disabled": false
140+
},
141+
{
142+
"type": "SelectOption",
143+
"value": "Partner",
144+
"label": "Partner",
145+
"selected": false,
146+
"disabled": false
147+
},
148+
{
149+
"type": "SelectOption",
150+
"value": "Vendor",
151+
"label": "Vendor",
152+
"selected": false,
153+
"disabled": false
154+
}
155+
]
156+
},
157+
{
158+
"type": "Button",
159+
"label": "Save Contact",
160+
"variant": "default",
161+
"size": "default",
162+
"disabled": false
163+
}
164+
]
165+
}
166+
]
167+
}
168+
]
169+
}
170+
}</script>
171+
</body>
172+
</html>

‎docs/apps/demos/contacts.py‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
from prefab_ui.actions import ShowToast
2+
from prefab_ui.app import PrefabApp
3+
from prefab_ui.components import (
4+
H3,
5+
Badge,
6+
Button,
7+
Column,
8+
DataTable,
9+
DataTableColumn,
10+
Form,
11+
Input,
12+
Row,
13+
Select,
14+
SelectOption,
15+
Separator,
16+
)
17+
18+
contacts = [
19+
{"name": "Arthur Dent", "email": "arthur@earth.com", "category": "Customer"},
20+
{"name": "Ford Prefect", "email": "ford@betelgeuse.org", "category": "Partner"},
21+
{
22+
"name": "Trillian Astra",
23+
"email": "trillian@heartofgold.com",
24+
"category": "Customer",
25+
},
26+
{"name": "Zaphod Beeblebrox", "email": "zaphod@galaxy.gov", "category": "Vendor"},
27+
]
28+
29+
rows = [
30+
{
31+
"name": c["name"],
32+
"email": c["email"],
33+
"category": Badge(
34+
c["category"],
35+
variant="success"
36+
if c["category"] == "Customer"
37+
else "secondary"
38+
if c["category"] == "Partner"
39+
else "outline",
40+
),
41+
}
42+
for c in contacts
43+
]
44+
45+
with PrefabApp() as app:
46+
with Column(gap=4, css_class="p-6"):
47+
DataTable(
48+
columns=[
49+
DataTableColumn(key="name", header="Name", sortable=True),
50+
DataTableColumn(key="email", header="Email"),
51+
DataTableColumn(key="category", header="Category"),
52+
],
53+
rows=rows,
54+
search=True,
55+
)
56+
57+
Separator()
58+
59+
H3("Add Contact")
60+
with Form(
61+
on_submit=ShowToast(
62+
"Contact saved! (preview demo — no backend wired)",
63+
variant="success",
64+
),
65+
):
66+
with Row(gap=4):
67+
Input(name="name", label="Name", placeholder="Full name", required=True)
68+
Input(
69+
name="email",
70+
label="Email",
71+
placeholder="name@example.com",
72+
required=True,
73+
)
74+
with Select(name="category", label="Category"):
75+
SelectOption(value="Customer", label="Customer")
76+
SelectOption(value="Partner", label="Partner")
77+
SelectOption(value="Vendor", label="Vendor")
78+
Button("Save Contact")

0 commit comments

Comments
 (0)