open-index/open-npm huggingface dataset:
npm package: @john-shaffer/data-grid
Description: The Material-UI community edition of the data grid component.
Author: Material-UI Team
Latest version: 4.0.0-alpha.28

# @material-ui/data-grid

The Material-UI X Community edition of the data grid component.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @material-ui/data-grid

// with yarn
yarn add @material-ui/data-grid
```

This component has 2 peer dependencies that you will need to install as well.

```json
"peerDependencies": {
  "@material-ui/core": "^4.9.12 || ^5.0.0-alpha.22",
  "react": "^17.0.0"
},
```

## Documentation

[The documentation](https://material-ui.com/components/data-grid/)
npm package: @john-techfox/react-instagram-login
Description: An Instagram Login Component for React
Author: Tai Nguyen
Latest version: 0.0.5

# React Instagram Login

> An Instagram oAUth Sign-in / Log-in Component for React
## Install

```
npm install @nvt-ak/react-instagram-login
```

```
yarn add @nvt-ak/react-instagram-login
```

## How to use
### With default button
```js
import ReactDOM from 'react-dom';
import { InstagramLogin } from '@nvt-ak/react-instagram-login';

const responseInstagram = (response) => {
  console.log(response);
};

ReactDOM.render(
  <InstagramLogin
    clientId="CLIENT_ID"
    buttonText="Login"
    onSuccess={responseInstagram}
    onFailure={responseInstagram}
  />,
  document.getElementById("instagramButton")
);
```
## onSuccess callback

### Displaying OAuth using a popup
> Note: The redirectUri needs to be the same url as the current url.

### Displaying OAuth using a redirection

If you want to use redirection you should change the prop `useRedirect` to true.
Callback will return a code for use on your server to get a full access_token.
If `implicitAuth` is set to `true` it will return the full access_token directly.

## onFailure callback

Callback will return an error object.

|   property name   | value  |
| :---------------: | :----: |
|       error       | string |
|   error_reason    | string |
| error_description | string |

## Parameters

|    params    |  value   |    default value     |
| :----------: | :------: | :------------------: |
|   clientId   |  string  |       REQUIRED       |
|    scope     |  string  |     user_profile     |
|  onSuccess   | function |       REQUIRED       |
|  onFailure   | function |       REQUIRED       |
| redirectUri  |  string  |          -           |
|  buttonText  |  string  | Login with Instagram |
|   cssClass   |  string  |          -           |
|     tag      |  string  |        button        |
|     type     |  string  |        button        |
| implicitAuth | boolean  |        false         |
| useRedirect  | boolean  |        false         |
|    width     |  number  |         400          |
|    height    |  number  |         800          |

Instagram API Docs: https://www.instagram.com/developer/

You can now also pass child components such as icons into the button component.

```js
<InstagramLogin
  clientId="CLIENT_ID"
  onSuccess={responseInstagram}
  onFailure={responseInstagram}
>
  <FontAwesome name="instagram" />
  <span> Login with Instagram</span>
</InstagramLogin>
```

## Dev Server
```
yarn dev
```

## Run Tests
```
yarn test
```

## Production Bundle

```
yarn build
```

#### TODO

- [ ] Fix the test cases
- [ ] Add templates for PR and Issues
- [ ] Use Google, Facebook, Linkedin ... in this project

#### Done

- [x] Use Hooks
- [x] Update dependencies
- [x] Create a babel Conf
- [x] Use prettier + Husky
- [x] Improve and refactor the code
npm package: @john-ui-kit/react-native
Description: react-native组件库
Author: John
Latest version: 1.0.9

<!--
 * @LastEditTime: 2021-08-12 11:01:07
 * @Date: 2021-08-02 15:34:40
 * @Author: John
 * @LastEditors: John
-->

![npm](https://img.shields.io/npm/v/@john-ui-kit/react-native?style=flat-square) ![NPM](https://img.shields.io/npm/l/@john-ui-kit/react-native?style=flat-square) ![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/@john-ui-kit/react-native/peer/react?style=flat-square) ![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/@john-ui-kit/react-native/peer/react-native?style=flat-square) ![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/@john-ui-kit/react-native/peer/react-native-svg?style=flat-square)

## Features

## Getting Started

```shell
yarn add @john-ui-kit/react-native
// or
npm install @john-ui-kit/react-native
```

## Documentation
npm package: @john-yuan/dev-browserify-builder
Description: An util to build and minify browserify bundle.
Author: JOHN YUAN
Latest version: 1.0.1

# Browserify Builder

A dev-tool to bundle the javascript file and its dependencies with browserify and minify the result code with uglify-js.

## Install

```bash
npm i @john-yuan/dev-browserify-builder
```

## Usage

```js
var builder = require('@john-yuan/dev-browserify-builder');

builder.build('src/main.js', 'dist/main.min.js', {
    // The browserify options
    debug: false,
    detectGlobals: false
}, {
    // The uglify-js options
    compress: {
        drop_console: true
    }
}, function (code) {
    // Build finish callback
});
```

## API

```js
/**
 * Bundle the entry javascript file and its dependencies and minify the result.
 *
 * @param {string} entry The entry javascript file path
 * @param {string} output The path to save the result file
 * @param {Object} browserifyOptions The options passed to browserify
 * @param {Object} uglifyOptions The options passed to uglify-js
 * @param {(code: string) => void} callback The build finish callback, `code` is the final result
 */
builder.build(entry, output, browserifyOptions, uglifyOptions, callback);
```
npm package: @john-yuan/dev-browserify-watcher
Description: A browserify watcher
Author: JOHN YUAN
Latest version: 1.0.6

# Browserify Watcher

This module helps you compile your files with browserify when the files changed. I try to make the API as simple as possiable so that I can start a new project quickly with the help of this module. I have published this module to [npm][npm-repo] with the scope of my user name. You can treat it as a private module with the public access. This module is not tested so carefully. Keep this in mind, before you may use it. Below is an example:

[npm-repo]: https://www.npmjs.com/package/@john-yuan/dev-browserify-watcher

```js
var watcher = require('@john-yuan/dev-browserify-watcher');

// This function retruns an instance of `FSWatcher` that chokidar returned to it
var fsWatcher = watcher.watch({
    // The input file of browserify
    entry: 'lib/index.js',
    // The output file
    output: 'dist/bundle.js',
    // The files to watch
    paths: 'lib/**/*.js',
    // The options pass to browserify (optional)
    browserifyOptions: {
        debug: true
    },
    // The options pass to choidar (optional)
    chokidarOptions: {},
});
```
npm package: @john-yuan/dev-server
Description: A simple server based on express. Can be used to start a static file server very quick. Also support route definition.
Author: JOHN YUAN
Latest version: 1.2.0

# Dev Server

A simple server based on express. Can be used to start a static file server very quick. Also support route definition.

## Install

This module is published to [NPM][NPM], you can install it with the following command:

[NPM]: https://www.npmjs.com/package/@john-yuan/dev-server

```bash
npm i @john-yuan/dev-server
```

> Note that this module is not fully tested, so keep this in mind, before you use it.

## Example

Quick start without any options:

```js
var server = require('@john-yuan/dev-server');

server.start();
```

Start with options:

```js
var server = require('@john-yuan/dev-server');

// The `server.start` method returns an instance of `Express`
var app = server.start({
    // The web root directory. If it is a relative path, it is based on process.cwd()
    webroot: 'web',
    // The path of the index file. It is based on `webroot`
    index: 'index.html',
    // The host to listen
    host: '0.0.0.0',
    // The port to listen
    port: 8080,
    // Whether to try next port (`port` + 1), if the `port` is not available
    tryNextPort: true,
    // Whether to print access log to console
    printAccessLog: false,
    // Whether to print log, defautl value is true
    printLog: true,
    // The options passed to express.static
    serveStaticOptions: null
}, function (port, hosts, webroot, options) {
    // This callback is called after the server is started
    // The parameter port is the final port the server start on
    console.log(port);
    console.log(hosts);
    console.log(webroot);
    console.log(options);
});

// You can define your extra routes here
app.get('/api/test', function (req, res) {
    res.send('This is the response of /api/test');
});
```

## Screenshot

![Bash screenshot](./screenshot.png)
npm package: @john-yuan/dev-simple-logger
Description: A simple logger that write log to the console with time and colors.
Author: JOHN YUAN
Latest version: 1.0.1

# Simple Logger

A simple logger that write log to the console with time and colors.

## Install

This module is published to [NPM][NPM], you can install it with the following command:

[NPM]: https://www.npmjs.com/package/@john-yuan/dev-simple-logger

```bash
npm i @john-yuan/dev-simple-logger
```

## API

```js
/**
 * Like console.log(), no color and time will be applied
 *
 * @param {string} [message]
 * @returns {this}
 */
logger.log(message);

/**
 * Print the info message with the current time in green color
 *
 * @param {string} [message]
 * @returns {this}
 */
logger.info(message);

/**
 * Print the warning message with the current time in yellow color
 *
 * @param {string} [message]
 * @returns {this}
 */
logger.warn(message);

/**
 * Print the error message in red color. Empty lines will be prepended and appended.
 *
 * @param {string} [message]
 * @returns {this}
 */
logger.error(message);
```
npm package: @john-yuan/utils
Description: Basic utils.
Author: JOHN YUAN
Latest version: 1.1.2

# Basic Utils for JavaScript

[![Build Status](https://travis-ci.org/john-yuan/utils.svg?branch=master)](https://travis-ci.org/john-yuan/utils)

The basic utils for javascript. This library will keep the utils as small as possible. You can import the module you want to use on demand. Here is an example:

```js
var isArray = require('@john-yuan/utils/isArray');

if (!isArray(it)) {
    throw new TypeError('it is not an array');
}
```

## Install

```bash
npm i @john-yuan/utils
```

## Modules

* [isAbsoluteURL(url)](#isabsoluteurlurl)
* [isArray(it)](#isarrayit)
* [isFunction(it)](#isfunctionit)
* [isPlainObject(it)](#isplainobjectit)
* [merge(target, ...source)](#mergetarget-source)
* [trim(str)](#trimstr)

## API

### isAbsoluteURL(url)

* `url` {string}
* Returns: {boolean}

Check whether the url is absolute url. Returns `true` if the url is abosolute, otherwise `false` is returned.

### isArray(it)

* `it` {any}
* Returns: {boolean}

Check whether the variable is an instance of `Array`. Returns `true` if the variable is an instance of `Array`, otherwise `false` is returned.

### isFunction(it)

* `it` {any}
* Returns: {boolean}

Check whether the variable is a function. Returns `true` if the variable is a function, otherwise `false` is returned.


### isPlainObject(it)

* `it` {any}
* Returns: {boolean}

Check whether the variable is a plain object. Returns `true` if the variable is a plain object, otherwise `false` is returned.

### merge(target, ...source)

* `target` {Object}
* `source` {Object}
* Returns: {Object}

Copy any non-undefined values of source to target and overwrites the corresponding original values. This function will modify the target object. Returns the modified target object.

### trim(str)

* `str` {string}
* Returns: {string}

Removes the leading and trailing white space and line terminator characters from a string. If `str` is `null` or `undefined`, it is treated as an empty string. If `str` is not a string, it will be converted to a string first. This function retruns the trimed string.