open-index/open-npm huggingface dataset:
npm package: @ohxyz/combobox
Description: A combo box implementation in React
Author: Ohxyz
Latest version: 1.3.4

# Quick start

```
<Combobox items={ [ 'abc', 'abd', 'bcd', 'cde', 'bde' ] } 
          onSelect={ item => console.log( item ) } 
/>
```

# More

```
import React from 'react';
import ReactDOM from 'react-dom';
import { Combobox } from '@ohxyz/combobox';
import '@ohxyz/combobox/style/default.css';

const persons = [
    { height:  175,       name:    'Andrea'                    },
    { height:  167,       name:    'Anthony',  sex:     'Male' },
    { name:   'Annie',    sex:     'Female',   height:   180   },
    { name:   'Campbell', height:   175                        },
    { sex:    'Female',   name:    'Bennie',   height:   175   },
    { name:   'Cameron',  height:   173,       sex:     'Male' },
    { name:   'Benjamin', sex:     'Male',     height:   167   },
    { name:   'Anna',     sex:     'Female',   height:   169   },
    { name:   'Benson',   sex:     'Male'                      }
];

ReactDOM.render(
    <Combobox
        items={ persons }
        fields={ [ 'name', 'height' ] }
        indexOfFieldsToSort={ 1 }
        id="my-combobox"
        inputId="my-combobox__input-id"
        inputName="my-combobox__input-name"
        placeholder="Search people..."
        strikes={ 2 }
        shouldRenderCount={ true }
        shouldRenderListOnFocus={ false }
        shouldRenderIcon={ true }
        onIconClick= { combobox => { console.log( combobox ); combobox.toggleAllItems(); } }
        onSelect={ ( item, combobox ) => { console.log( item, combobox ); } }
        onChange= { combobox => console.log( combobox ) }
        onFocus={ combobox => console.log( combobox ) }
        onBlur={ combobox => console.log( combobox ) }
    />,
    document.getElementById( 'container' )
);
```

# Render customized item by inheritance
```
class MyCombobox extends Combobox {

    renderItem( person ) {
        return (
            <div className="combobox__person">
                <div>{ person.name }</div>
                { person.sex && <div>{ { Male: 'Man', Female: 'Woman' }[ person.sex ] }</div> }
                { person.height && <div>Height: { person.height }CM</div> }
            </div>
        );
    }
}

ReactDOM.render(
    <MyCombobox items={ persons } />,
    document.getElementById( 'container' )
);
```
npm package: @ohxyz/grid
Description: Display a table or a list. Built in React.
Latest version: 1.0.8

# grid
Grid with sorting capacity in React

# Example
```
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from '@ohxyz/grid';
import '@ohxyz/grid/style/default.css';

let persons = [

    { height:  175,       name:    'Andrea'                    },
    { height:  167,       name:    'Anthony',  sex:     'Male' },
    { name:   'Annie',    sex:     'Female',   height:   180   },
    { name:   'Campbell', height:   175                        },
    { sex:    'Female',   name:    'Bennie',   height:   175   },
    { name:   'Cameron',  height:   173,       sex:     'Male' },
    { name:   'Benjamin', sex:     'Male',     height:   167   },
    { name:   'Anna',     sex:     'Female',   height:   169   },
    { name:   'Benson',   sex:     'Male'                      }
];

let columnRefs = [

    { prop: 'name', name: 'Name' },
    { prop: 'sex', name: 'Gender' },
    { prop: 'height', name: 'Height(cm)' },
];

ReactDOM.render(
    <Grid items={ persons } 
          cols={ columnRefs } 
    />,
    document.getElementById('container')
);
```
npm package: @ohze/pixi-multistyle-text
Description: Multi-Style Text for pixi.js
Author: Tommy Leunen
Latest version: 1.0.0

# pixi-multistyle-text

[![NPM](https://nodei.co/npm/pixi-multistyle-text.png)](https://nodei.co/npm/pixi-multistyle-text/)

Add a `MultiStyleText` object inside [pixi.js](https://github.com/GoodBoyDigital/pixi.js) to easily create text using different styles.

## Example

In the example below, we are defining 4 text styles.
`default` is the default style for the text, and the others matches the tags inside the text.

```js
let text = new MultiStyleText("Let's make some <ml>multiline</ml>\nand <ms>multistyle</ms> text for\n<pixi>Pixi.js!</pixi>",
{
	"default": {
		fontFamily: "Arial",
		fontSize: "24px",
		fill: "#cccccc",
		align: "center"
	},
	"ml": {
		fontStyle: "italic",
		fill: "#ff8888"
	},
	"ms": {
		fontStyle: "italic",
		fill: "#4488ff"
	},
	"pixi": {
		fontSize: "64px",
		fill: "#efefef"
	}
});
```

## Usage

### `text = new MultiStyleText(text, textStyles)`

Creates a new `MultiStyleText` with the given text and styles.

#### `textStyles`
Type: `{ [key: string]: ExtendedTextStyle }`

Each key of this dictionary should match with a tag in the text. Use the key `default` for the default style.

Each `ExtendedTextStyle` object can have [any of the properties of a standard PIXI text style](http://pixijs.download/release/docs/PIXI.TextStyle.html), in addition to a `valign` property that allows you to specify where text is rendered relative to larger text on the same line (`"top"`, `"middle"`, or `"bottom"`).

The `align`, `wordWrap`, `wordWrapWidth`, and `breakWord` properties are ignored on all styles _except for the `default` style_, which controls those properties for the entire text object.

If text is rendered without any value assigned to a given parameter, Pixi's defaults are used.

## Demo

Open `demo/index.html` in a browser for several helpful examples.

## License

MIT, see [LICENSE.md](http://github.com/tleunen/pixi-multistyle-text/blob/master/LICENSE.md) for details.
npm package: @ohze/rangefix
Description: Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.
Author: Ed Sanders
Latest version: 0.2.6

Workaround for browser bugs in Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.

In particular:

* Chrome <= 54: Selections spanning multiple nodes return rectangles for all the parents of the endContainer. See https://code.google.com/p/chromium/issues/detail?id=324437.
* Chrome 55: Images get no rectangle when they are wrapped in a node and you select across them.
* Safari: Similar to the Chrome <= 54 bug, but only triggered near the edge of a block node, or programmatically near an inline node.
* Firefox: Similar to the Chrome <= 54 bug, but only triggered near the edge of a inline node
* IE <= 10: Rectangles are incorrectly scaled when using the browser's zoom feature.

There are no known issues in Chrome >= 56, Edge and IE >= 11. In these browsers the library will fall through to native behaviour.

Install
=======

```bash
$ npm install rangefix
```

Usage
=====

**CommonJS**

```javascript
var RangeFix = require( 'rangefix' );
```

**AMD**

```javascript
define( [ 'rangefix' ], function( Rangefix ) {
	// ...
} );
```

**Browser global**

```html
<script src="path/to/rangefix.js"></script>
```

**API**

Replace instances of `Range.prototype.getClientRects`/`getBoundingClientRect` with `RangeFix.getClientRects`/`getBoundingClientRect`:

```javascript
range = document.getSelection().getRangeAt( 0 );

// Before
rects = range.getClientRects();
boundingRect = range.getBoundingClientRect();

// After
rects = RangeFix.getClientRects( range );
boundingRect = RangeFix.getBoundingClientRect( range );
```

Demo
====
http://edg2s.github.io/rangefix/
npm package: @ohze/robotlegs-signalmediator
Description: TypeScript port of Robotlegs Extensions SignalMediator
Author: Do Duc Cuong
Latest version: 1.0.2

RobotlegsJS SignalMediator Extension
===
[![Gitter chat](https://badges.gitter.im/RobotlegsJS/RobotlegsJS.svg)](https://gitter.im/RobotlegsJS/RobotlegsJS)
[![Build Status](https://travis-ci.org/ohze/RobotlegsJS-SignalMediator.svg?branch=master)](https://travis-ci.org/ohze/RobotlegsJS-SignalMediator)

A port of Robotlegs Extensions SignalMediator to TypeScript.
npm package: @oi/oi
Description: CLI and core components of Oi
Author: Oliver Lade
Latest version: 0.1.2

# Oi

[![Build Status][travis-img]][travis-url]
[![Coverage Status][cover-img]][cover-url]
[![NPM Version][npm-img]][npm-url]

A CLI tool for automating development tasks.

## Getting Started

To install Oi:

    npm install -g @oi/oi
    oi -h

As an example of an Oi plugin, you can install [Oi's own development plugin][oi-oi]:

    npm install -g @oi/oi-oi
    oi oi -h

Note that if you are using `nvm`, global plugins will need to be installed using the same NVM you
intended to run them with.

## Structure

Oi's command-line interface is structured like that of Git. After the initial `oi` command follows
the name of a `module`, and after that is an `action` to perform on the module. Options can be
specified at any point after the `oi` command.

## Plugins

Oi is designed to be a framework with which modular, extensible CLI tools can be built. Using the
[js-plugins][jsp] library, Oi scans for plugins that define modules, each of which registers its own
command and associated actions. New project-specific tools can then be built by aggregating the
commands for existing tools, and extending them for particular use cases.

### Creating a Plugin

An Oi plugin is a Node.js module that contains an extra section in its `package.json` file and
exports classes that serve as modules.

The extra `package.json` section is an `extensions` object, which declares one or more modules
within a map called `oi:module`. Each key is the name of a module, and the corresponding value is
the path (relative to the `package.json` file) from which to `require` the module class. For example:

    "extensions": {
      "oi:module": {
        "foo": "./module/foo"
      }
    }

The only requirement of the exported module itself is that it must be a class, an object, or a
function that returns a class or an object.

Note that the path **must include a slash** (e.g. `./index.js` or `/path/to/index.js`) if it refers
to a file that should be `require`d.

### Oi Plugin Examples

 - [`oi-oi`][oi-oi]: CLI for development tasks on Oi itself.
 - [`oi-sysl`][oi-sysl]: CLI for running
   [Sysl][sysl] tasks.


[travis-img]: https://travis-ci.org/orlade/oi.svg?branch=develop
[travis-url]: https://travis-ci.org/orlade/oi
[cover-img]: https://coveralls.io/repos/github/orlade/oi/badge.svg?branch=develop
[cover-url]: https://coveralls.io/github/orlade/oi?branch=develop
[npm-img]: https://img.shields.io/npm/v/@oi/oi.svg
[npm-url]: https://www.npmjs.com/package/@oi/oi

[jsp]: https://github.com/easeway/js-plugins
[oi-oi]: https://github.com/orlade/oi-oi
[oi-sysl]: https://github.com/orlade/oi-sysl
[sysl]: https://github.com/ANZ-bank/Sysl
npm package: @oi/oi-oi
Description: Development module for Oi
Author: Oliver Lade
Latest version: 0.1.0

# Oi Development

[![Build Status](https://travis-ci.org/orlade/oi-oi.svg?branch=develop)](https://travis-ci.org/orlade/oi-oi)

An [Oi](https://github.com/orlade/oi) plugin to run development tasks on Oi itself.

Oi plugins are typically named using the `@oi` scope followed by `oi-<foo>`, where `foo` is a 
logical grouping of commands, such as a project. In this case the project is Oi, hence the name.

## Usage

    npm install -g @oi/oi @oi/oi-oi
    oi oi -h