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

<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">

![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)

![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)

## 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.min.css';

const onClick = ({ event, props }) => console.log(event,props);

// create your menu first
const MyAwesomeMenu = () => (
    <Menu id='menu_id'>
       <Item onClick={onClick}>Lorem</Item>
       <Item onClick={onClick}>Ipsum</Item>
       <Separator />
       <Item disabled>Dolor</Item>
       <Separator />
       <Submenu label="Foobar">
        <Item onClick={onClick}>Foo</Item>
        <Item onClick={onClick}>Bar</Item>
       </Submenu>
    </Menu>
);

const App = () => (
    <div>
        <MenuProvider id="menu_id" style={{ border: '1px solid purple', display: 'inline-block' }}>
            Right click me...
        </MenuProvider>
        <MyAwesomeMenu />
    </div>
);
```

## To-Do

- [ ] Allow keyboard navigation
- [ ] Accessibility
- [ ] RTL support
- [ ] Add release notes


## Browser Support

![IE](https://cloud.githubusercontent.com/assets/398893/3528325/20373e76-078e-11e4-8e3a-1cb86cf506f0.png) | ![Chrome](https://cloud.githubusercontent.com/assets/398893/3528328/23bc7bc4-078e-11e4-8752-ba2809bf5cce.png) | ![Firefox](https://cloud.githubusercontent.com/assets/398893/3528329/26283ab0-078e-11e4-84d4-db2cf1009953.png) | ![Opera](https://cloud.githubusercontent.com/assets/398893/3528330/27ec9fa8-078e-11e4-95cb-709fd11dac16.png) | ![Safari](https://cloud.githubusercontent.com/assets/398893/3528331/29df8618-078e-11e4-8e3e-ed8ac738693f.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)
--- | --- | --- | --- | --- | --- |
IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |


## Contribute

Any idea and suggestions are welcome. There is a playground to help you start, just run `yarn start`.

## License

React Contexify is licensed under MIT.
npm package: @gsong/react-modal-dialog
Description: No-frills modal <dialog> for React
Author: George Song
Latest version: 2.0.0

# @gsong/react-modal-dialog

![NPM Version](https://img.shields.io/npm/v/%40gsong%2Freact-modal-dialog)
![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/gsong/react-modal-dialog/validate.yaml?label=tests)

A no-frills React modal [`<dialog>`][dialog] component. In addition to default
modal dialog behaviors, the component also disables body scrolling when the
modal is open.

## Features

- Types
- Works with ESM and CJS
- Server-side rendering (SSR) compatible
- Click outside the modal to dismiss (default off)
- Prevent body scrolling when the modal is open (default on)
- BYOS: Bring your own styles 🧑‍🎤

## Install

```sh
{pnpm,npm,yarn} install @gsong/react-modal-dialog
```

## Usage

```js
import { useModal } from "@gsong/react-modal-dialog";

export default function Demo() {
  const { Modal, openModal, closeModal } = useModal();

  return (
    <div style={{ height: "200vh" }}>
      <button onClick={openModal}>Open Modal</button>

      <Modal
        allowBodyScroll
        allowDismiss
        onDismiss={() => console.debug("Dismissed")}
        onCancel={() => console.debug("Canceled")}
        onClose={() => console.debug("Closed")}
        className="tailwind-stuff"
      >
        <div>Modal content</div>
        <button onClick={closeModal}>Close Modal</button>
      </Modal>
    </div>
  );
}
```

## API

The `useModal` hook returns an object with the following properties:

- `Modal`: The modal component.
- `openModal`: A function to open the modal.
- `closeModal`: A function to close the modal.

### Modal

#### Props

```ts
interface ModalProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
  allowBodyScroll?: boolean;
  allowDismiss?: boolean;
  onDismiss?: (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void;
}
```

- `allowBodyScroll`: Allow the body to scroll when the modal is open. Defaults
  to `false`.
- `allowDismiss`: Allow the modal to be dismissed by clicking outside of it.
  Defaults to `false`.
- `onDismiss`: Called when the modal is dismissed.

### openModal

```ts
openModal: () => void;
```

### closeModal

```ts
closeModal: () => void;
```

## v1 to v2 Migration

Breaking changes and what to do about them.

### Control Body Scrolling

Instead of this:

```js
openModal({ disableBodyScroll: false });
```

Do this:

```js
<Modal allowBodyScroll />
```

[dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
npm package: @gsox/client
Description: subscription client for consuming webhook data
Author: Alek Merani
Latest version: 0.3.0

# gsox-client
subscription client for consuming webhook data

## Installation
```sh
npm i @gsox/client
```

## React
```js
import { createClient, StreamProvider, StreamConsumer } from "@gsox/client"

const client = createClient({ host, port, inject })

<StreamProvider client={client}>
      <StreamConsumer types={[Notification]}>

      {({ data, error, loading }) => {
            if(loading) return <Loading />
            if(data) return <DataView />
      }}

      </StreamConsumer>
</StreamProvider>
```

## Observable
```js
import { createClient } from "@gsox/client"

const client = createClient({ host, port, inject })

client.subscribe([Notification, Alert], {
      next: data => console.log(data),
      error: error => console.log(error)
})
```

## Subscribe with GraphQL DocumentNode
```js
import gql from "graphql-tag";

const query = gql`
  subscription {
    Alert {
      id
      timestamp
    }
  }
`
client.subscribeWithQuery(query, {
      next: data => console.log(data),
      error: error => console.log(error)
});
```

## Options
```js
{
  host: "localhost",
  port: 3000,
  routes: {
    graphql: "/graphql"
  },
  inject: [...types]
}
```
npm package: @gsox/schema
Description: decorators, types, and builders for describing data
Author: Alek Merani
Latest version: 0.3.0

# gsox-schema
decorators, types, and builders for describing data

## installation
```sh
npm i @gsox/schema
```

## Decorators
```js
import { Type, Field } from "@gsox/schema"

@Type()
class Alert {
      @Field('Int')
      id:number;

      @Field()
      data: string;
}

@Type()
class MessageType { ... }
```

[TypeScript Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)  
[JavaScript Decorators](https://babeljs.io/docs/en/babel-plugin-syntax-decorators)

## AST Builders (wip)
```js
import { TypeNode, FieldNode } from "@gsox/schema"

const alertTypeNode = new TypeNode('Alert', [
      new FieldNode('id', 'Int'),
      new FieldNode('data', 'String')
])
```

## GraphQL (wip)
```js
const typeDef = `
      type Alert {
            id: Int
            data: String
      }
`
```

## Schema Injection
inject shared client and server types or graphql type definitions
```js
const inject: {new ()}[]      //constructor functions
            | {}[]            //objects
            | string[] =
      [
            Notification,     // class with
            Message,          // schema
            new Alert(),      // decorators

            //or typedef
            `message {
                  type: String
            }`
      ]

```
```js
// client.js
import { createClient } from "@gsox/client"

const client = createClient(options)
client.subscribe([...inject], observer)
```
```js
// server.js
import { applyMiddleware } from "@gsox/server"

const app = express()
const server = applyMiddleware(app, [...inject])
```
npm package: @gsp-aif/aif-common
Description: @gsp-aif/aif-common包括单据追踪模块 aif-documents-track，拉式选择生单规则模块 aif-select-source-creation-rule，和推式选择生单规则模块 aif-select-target-creation-rule
Author: Alden Zhang
Latest version: 0.0.0-dev-18

# NPM包 @gsp-aif/aif-common 说明 

*更新日期：2019-02-01 17:39:45*

*__author__*: Alden Zhang

## 0. 前言

本NPM包依赖于Kendo UI for Angular 和 @farris/ui

## 1. 单据追踪模块 aif-documents-track

该模块提供了单据追踪服务类AifDocumentsTrackService ，可以弹出单据追踪模态框界面；以及单据追踪主组件类AifDocumentsTrackManagerComponent，可直接作为子组件引用。引用者可根据需要自行选择引用方式。 



## 2.拉式选择生单规则模块 aif-select-source-creation-rule

该模块提供了拉式选择生单规则服务类AifSelectSourceCreationRuleService ，显示选择生单规则模态框，数据源为根据业务流程图与目标单据类型得到的查询结果，点击确定按钮时返回选中的生单规则 。



## 3.推式选择生单规则模块 aif-select-target-creation-rule

该模块提供了推式选择生单规则服务类AifSelectTargetCreationRuleService ，显示选择生单规则模态框，数据源为根据业务流程图与来源单据类型得到的查询结果，点击确定按钮时返回选中的生单规则 。
npm package: @gsp-aif/common-api
Description: 0.0.10 生单规则、回写规则实体增加映射构件元数据ID与映射构件ID字段
Author: Alden Zhang
Latest version: 0.0.10

# @gsp-aif/common-api

## 更新记录：

0.0.10 生单规则、回写规则实体增加映射构件元数据ID与映射构件ID字段

0.0.9 元数据实体接口类删除MetadataContentEntityID字段

0.0.8 根据后端实体结构进行抽取整理，优化接口与实体类结构层次

0.0.6 生单流程、回写流程增加目标vo代理相关属性。
npm package: @gsp-aif/runtime-api
Description: 0.0.11 清理单据追踪模块依赖，支持运行框架SPA(Single Page Web Application，单页面Web应用)模式
Author: Alden Zhang
Latest version: 0.0.11

0.0.11 清理单据追踪模块依赖，支持运行框架SPA(Single Page Web Application，单页面Web应用)模式

0.0.10 清理单据追踪模块依赖，支持运行框架SPA(Single Page Web Application，单页面Web应用)模式

0.0.9 新增GetCreationRuleArgs、AifDocumentsTrackManagerModuleConfig、AifPullSelectCreationRuleModuleConfig、AifPushSelectCreationRuleModuleConfig等实体类，移除AIF_MODULES、AIF_PROVIDERS导出类。
生单规则选择组件调用方法参数修改, 支持根据来源单据与目标单据同时查询。
原
```TypeScript
public showCrRuleSelectModal(bizFlowchartId: string, targetVoType: string, userData?: any, modalOptions?: ModalOptions): Observable<AifCreationRuleEntity> 
``` 
改为 

```TypeScript
public showCrRuleSelectModal(args: GetCreationRuleArgs, modalOptions?: ModalOptions): Observable<AifCreationRuleEntity> 
```

GetCreationRuleArgs类中参数均为可选参数， 用户可根据具体需求进行设置；
各模块类增加forRoot()静态方法，将服务器IP+端口号等信息注入模块

0.0.8 更新NPM依赖包版本

0.0.7 优化单据追踪界面样式

0.0.6 更新本NPM包依赖包版本，暂时移除通用Web构件

0.0.5 修改各模块webapi

0.0.3 解决firefox中单据追踪组件显示的问题

0.0.2 生单规则选择界面完成NG7升级，可用于手工生单

0.0.1 NG7升级后正式发布0.0.1版本