@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-toast.json

@@ -0,0 +1,266 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookToast",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-button.json"
+    },
+    {
+      "$ref": "../components/jx-toast.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)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)",
+      "maxWidth": "60ch"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "alignItems": "flex-start",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-toast"
+    },
+    {
+      "tagName": "p",
+      "textContent": "One outcome, said once: a glyph, a line of text, at most one control that undoes or retries it, and a dismiss button that is always there. A toast never takes the keyboard, and it carries no live region of its own, so the toasts below are drawn and not announced. Put them in a jx-toast-host and the stack speaks for them."
+    },
+    {
+      "tagName": "p",
+      "textContent": "Off a host each toast is an ordinary box in the flow, which is what these are. The corner, the stacking and the clock policy of a real stack all belong to the host."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Variants"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Variants"
+      },
+      "children": [
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Draft saved to about.json."
+            }
+          ]
+        },
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "positive"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Published 14 pages to jxsuite.com."
+            }
+          ]
+        },
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "warning"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Two images are larger than 2 MB and were not resized."
+            }
+          ]
+        },
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "negative"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Save failed: the file is open in another program."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "One recovery control"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Anything slotted into action is the one thing a reader may do about the message. Using it closes the toast and reports action, because an answer that has been given is not still being asked. The click is not stopped, so the control's own handler runs first and a host listening above the toast hears it too."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "With an action"
+      },
+      "children": [
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "negative"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Could not reach the deploy service."
+            },
+            {
+              "tagName": "jx-button",
+              "attributes": {
+                "slot": "action"
+              },
+              "$props": {
+                "size": "sm",
+                "quiet": true
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Retry"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "dismissLabel": "Dismiss notification"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Moved 3 files to the trash."
+            },
+            {
+              "tagName": "jx-button",
+              "attributes": {
+                "slot": "action"
+              },
+              "$props": {
+                "size": "sm",
+                "quiet": true
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Undo"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Sticky, and on a clock"
+    },
+    {
+      "tagName": "p",
+      "textContent": "timeout is 0 by default, so a toast stays until it is dismissed. Give it a number of milliseconds and it retires itself, dispatching close with the reason timeout. The clock stops while the pointer is on the toast and while focus is inside it, and resumes with the time that was left, so a control the reader has reached cannot expire under their hand. The second toast below is on a ten second clock and will retire itself."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Timing"
+      },
+      "children": [
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Sticky: this one waits to be dismissed."
+            }
+          ]
+        },
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "positive",
+            "timeout": 10000
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "On a clock: rest the pointer here and it stops counting."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A long message"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Long message"
+      },
+      "children": [
+        {
+          "tagName": "jx-toast",
+          "$props": {
+            "open": true,
+            "variant": "warning"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "The stylesheet at styles/site.css declares 41 custom properties that no page reads. Nothing was changed, and the build carried on without them."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-toolbar.json

@@ -0,0 +1,435 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookToolbar",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-spinner.json"
+    },
+    {
+      "$ref": "../components/jx-button.json"
+    },
+    {
+      "$ref": "../components/jx-action-button.json"
+    },
+    {
+      "$ref": "../components/jx-action-group.json"
+    },
+    {
+      "$ref": "../components/jx-divider.json"
+    },
+    {
+      "$ref": "../components/jx-textfield.json"
+    },
+    {
+      "$ref": "../components/jx-color-field.json"
+    },
+    {
+      "$ref": "../components/jx-toolbar.json"
+    }
+  ],
+  "state": {
+    "filter": "",
+    "setFilter": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/filter"
+          },
+          "value": {
+            "$ref": "event#/target/value"
+          }
+        }
+      ]
+    },
+    "fill": "#3b82f6",
+    "setFill": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/fill"
+          },
+          "value": {
+            "$ref": "event#/target/value"
+          }
+        }
+      ]
+    },
+    "last": "nothing yet",
+    "did": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/last"
+          },
+          "value": {
+            "$ref": "event#/currentTarget/dataset/verb"
+          }
+        }
+      ]
+    }
+  },
+  "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)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "color": "var(--jx-fg-dim)",
+      "margin": "var(--jx-space-5) 0 var(--jx-space-2)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > div": {
+      "margin": "0 0 var(--jx-space-4)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-panel)"
+    },
+    "& jx-toolbar": {
+      "padding": "var(--jx-space-2) var(--jx-space-3)"
+    },
+    "& [part=\"filter\"]": {
+      "width": "180px",
+      "flex": "0 0 auto"
+    },
+    "& [part=\"spacer\"]": {
+      "flex": "1"
+    },
+    "& [part=\"count\"]": {
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--jx-fg-dim)",
+      "whiteSpace": "nowrap"
+    },
+    "& > div[data-vertical]": {
+      "width": "max-content"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-toolbar"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A container of ARBITRARY controls with one tab stop. jx-action-group is a row of action buttons that may be joined into a segmented control; this is the element for a row that also holds a text field, a divider and a plain button, which is what every real toolbar turns out to be. Arrows move between the controls, Home and End reach the ends — and the filter field below keeps those keys for itself while its caret still has text to walk, so you arrow in, type, and arrow out again with the same key. Last verb pressed: ${state.last}."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A mixed row — the shape Studio's grid toolbar has"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "jx-toolbar",
+          "$props": {
+            "label": "Grid actions"
+          },
+          "children": [
+            {
+              "tagName": "jx-button",
+              "$props": {
+                "variant": "accent",
+                "size": "sm",
+                "label": "Save"
+              },
+              "attributes": {
+                "data-verb": "save"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Save"
+                }
+              ]
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Refresh",
+                "hint": "Reload from source",
+                "icon": "arrows-clockwise"
+              },
+              "attributes": {
+                "data-verb": "refresh"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              }
+            },
+            {
+              "tagName": "jx-divider",
+              "$props": {
+                "orientation": "vertical"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Add row",
+                "hint": "Add a row",
+                "icon": "plus"
+              },
+              "attributes": {
+                "data-verb": "add"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Delete rows",
+                "hint": "Nothing is selected",
+                "icon": "trash",
+                "disabled": true
+              }
+            },
+            {
+              "tagName": "jx-textfield",
+              "attributes": {
+                "part": "filter"
+              },
+              "$props": {
+                "size": "sm",
+                "type": "search",
+                "clearable": true,
+                "label": "Filter rows",
+                "placeholder": "Filter rows",
+                "value": {
+                  "$ref": "#/state/filter"
+                }
+              },
+              "oninput": {
+                "$ref": "#/state/setFilter"
+              }
+            },
+            {
+              "tagName": "span",
+              "attributes": {
+                "part": "spacer"
+              }
+            },
+            {
+              "tagName": "span",
+              "attributes": {
+                "part": "count"
+              },
+              "textContent": "filter: ${state.filter || '—'}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A colour well in the row"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A jx-color-field is four controls of its own — the swatch, a text field, the eyedropper and the system's colour well — and in a toolbar it is ONE stop: the swatch. Arrow onto it and Enter opens the picker; the three controls beside it leave the tab order while the field is roved, and take their own stops back anywhere else. Fill: ${state.fill}."
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "jx-toolbar",
+          "$props": {
+            "label": "Text style"
+          },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Bold",
+                "hint": "Bold",
+                "icon": "text-b",
+                "toggles": true
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Italic",
+                "hint": "Italic",
+                "icon": "text-italic",
+                "toggles": true
+              }
+            },
+            {
+              "tagName": "jx-divider",
+              "$props": {
+                "orientation": "vertical"
+              }
+            },
+            {
+              "tagName": "jx-color-field",
+              "$props": {
+                "size": "sm",
+                "label": "Fill",
+                "value": {
+                  "$ref": "#/state/fill"
+                }
+              },
+              "onchange": {
+                "$ref": "#/state/setFill"
+              }
+            },
+            {
+              "tagName": "jx-divider",
+              "$props": {
+                "orientation": "vertical"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "label": "Align left",
+                "hint": "Align left",
+                "icon": "text-align-left"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "orientation=\"vertical\""
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "data-vertical": ""
+      },
+      "children": [
+        {
+          "tagName": "jx-toolbar",
+          "$props": {
+            "label": "Node actions",
+            "orientation": "vertical"
+          },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "stacked": true,
+                "label": "Move up",
+                "icon": "arrow-up"
+              },
+              "attributes": {
+                "data-verb": "up"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "stacked": true,
+                "label": "Move down",
+                "icon": "arrow-down"
+              },
+              "attributes": {
+                "data-verb": "down"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "size": "sm",
+                "stacked": true,
+                "label": "Duplicate",
+                "icon": "copy"
+              },
+              "attributes": {
+                "data-verb": "duplicate"
+              },
+              "onclick": {
+                "$ref": "#/state/did"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "What a toolbar does NOT rove"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A jx-action-group runs a roving caret of its own, so it stands BESIDE a toolbar rather than inside one: two carets over one set of buttons is two writers of the same tabindex, and they do not agree. The group below is its own single tab stop, exactly as it is anywhere else."
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "jx-action-group",
+          "$props": {
+            "label": "Text style"
+          },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Bold",
+                "hint": "Bold",
+                "icon": "text-b",
+                "quiet": false,
+                "toggles": true
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Italic",
+                "hint": "Italic",
+                "icon": "text-italic",
+                "quiet": false,
+                "toggles": true
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}