std-search

Level: Atom | Entity: SearchResult | Persistence: runtime

2 states, 3 events, 4 transitions

Live Preview

orbital SearchResultOrbital {
  entity SearchResult [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait SearchResultSearch -> SearchResult [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch SearchResult)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "search", size: "lg" }, { type: "typography", content: "Search SearchResults", variant: "h2" }] }, { type: "divider" }, { type: "search-input", placeholder: "Search...", event: "SEARCH" }, { type: "empty-state", icon: "search", title: "Search to find results", description: "Type a query to search across searchresults." }] })
      SEARCH -> searching
        (fetch SearchResult)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "search", size: "lg" }, { type: "typography", content: ["concat", "Results for \"", "@payload.query", "\""], variant: "h2" }] }, { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "x" }] }, { type: "divider" }, { type: "popover", position: "bottom", trigger: "click", children: [{ type: "data-grid", entity: "SearchResult", emptyIcon: "search", emptyTitle: "No results found", emptyDescription: "Try a different search term.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }] }] }] }] })
    }
    state searching {
      SEARCH -> searching
        (fetch SearchResult)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "search", size: "lg" }, { type: "typography", content: ["concat", "Results for \"", "@payload.query", "\""], variant: "h2" }] }, { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "x" }] }, { type: "divider" }, { type: "popover", position: "bottom", trigger: "click", children: [{ type: "data-grid", entity: "SearchResult", emptyIcon: "search", emptyTitle: "No results found", emptyDescription: "Try a different search term.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "h4", content: "@item.name" }] }] }] }] })
      CLEAR -> idle
        (fetch SearchResult)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "icon", name: "search", size: "lg" }, { type: "typography", content: "Search SearchResults", variant: "h2" }] }, { type: "divider" }, { type: "search-input", placeholder: "Search...", event: "SEARCH" }, { type: "empty-state", icon: "search", title: "Search to find results", description: "Type a query to search across searchresults." }] })
    }
  }
  page "/searchresults/search" -> SearchResultSearch
}

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
idle	Initial
searching	-

Events

Event	Payload
INIT	-
SEARCH	query: string
CLEAR	-

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	SEARCH	searching	2 effects
searching	SEARCH	searching	2 effects
searching	CLEAR	idle	2 effects