@exponential-at/ui 0.0.0-stage → 0.1.0

package/fixtures/catalog-extension.json

@@ -0,0 +1,620 @@
+{
+  "$comment": "VAPP-85: the extension mechanism. `extension` is a complete example extension catalog (a native the host paints, a macro with its own template, its own enum); `cases` are hand-written surfaces against the extension's id and against the core id; `expected` is generated by scripts/generate.ts from the TS reference reducer. The Exponential app's own extension (IssueRow, RunRow, IssueChip, …) lives in packages/ui/exponential-ui/extension.json and is validated by @exp/ui's tests through the same defineExtension.",
+  "extension": {
+    "id": "https://ui.exponential.at/catalogs/example/v1",
+    "name": "Example extension",
+    "extends": "https://ui.exponential.at/catalogs/core/v1",
+    "enums": {
+      "trend": [
+        "up",
+        "down",
+        "flat"
+      ]
+    },
+    "components": {
+      "TrendLine": {
+        "kind": "native",
+        "group": "data",
+        "lite": true,
+        "children": "none",
+        "description": "A tiny inline line chart of recent values, painted by the host.",
+        "props": {
+          "values": {
+            "type": "array",
+            "items": {
+              "type": "number"
+            },
+            "required": true,
+            "description": "The points, oldest first."
+          },
+          "tone": {
+            "type": "enum",
+            "enum": "tone",
+            "default": "primary",
+            "description": "The line colour tone."
+          }
+        },
+        "example": {
+          "values": [
+            1,
+            3,
+            2,
+            5
+          ]
+        }
+      },
+      "StatCard": {
+        "kind": "macro",
+        "group": "data",
+        "lite": true,
+        "children": "none",
+        "description": "A card with a label, a big value and a trend arrow.",
+        "props": {
+          "label": {
+            "type": "string",
+            "required": true,
+            "description": "What the number is."
+          },
+          "value": {
+            "type": "string",
+            "required": true,
+            "bindable": true,
+            "description": "The formatted number."
+          },
+          "trend": {
+            "type": "enum",
+            "enum": "trend",
+            "default": "flat",
+            "description": "Which way it moved."
+          },
+          "history": {
+            "type": "array",
+            "items": {
+              "type": "number"
+            },
+            "description": "Recent values for the sparkline."
+          }
+        },
+        "events": [
+          "press"
+        ],
+        "example": {
+          "label": "Open issues",
+          "value": "42",
+          "trend": "up"
+        }
+      }
+    },
+    "macros": {
+      "StatCard": {
+        "recipeProps": [
+          "trend"
+        ],
+        "root": {
+          "part": "root",
+          "component": "Card",
+          "props": {
+            "padded": true
+          },
+          "children": [
+            {
+              "part": "label",
+              "component": "Text",
+              "props": {
+                "text": "{props.label}",
+                "variant": "muted"
+              }
+            },
+            {
+              "part": "row",
+              "component": "Stack",
+              "props": {
+                "direction": "horizontal",
+                "align": "center",
+                "gap": "sm"
+              },
+              "children": [
+                {
+                  "part": "value",
+                  "component": "Text",
+                  "props": {
+                    "text": "{props.value}",
+                    "variant": "title"
+                  }
+                },
+                {
+                  "part": "trend",
+                  "component": "Icon",
+                  "props": {
+                    "name": {
+                      "$map": {
+                        "from": "props.trend",
+                        "cases": {
+                          "up": "ui-chevron-up",
+                          "down": "ui-chevron-down"
+                        },
+                        "default": "ui-minus"
+                      }
+                    },
+                    "size": "sm",
+                    "tone": {
+                      "$map": {
+                        "from": "props.trend",
+                        "cases": {
+                          "up": "success",
+                          "down": "danger"
+                        },
+                        "default": "neutral"
+                      }
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "part": "spark",
+              "component": "TrendLine",
+              "$if": "props.history",
+              "props": {
+                "values": "{props.history}"
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  "cases": [
+    {
+      "name": "An extension macro expands through a core macro into natives, keeping the extension's native",
+      "catalogId": "https://ui.exponential.at/catalogs/example/v1",
+      "components": [
+        {
+          "id": "root",
+          "component": "Stack",
+          "direction": "vertical",
+          "children": [
+            "s1",
+            "s2"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "StatCard",
+          "label": "Open issues",
+          "value": "42",
+          "trend": "up",
+          "history": [
+            1,
+            3,
+            2,
+            5
+          ],
+          "on": {
+            "press": {
+              "event": {
+                "name": "openStats"
+              }
+            }
+          }
+        },
+        {
+          "id": "s2",
+          "component": "StatCard",
+          "label": "Merged",
+          "value": {
+            "path": "/merged"
+          }
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "s1",
+              "component": "Box",
+              "props": {},
+              "children": [
+                {
+                  "id": "s1.body",
+                  "component": "Box",
+                  "props": {},
+                  "children": [
+                    {
+                      "id": "s1.label",
+                      "component": "Text",
+                      "props": {
+                        "text": "Open issues",
+                        "variant": "muted"
+                      },
+                      "children": [],
+                      "recipe": {
+                        "macro": "StatCard",
+                        "part": "label",
+                        "props": {
+                          "trend": "up"
+                        }
+                      }
+                    },
+                    {
+                      "id": "s1.row",
+                      "component": "Box",
+                      "props": {},
+                      "children": [
+                        {
+                          "id": "s1.row.value",
+                          "component": "Text",
+                          "props": {
+                            "text": "42",
+                            "variant": "title"
+                          },
+                          "children": [],
+                          "recipe": {
+                            "macro": "StatCard",
+                            "part": "value",
+                            "props": {
+                              "trend": "up"
+                            }
+                          }
+                        },
+                        {
+                          "id": "s1.row.trend",
+                          "component": "Icon",
+                          "props": {
+                            "name": "ui-chevron-up",
+                            "size": "sm",
+                            "tone": "success"
+                          },
+                          "children": [],
+                          "recipe": {
+                            "macro": "StatCard",
+                            "part": "trend",
+                            "props": {
+                              "trend": "up"
+                            }
+                          }
+                        }
+                      ],
+                      "style": {
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "flexWrap": "nowrap",
+                        "gap": "$spacing.sm",
+                        "alignItems": "center",
+                        "justifyContent": "start"
+                      },
+                      "recipe": {
+                        "macro": "Stack",
+                        "part": "root",
+                        "props": {}
+                      }
+                    },
+                    {
+                      "id": "s1.spark",
+                      "component": "TrendLine",
+                      "props": {
+                        "values": [
+                          1,
+                          3,
+                          2,
+                          5
+                        ]
+                      },
+                      "children": [],
+                      "recipe": {
+                        "macro": "StatCard",
+                        "part": "spark",
+                        "props": {
+                          "trend": "up"
+                        }
+                      }
+                    }
+                  ],
+                  "style": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "$spacing.md",
+                    "padding": "$spacing.lg"
+                  },
+                  "recipe": {
+                    "macro": "Card",
+                    "part": "body",
+                    "props": {}
+                  }
+                }
+              ],
+              "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "borderRadius": "$radius.xl",
+                "overflow": "hidden"
+              },
+              "recipe": {
+                "macro": "Card",
+                "part": "root",
+                "props": {}
+              },
+              "accessibility": {
+                "role": "group"
+              },
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "openStats"
+                  }
+                }
+              }
+            },
+            {
+              "id": "s2",
+              "component": "Box",
+              "props": {},
+              "children": [
+                {
+                  "id": "s2.body",
+                  "component": "Box",
+                  "props": {},
+                  "children": [
+                    {
+                      "id": "s2.label",
+                      "component": "Text",
+                      "props": {
+                        "text": "Merged",
+                        "variant": "muted"
+                      },
+                      "children": [],
+                      "recipe": {
+                        "macro": "StatCard",
+                        "part": "label",
+                        "props": {
+                          "trend": "flat"
+                        }
+                      }
+                    },
+                    {
+                      "id": "s2.row",
+                      "component": "Box",
+                      "props": {},
+                      "children": [
+                        {
+                          "id": "s2.row.value",
+                          "component": "Text",
+                          "props": {
+                            "text": {
+                              "path": "/merged"
+                            },
+                            "variant": "title"
+                          },
+                          "children": [],
+                          "recipe": {
+                            "macro": "StatCard",
+                            "part": "value",
+                            "props": {
+                              "trend": "flat"
+                            }
+                          }
+                        },
+                        {
+                          "id": "s2.row.trend",
+                          "component": "Icon",
+                          "props": {
+                            "name": "ui-minus",
+                            "size": "sm",
+                            "tone": "neutral"
+                          },
+                          "children": [],
+                          "recipe": {
+                            "macro": "StatCard",
+                            "part": "trend",
+                            "props": {
+                              "trend": "flat"
+                            }
+                          }
+                        }
+                      ],
+                      "style": {
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "flexWrap": "nowrap",
+                        "gap": "$spacing.sm",
+                        "alignItems": "center",
+                        "justifyContent": "start"
+                      },
+                      "recipe": {
+                        "macro": "Stack",
+                        "part": "root",
+                        "props": {}
+                      }
+                    }
+                  ],
+                  "style": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "$spacing.md",
+                    "padding": "$spacing.lg"
+                  },
+                  "recipe": {
+                    "macro": "Card",
+                    "part": "body",
+                    "props": {}
+                  }
+                }
+              ],
+              "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "borderRadius": "$radius.xl",
+                "overflow": "hidden"
+              },
+              "recipe": {
+                "macro": "Card",
+                "part": "root",
+                "props": {}
+              },
+              "accessibility": {
+                "role": "group"
+              }
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.md",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "An extension native passes through with its props validated",
+      "catalogId": "https://ui.exponential.at/catalogs/example/v1",
+      "components": [
+        {
+          "id": "root",
+          "component": "TrendLine",
+          "values": [
+            2,
+            4,
+            3
+          ],
+          "tone": "success"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "TrendLine",
+          "props": {
+            "values": [
+              2,
+              4,
+              3
+            ],
+            "tone": "success"
+          },
+          "children": []
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "A name neither the core nor the extension defines is the placeholder",
+      "catalogId": "https://ui.exponential.at/catalogs/example/v1",
+      "components": [
+        {
+          "id": "root",
+          "component": "Stack",
+          "children": [
+            "x"
+          ]
+        },
+        {
+          "id": "x",
+          "component": "Gauge",
+          "value": 1
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "x",
+              "component": "Unknown",
+              "props": {
+                "component": "Gauge",
+                "catalogId": "https://ui.exponential.at/catalogs/example/v1"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.md",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": [
+          {
+            "id": "x",
+            "message": "unknown component Gauge"
+          }
+        ]
+      }
+    },
+    {
+      "name": "A core-catalog surface does not see the extension's components",
+      "catalogId": "https://ui.exponential.at/catalogs/core/v1",
+      "components": [
+        {
+          "id": "root",
+          "component": "Stack",
+          "children": [
+            "x"
+          ]
+        },
+        {
+          "id": "x",
+          "component": "TrendLine",
+          "values": [
+            1
+          ]
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "x",
+              "component": "TrendLine",
+              "props": {
+                "values": [
+                  1
+                ]
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.md",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    }
+  ]
+}