open-index/open-npm huggingface dataset:
npm package: @jchn/redraw
Description: canvas + jsx + hooks
Author: John van de Water
Latest version: 0.0.10

# Redraw

Canvas + JSX + Hooks

<p align="center">
  <img width="543" height="463" alt="redraw demo" src="/media/redraw-example.gif" />
</p>

[View on CodePen](https://codepen.io/JohnvandeWater/pen/5de1299cbacff72b850183f220636487)

**⚠️ Please note that this still is a work in progress ️️️⚠️**

## Getting started

Install Redraw:

```
npm i @jchn/redraw
```

### Configure Babel

You can use JSX to create your views, to do this you need to configure babel to use Redraw's `createElement` function.

#### Drawing a rectangle on the canvas

```jsx
import { render, createElement as h } from '@jchn/redraw'

/* @jsx h */

const view = (
  <rectangle x={10} y={10} width={50} height={50} />
)

// obtain the CanvasRenderContext2D object
const ctx = document.querySelector('canvas').getContext('2d')

// mount the application by passing the view and the context to Redraw's render function
render(ctx, view)
```

## Components

You can create your own components by creating functions:

```jsx
const MyRectangle = ({ x, y, width, height, children }) => {
  return (
    <rectangle x={x} y={y} width={width} height={height}>
      {children}
    </rectangle>
  )
}
```

## Events

You can add events to elements by using props like `onClick`:

```jsx
const view = (
  <rectangle x={10} y={10} width={50} height={50} onClick={e => {
    console.log('click!')
  }} />
)
```

**Note: not alle events are yet supported**

## Hooks

Currently you can only use the `useState` hook, more hooks to come!

```jsx
import { useState } from '@jchn/redraw'

const MyRectangle = ({ x, y, width, height, children }) => {

  const [count, setCount] = useState(0)

  return (
    <rectangle x={x} y={y} width={width} height={height} onClick={() => {
      setCounter(count + 1)
    }}>
      clicked {count} times!
    </rectangle>
  )
}
```

<!-- ## Demo's -->
npm package: @jchn/simple-masonry-layout
Description: Creating masonry layouts based on rectangles.
Author: John van de Water
Latest version: 0.1.2

# SimpleMasonryLayout

Create masonry style layouts and render them any way you want.

## Install

`npm i @jchn/simple-masonry-layout`

## Creating the layout

SimpleMasonryLayout has one single function which is called `getLayout`, this function will return an object describing the layout.

```ts
import { getLayout } from "@jchn/simple-masonry-layout";

const items = [
  { size: { width: 150, height: 200 }, data: null },
  { size: { width: 200, height: 150 }: data: null },
];
const layout = getLayout(items, 800, 3, { gutter: 10 });
```

```ts
getLayout<T>(
  items: Item<T>[],    // The input dimensions, oftentimes the width and height of an image
  width: number,    // The width of the grid
  columns: number,  // The number of columns
  options?: Options // More options
) => Layout<T>

type Layout<T> = {
  items: GridItem<T>[]
  height: number
}

type Item<T> = {
  size: Size,
  data: T
}

type GridItem<T> = {
  rect: Rect
  data: T
}

type Size = {
  width: number,
  height: number
}

type Rect = {
  x: number,
  y: number,
  width: number,
  height: number
}

type Options = {
  gutter: number,   // x and y gutter
  gutterX: number,  // x gutter
  gutterY: number,  // y gutter
  paddingY: number, // additional height added to rectangle
  collapsing: bool, // if the elements should collapse into each other
  centering: bool   // if the elements should be centered if there are less items then columns
}
```

Now it's up to you to translate this layout object to something on screen using the DOM or a Canvas or anything else:

```ts
const container = document.querySelector(".container")

container.style.height = `${layout.height}px`

layout.items.forEach({ rect } => {
  const div = document.createElement('div')

  div.style.cssText = `
    position: absolute;
    top: ${rect.x};
    left: ${rect.y};
    width: ${rect.width}px;
    height: ${rect.height}px;
    border: 1px solid;
  `

  document.body.appendChild(div)
})
```
npm package: @jchn/simple-masonry-layout-react
Description: React component for creating masonry layouts.
Author: John van de Water
Latest version: 0.1.1

# SimpleMasonryLayoutReact

## Install

`npm i @jchn/simple-masonry-layout-react`

## Example

```tsx
import React from "react"
import Layout from "@jchn/simple-masonry-layout-react"

const MasonryGrid = () => {
  const items = [
    { size: { width: 150, height: 200 }, data: { key: 'some-unique-key' } },
    { size: { width: 200, height: 150 }: data: { key: 'some-other-unique-key' } },
  ];

  return (
    <Layout
      items={items}
      columns={3}
      options={{ gutter: 5 }}
      renderContent={({ rect, data }) => (
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            transform: `translate(${rect.x}px, ${rect.y}px)`,
            height: "auto",
          }}
        >
          {/* render your content */}
        </div>
      )}
    />
  )
}
```
npm package: @jchnkl/csscalc
Description: operate with css units in js
Author: morglod
Latest version: 0.1.3

[![NPM Version](https://badge.fury.io/js/csscalc.svg?style=flat)](https://www.npmjs.com/package/csscalc)

# csscalc

JavaScript library to do math with css units.  
Fully typed with typescript.

Currently supported units: `px`, `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `vh`, `vw`, `vmin`, `vmax`, `rem`, `%w`, `%h`.

* Convert between css units
* Calculate css expressions

Based on https://developer.mozilla.org/en-US/docs/Web/CSS/length

## Examples

Calculate what part of screen's width takes specified element:
```js
import { calc } from 'cssunits';

// %w means % of width
calc('100%w / 100vw', element);
```

Calculate area of element:
```js
calc('100%w * 100%h', element);
```

Convert pixels to percent of element's width:
```js
convert(100, 'px', '%w', calcCtx(element));
```

Convert element's width percent to pixels:
```js
convert(50, '%w', 'px', calcCtx(element));

// or

Relative["%w"](50, calcCtx(element));
```

`calc` method converts all known units and then invokes js's `eval` method, so you can use any inline js code in `calc`.  
For example min/max from Math:
```ts
calc('Math.max(100%w, 100%h)', element)
```

## API

`Absolute` map, units -> pixels.  
```ts
Absoulte = {
    "absolute unit name" -> pixels
}
```

`Relative` map, (units, calcContext) -> pixels.  
```ts
Relative = {
    "relative unit name": (units: number, ctx?: CalcContext) => number
}
```

`UnitRegexpStr`, `UnitRegexp`, `UnitRegexpGM` - regular expression to find units.

Convert between units:
```ts
function convert(count: number, fromUnits: Unit, toUnits: Unit, calcCtx?: CalcContext): number;
```

Create calc context:
```ts
function calcCtx(el?: HTMLElement): CalcContext;
```

Calculate expression:
```ts
function calc(expression: string, el: HTMLElement, ctx?: CalcContext): number;
function calc(expression: string, ctx?: CalcContext): number;
```

## Roadmap

* Reactive calculations
npm package: @jchoelt/apidoc-plugin-ts
Description: A plugin for apidoc leveraging TypeScript interfaces.
Latest version: 2.3.1

# apidoc-plugin-ts

A plugin for [apidoc](https://www.npmjs.com/package/apidoc) that injects params like `@apiSuccess` and `@apiParam` from TypeScript interfaces.
Supports extended and nested interfaces.

## Getting started

```javascript
npm install --save-dev apidoc @jchoelt/apidoc-plugin-ts
```

```javascript
yarn add -D apidoc @jchoelt/apidoc-plugin-ts
```

The following custom api-doc params are exposed:
- `@apiParamInterface`
- `@apiQueryInterface`
- `@apiBodyInterface`
- `@apiSuccessInterface`
- `@apiSuccess[XYZ]Interface` - when XYZ is the response HTTP status code (example `404`), which can be in the `5xx` form (`xx` instead of the last 2 digits).

```javascript
@CUSTOM_PARAM (optional path to definitions file) {INTERFACE_NAME}
 ```

## Example

Given the following interface:

```javascript
// filename: ./employers.ts

export interface Employer {

  /**
   * Employer job title
   */
  jobTitle: string;

  /**
   * Employer personal details
   */
  personalDetails: {
    name: string;
    age: number;
  }

  /**
   * This field is for internal use.
   * @private
   */
  privateDetails: string;
}
```

and the following custom param:

```javascript
@apiSuccessInterface (./employers.ts) {Person}
```

under the hood this would transpile to:

```javascript
@apiSuccess {String} jobTitle Job title
@apiSuccess {Object} personalDetails Employer personal details
@apiSuccess {String} personalDetails.name
@apiSuccess {Number} personalDetails.age
```

*Note if the `Person` interface is defined in the same file then you can drop the path:*

```javascript
@apiSuccessInterface {Person}
```

You can add `@private` or `@ignore` to the field documentation to omit it from the output.