@metreeca/tile-hive

Preact layouts and containers for @metreeca/tile interfaces.

A consumer assembles a screen from the arrangements an app repeats: pages, tables, accordions, panes, grids and stacks that answer where things sit, and takes from here the element the screen is rendered into. A layout places the widgets handed to it without knowing what they mean, so an arrangement is replaced without touching what the interface does.

A container need not place anything. One may instead settle how the widgets it encloses appear, retuning the design system over an area so a toolbar, a panel or a whole screen is written in a single register rather than every widget in it repeating the same value, and a widget asking for something of its own still getting it. Another sets them on a box of its own, padded, rounded, lifted and painted from the design system, so a card, a panel or a well needs no rule written for it.

Styling is structural only: what an arrangement needs to work, with the values behind colour, type and spacing left to @metreeca/tile or to whoever styles the app.

Installation

npm install preact               # peer dependency
npm install @metreeca/tile-hive  # this package

[!WARNING]

TypeScript consumers must use "moduleResolution": "nodenext"/"node16"/"bundler" in tsconfig.json. The legacy "node" resolver is not supported.

Usage

[!NOTE]

This section introduces essential concepts; for complete coverage, see the API reference.

{TBD: usage overview and examples}

Support

• open an issue to report a problem or to suggest a new feature
• start a discussion to ask a how-to question or to share an idea

License

This project is licensed under the Apache 2.0 License – see LICENSE file for details.