open-index/open-npm huggingface dataset:
npm package: @jsxui/layout
Description: Utilities for building grid layouts and measuring text.
Author: Travis Arnold
Latest version: 0.1.9

# @jsxui/layout

Manage complex layouts performantly using simple constructs.

## Install

```bash
yarn add @jsxui/layout
npm install @jsxui/layout
```

## Get Started

- [Grid](#grid)
- [Column](#column)
- [Row](#row)
- [Space](#space)

### Grid

```ts
import { Column, Grid, Node } from '@jsxui/layout'

const grid = new Grid({
  columns: 12,
  rows: 12,
  children: [
    new Column({
      width: 6,
      height: 12,
      children: [new Node({ width: 3, height: 1 })],
    }),
  ],
})
```

### Column

```ts
import { Column, Node } from '@jsxui/layout'

const column = new Column({
  children: [
    new Node({ width: 2, height: 2 }),
    new Node({ width: 4, height: 2 }),
  ],
})

column.addChild(new Node({ width: 6, height: 2 }))
```

### Row

```ts
import { Node, Row } from '@jsxui/layout'

const row = new Row({
  children: [
    new Node({ width: 2, height: 2 }),
    new Node({ width: 2, height: 2 }),
  ],
})
```

### Space

```ts
import { Grid, Node, Space } from '@jsxui/layout'

const grid = new Grid({ columns: 12, rows: 1 })
const space = new Space()

grid.addChild(new Node({ width: 2, height: 1 }))
grid.addChild(space)
grid.addChild(new Node({ width: 2, height: 1 }))
```

## Why?

Building performant layouts at scale is extremely hard. It's easy to introduce performance regressions, layout thrashing, and taking a toll on your overall application's performance. This package helps avoid these problems by providing a simple API to manage complex layouts. It does so by using strict grid principles developed by early graphic designers while utilizing novel techniques like collapsing nodes into one position.

### Collapsing Layouts

Collapsing layout is the process of removing unnecessary nodes from the tree that are not required to position a node correctly.

For example, the following layout will collapse to a simple placement in the parent grid:

```tsx
import { Column, Grid, Row, Node, Space } from '@jsxui/layout'

const node1 = new Node({ width: 2, height: 1 })
const node2 = new Node({ width: 2, height: 1 })
const space = new Space({ size: 2 })
const column = new Column({ children: [node1, space, node2] })
const grid = new Grid({ columns: 16, rows: 24 })

node2.getLayout() // { column: 1, row: 4, width: 2, height: 1 }
```

This encourages declarative layout by not penalizing the user for using nested layouts. In the future, a compiler can do these optimizations ahead of time where possible.
npm package: @jsxui/layout-snapshot
Description: Jest snapshot matcher to generate screenshots of your layout tests.
Author: Travis Arnold
Latest version: 0.0.3

# @jsxui/layout-snapshot

[Jest snapshot matcher](https://jestjs.io/docs/snapshot-testing) to generate screenshots of your layout tests.

## Install

```bash
yarn add @jsxui/layout-snapshot
npm install @jsxui/layout-snapshot
```

## Usage

```ts
import { computeLayout, createColumn, createNode } from '@jsxui/layout'
import { toMatchLayoutSnapshot } from '@jsxui/layout-snapshot'

expect.extend({ toMatchLayoutSnapshot })

test('positions Column children along vertical axis', () => {
  const node1 = createNode({ width: 2, height: 2 })
  const node2 = createNode({ width: 4, height: 1 })
  const column = createColumn({
    columns: 1,
    rows: 4,
    children: [node1, node2],
  })
  const { layout } = computeLayout(column)

  expect(layout).toMatchLayoutSnapshot()
})
```

## Development

If you are experiencing issues installing the package for development on your machine, it's most likely due to the `canvas` dependency this package relies on. Check the installation instructions [here](https://github.com/Automattic/node-canvas/wiki/Installation%3A-Mac-OS-X) to make sure you have the appropriate libaries installed.
npm package: @jsxui/text
Description: Utilities for working with text in the browser and node.
Author: Travis Arnold
Latest version: 0.0.2

# @jsxui/text

Utilities for working with text in the browser and node.

## Install

```bash
yarn add @jsxui/text
npm install @jsxui/text
```

## Exports

### getTextMetrics

### getLinesFromText

### getTextWidth

### getTextHeight

### createTextStyles

## Acknowledgements

### createTextStyles

This utility is forked from the [precomputeValues](https://github.com/seek-oss/capsize/blob/master/packages/core/src/precomputeValues.ts) function from [Capsize](https://seek-oss.github.io/capsize/).

### getLinesFromText

This utility is forked from the [autowrap](https://github.com/junfengliang/autowrap) package.
npm package: @jsxui/value
Description: Reactive values for building interactive user interfaces powered by preact signals.
Author: Travis Arnold
Latest version: 0.0.8

# @jsxui/value

Reactive values for building performant interactive user interfaces powered by [preact signals](https://github.com/preactjs/signals#signals).

## Install

```bash
yarn add @jsxui/value
npm install @jsxui/value
```