Skip to content

Commit 338581b

Browse files
hotlonghotlong
committed
Refactor authentication, dashboard, and form components for improved structure and readability; update statistic renderer to support dynamic icons and enhance stack layout handling.
1 parent ebf3cb1 commit 338581b

File tree

6 files changed

+84
-264
lines changed

6 files changed

+84
-264
lines changed

‎content/docs/blocks/authentication.mdx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,32 @@ A clean login form with email and password fields.
1919
schema={{
2020
type: "card",
2121
className: "w-full max-w-md mx-auto",
22-
children: [
22+
header: [
2323
{
2424
type: "stack",
25-
spacing: 6,
26-
children: [
27-
{
28-
type: "stack",
2925
spacing: 2,
3026
className: "text-center",
31-
children: [
32-
{
33-
type: "text",
34-
content: "Welcome Back",
35-
className: "text-2xl font-bold tracking-tight"
36-
},
37-
{
38-
type: "text",
39-
content: "Enter your credentials to sign in",
40-
className: "text-sm text-muted-foreground"
41-
}
42-
]
27+
children: [
28+
{
29+
type: "text",
30+
content: "Welcome Back",
31+
className: "text-2xl font-bold tracking-tight"
4332
},
4433
{
45-
type: "stack",
34+
type: "text",
35+
content: "Enter your credentials to sign in",
36+
className: "text-sm text-muted-foreground"
37+
}
38+
]
39+
}
40+
],
41+
children: [
42+
{
43+
type: "stack",
4644
spacing: 4,
47-
children: [
48-
{
49-
type: "stack",
45+
children: [
46+
{
47+
type: "stack",
5048
spacing: 2,
5149
children: [
5250
{
@@ -162,8 +160,6 @@ A clean login form with email and password fields.
162160
}
163161
]
164162
}
165-
]
166-
}
167163
]
168164
}}
169165
/>

‎content/docs/blocks/dashboard.mdx‎

Lines changed: 24 additions & 208 deletions
Original file line numberDiff line numberDiff line change
@@ -22,220 +22,36 @@ Display key metrics with trend indicators.
2222
className: "md:grid-cols-2 lg:grid-cols-4",
2323
children: [
2424
{
25-
type: "card",
26-
children: [
27-
{
28-
type: "stack",
29-
spacing: 2,
30-
children: [
31-
{
32-
type: "flex",
33-
className: "items-center justify-between",
34-
children: [
35-
{
36-
type: "text",
37-
content: "Total Revenue",
38-
className: "text-sm font-medium text-muted-foreground"
39-
},
40-
{
41-
type: "icon",
42-
name: "dollar-sign",
43-
className: "h-4 w-4 text-muted-foreground"
44-
}
45-
]
46-
},
47-
{
48-
type: "stack",
49-
spacing: 1,
50-
children: [
51-
{
52-
type: "text",
53-
content: "$45,231.89",
54-
className: "text-2xl font-bold"
55-
},
56-
{
57-
type: "flex",
58-
className: "items-center text-xs",
59-
children: [
60-
{
61-
type: "icon",
62-
name: "trending-up",
63-
className: "h-3 w-3 text-green-500 mr-1"
64-
},
65-
{
66-
type: "text",
67-
content: "+20.1% from last month",
68-
className: "text-green-500"
69-
}
70-
]
71-
}
72-
]
73-
}
74-
]
75-
}
76-
]
25+
type: "statistic",
26+
label: "Total Revenue",
27+
value: "$45,231.89",
28+
trend: "up",
29+
description: "+20.1% from last month",
30+
icon: "dollar-sign"
7731
},
7832
{
79-
type: "card",
80-
children: [
81-
{
82-
type: "stack",
83-
spacing: 2,
84-
children: [
85-
{
86-
type: "flex",
87-
className: "items-center justify-between",
88-
children: [
89-
{
90-
type: "text",
91-
content: "New Users",
92-
className: "text-sm font-medium text-muted-foreground"
93-
},
94-
{
95-
type: "icon",
96-
name: "users",
97-
className: "h-4 w-4 text-muted-foreground"
98-
}
99-
]
100-
},
101-
{
102-
type: "stack",
103-
spacing: 1,
104-
children: [
105-
{
106-
type: "text",
107-
content: "+2,350",
108-
className: "text-2xl font-bold"
109-
},
110-
{
111-
type: "flex",
112-
className: "items-center text-xs",
113-
children: [
114-
{
115-
type: "icon",
116-
name: "trending-up",
117-
className: "h-3 w-3 text-green-500 mr-1"
118-
},
119-
{
120-
type: "text",
121-
content: "+180.1% from last month",
122-
className: "text-green-500"
123-
}
124-
]
125-
}
126-
]
127-
}
128-
]
129-
}
130-
]
33+
type: "statistic",
34+
label: "New Users",
35+
value: "+2,350",
36+
trend: "up",
37+
description: "+180.1% from last month",
38+
icon: "users"
13139
},
13240
{
133-
type: "card",
134-
children: [
135-
{
136-
type: "stack",
137-
spacing: 2,
138-
children: [
139-
{
140-
type: "flex",
141-
className: "items-center justify-between",
142-
children: [
143-
{
144-
type: "text",
145-
content: "Active Sessions",
146-
className: "text-sm font-medium text-muted-foreground"
147-
},
148-
{
149-
type: "icon",
150-
name: "activity",
151-
className: "h-4 w-4 text-muted-foreground"
152-
}
153-
]
154-
},
155-
{
156-
type: "stack",
157-
spacing: 1,
158-
children: [
159-
{
160-
type: "text",
161-
content: "+12,234",
162-
className: "text-2xl font-bold"
163-
},
164-
{
165-
type: "flex",
166-
className: "items-center text-xs",
167-
children: [
168-
{
169-
type: "icon",
170-
name: "trending-up",
171-
className: "h-3 w-3 text-green-500 mr-1"
172-
},
173-
{
174-
type: "text",
175-
content: "+19% from last month",
176-
className: "text-green-500"
177-
}
178-
]
179-
}
180-
]
181-
}
182-
]
183-
}
184-
]
41+
type: "statistic",
42+
label: "Active Sessions",
43+
value: "+12,234",
44+
trend: "up",
45+
description: "+19% from last month",
46+
icon: "activity"
18547
},
18648
{
187-
type: "card",
188-
children: [
189-
{
190-
type: "stack",
191-
spacing: 2,
192-
children: [
193-
{
194-
type: "flex",
195-
className: "items-center justify-between",
196-
children: [
197-
{
198-
type: "text",
199-
content: "Conversion Rate",
200-
className: "text-sm font-medium text-muted-foreground"
201-
},
202-
{
203-
type: "icon",
204-
name: "percent",
205-
className: "h-4 w-4 text-muted-foreground"
206-
}
207-
]
208-
},
209-
{
210-
type: "stack",
211-
spacing: 1,
212-
children: [
213-
{
214-
type: "text",
215-
content: "3.2%",
216-
className: "text-2xl font-bold"
217-
},
218-
{
219-
type: "flex",
220-
className: "items-center text-xs",
221-
children: [
222-
{
223-
type: "icon",
224-
name: "trending-down",
225-
className: "h-3 w-3 text-red-500 mr-1"
226-
},
227-
{
228-
type: "text",
229-
content: "-4.3% from last month",
230-
className: "text-red-500"
231-
}
232-
]
233-
}
234-
]
235-
}
236-
]
237-
}
238-
]
49+
type: "statistic",
50+
label: "Conversion Rate",
51+
value: "3.2%",
52+
trend: "down",
53+
description: "-4.3% from last month",
54+
icon: "percent"
23955
}
24056
]
24157
}}

‎content/docs/blocks/forms.mdx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,34 +19,31 @@ Simple contact form with name, email, and message fields.
1919
schema={{
2020
type: "card",
2121
className: "w-full max-w-2xl mx-auto",
22-
children: [
22+
header: [
2323
{
2424
type: "stack",
25-
spacing: 6,
26-
className: "p-6",
25+
spacing: 2,
2726
children: [
2827
{
29-
type: "stack",
30-
spacing: 2,
31-
children: [
32-
{
33-
type: "text",
34-
content: "Contact Us",
35-
className: "text-2xl font-bold"
36-
},
37-
{
38-
type: "text",
39-
content: "Fill out the form below and we'll get back to you as soon as possible.",
40-
className: "text-muted-foreground"
41-
}
42-
]
28+
type: "text",
29+
content: "Contact Us",
30+
className: "text-2xl font-bold"
4331
},
4432
{
45-
type: "stack",
46-
spacing: 4,
47-
children: [
48-
{
49-
type: "grid",
33+
type: "text",
34+
content: "Fill out the form below and we'll get back to you as soon as possible.",
35+
className: "text-muted-foreground"
36+
}
37+
]
38+
}
39+
],
40+
children: [
41+
{
42+
type: "stack",
43+
spacing: 4,
44+
children: [
45+
{
46+
type: "grid",
5047
cols: 2,
5148
gap: 4,
5249
children: [
@@ -152,8 +149,6 @@ Simple contact form with name, email, and message fields.
152149
}
153150
]
154151
}
155-
]
156-
}
157152
]
158153
}}
159154
/>

‎packages/components/src/renderers/basic/text.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@ ComponentRegistry.register('text',
2222
...rest
2323
} = props;
2424

25-
// If we have designer props, we must wrap it to make it selectable
26-
if (dataObjId) {
25+
// If we have designer props or className, we must wrap it to make it selectable and styleable
26+
if (dataObjId || schema.className || rest.className) {
2727
return (
2828
<span
2929
data-obj-id={dataObjId}
3030
data-obj-type={dataObjType}
3131
style={style}
32+
className={schema.className || rest.className}
3233
{...rest}
3334
>
3435
{schema.content || schema.value}

0 commit comments

Comments
 (0)