std-rating

Level: Atom | Entity: Review | Persistence: runtime

2 states, 3 events, 3 transitions

Live Preview

orbital ReviewOrbital {
  entity Review [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    rating : number
    comment : string
  }
  trait ReviewRating -> Review [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch Review)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "star", size: "lg" }, { type: "typography", content: "Rating", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "body", color: "muted", content: "How would you rate this?" }, { type: "star-rating", value: ["object/get", ["array/first", "@entity"], "rating"], max: 5, event: "RATE", size: "lg" }, { type: "button", label: "Submit Rating", event: "RATE", variant: "primary", icon: "star" }] })
      RATE -> rated
        (set @entity.rating @payload.rating)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Thank You!", variant: "h2" }] }, { type: "divider" }, { type: "star-rating", value: ["object/get", ["array/first", "@entity"], "rating"], max: 5, readOnly: true, size: "lg" }, { type: "alert", variant: "success", message: "Your rating has been recorded." }, { type: "button", label: "Rate Again", event: "RESET", variant: "ghost", icon: "rotate-ccw" }] })
    }
    state rated {
      RESET -> idle
        (set @entity.rating 0)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "star", size: "lg" }, { type: "typography", content: "Rating", variant: "h2" }] }, { type: "divider" }, { type: "typography", variant: "body", color: "muted", content: "How would you rate this?" }, { type: "star-rating", value: ["object/get", ["array/first", "@entity"], "rating"], max: 5, event: "RATE", size: "lg" }, { type: "button", label: "Submit Rating", event: "RATE", variant: "primary", icon: "star" }] })
    }
  }
  page "/reviews/rating" -> ReviewRating
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
rating	number	0
comment	string	""

States

State	Type
idle	Initial
rated	-

Events

Event	Payload
INIT	-
RATE	rating: number
RESET	-

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	RATE	rated	2 effects
rated	RESET	idle	2 effects