open-index/open-npm huggingface dataset:
npm package: @jginsburgn/formidable-middleware
Description: A formidable proxy mountable as middleware.
Author: Jonathan Ginsburg
Latest version: 0.1.2

# A formidable Proxy Mountable as a Middleware

A proxy for [formidable][original-formidable] that acts as an Express middleware.

Use as follows:

```typescript
import express, {
  Express,
  Response,
} from "express";
import {
  FormidableMiddleware,
  FormidableMiddlewareRequest,
} from "@jginsburgn/formidable-middleware";

const app: Express = express();
const formidableFormConfiguration = {
  maxFileSize: 10 * 1024 ** 3 // 10 GB
};

app.post("/", FormidableMiddleware(formidableFormConfiguration), (req: FormidableMiddlewareRequest, res: Response) => {
  for (const file of req.body.files) {
    // Do what you wish with the file...
  }
  for (const field of req.body.fields) {
    // Do what you wish with the field...
  }
});

app.listen(80, "0.0.0.0");
```

[original-formidable]: https://github.com/felixge/node-formidable
npm package: @jgjp/fire
Description: Execute logic in a promise-like wrapper
Author: J Garcia
Latest version: 1.0.0

# fire

Execute any logic inside a promise-like function


## Installation

    $ npm install @jgjp/fire

## API

```typescript
import fire from '@jgjp/fire';

const { data } = await fire(async () => {
  // do something
})
  .catch(handleError)
  .finally(cleanup)

// use data
```

## License

  MIT
npm package: @jgleman/color-box
Description: Another JavaScript/TypeScript Color Utility Library
Author: Jason Gleman
Latest version: 2.0.1

# color-box

A JavaScript/TypeScript Color Utility Library (inspired by [date-fns](https://date-fns.org)).

[Demo Website](https://jgleman.com/color-box/) (work in progress) | [Documentation](https://jgleman.github.io/color-box/)

### About

This library aims to work like date-fns does for dates, but for colors. This
library provides a basic Color object which is then passed to the utility
functions. Any utility function that changes the passed in color, does so
immutably, returning a new color. Another goal is for any color manipulation
functions to match the [Sass spec](https://github.com/sass/sass-spec) where it
makes sense.

- Modular, only use what you need. Supports tree-shaking.
- Immutable, always returns a new color instance.
- TypeScript support

**v2.0.0 highlights:** CSS named colors, color harmony functions (`analogous`, `triadic`, `splitComplement`), `readableColor`, and `setRgb`.

### Install

```
npm install --save @jgleman/color-box
```

### Quick Usage

See the [documentation](https://jgleman.github.io/color-box/) for more info on all available functions.

```JavaScript
import { Color } from "@jgleman/color-box"
```

To create a new color, you can provide a color as a string in either hex:

```JavaScript
const myColor = new Color("#336699");
```

RGB:

```JavaScript
const myColor = new Color("rgb(51 102 153)");
```

HSL:

```JavaScript
const myColor = new Color("hsl(210 50% 40%)");
```

CSS named color:

```JavaScript
const myColor = new Color("coral");
const myColor = new Color("rebeccapurple");
```

A `Color` object represents the color you have entered internally as HEX, RGB and HSL. Once you have created a Color, you can use that color in any of the provided functions:

```JavaScript
import { Color, darken, hexString } from "@jgleman/color-box";

const myColor = new Color("#336699");
const myDarkerColor = darken(myColor, 20);
console.log(hexString(myDarkerColor));
// #1a334d
```

**Color harmony:**

```JavaScript
import { Color, analogous, triadic, splitComplement, hexString } from "@jgleman/color-box";
const [original, plus30, minus30] = analogous(myColor);
const [original, plus120, plus240] = triadic(myColor);
const [original, plus150, plus210] = splitComplement(myColor);
```

**Readable text color:**

```JavaScript
import { Color, readableColor, hexString } from "@jgleman/color-box";
const textColor = readableColor(new Color("#336699")); // returns white or black
```

**Set individual RGB channels:**

```JavaScript
import { Color, setRgb, hexString } from "@jgleman/color-box";
const newColor = setRgb(myColor, { r: 255 }); // only changes the red channel
```

### Breaking Changes from 1.x

- Node.js 20 or higher is now required
- `relativeLuminence` renamed to `relativeLuminance` (spelling fix)
- String input `"1.0"` no longer means 100% in setter functions (`setSaturation`, `setLightness`, `setAlpha`, `setHsl`). Use `100` or `"100%"` instead.
npm package: @jgm_1997/vue-planby
Description: vue-planby
Author: Javier González Martín
Latest version: 1.0.0

## Vue EPG Planby

> Electronic Program Guide (EPG) is a digital TV program that is used to display information about a channel's programs.

> Vue EPG Planby is a Vue components for EPG based Timeline, (ported from [planby](https://github.com/karolkozer/planby) - React based)

<div align="center" style="margin-bottom: 10px">
  <a href="https://planby.netlify.app/">
    <img src="https://i.postimg.cc/1zgmfd8T/planby-tv-vod.png" alt="Planby preview" />
  </a>
</div>

## Features
- Reactivity props
- Customizable template

## Installation
```sh
# install packages
$ npm install @jgm_1997/vue-planby
```

## Usage
Vue 3 (Vue 2.7)

## License
MIT License © 2023 Javier González Martín

## Credits

Karol Kozer - [@kozerkarol_twitter](https://twitter.com/kozerkarol)

Planby: React based [https://github.com/karolkozer/planby](https://github.com/karolkozer/planby)
npm package: @jgoday/react-native-dragndrop
Description: React native drag and drop views.
Author: Javier Goday
Latest version: 0.1.6

# react-native-dragndrop

## Screenshots
![screenshot](https://raw.githubusercontent.com/jgoday/react-native-dragndrop/master/public/dragndrop.gif)

## Getting started
`$ npm install react-native-dragndrop --save`

## Usage
```typescript
import * as React from 'react';
import { View, Text } from 'react-native';
import { DragAndDropProvider, Draggable, DropView } from 'react-native-dragndrop';

export interface IProps {}
export default function Sample(props: IProps) {
    const [ numbers, setNumbers ] = React.useState<number[]>([1, 2, 3, 4]);
    const [ currentStyle, setCurrentStyle ] = React.useState<any>({});

    const onDrop = (currentNumber: number, selectedNumber: number) => {
        if (currentNumber == selectedNumber) {
            setCurrentStyle(styles.successMatch);
        }
        else {
            setCurrentStyle(styles.failureMatch);
        }
    }

    return (<View style={styles.container}>
        <DragAndDropProvider>
            {numbers.map((w, i) => <DropView key={i}
                onDrop={n => onDrop(n, w)}>
                <Text>{w}</Text>
            </DropView>)}

            <Draggable data={2}>
                <Text style={currentStyle}>2</Text>
            </Draggable>
        </DragAndDropProvider>
    </View>);
}
```

## Implementation
### DragAndDropProvider
Makes the use of Draggable and DropView available to any nested components.


### DropView
Wrapper to receive a drop event over an existing component.

#### Props

| Prop        | Type     | Optional | Default | Description |
| ----------  | -------- | -------- | ------- | ----------- |
| `onDrop`    | Function | Yes      |         | Called when a drop event is generated over the component. It receives the Draggable data property. |
| `style`     | any      | Yes      |         | Additional style to the DropView wrapper component.            |
| `highlight` | bool     | Yes      |         | Should the component react to a drag over event.                |
| `highlightStyle` | any | Yes      |         | Additional style when a drag event is over the component.       |


### Draggable
Wrapper to convert a component into a draggable view. It can optionally hold a `data` prop that will be passed to the drop event.

#### Props
| Prop        | Type | Optional | Default | Description |
| ----------  | ---- | -------- | ------- | ----------- |
| `data`      | any  | Yes      |         | Additional data that will be passed to the drop event.  |
| `style`     | any  | Yes      |         | Additional style to the Draggable wrapper Component.  |
| `onMove`    | Function  | Yes      |         |  Called when the draggable view is moved. It passes the pageX and pageY coordinates. |