std-list

Level: Molecule | Entity: ListItem | Persistence: persistent

2 states, 10 events, 7 transitions

Live Preview

orbital ListItemOrbital {
  entity ListItem [persistent: listitems] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait ListItemBrowse -> ListItem [interaction] {
    initial: browsing
    state browsing {
      INIT -> browsing
        (fetch ListItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "ListItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Create ListItem", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-grid", entity: "ListItem", emptyIcon: "inbox", emptyTitle: "No listitems yet", emptyDescription: "Create your first listitem to get started.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "list" }, { name: "description", label: "Description", variant: "badge", colorMap: { active: "success", completed: "success", done: "success", pending: "warning", draft: "warning", scheduled: "warning", inactive: "neutral", archived: "neutral", disabled: "neutral", error: "destructive", cancelled: "destructive", failed: "destructive" } }, { name: "status", label: "Status", variant: "caption" }] }] })
      LIST_ITEM_CREATED -> browsing
        (fetch ListItem)
      LIST_ITEM_UPDATED -> browsing
        (fetch ListItem)
      DELETE -> deleting
        (fetch ListItem { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "trash-2", size: "md" }, { type: "typography", content: "Delete ListItem", variant: "h3" }] }, { type: "divider" }, { type: "typography", content: "Are you sure you want to delete this listitem?", variant: "body" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Delete", event: "CONFIRM_DELETE", variant: "danger", icon: "trash" }] }] })
    }
    state deleting {
      CONFIRM_DELETE -> browsing
        (persist delete ListItem @entity.id)
        (render-ui modal null)
        (fetch ListItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "ListItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Create ListItem", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-grid", entity: "ListItem", emptyIcon: "inbox", emptyTitle: "No listitems yet", emptyDescription: "Create your first listitem to get started.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "list" }, { name: "description", label: "Description", variant: "badge", colorMap: { active: "success", completed: "success", done: "success", pending: "warning", draft: "warning", scheduled: "warning", inactive: "neutral", archived: "neutral", disabled: "neutral", error: "destructive", cancelled: "destructive", failed: "destructive" } }, { name: "status", label: "Status", variant: "caption" }] }] })
        (notify "ListItem deleted successfully")
      CANCEL -> browsing
        (render-ui modal null)
        (fetch ListItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "ListItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Create ListItem", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-grid", entity: "ListItem", emptyIcon: "inbox", emptyTitle: "No listitems yet", emptyDescription: "Create your first listitem to get started.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "list" }, { name: "description", label: "Description", variant: "badge", colorMap: { active: "success", completed: "success", done: "success", pending: "warning", draft: "warning", scheduled: "warning", inactive: "neutral", archived: "neutral", disabled: "neutral", error: "destructive", cancelled: "destructive", failed: "destructive" } }, { name: "status", label: "Status", variant: "caption" }] }] })
      CLOSE -> browsing
        (render-ui modal null)
        (fetch ListItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "ListItems", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Create ListItem", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-grid", entity: "ListItem", emptyIcon: "inbox", emptyTitle: "No listitems yet", emptyDescription: "Create your first listitem to get started.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "list" }, { name: "description", label: "Description", variant: "badge", colorMap: { active: "success", completed: "success", done: "success", pending: "warning", draft: "warning", scheduled: "warning", inactive: "neutral", archived: "neutral", disabled: "neutral", error: "destructive", cancelled: "destructive", failed: "destructive" } }, { name: "status", label: "Status", variant: "caption" }] }] })
    }
    listens {
      * LIST_ITEM_CREATED -> LIST_ITEM_CREATED
      * LIST_ITEM_UPDATED -> LIST_ITEM_UPDATED
    }
  }
  trait ListItemCreate -> ListItem [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch ListItem)
      CREATE -> open
        (fetch ListItem)
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "plus-circle", size: "md" }, { type: "typography", content: "Create ListItem", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "ListItem", mode: "create", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["name", "description", "status"] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist create ListItem @payload.data)
        (fetch ListItem)
        (render-ui modal null)
        (emit LIST_ITEM_CREATED)
        (notify "ListItem created successfully")
    }
    emits {
      LIST_ITEM_CREATED
    }
  }
  trait ListItemEdit -> ListItem [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch ListItem)
      EDIT -> open
        (fetch ListItem { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "edit", size: "md" }, { type: "typography", content: "Edit ListItem", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "ListItem", mode: "edit", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["name", "description", "status"], entityId: "@entity.id" }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist update ListItem @payload.data)
        (fetch ListItem)
        (render-ui modal null)
        (emit LIST_ITEM_UPDATED)
        (notify "ListItem updated successfully")
    }
    emits {
      LIST_ITEM_UPDATED
    }
  }
  trait ListItemView -> ListItem [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch ListItem)
      VIEW -> open
        (fetch ListItem { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "eye", size: "md" }, { type: "typography", variant: "h3", content: "@entity.name" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: "@entity.name" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: "@entity.description" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: "@entity.status" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Created At" }, { type: "typography", variant: "body", content: "@entity.createdAt" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Edit", event: "EDIT", variant: "primary", icon: "edit" }, { type: "button", label: "Close", event: "CLOSE", variant: "ghost" }] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
    }
  }
  page "/listitems" -> ListItemBrowse, ListItemCreate, ListItemEdit, ListItemView
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-

States

State	Type
browsing	Initial
deleting	-

Events

Event	Payload
INIT	-
CREATE	-
VIEW	id: string
EDIT	id: string
DELETE	id: string
LIST_ITEM_CREATED	data: object
LIST_ITEM_UPDATED	data: object
CONFIRM_DELETE	-
CANCEL	-
CLOSE	-

Transitions

From	Event	To	Effects
browsing	INIT	browsing	2 effects
browsing	LIST_ITEM_CREATED	browsing	1 effect
browsing	LIST_ITEM_UPDATED	browsing	1 effect
browsing	DELETE	deleting	2 effects
deleting	CONFIRM_DELETE	browsing	5 effects
deleting	CANCEL	browsing	3 effects
deleting	CLOSE	browsing	3 effects

Listens

• [object Object]
• [object Object]