@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-dialog.json

@@ -0,0 +1,186 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookDialog",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-button.json"
+    },
+    {
+      "$ref": "../components/jx-dialog.json"
+    }
+  ],
+  "state": {},
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "80px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-dialog"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A native dialog opened modally. Each button below aims a --show command at its dialog, which is how a page opens one with no script; Escape cancels, and only the dismissible one closes on a click outside."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Openers"
+      },
+      "children": [
+        {
+          "tagName": "jx-button",
+          "$props": {
+            "variant": "accent",
+            "command": "--show",
+            "commandfor": "confirm-demo"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Confirm\u2026"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-button",
+          "$props": {
+            "command": "--show",
+            "commandfor": "destructive-demo"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Delete\u2026"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-button",
+          "$props": {
+            "command": "--show",
+            "commandfor": "three-demo"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Save or discard\u2026"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-button",
+          "$props": {
+            "command": "--show",
+            "commandfor": "dismissible-demo"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Dismissible\u2026"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "jx-dialog",
+      "attributes": {
+        "id": "confirm-demo"
+      },
+      "$props": {
+        "headline": "Publish the site?",
+        "confirmLabel": "Publish"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "Every page is built and uploaded. Nothing else changes."
+        }
+      ]
+    },
+    {
+      "tagName": "jx-dialog",
+      "attributes": {
+        "id": "destructive-demo"
+      },
+      "$props": {
+        "headline": "Delete about.md?",
+        "confirmLabel": "Delete",
+        "destructive": true
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "The file is removed from the project. This cannot be undone."
+        }
+      ]
+    },
+    {
+      "tagName": "jx-dialog",
+      "attributes": {
+        "id": "three-demo"
+      },
+      "$props": {
+        "headline": "Save changes to index.json?",
+        "confirmLabel": "Save",
+        "secondaryLabel": "Discard",
+        "size": "md"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "Your changes are lost if you close without saving."
+        }
+      ]
+    },
+    {
+      "tagName": "jx-dialog",
+      "attributes": {
+        "id": "dismissible-demo"
+      },
+      "$props": {
+        "headline": "About this kit",
+        "confirmLabel": "",
+        "cancelLabel": "Close",
+        "dismissible": true
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "A dialog with nothing to answer: click outside it, press Escape, or close it."
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-divider.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookDivider",
+  "tagName": "main",
+  "$elements": [
+    { "$ref": "../components/jx-icon.json" },
+    { "$ref": "../components/jx-divider.json" },
+    { "$ref": "../components/jx-action-button.json" },
+    { "$ref": "../components/jx-toolbar.json" }
+  ],
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > p": { "color": "var(--jx-fg-dim)", "margin": "0 0 var(--jx-space-5)" },
+    "& [data-toolbar]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-1)",
+      "height": "var(--jx-control-h)",
+      "padding": "0 var(--jx-space-2)",
+      "width": "320px",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-panel)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [data-stack]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "width": "220px",
+      "padding": "var(--jx-space-2)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-panel)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [data-stack] > div": {
+      "padding": "var(--jx-space-1) var(--jx-space-2)",
+      "lineHeight": "var(--jx-leading-md)"
+    }
+  },
+  "children": [
+    { "tagName": "h1", "textContent": "jx-divider" },
+    {
+      "tagName": "p",
+      "textContent": "A hairline, drawn by an inner hr the platform already announces as a separator. orientation turns it: the vertical branch makes the host a flex box exactly as wide as the rule it holds, so it stretches to a toolbar's height and takes no width beyond the hairline. The host still HAS a box: one client rect, coincident with the rule, which is what the canvas selects and drops onto. display: contents would measure the same and leave nothing to select."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "data-stack": "",
+        "role": "group",
+        "aria-label": "Horizontal, between menu rows"
+      },
+      "children": [
+        { "tagName": "div", "textContent": "Cut" },
+        { "tagName": "div", "textContent": "Copy" },
+        { "tagName": "jx-divider" },
+        { "tagName": "div", "textContent": "Paste" },
+        { "tagName": "jx-divider", "$props": { "orientation": "horizontal" } },
+        { "tagName": "div", "textContent": "Delete" }
+      ]
+    },
+    {
+      "tagName": "jx-toolbar",
+      "$props": {
+        "label": "Vertical, between tool groups"
+      },
+      "attributes": {
+        "data-toolbar": ""
+      },
+      "children": [
+        { "tagName": "jx-action-button", "$props": { "icon": "arrow-u-up-left", "label": "Undo" } },
+        {
+          "tagName": "jx-action-button",
+          "$props": { "icon": "arrow-u-up-right", "label": "Redo" }
+        },
+        { "tagName": "jx-divider", "$props": { "orientation": "vertical" } },
+        { "tagName": "jx-action-button", "$props": { "icon": "trash", "label": "Delete" } },
+        { "tagName": "jx-divider", "$props": { "orientation": "vertical" } },
+        { "tagName": "jx-action-button", "$props": { "icon": "gear", "label": "Settings" } }
+      ]
+    },
+    {
+      "tagName": "p",
+      "textContent": "hidden removes the hairline AND its advance, in either orientation. The host declares a display of its own, so it re-states the hiding the UA rule would otherwise have done. The vertical branch declares one too, which is why there is a second, more specific rule for it."
+    },
+    {
+      "tagName": "jx-toolbar",
+      "$props": {
+        "label": "Hidden, between the same two buttons"
+      },
+      "attributes": {
+        "data-toolbar": ""
+      },
+      "children": [
+        { "tagName": "jx-action-button", "$props": { "icon": "arrow-u-up-left", "label": "Undo" } },
+        { "tagName": "jx-divider", "$props": { "orientation": "vertical" }, "hidden": true },
+        { "tagName": "jx-action-button", "$props": { "icon": "trash", "label": "Delete" } }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "data-stack": "",
+        "role": "group",
+        "aria-label": "Hidden, between the same two rows"
+      },
+      "children": [
+        { "tagName": "div", "textContent": "Cut" },
+        { "tagName": "jx-divider", "hidden": true },
+        { "tagName": "div", "textContent": "Paste" }
+      ]
+    }
+  ]
+}

package/stylebook/jx-dot.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookDot",
+  "tagName": "main",
+  "$elements": [
+    { "$ref": "../components/jx-dot.json" },
+    { "$ref": "../components/jx-divider.json" }
+  ],
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > p": { "color": "var(--jx-fg-dim)", "margin": "0 0 var(--jx-space-5)" },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "120px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "& [data-crowded]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "width": "140px",
+      "padding": "var(--jx-space-1) var(--jx-space-2)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [data-crowded] > span": {
+      "whiteSpace": "nowrap",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis"
+    }
+  },
+  "children": [
+    { "tagName": "h1", "textContent": "jx-dot" },
+    {
+      "tagName": "p",
+      "textContent": "A six-pixel status disc. tone recolours it and nothing else; it carries no name of its own, so a row that means something by it says so in its own text or names the dot at the usage site."
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Every tone" },
+      "children": [
+        { "tagName": "span", "textContent": "tones" },
+        { "tagName": "jx-dot" },
+        { "tagName": "jx-dot", "$props": { "tone": "danger" } },
+        { "tagName": "jx-dot", "$props": { "tone": "success" } },
+        { "tagName": "jx-dot", "$props": { "tone": "warning" } },
+        { "tagName": "jx-dot", "$props": { "tone": "unknown" } }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": { "role": "group", "aria-label": "Beside a label" },
+      "children": [
+        { "tagName": "span", "textContent": "in a row" },
+        { "tagName": "jx-dot", "$props": { "tone": "success" } },
+        { "tagName": "span", "textContent": "Connected" },
+        { "tagName": "jx-divider", "$props": { "orientation": "vertical" } },
+        { "tagName": "jx-dot", "$props": { "tone": "danger" } },
+        { "tagName": "span", "textContent": "Three errors" }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "data-crowded": "",
+        "role": "group",
+        "aria-label": "Crowded out of its own row"
+      },
+      "children": [
+        { "tagName": "span", "textContent": "A section title far too long for this box" },
+        { "tagName": "jx-dot", "$props": { "tone": "warning" } }
+      ]
+    }
+  ]
+}