@almadar/std 6.5.2 → 7.2.0

package/behaviors/registry/atoms/std-search.orb

@@ -40,16 +40,62 @@
       "traits": [
         {
           "name": "SearchResultSearch",
-          "linkedEntity": "SearchResult",
           "category": "interaction",
+          "linkedEntity": "SearchResult",
+          "emits": [
+            {
+              "event": "SearchResultLoaded",
+              "description": "Fired when SearchResult collection finishes loading",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "id",
+                  "type": "string"
+                },
+                {
+                  "name": "name",
+                  "type": "string"
+                },
+                {
+                  "name": "description",
+                  "type": "string"
+                },
+                {
+                  "name": "status",
+                  "type": "string"
+                },
+                {
+                  "name": "createdAt",
+                  "type": "string"
+                }
+              ]
+            },
+            {
+              "event": "SearchResultLoadFailed",
+              "description": "Fired when SearchResult collection fails to load",
+              "scope": "internal",
+              "payload": [
+                {
+                  "name": "message",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "stateMachine": {
             "states": [
               {
                 "name": "idle",
                 "isInitial": true
               },
+              {
+                "name": "loading"
+              },
               {
                 "name": "searching"
+              },
+              {
+                "name": "error"
               }
             ],
             "events": [
@@ -68,6 +114,20 @@
                   }
                 ]
               },
+              {
+                "key": "SearchResultLoaded",
+                "name": "SearchResult loaded"
+              },
+              {
+                "key": "SearchResultLoadFailed",
+                "name": "SearchResult load failed",
+                "payload": [
+                  {
+                    "name": "message",
+                    "type": "string"
+                  }
+                ]
+              },
               {
                 "key": "CLEAR",
                 "name": "Clear"
@@ -81,15 +141,21 @@
                 "effects": [
                   [
                     "fetch",
-                    "SearchResult"
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "success": "SearchResultLoaded",
+                        "failure": "SearchResultLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
+                      "gap": "lg",
                       "type": "stack",
                       "direction": "vertical",
-                      "gap": "lg",
                       "children": [
                         {
                           "type": "stack",
@@ -98,9 +164,9 @@
                           "align": "center",
                           "children": [
                             {
+                              "size": "lg",
                               "type": "icon",
-                              "name": "search",
-                              "size": "lg"
+                              "name": "search"
                             },
                             {
                               "type": "typography",
@@ -118,10 +184,10 @@
                           "event": "SEARCH"
                         },
                         {
-                          "type": "empty-state",
                           "icon": "search",
-                          "title": "Search to find results",
-                          "description": "Type a query to search across searchresults."
+                          "description": "Type a query to search across searchresults.",
+                          "type": "empty-state",
+                          "title": "Search to find results"
                         }
                       ]
                     }
@@ -130,90 +196,119 @@
               },
               {
                 "from": "idle",
-                "to": "searching",
+                "to": "loading",
                 "event": "SEARCH",
                 "effects": [
                   [
                     "fetch",
-                    "SearchResult"
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "success": "SearchResultLoaded",
+                        "failure": "SearchResultLoadFailed"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
                     "main",
                     {
+                      "direction": "vertical",
+                      "children": [
+                        {
+                          "size": "md",
+                          "type": "spinner"
+                        },
+                        {
+                          "type": "typography",
+                          "content": [
+                            "concat",
+                            "Searching for \"",
+                            "@payload.query",
+                            "\"…"
+                          ],
+                          "color": "muted",
+                          "variant": "caption"
+                        }
+                      ],
                       "type": "stack",
+                      "gap": "md",
+                      "align": "center",
+                      "className": "py-8"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "loading",
+                "to": "searching",
+                "event": "SearchResultLoaded",
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
                       "direction": "vertical",
                       "gap": "lg",
+                      "type": "stack",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
-                          "gap": "md",
-                          "justify": "space-between",
                           "align": "center",
+                          "justify": "space-between",
+                          "gap": "md",
                           "children": [
                             {
-                              "type": "stack",
                               "direction": "horizontal",
                               "gap": "md",
                               "align": "center",
+                              "type": "stack",
                               "children": [
                                 {
-                                  "type": "icon",
+                                  "size": "lg",
                                   "name": "search",
-                                  "size": "lg"
+                                  "type": "icon"
                                 },
                                 {
+                                  "content": "Results",
                                   "type": "typography",
-                                  "content": [
-                                    "str/concat",
-                                    "Results for \"",
-                                    "@payload.query",
-                                    "\""
-                                  ],
                                   "variant": "h2"
                                 }
                               ]
                             },
                             {
+                              "icon": "x",
                               "type": "button",
-                              "label": "Clear",
-                              "event": "CLEAR",
                               "variant": "ghost",
-                              "icon": "x"
+                              "label": "Clear",
+                              "event": "CLEAR"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal",
+                          "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "type": "popover",
-                          "position": "bottom",
-                          "trigger": "click",
-                          "children": [
+                          "emptyIcon": "search",
+                          "entity": "SearchResult",
+                          "emptyDescription": "Try a different search term.",
+                          "type": "data-grid",
+                          "emptyTitle": "No results found",
+                          "renderItem": [
+                            "fn",
+                            "item",
                             {
-                              "type": "data-grid",
-                              "entity": "SearchResult",
-                              "emptyIcon": "search",
-                              "emptyTitle": "No results found",
-                              "emptyDescription": "Try a different search term.",
-                              "renderItem": [
-                                "fn",
-                                "item",
+                              "type": "stack",
+                              "gap": "sm",
+                              "children": [
                                 {
-                                  "type": "stack",
-                                  "direction": "vertical",
-                                  "gap": "sm",
-                                  "children": [
-                                    {
-                                      "type": "typography",
-                                      "variant": "h4",
-                                      "content": "@item.name"
-                                    }
-                                  ]
+                                  "variant": "h4",
+                                  "type": "typography",
+                                  "content": "@item.name"
                                 }
-                              ]
+                              ],
+                              "direction": "vertical"
                             }
                           ]
                         }
@@ -223,99 +318,99 @@
                 ]
               },
               {
-                "from": "searching",
-                "to": "searching",
-                "event": "SEARCH",
+                "from": "loading",
+                "to": "error",
+                "event": "SearchResultLoadFailed",
                 "effects": [
-                  [
-                    "fetch",
-                    "SearchResult"
-                  ],
                   [
                     "render-ui",
                     "main",
                     {
                       "type": "stack",
+                      "gap": "md",
                       "direction": "vertical",
-                      "gap": "lg",
+                      "align": "center",
+                      "className": "py-8",
                       "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": [
-                                    "str/concat",
-                                    "Results for \"",
-                                    "@payload.query",
-                                    "\""
-                                  ],
-                                  "variant": "h2"
-                                }
-                              ]
-                            },
-                            {
-                              "type": "button",
-                              "label": "Clear",
-                              "event": "CLEAR",
-                              "variant": "ghost",
-                              "icon": "x"
-                            }
-                          ]
+                          "name": "alert-triangle",
+                          "size": "lg",
+                          "color": "destructive",
+                          "type": "icon"
                         },
                         {
-                          "type": "divider"
+                          "variant": "body",
+                          "content": "Search failed",
+                          "type": "typography"
                         },
                         {
-                          "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"
-                                    }
-                                  ]
-                                }
-                              ]
-                            }
-                          ]
+                          "variant": "caption",
+                          "color": "muted",
+                          "content": "@payload.message",
+                          "type": "typography"
+                        },
+                        {
+                          "icon": "rotate-ccw",
+                          "event": "SEARCH",
+                          "type": "button",
+                          "label": "Retry",
+                          "variant": "ghost"
                         }
                       ]
                     }
                   ]
                 ]
               },
+              {
+                "from": "loading",
+                "to": "loading",
+                "event": "SEARCH",
+                "effects": [
+                  [
+                    "fetch",
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "failure": "SearchResultLoadFailed",
+                        "success": "SearchResultLoaded"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "spinner",
+                      "size": "md"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "searching",
+                "to": "loading",
+                "event": "SEARCH",
+                "effects": [
+                  [
+                    "fetch",
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "success": "SearchResultLoaded",
+                        "failure": "SearchResultLoadFailed"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "spinner",
+                      "size": "md"
+                    }
+                  ]
+                ]
+              },
               {
                 "from": "searching",
                 "to": "idle",
@@ -323,7 +418,13 @@
                 "effects": [
                   [
                     "fetch",
-                    "SearchResult"
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "failure": "SearchResultLoadFailed",
+                        "success": "SearchResultLoaded"
+                      }
+                    }
                   ],
                   [
                     "render-ui",
@@ -331,12 +432,10 @@
                     {
                       "type": "stack",
                       "direction": "vertical",
-                      "gap": "lg",
                       "children": [
                         {
-                          "type": "stack",
-                          "direction": "horizontal",
                           "gap": "md",
+                          "type": "stack",
                           "align": "center",
                           "children": [
                             {
@@ -345,33 +444,61 @@
                               "size": "lg"
                             },
                             {
-                              "type": "typography",
+                              "variant": "h2",
                               "content": "Search SearchResults",
-                              "variant": "h2"
+                              "type": "typography"
                             }
-                          ]
+                          ],
+                          "direction": "horizontal"
                         },
                         {
                           "type": "divider"
                         },
                         {
+                          "event": "SEARCH",
                           "type": "search-input",
-                          "placeholder": "Search...",
-                          "event": "SEARCH"
+                          "placeholder": "Search..."
                         },
                         {
-                          "type": "empty-state",
                           "icon": "search",
+                          "description": "Type a query to search across searchresults.",
                           "title": "Search to find results",
-                          "description": "Type a query to search across searchresults."
+                          "type": "empty-state"
                         }
-                      ]
+                      ],
+                      "gap": "lg"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "error",
+                "to": "loading",
+                "event": "SEARCH",
+                "effects": [
+                  [
+                    "fetch",
+                    "SearchResult",
+                    {
+                      "emit": {
+                        "success": "SearchResultLoaded",
+                        "failure": "SearchResultLoadFailed"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "spinner",
+                      "size": "md"
                     }
                   ]
                 ]
               }
             ]
-          }
+          },
+          "scope": "collection"
         }
       ],
       "pages": [
@@ -387,4 +514,4 @@
       ]
     }
   ]
-}
+}