open-index/open-npm huggingface dataset:
npm package: @nju33/hai
Description: A small conversation library that happens at hand
Author: nju33
Latest version: 0.2.1

<h1><img src="https://github.com/nju33/hai/blob/master/images/icon_32x32@2x.png?raw=true" width=30>&nbsp;Hai</h1>

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![Build Status](https://travis-ci.org/nju33/hai.svg?branch=master)](https://travis-ci.org/nju33/hai) ![Dependencies Status](https://david-dm.org/nju33/hai.svg)

✋ A small conversation library that happens at hand

<img src="https://github.com/nju33/hai/raw/master/screenshot.gif?raw=true" alt="Hai" width="300">

## Install, or Download

### npm

```sh
$ npm i -S @nju33/hai
```

### yarn

```sh
$ yarn add @nju33/hai
```

### bower

```sh
$ bower i -S hai
```

### Download

Access to [releases page](https://github.com/nju33/hai/releases).
Then, download the latest version.

## Usage

### Bandler

> (e.g.) webpack, browserify, rollup...

```js
// es
import Hai from '@nju33/hai';
// common
const Hai = require('@nju33/hai');
```

### Browser

```html
<script src="/path/to/hai.js"></script>
<script>// Your JS code.</script>
```

## API

### `hai = new Hai(talks)`

Create an instance of Hai that Contains information about talk elements or callbacks. It can be used by passing it to openWith.

### `Hai.config`

### `Hai.config.theme`

Dark(default) or light.

#### `talk.name`

Use for prefix of callback name.

#### `talk.message`

What I'd like to talk about here.

#### `talk.convenient`

##### `talk.convenient.type`

Various types. (e.g. `text`, `input`, `radio`, `checkbox`)  
Note that property values that you have to pass depend on type change

###### `type: text`

Please write the text you want displayed in the `text` property. This is used when you want to display longer text.

###### `type: radio` or `type: checkbox`

Please write the text you want displayed in the `items` property. Use this if you want to give the client choices.

This is the only difference.

- `radio`  
  Select only one.
- `checkbox`  
  Multiple selection.

TODO....

##### `type: input`

TODO...

#### `hai.open`

TODO...

`hai.open.then(answers => ...)`;

## LICENSE

The MIT License (MIT)

Copyright (c) 2016 nju33
npm package: @nju33/json-schema
Description: [![@nju33/json-schema](https://badgen.net/npm/v/@nju33/json-schema?icon=npm)](https://www.npmjs.com/package/@nju33/json-schema)
Author: nju33
Latest version: 0.0.23

# JSON Schema by nju33

[![@nju33/json-schema](https://badgen.net/npm/v/@nju33/json-schema?icon=npm)](https://www.npmjs.com/package/@nju33/json-schema)

## Endpoint

[unpkg.com/@nju33/json-schema/](https://unpkg.com/@nju33/json-schema/)

### schemas

- [circleci(wip)](https://unpkg.com/@nju33/json-schema/schemas/circleci/config.yml.json)
- [firebase(wip)](https://unpkg.com/@nju33/json-schema/schemas/firebase/firebase.json)
- [codesandbox](https://unpkg.com/@nju33/json-schema/schemas/codesandbox/sandbox.config.json)
- [husky](https://unpkg.com/@nju33/json-schema/schemas/husky/.huskyrc.json)
- [lerna](https://unpkg.com/@nju33/json-schema/schemas/lerna/lerna.json)
- [lint-staged](https://unpkg.com/@nju33/json-schema/schemas/lint-staged/.lintstagedrc.json)
- nju33
  - [theme](https://unpkg.com/@nju33/json-schema/schemas/nju33/theme/index.json)
- [now](https://unpkg.com/@nju33/json-schema/schemas/now/now.json)
- [openapi(wip)](https://unpkg.com/@nju33/json-schema/schemas/openapi/openapi.json)
- [postcss](https://unpkg.com/@nju33/json-schema/schemas/postcss-load-config/.postcssrc.json)
- [renovate](https://unpkg.com/@nju33/json-schema/schemas/renovate/renovate.json)
- slack
  - [chat](https://unpkg.com/@nju33/json-schema/schemas/slack/api/chat/index.json)

## vscode 設定方法

[vscode: JSON Schema 設定を追加する - nju33](https://nju33.com/note/post?note=vscode&post=JSON%20Schema%20%E8%A8%AD%E5%AE%9A%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
npm package: @nju33/less
Description: Less for nju33
Author: nju33
Latest version: 0.0.2

# Less

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

Less for nju33.

## Install

```bash
yarn add -D @nju33/less
```

```js
less.render(css).then(({css}) => ...);
```

## Lisence

The MIT License (MIT)

Copyright (c) 2017 nju33 <nju33.ki@gmail.com>
npm package: @nju33/postcss-preset
Description: Preset for nju33
Author: nju33
Latest version: 0.0.5

# Postcss preset

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

Preset for nju33.

## Install

```bash
yarn add -D @nju33/postcss-preset
```

```js
postcss([
  ...preset(),
  /* other plugins */
])
```

## Plugins

```js
"dependencies": {
  "autoprefixer": "^6.7.7",
  "css-mqpacker": "^5.0.1",
  "cssnano": "^3.10.0",
  "postcss-animation": "^0.0.12",
  "postcss-assets": "^4.1.0",
  "postcss-colorblind": "^1.0.0",
  "postcss-easings": "^0.3.0",
  "postcss-flexbugs-fixes": "^2.1.0",
  "postcss-focus": "^1.0.0",
  "postcss-font-magician": "^1.6.1",
  "postcss-modules": "^0.6.4",
  "postcss-octicon": "^0.0.1",
  "postcss-resemble-image": "^2.1.1",
  "postcss-sprites": "^4.2.0",
  "postcss-will-change": "^1.1.0",
  "postcss-yu-gothic": "^0.0.5"
},
```

## Options

```js
const default = {
  // To specify the root path
  // (postcssAssets.basePath, postcssAssets.baseURL)
  bases: ['.', '/'],
  // That of `autoprefixer.browsers`
  browsers: ['> 3%', 'last 2 versions'],
  // Setting `postcssFontMagician.variants`
  variants: {},
  // Specify project image directory
  // (`postcssAssets.loadPaths`)
  imagePaths: [],
  // Specify whether to modularize
  // (`postcssModules`)
  module: false, // or `({fileName, json}) => {}`
  // Minify if it is true
  // (`cssMqpacker` & `cssnano`)
  minify: false // or `true`
}
```

## Lisence

The MIT License (MIT)

Copyright (c) 2017 nju33 <nju33.ki@gmail.com>
npm package: @nju33/react-blurry-gradient
Description: Linear-gradient (using by CSS) animation  component for React
Latest version: 0.1.38

# react-blurry-gradient

Linear-gradient (using by CSS) animation component for React.

[![@nju33/react-blurry-gradient](https://img.shields.io/npm/v/@nju33/react-blurry-gradient.svg)](https://www.npmjs.com/package/@nju33/react-blurry-gradient)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

## Install

```bash
yarn add @nju33/react-blurry-gradient
yarn add react @types/react styled-components
```

## Usage

```ts
import {BlurryGradient} from '@nju33/react-blurry-gradient';

// ...

<div
  style={{
    height: '100vh',
    width: '100vw',
  }}
>
  <BlurryGradient baseColor="#ecb88a" />
  <BlurryGradient baseColor="orange">
    <Contents />
  </BlurryGradient>
</div>;
```
npm package: @nju33/react-editable-input
Description: [![@nju33/react-editable-input](https://img.shields.io/npm/v/@nju33/react-editable-input.svg)](https://www.npmjs.com/package/@nju33/react-editable-input) [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-ora
Latest version: 0.1.14

## react-editable-input

[![@nju33/react-editable-input](https://img.shields.io/npm/v/@nju33/react-editable-input.svg)](https://www.npmjs.com/package/@nju33/react-editable-input)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Install

```bash
yarn add @nju33/react-editable-input
```

## Usage

e.g.

```typeScript
import {EditableInput, EditableInputType} from '@nju33/react-masonry';

// ...

  render() {
    return (
      <EditableInput
        type={EditableInputType.Text}
        value={this.state.value}
        onCompleteBefore={done => {
          // ... something processing

          // you'd have errors. you should return `done` that have error message.
          // done('error');

          // If you've no error, which should return with success message like
          done(null, 'save');
        }}

      >
      </EditableInput>
    )
  }
```

## Type

* `Text`  
  wip

* `Password`  
  wip

* `Number`  
  wip

* `Email`  
  wip

* `Textarea`  
  wip
npm package: @nju33/react-event-text-div
Description: React Component that only change the value at event time
Latest version: 0.1.37

# react-event-text-div

React Component that only change the value at event time

[![@nju33/react-event-text-div](https://img.shields.io/npm/v/@nju33/react-event-text-div.svg)](https://www.npmjs.com/package/@nju33/react-event-text-div)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

## Install

```bash
yarn add @nju33/react-event-text-div
yarn add react @types/react
```

## Usage

```ts
import {EventTextDiv} from '@nju33/react-event-text-div';

// ...

<EventTextDiv
  onHoverText="bar" // optional
  onClickText="baz" // optional
>
  foo // required. this is default value
</EventTextDiv>;
```
npm package: @nju33/react-firebase
Description: [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![npm version](https://badge.fury.io/js/%40nju33%2Freact-firebase.svg)](https://badge.fury.io/js/%40nju33%2Freact-firebase)
Author: nju33
Latest version: 0.2.2

# react-firebase

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![npm version](https://badge.fury.io/js/%40nju33%2Freact-firebase.svg)](https://badge.fury.io/js/%40nju33%2Freact-firebase)

## Install

```bash
npm i @nju33/react-firebase
```
npm package: @nju33/react-firebase-authentication
Description: [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![npm version](https://badge.fury.io/js/%40nju33%2Freact-firebase-authentication.svg)](https://badge.fury.io/js/%40nju33%2Freact-
Author: nju33
Latest version: 0.0.1

# react-firebase-authentication

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![npm version](https://badge.fury.io/js/%40nju33%2Freact-firebase-authentication.svg)](https://badge.fury.io/js/%40nju33%2Freact-firebase-authentication)

## Install

```bash
npm i @nju33/react-firebase @nju33/react-firebase-authentication
```

## Usage

```js
<Firebase {...config}>
  <Authentication github={true}>
    <div>foooo</div>
  </Authentication>
</Firebase>
```
npm package: @nju33/react-intersection-observed
Description: wip
Latest version: 0.1.31

# intersection observed

[![@nju33/react-intersection-observed](https://img.shields.io/npm/v/@nju33/react-intersection-observed].svg)](https://www.npmjs.com/package/@nju33/react-intersection-observed])
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

## Install

```bash
yarn add @nju33/react-intersection-observed
```

```bash
yarn add react react-dom @types/react @types/react-dom
```

## Example

```ts
import intersectionObservedFactory = require('@nju33/react-intersection-observed');
import {
  IntersectionObservedProps,
  IntersectionObservedComponent,
  IntersectionObserved
} from '@nju33/react-intersection-observed';

interface FooProps {
  foo: string;
}

type FooIntersectionProps = FooProps & IntersectionObservedProps

class Foo extends React.Component<FooIntersectionProps>
  implements IntersectionObservedComponent {
  render() {
    return <div ... />;
  }

  // optional
  componentOnEnter() {
    console.log('componentOnEnter');
  }

  // optional
  componentOnceEnter() {
    console.log('componentOnceEnter');
  }

  // optional
  componentOnLeave() {
    console.log('componentOnLeave');
  }

  // optional
  componentOnceLeave() {
    console.log('componentOnceLeave');
  }

  componentWillUnmount() {
    this.props.intersectionObserved.unobserve();
  }
}

const intersectionObserved = intersectionObservedFactory();
const IntersectionObservedFoo = (intersectionObserved as IntersectionObserved<FooProps>)(Foo);

<IntersectionObservedFoo foo="foooo" />
```

## With the StyledComponents

If you have used styled-components, you've to apply `intersectionObserved`earlier than `styled`.

e.g.

```ts
const IntersectionObservedFoo = (intersectionObserved as IntersectionObserved<
  FooProps
>)(Foo);
const styledFoo = styled(IntersectionObservedFoo);

<styledFoo foo="fooooo" />;
```

## Customize

you can adjust determine when an element entered into the view.
For that you've to set the `isEnter` function in the argument object of the `intersectionObservedFactory`.

```ts
// intersectionObservedFactory({
//   isEnter(entry: IntersectionObserverEntry): boolean;
// })
intersectionObservedFactory({
  isEnter(entry: IntersectionObserverEntry) => entry.intersectionRatio !== 0;
})
```
npm package: @nju33/react-json
Description: [![@nju33/react-json](https://img.shields.io/npm/v/@nju33/react-json.svg)](https://www.npmjs.com/package/@nju33/react-json) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![code style: prettier](https://i
Latest version: 0.1.38

# react-json

[![@nju33/react-json](https://img.shields.io/npm/v/@nju33/react-json.svg)](https://www.npmjs.com/package/@nju33/react-json)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

## Install

```bash
yarn add @nju33/react-json
yarn add react @types/react
```

## Example

For example in the below, I'm using wp-api.

```bash
import {Json, JsonComponent} from '@nju33/react-json';

const enum WPStatus {
  Publish = 'publish',
  Future = 'future',
  Draft = 'draft',
  Pending = 'pending',
  Private = 'private'
}
interface WPEmbedded {
  'wp:featuredmedia': {source_url: string}[]
}
interface WPData {
  title: {rendered: string};
  link: string;
  status: WPStatus;
  _embedded: WPEmbedded
}

// WPData is the types of the wp-api's response data
const WPJson = Json as JsonComponent<WPData[]>

<WPJson url="http://xxxxxx.com/wp-json/wp/v2/posts?per_page=4&_embed">
  {({fetchSupport, data}) => {
    if (!fetchSupport) {
      return <p>In this browser, `fetch` api hasn't been support.</p>
    }

    if (data === undefined) {
      return <p>Loading...</p>
    }

    const elements = data.map(post => {
      return (
        <a>
          <img
            src={post._embedded['wp:featuredmedia'][0].source_url}
            style={{
              width: '8em'
            }}
          />
          <div>{post.title.rendered}</div>
        </a>
      );
    });

    return <ul>{elements}</ul>;
  }}
</WPJson>
```
npm package: @nju33/react-magnifier
Description: A React component whose element can magnify to window size
Latest version: 0.2.3

# react-magnifier

A React component whose element can magnify to window size

[![@nju33/react-magnifier](https://img.shields.io/npm/v/@nju33/react-magnifier.svg)](https://www.npmjs.com/package/@nju33/react-magnifier)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

## Install

```bash
yarn add @nju33/react-magnifier
yarn add react @types/react styled-components
```

## Example

```ts
// wip
```
npm package: @nju33/react-masonry
Description: A masonry layout library where used React and Flexbox
Author: nju33
Latest version: 1.0.1

## react-masonry

[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![@nju33/react-masonry](https://img.shields.io/npm/v/@nju33/react-masonry.svg)](https://www.npmjs.com/package/@nju33/react-masonry)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Install

```bash
yarn add @nju33/react-masonry react react-dom styled-components
```

This library includes the `d.ts`.

## Demo

https://nju33.github.io/react-masonry/

## Sample Code

```ts
import React from 'react';
import {render} from 'react-dom';
import {Masonry} from '@nju33/react-masonry';

render(
  (
    <Masonry
      col={3} 
      gap={16} 
    >
      <div style={{width: '100%', height: '100px'}}>
        <Something />
      </div>
      <div style={{width: '100%', height: '100px'}}>
        <Something />
      </div>
      {/* ... */}
    </Masonry>
  ),
  document.body
)
```
npm package: @nju33/react-modal
Description: Modal for React
Latest version: 0.1.14

# react-modal

[![@nju33/react-modal](https://img.shields.io/npm/v/@nju33/react-modal.svg)](https://www.npmjs.com/package/@nju33/react-modal)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Install

```bash
yarn add @nju33/react-modal
# npm i @nju33/react-modal
```

By the way, `pkg.types` that `d.ts` files, is included in for the TypeScript.

## VDom herarchy

```html
<Modal ...>
  <Cover ...>
    <CloseIcon ... />
    <Box ...>
      <!-- this.props.children -->
    </Box>
  </Cover>
</Modal>
```

## Interfaces

```typescript
export type ModalTransitionType = 'simple' | 'slide' | 'slideFromOutside';

export interface ModalProps {
  // Any of the above, `ModalTransitionType`
  type?: ModalTransitionType;
  // Will be called on run the `close event` from somewhere
  // For example, Such when `<Cover/>` clicked, <`CloseIcon/>` clicked
  handleClose(): void;

  // It's used like that in `react-transition-group/Transition`
  // Please read https://reactcommunity.org/react-transition-group/#Transition
  // for more imformation
  in?: boolean;
  timeout?: number;

  // If they're, Each style of component extends in them
  styles?: {
    cover?: string;
    closeIcon?: string;
    box?: string;
  };
}
```

## Example

```typescript
// ... head of React

render() {
  return (
    <div>
      <Modal
        in={this.state.in}
        handleClose={() => this.setState({in: false})}
      >
        <div>{/* somehow */}</div>
      </Modal>
    </div>
  );

// ...
```