open-index/open-npm huggingface dataset:
npm package: @ishikawa_masashi/react-contexify
Description: Add contextmenu to your react component with ease
Author: Fadi Khadra
Latest version: 1.1.1

<img width="645" alt="screenshot 2018-10-31 at 13 32 57" src="https://user-images.githubusercontent.com/5574267/47815610-1806fa00-dd51-11e8-981b-2f680244ae29.png">

![React-contexify CI](https://github.com/fkhadra/react-contexify/workflows/React-contexify%20CI/badge.svg) [![npm](https://img.shields.io/npm/dm/react-contexify.svg)]() [![npm](https://img.shields.io/npm/v/react-contexify.svg)]() [![license](https://img.shields.io/github/license/fkhadra/react-contexify.svg?maxAge=2592000)]()

<div style="text-align:center">

![contexify](https://user-images.githubusercontent.com/5574267/100552409-500dfd80-3287-11eb-96ee-fc1d17ef50b8.gif)

</div>


## Documentation

Go [here](https://fkhadra.github.io/react-contexify). 

## Installation

Using yarn

```sh
$ yarn add react-contexify
```

Using npm

```sh
$ npm install --save react-contexify
```

## The gist

```js
import React from 'react';
import { Menu, Item, Separator, Submenu, MenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  function handleContextMenu(event){
      event.preventDefault();
      show({
        event,
        props: {
            key: 'value'
        }
      })
  }
  const handleItemClick = ({ event, props }) => console.log(event,props);

  return (
    <div>
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item onClick={handleItemClick}>Item 1</Item>
      <Item onClick={handleItemClick}>Item 2</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item onClick={handleItemClick}>Sub Item 1</Item>
        <Item onClick={handleItemClick}>Sub Item 2</Item>
      </Submenu>
    </Menu>
    </div>
  );
}
```

## Contribute

Any idea and suggestions are welcome. Please have a look at the contributing guide.

## License

React Contexify is licensed under MIT.
npm package: @ishikawa_masashi/react-menu-bar
Description: Add menu bar to your react component
Author: Ishikawa Masashi
Latest version: 1.1.2

# react-menu-bar

Menu bar component for [React][1].

## Installation

```sh
npm install --save react-menu-bar
```

## Usage

```js
var { MenuBar, MenuItem, Menu, Separator } = require("react-menu-bar");

var MyMenuBar = React.createClass({
  render: function() {
    return (
      <MenuBar onSelect={this.onSelect}>
        <MenuItem label="File">
          <Menu>
            <MenuItem command="new-window">New Window</MenuItem>
            <MenuItem command="new-file">New File</MenuItem>
          </Menu>
        </MenuItem>

        <MenuItem label="Edit">
          <Menu>
            <MenuItem command="undo">Undo</MenuItem>
            <MenuItem command="redo">Redo</MenuItem>
            <Separator />
            <MenuItem label="Find">
              <Menu>
                <MenuItem command="find">Find…</MenuItem>
                <MenuItem command="find-next">Find Next</MenuItem>
                <MenuItem command="find-previous">Find Previous</MenuItem>
                <MenuItem command="use-selection-for-find">
                  Use Selection For Find
                </MenuItem>
              </Menu>
            </MenuItem>
          </Menu>
        </MenuItem>

        <MenuItem label="Help">
          <Menu>
            <MenuItem command="terms-of-use">Terms of Use</MenuItem>
            <MenuItem command="documentation">Documentation</MenuItem>
            <Separator />
            <MenuItem command="release-notes">Release Notes</MenuItem>
          </Menu>
        </MenuItem>
      </MenuBar>
    );
  },

  onSelect: function(command) {
    console.log("Selected: %s", command);
  }
});
```

[1]: https://facebook.github.io/react/
npm package: @ishirak/ishirak-cli
Description: Random commands
Author: Michal Snovický @Ishirak
Latest version: 0.0.7

ishirak-cli
===========

Random commands

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/ishirak-cli.svg)](https://npmjs.org/package/ishirak-cli)
[![Downloads/week](https://img.shields.io/npm/dw/ishirak-cli.svg)](https://npmjs.org/package/ishirak-cli)
[![License](https://img.shields.io/npm/l/ishirak-cli.svg)](https://github.com/Ishirak/ishirak-cli/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @ishirak/ishirak-cli
$ ishirak-cli COMMAND
running command...
$ ishirak-cli (-v|--version|version)
@ishirak/ishirak-cli/0.0.7 win32-x64 node-v10.11.0
$ ishirak-cli --help [COMMAND]
USAGE
  $ ishirak-cli COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`ishirak-cli help [COMMAND]`](#ishirak-cli-help-command)
* [`ishirak-cli touch FILE`](#ishirak-cli-touch-file)

## `ishirak-cli help [COMMAND]`

display help for ishirak-cli

```
USAGE
  $ ishirak-cli help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v2.1.4/src\commands\help.ts)_

## `ishirak-cli touch FILE`

Creates a file. If a file exists, not modify it.

```
USAGE
  $ ishirak-cli touch FILE

OPTIONS
  -h, --help  show CLI help

EXAMPLE
  $ ishirak-cli touch index.html
```

_See code: [src\commands\touch.ts](https://github.com/Ishirak/ishirak-cli/blob/v0.0.7/src\commands\touch.ts)_
<!-- commandsstop -->
npm package: @ishitatsuyuki/apollo-composable
Description: Apollo GraphQL for Vue Composition API
Author: Guillaume Chau
Latest version: 4.0.0-alpha.19.usequery-stale

# Apollo and GraphQL for Vue.js (Composition API)

[![npm](https://img.shields.io/npm/v/@vue/apollo-composable.svg) ![npm](https://img.shields.io/npm/dm/@vue/apollo-composable.svg)](https://www.npmjs.com/package/@vue/apollo-composable)
[![apollo3](https://img.shields.io/badge/apollo-3.x-blue.svg)](https://www.apollographql.com/)
[![vue3](https://img.shields.io/badge/vue-3-brightgreen.svg)](https://vuejs.org/)
[![CircleCI branch](https://img.shields.io/circleci/build/github/vuejs/vue-apollo/v4.svg)](https://circleci.com/gh/vuejs/vue-apollo/tree/v4)

<p align="center">
  <img src="https://cdn-images-1.medium.com/max/400/1*H9AANoofLqjS10Xd5TwRYw.png">
</p>


:book: Documentation [**for Vue 3**](http://v4.apollo.vuejs.org) | [for Vue 2](https://apollo.vuejs.org/)

[:pen: Contributing guide](./CONTRIBUTING.md)

[:heart: Sponsor me!](https://github.com/sponsors/Akryum)

```bash
npm i @vue/apollo-composable
pnpm i @vue/apollo-composable
yarn add @vue/apollo-composable
```

## Sponsors

<p align="center">
  <a href="https://guillaume-chau.info/sponsors/" target="_blank">
    <img src='https://akryum.netlify.app/sponsors.svg'/>
  </a>
</p>
npm package: @ishiuba.npm.org/styles
Description: isSTAR-P reusable design system
Author: IamSHIUBA
Latest version: 1.0.1

# @ishiuba.npm.org/styles

Design system and reusable styles for IamSHIUBA projects. Built with Tailwind CSS 4 and SCSS.

## Installation

```bash
npm i @ishiuba.npm.org/styles
```

## Usage

In your main CSS file:

```css
@import "@ishiuba.npm.org/styles";
```

### Customization

You can override the theme variables before importing the library:

```css
:root {
  --accent-color: #ff0000;
}

@import "@ishiuba.npm.org/styles";
```

## License

MIT
npm package: @ishk9/ports
Description: CLI that instantly surfaces active ports on your machine
Latest version: 1.0.3

# ports

> A zero-config CLI that instantly surfaces active ports on your machine.

```
┌─────────────────────────────────────────────────────────────────┐
│  🔊 ports                                                       │
│  listening to your ports...                                     │
└─────────────────────────────────────────────────────────────────┘

  PORT    PROCESS   PID     PROJECT          FRAMEWORK   UPTIME    STATUS
  :3000   node      9558    git-weekly       Next.js     21m 11s   ● healthy
  :5432   docker    40827   shared-postgres  PostgreSQL  2m 20s    ● healthy
  :6379   docker    40827   shared-redis     Redis       2m 20s    ● healthy

  3 ports active  ·  Run ports <number> for details  ·  --all to show everything
```

## Install

```bash
npm install -g .
```

Or link for local development:

```bash
npm link
```

## Commands

| Command | Description |
|---|---|
| `ports` | List active dev server ports |
| `ports --all` | List every listening port |
| `ports <number>` | Show details + kill prompt for a port |
| `ports clean` | Detect and kill orphaned ports |
| `ports clean <number>` | Kill a specific port |
| `ports watch` | Real-time monitor (Ctrl+C to exit) |

## Development

```bash
# Build TypeScript
npm run build

# Run directly without build
npm run dev

# Type-check only
npm run lint
```

## Architecture

```
src/
├── types/            Shared TypeScript types
├── interfaces/       ICommand, IPortScanner, IFrameworkDetector, IRenderer
├── core/             PortScanner, ProjectDetector, ProcessInspector, OrphanDetector, DockerResolver
├── strategies/
│   └── framework/    Per-framework detectors + FrameworkDetectorRegistry (Singleton + Strategy)
├── renderers/        HeaderRenderer, TableRenderer, DetailRenderer, CleanRenderer, Colors
├── commands/         ListCommand, DetailCommand, CleanCommand, WatchCommand (Command pattern)
└── index.ts          CLI entry point (Commander.js)
```

**Design patterns used:** Command, Strategy, Registry (Singleton), Factory.
npm package: @ishoa/array-helpers
Description: Useful Array functions not built into the Javascript Array Object.
Author: Shane Coates
Latest version: 1.1.0

# Array-Helper-Functions

Useful Array functions not built into the Javascript Array Object.

## Functions

<dl>
<dt><a href="#erase">erase(array, item)</a></dt>
<dd><p>Erase a particle item / element /index from the provided Array</p>
</dd>
<dt><a href="#forEachReverse">forEachReverse(array, funct)</a></dt>
<dd><p>Loop through all the elements of an Array backwards and call a function for each index</p>
</dd>
<dt><a href="#random">random(array)</a> ⇒ <code>*</code></dt>
<dd><p>Get a random element from the array</p>
</dd>
<dt><a href="#shuffle">shuffle(array)</a></dt>
<dd><p>Randomly shuffle the elements in the Array</p>
</dd>
<dt><a href="#clone">clone(array)</a> ⇒ <code>Array</code></dt>
<dd><p>Return a copy or clone of the Array that doesn&#39;t have reference to the original</p>
</dd>
</dl>

<a name="erase"></a>

## erase(array, item)
---
Erase a specific item / element /index from the provided Array

| Param | Type | Description |
| --- | --- | --- |
| array | <code>Array</code> | Array to erase the item from |
| item | <code>\*</code> | The element or item to remove |

<a name="forEachReverse"></a>

## forEachReverse(array, funct)
---
Loop through all the elements of an Array backwards and call a function for each index

| Param | Type | Description |
| --- | --- | --- |
| array | <code>Array</code> | The Array to loop through |
| funct | <code>function</code> | Function to call for each index |

**Example**  
```js
- forEachReverse([0, 1], (item) => { console.log(item) }); // 1, 0
```

<a name="random"></a>

## random(array) ⇒ <code>\*</code>
---
Get a random element from the array
 
**Returns**: <code>\*</code> - - The random Array index data  

| Param | Type | Description |
| --- | --- | --- |
| array | <code>Array</code> | Array to get the random element from |

<a name="shuffle"></a>

## shuffle(array)
---
Randomly shuffle the elements in the Array

| Param | Type | Description |
| --- | --- | --- |
| array | <code>Array</code> | Array to shuffle the contents of |

**Example**  
```js
- shuffle(array);
```

<a name="clone"></a>

## clone(array) ⇒ <code>Array</code>
---
Return a copy or clone of the Array that doesn't have reference to the original
 
**Returns**: <code>Array</code> - - copied Array  

| Param | Type | Description |
| --- | --- | --- |
| array | <code>Array</code> | Array you want to copy |

**Example**  
```js
- let newArray = array.clone();
```
npm package: @ishop/admin-ui-plugin
Description: `npm install @vendure/admin-ui-plugin`
Latest version: 2.0.2

# Vendure AdminUiPlugin

`npm install @vendure/admin-ui-plugin`

For documentation, see [www.vendure.io/docs/typescript-api/admin-ui-plugin/](https://www.vendure.io/docs/typescript-api/admin-ui-plugin/)
npm package: @ishop/asset-server-plugin
Description: The `AssetServerPlugin` serves assets (images and other files) from the local file system. It can also perform on-the-fly image transformations and caches the results for subsequent calls.
Latest version: 2.0.2

# Vendure AssetServerPlugin

The `AssetServerPlugin` serves assets (images and other files) from the local file system. It can also perform on-the-fly image transformations and caches the results for subsequent calls.

`npm install @ishop/asset-server-plugin`

For documentation, see [www.vendure.io/docs/typescript-api/asset-server-plugin](https://www.vendure.io/docs/typescript-api/asset-server-plugin/)
npm package: @ishop/core
Description: A modern, headless ecommerce framework
Latest version: 2.0.2

# Vendure

A headless [GraphQL](https://graphql.org/) ecommerce framework built on [Node.js](https://nodejs.org) with [Nest](https://nestjs.com/) with [TypeScript](http://www.typescriptlang.org/).

```bash
$ npm install @vendure/core
```

### [www.vendure.io](https://www.vendure.io/)

See the [Getting Started](https://www.vendure.io/docs/getting-started/) guide for instructions on use.
npm package: @ishop/elasticsearch-plugin
Description: The `ElasticsearchPlugin` uses Elasticsearch to power the Vendure product search.
Latest version: 2.0.2

# Vendure Elasticsearch Plugin

The `ElasticsearchPlugin` uses Elasticsearch to power the Vendure product search. 

**Requires Elasticsearch v7.0 or higher.** 

`npm install @ishop/elasticsearch-plugin`

For documentation, see [www.vendure.io/docs/typescript-api/elasticsearch-plugin/](https://www.vendure.io/docs/typescript-api/elasticsearch-plugin/)
npm package: @ishop/email-plugin
Description: The `EmailPlugin` generates and sends emails based on Vendure server events.
Latest version: 2.0.2

# Vendure EmailPlugin

The `EmailPlugin` generates and sends emails based on Vendure server events.

`npm install @ishop/email-plugin`

For documentation, see [www.vendure.io/docs/typescript-api/email-plugin/](https://www.vendure.io/docs/typescript-api/email-plugin/)
npm package: @ishop/job-queue-plugin
Description: This plugin is under development. It will house plugins that implement alternate JobQueueStrategies aimed at handling more demanding production loads than can be comfortably handled by the database-powered DefaultJobQueuePlugin which ships with Vendure co
Latest version: 2.0.2

# Vendure Job Queue Plugin

This plugin is under development. It will house plugins that implement alternate JobQueueStrategies aimed at handling more demanding production loads than can be comfortably handled by the database-powered DefaultJobQueuePlugin which ships with Vendure core.

Implemented: 

* The `PubSubPlugin` uses Google Cloud Pub/Sub to power the Vendure job queue. 

Planned:

* Redis
* RabbitMQ