0.1.0-beta.10

@diamonddigitaldev/electron-kit | Beta Preview (v0.1.0-beta.10)

Important

A beta: the API can still change between 0.x versions. It's published under npm's next tag.

Cards for a list of files or transfers, with selection and a bulk bar, plus a stepped slider, a switch whose help follows it, and busy buttons. Every new piece is additive: an app on 0.1.0-beta.9 runs on it unchanged. The one thing that can break is a test that matches kit.format.summarise()'s old wording: see Changed.

npm install @diamonddigitaldev/electron-kit@next

New

• kit.ui.card({ icon, name, onConfigure, onRemove, route }) → { element, update(state) }: a card for one item of work. Its head (a selection box, the kind's glyph, the name, Advanced Options and Remove), a meta line, a settings line, a route row ("To", or "MP4 →", then the app's own control), a status line whose dot takes one of six tones (running pulses, still under reduced motion), a thin progress bar, the app's own rows, and the card's buttons, rebuilt only when they change. update() takes the whole state each time; locked disables the card's controls, and canRemove keeps Remove while the rest is locked. Every button on a card is one size.
• kit.ui.cardGrid(container, { view, onSelect }): the cards side by side, in the order added, with a file manager's selection: a click selects one, Ctrl/Cmd toggles, Shift selects a range, a card's box toggles just its card, the empty space clears; Ctrl+A and Escape in its view. add, remove, cards, selection, select, selectAll, clear. The rules are also public as kit.ui.cardGrid.resolveSelection() and pruneSelection(), for a list that isn't cards.
• kit.ui.bulkBar(grid, { noun, target, actions }) → { element, refresh() }: the select-all box (half ticked when some are), "Select all" / "N selected", the app's target select labelled "… all to" / "… selected to" with its note, the app's actions (always, or only with a selection), and Deselect.
• kit.ui.busy(button, label) → restore(): the button disabled, with a small spinner before "Pausing…" or whatever it's doing; restore() puts it back.
• kit.ui.switchField({ id, label, checked, help: { on, off }, onChange }) → { element, input, set(checked) }: a switch with one help line that says what the state it's in does, and changes with it.
• kit.ui.stepSlider({ id, label, min, max, value, valueText, help, onChange }) → { element, input, set(n) }: a choice of a few whole numbers (up to 10), a node per value the knob snaps to, filled in the accent up to the knob. A native range underneath, so the keyboard and screen readers work as they always do.
• progress().set(percent, { paused: true }): a paused bar keeps its value, faded and still.

Changed

• kit.format.summarise()'s wording: its clauses are joined with " · " in Title Case, the noun on the first count: "3 Files Converted · 1 Failed · 1 Skipped" (was "3 files converted, 1 failed, 1 skipped"). "Nothing converted" stays a sentence. The signature is the same, but an app's tests that match the old wording need changing.
• Settings > Update: Check for Updates shows "Checking…" with a spinner while a check runs, however it was started, and Restart Now "Restarting…" while it installs. "Download updates automatically" is now a switchField() (same ids and words).
• Every range's knob is in the accent, with the house's focus ring instead of Bootstrap's blue glow.
• Settings' tab bar sits under the selected tab's word, and the update dot no longer moves it.
• Outline buttons on a card or the bulk bar are filled with the page's colour, and an outline danger button's text on the dark theme is the theme's danger text colour, so both keep 4.5:1.

Docs

• Page Components: Cards, the Card Grid, the Bulk Bar, the Switch, the Stepped Slider, summarise() under Format, and the new Copy Rules (a capital after a colon; Title Case between bullets unless an item is a sentence; names and addresses never recased).
• The Shell, Settings and Credits: the Update tab's busy buttons and the tab bar.

The docs are in the repository: start at docs/README.md.

Found something wrong? Open an issue.