CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-07-20 21:29:36 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update playground EditableGrid demo for the redesigned component

Browse Source 
Add field descriptions, refresh the demo container styling, and align
prop ordering with the new grid API.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Developing-Gamer 2026-07-15 18:47:46 -07:00
parent de67cb1364
commit 2bd7f5b604
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
View File

@ -536,6 +536,7 @@ export default function PageClient() {
type: "text",
icon: <FileText className="h-4 w-4" />,
name: "Display Name",
description: "The customer-facing name for this product.",
value: "Widget Pro",
readOnly: false,
onUpdate: async () => {
@ -548,6 +549,7 @@ export default function PageClient() {
type: "boolean",
icon: <StackSimple className="h-4 w-4" />,
name: "Active",
description: "Controls whether this product can be purchased.",
value: true,
readOnly: false,
trueLabel: "Yes",
@ -562,6 +564,7 @@ export default function PageClient() {
type: "dropdown",
icon: <Sliders className="h-4 w-4" />,
name: "Category",
description: "Used to organize this product in the catalog.",
value: "hardware",
options: [
{ value: "hardware", label: "Hardware" },
@ -579,6 +582,7 @@ export default function PageClient() {
type: "custom",
icon: <Tag className="h-4 w-4" />,
name: "Price",
description: "Current base price before discounts.",
children: <span className="text-sm text-foreground">$29.99</span>,
},
];
@ -591,6 +595,7 @@ export default function PageClient() {
type: "custom-dropdown",
icon: <Sparkle className="h-4 w-4" />,
name: "Custom Dropdown",
description: "A composed control with custom popover content.",
triggerContent: <span>Open custom panel</span>,
popoverContent: <div>Custom content</div>,
disabled: false,
@ -600,6 +605,7 @@ export default function PageClient() {
type: "custom-button",
icon: <Cube className="h-4 w-4" />,
name: "Custom Button",
description: "Runs a custom action with built-in loading behavior.",
onClick: () => setGridActionLog("Clicked custom button"),
children: <span>Run action</span>,
disabled: false,
@ -1082,28 +1088,28 @@ export default function PageClient() {
if (selected === "editable-grid") {
return (
<div className="w-full max-w-3xl">
<div className="rounded-2xl overflow-hidden bg-white/90 dark:bg-[hsl(240,10%,5.5%)] border border-black/[0.12] dark:border-foreground/[0.12] shadow-sm">
<div className="overflow-hidden rounded-2xl border border-black/[0.1] bg-white shadow-sm dark:border-white/[0.1] dark:bg-zinc-950">
<div className="p-4 sm:p-5">
<DesignEditableGrid
items={editableItems}
columns={gridCols}
size={gridSize}
editMode={gridEditMode}
deferredSave={gridDeferredSave}
editMode={gridEditMode}
externalModifiedKeys={gridShowModified ? new Set(["display-name", "category"]) : undefined}
hasChanges={gridHasChanges}
onSave={gridDeferredSave ? async () => {
await new Promise((r) => setTimeout(r, 400));
setGridActionLog("Saved deferred changes");
setGridHasChanges(false);
} : undefined}
items={editableItems}
onDiscard={gridDeferredSave ? () => {
setGridActionLog("Discarded deferred changes");
setGridHasChanges(false);
} : undefined}
externalModifiedKeys={gridShowModified ? new Set(["display-name", "category"]) : undefined}
onSave={gridDeferredSave ? async () => {
await new Promise((resolve) => setTimeout(resolve, 400));
setGridActionLog("Saved deferred changes");
setGridHasChanges(false);
} : undefined}
size={gridSize}
/>
{gridActionLog && (
<Typography variant="secondary" className="text-xs mt-2">
<Typography className="mt-3 text-xs" variant="secondary">
Last action: {gridActionLog}
</Typography>
)}