open-index/open-npm huggingface dataset:
npm package: @nju33/react-slack
Description: [![@nju33/react-slack](https://img.shields.io/npm/v/@nju33/react-slack.svg)](https://www.npmjs.com/package/@nju33/react-slack) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![code style: prettier](https:
Latest version: 0.1.33

# react-slack

[![@nju33/react-slack](https://img.shields.io/npm/v/@nju33/react-slack.svg)](https://www.npmjs.com/package/@nju33/react-slack)
[![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-slack
```

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

## Slack's scope

Please approve the following.

* channels:history
* channels:read
* users:read (if you use user info)

## Example

```ts
import {MessageHistory, SlackUser} from '@nju33/react-slack';

// class MessageHistory ... {
//   static defaultProps = {
//     historyCount: 100,
//     messageFilter(messages: SlackMessage[]): SlackMessage[] {
//       return messages.filter(message => {
//         return message.type === 'message' && message.subtype === undefined;
//       });
//     },
//   userInfo: true
//   };

<MessageHistory
  token="xoxp-xxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  channelName="foo"
  historyCount={100} // Number to process at one time
  userInfo={true} // Whether to use detailed user information
>
  {({messages, getLatest, next}) => {
    const messageElements = messages.map(message => {
      const user = message.user as SlackUser;

      return (
        <li key={message.ts}>
          <div>{user.name}</div>
          <div>{message.text}</div>
        </li>
      );
    });

    return (
      <div>
        <ul>{messageElements}</ul>
        <div>
          <span onClick={getLatest}>getLatest</span>
          <span onClick={next}>next</span>
        </div>
      </div>
    );
  }}
</MessageHistory>;
```

## WIP
npm package: @nju33/react-tab
Description: [![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)
Latest version: 0.1.2

# react-tab

[![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)
npm package: @nju33/react-typing
Description: Typing animation component for React
Latest version: 0.1.32

# react-typing

Typing animation component for React

[![@nju33/react-typing](https://img.shields.io/npm/v/@nju33/react-typing.svg)](https://www.npmjs.com/package/@nju33/react-typing)
[![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-typing
```

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

## Usage

```ts
import {Typing, Del, Enter} from '@nju33/react-typing';
// - Typing
// - Del
//     In the text, temporarily display and then erase.
// - Enter
//     Put a line break

// Default setting
Typing.defaultProps.speed = [20, 130]; // Any of the 20 ~ 130
Del.defaultProps.reverseSpeed = 20; // Only 20

// ...

<Typing
  in={false} // When it appears
  cursorAnimation={false} // Optional. Whether cursor element display
  onComplete={this.handleComplete} // Optionals. this is triggered after this animation complete
  speed={[50, 100]} // Optional. Overwrite default setting
>
  Lorem ipsum dolor sit amet, <Del>feugiat ut efficitur id</Del>consectetur adipiscing
  elit.<Enter />
  Ut neque ipsum, vulputate vitae dignissim eu, euismod eget lorem.<Enter />
  Duis ut efficitur mi. Ut vehicula nisl vitae magna maximus, et accumsan dolor pretium.<Enter />
  Etiam <Del>Curabitur vehicula dignissim era</Del>finibus et odio id pellentesque.<Enter />
  Duis fringilla, libero et gravida maximus, nulla dolor posuere quam, interdum
  luctus nisi lectus ac quam.
</Typing>;
```
npm package: @nju33/reducer-action
Description: [![CircleCI](https://circleci.com/gh/nju33/react-a.svg?style=svg&circle-token=9c6b0217483ac8aca3220b42a652f08e0b36cfa4)](https://circleci.com/gh/nju33/react-a) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://githu
Author: nju33
Latest version: 0.0.2

# ReducerAction

[![CircleCI](https://circleci.com/gh/nju33/react-a.svg?style=svg&circle-token=9c6b0217483ac8aca3220b42a652f08e0b36cfa4)](https://circleci.com/gh/nju33/react-a)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![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 -D @nju33/reducer-action
```

## Example

```ts
import {ReducerAction} from '@nju33/reducer-action';

const enum ActionType {
  A,
  B,
}

const action = {
  a() {
    return {
      type: ActionType.A as ActionType.A,
      payload: {
        foo: 'foo',
      },
    };
  },
  b() {
    return {
      type: ActionType.B as ActionType.B,
      payload: {
        bar: 'bar',
      },
    };
  },
};

type Action = ReducerAction<typeof action>;

const aAction: Action = action.a() as any;

switch (aAction.type) {
  case ActionType.A: {
    aAction.payload.foo;
    break;
  }
  case ActionType.B: {
    aAction.payload.bar;
    break;
  }
  default:
}

```
npm package: @nju33/rollup-preset
Description: Preset for nju33
Author: nju33
Latest version: 0.0.3

# Rollup 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/rollup-preset
```

```js
rollup.rollup({
  plugins: [...preset({...options}), ...]
})
```

## Plugins

```js
"dependencies": {
  "rollup-plugin-babel": "^2.7.1",
  "rollup-plugin-babili": "^2.0.0",
  "rollup-plugin-commonjs": "^8.0.2",
  "rollup-plugin-json": "^2.1.0",
  "rollup-plugin-node-resolve": "^3.0.0",
  "rollup-plugin-replace": "^1.1.1",
  "rollup-plugin-svelte": "^1.6.1",
  "rollup-plugin-vue": "^2.3.1"
}
```

## Options

```js
const default = {
  // Name of the root directory where the script is placed
  base: 'lib',
  // Values that can be referenced in `process.env.NODE_ENV`
  env: process.env.NODE_ENV || 'development',
  // Setting up rollupPluginVue
  // VuePlugin is enabled with at least the empty object
  vue: false, // or {...}
  // Babel setting for rollup
  babel: {
    /*
      yarn add -D babel-preset-env \
                  babel-plugin-transform-runtime \
                  babel-plugin-external-helpers \
                  babel-plugin-transform-decorators-legacy \
                  babel-plugin-transform-object-rest-spread \
                  babel-plugin-transform-class-properties
    */
    presets: [
      ['env', {
        targets: {browsers: ['> 3%', 'last 2 versions']},
        modules: false
      }]
    ],
    plugins: [
      'transform-runtime',
      'external-helpers',
      'transform-decorators-legacy',
      'transform-object-rest-spread',
      'transform-class-properties',
      // ...
    ]
  },
  // Whether to minify with babili
  minify: false
}
```

## Lisence

The MIT License (MIT)

Copyright (c) 2017 nju33 <nju33.ki@gmail.com>
npm package: @nju33/slack
Description: [![github](https://badgen.net/badge//nju33,slack/000?icon=github&list=1)](https://github.com/nju33/slack) [![npm:version](https://badgen.net/npm/v/@nju33/slack?icon=npm&label=)](https://www.npmjs.com/package/@nju33/slack) [![ci:status](https://badgen.net/
Latest version: 1.7.5

# @nju33/slack

[![github](https://badgen.net/badge//nju33,slack/000?icon=github&list=1)](https://github.com/nju33/slack)
[![npm:version](https://badgen.net/npm/v/@nju33/slack?icon=npm&label=)](https://www.npmjs.com/package/@nju33/slack)
[![ci:status](https://badgen.net/circleci/github/nju33/slack)](https://circleci.com/gh/nju33/slack)
[![document:typedoc](https://badgen.net/badge/document/typedoc/9602ff)](https://nju33--slack.netlify.com/)
[![license](https://badgen.net/npm/license/vwxy)](https://github.com/nju33/vwxy/blob/master/LICENSE)
[![code style: prettier](https://badgen.net/badge//prettier/ff69b3?label=code%20style)](https://github.com/prettier/prettier)
[![typescript](https://badgen.net/badge/lang/typescript/0376c6)](https://www.typescriptlang.org/)

## Install

```bash
yarn add @nju33/slack
```

## Usage

```ts
import {useChat} from '@nju33/slack';

const {json, updateText, useAttachment} = useChat('postMessage', 'text');
updateText(text => `update-${text}`);
const {useTitle, useButton} = useAttachment('callback_id');
useTitle('title');
useButton('button name', 'button text', 'button value');

fetch(responseURL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  body: JSON.stringify(json()),
});
//
// {
//   title: 'update-text',
//   attachments: [
//     {
//       callback_id: 'callback_id',
//       title: 'title',
//       actions: [
//        {
//          type: 'button',
//          name: 'button name',
//          text: 'button text',
//          value: 'button value',
//        }
//      ],
//     },
//   ]
// }
//
```
npm package: @nju33/storybook__addon-docsify
Description: Storybook and Docsify integrator (But it's altmost Docsify)
Author: nju33
Latest version: 1.0.1

# @nju33/storybook\_\_addon-docsify

## Prepare

Install like below,

```sh
yarn add -D @nju33/storybook__addon-docsify
```

And you should add the following to your `addon.js` (if you're using TypeScript then `addon.ts`).

```sh
import '@nju33/storybook__addon-docsify/dist/register';
```

Finally, place Docsify root as `index.html` following like. (The details is in [Docsify document](https://docsify.js.org/#/configuration).)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
  </head>
  <body>
    <div id="app"></div>
    <script>
      window.$docsify = {
        basePath: '/',
        name: 'Document',
      };
    </script>
    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  </body>
</html>
```

After Docsify will do it for you. 👻

## Examples

In the below is first example.

```jsx
storiesOf('html-button', module)
  // html-button/foo-bar.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/bar-baz.md
  .add('bar-baz', () => <button>bar-baz</button>);
```

In the above, The document path is `html-button/foo-bar`. In this case, Storybook has interapted key is `html-button--foo-bar` that using `--` as separator.

That `--` is handled `/` by this addon. Thus `index.html#/html-button/foo-bar` will be loaded then.

If you want to change its behavior, You maybe change it by pass to parameter into your story.

```jsx
storiesOf('html-button', module)
  .addParameter({
    docsify: {
      path: 'html-button/README'
    }
  })
  // html-button/README.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/README.md
  .add('bar-baz', () => <button>bar-baz</button>);
```

This addon read the parameter using by `docsify`. By setting `path`, you can make Docsify is loaded `*.md` you wish.
npm package: @nju33/styled-components
Description: [![github](https://badgen.net/badge//nju33,styled-components/000?icon=github&list=1)](https://github.com/nju33/styled-components) [![npm:version](https://badgen.net/npm/v/@nju33/styled-components?icon=npm&label=)](https://www.npmjs.com/package/@nju33/styl
Author: nju33
Latest version: 0.2.0

# @nju33/styled-components

[![github](https://badgen.net/badge//nju33,styled-components/000?icon=github&list=1)](https://github.com/nju33/styled-components)
[![npm:version](https://badgen.net/npm/v/@nju33/styled-components?icon=npm&label=)](https://www.npmjs.com/package/@nju33/styled-components)
[![typescript](https://badgen.net/badge/lang/typescript/0376c6?icon=npm)](https://www.typescriptlang.org/)
[![ci:status](https://badgen.net/circleci/github/nju33/nju33/styled-components)](https://circleci.com/gh/nju33/nju33/styled-components)
[![document:typedoc](https://badgen.net/badge/document/typedoc/9602ff)](https://docs--nju33/styled-components.netlify.com/)
[![license](https://badgen.net/npm/license/nju33/styled-components)](https://github.com/nju33/nju33/styled-components/blob/master/LICENSE)
[![code style:prettier](https://badgen.net/badge//prettier/ff69b3?label=code%20style)](https://github.com/prettier/prettier)

My styled-components helpers

## Usage

````js
/**
 * Before, To install this and styled-components
 * ```sh
 * yarn add @nju33/styled-components styled-components @types/styled-components
 * ```
 */
import {Mixin, RequiredAtomProps, createMedia} from '@nju33/styled-components';
````

## Example

```ts
const foo = 'foo' as 'foo';
const bar = 'bar' as 'bar';

type MixinName = typeof foo | typeof bar;
type CurrentComponentMixin = Mixin<MixinName>;

const mixin: CurrentComponentMixin = (mixinName => (
  first,
  ...interpolations
) => css`
  &.${mixinName} {
    ${css(first, ...interpolations)}
  }
`) as CurrentComponentMixin;

mixin[foo] = mixin(foo)`
  font-size: 15px;
`;

mixin[bar] = mixin(bar)`
  font-size: 13;
`;

// tslint:disable-next-line:no-unused-expression
styled.div<RequiredAtomProps<MixinName>>`
  ${mixin.foo};
  ${mixin.bar};
`;
```

```ts
interface Sizes {
	desktop: number;
	tablet: number;
	phone: number;
}

const media = createMedia<Sizes>({
	desktop 992,
	tablet: 768,
	phone: 576
});

styled.div`
	color: blue;

	${media.desktop`
		color: orange;
	`};
`;
// color: blue;
// @media screen and (min-width: 992px) {
//   color: orange;
// }
```
npm package: @nju33/tows
Description: A tool for Node.js project to install the same dependencies of its project to each workspace package
Author: nju33
Latest version: 1.0.2

# Tows

[![crates.io](https://badgen.net/crates/v/tows)](https://crates.io/crates/tows)
[![npm](https://badgen.net/npm/v/@nju33/tows)](https://www.npmjs.com/package/@nju33/tows)
![cargo-test](https://github.com/nju33/tows/workflows/cargo-test/badge.svg)

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

A tool for Node.js project to install the same dependencies of its project to each workspace package

## Usage

### Rust

```bash
cargo install tows

tows
```

### Node

```bash
npx @nju33/tows
```

### Options

#### `--cwd,-C`

Directory name which `package.json`(default) will be placed.

#### `--filename,-f`

Target filename. (default `package.json`)

## Video

[![asciicast](https://asciinema.org/a/311174.svg)](https://asciinema.org/a/311174)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://nju33.com/"><img src="https://avatars2.githubusercontent.com/u/15901038?v=4" width="100px;" alt=""/><br /><sub><b>純</b></sub></a><br /><a href="https://github.com/nju33/tows/commits?author=nju33" title="Documentation">📖</a> <a href="https://github.com/nju33/tows/commits?author=nju33" title="Code">💻</a> <a href="https://github.com/nju33/tows/pulls?q=is%3Apr+reviewed-by%3Anju33" title="Reviewed Pull Requests">👀</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
npm package: @nju33/vue-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%2Fvue-firebase.svg)](https://badge.fury.io/js/%40nju33%2Fvue-firebase)
Author: nju33
Latest version: 0.1.1

# vue-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%2Fvue-firebase.svg)](https://badge.fury.io/js/%40nju33%2Fvue-firebase)

## Install

```bash
npm i @nju33/vue-firebase
```
npm package: @nju33/vue-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%2Fvue-firebase-authentication.svg)](https://badge.fury.io/js/%40nju33%2Fvue-fire
Author: nju33
Latest version: 0.0.5

# vue-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%2Fvue-firebase-authentication.svg)](https://badge.fury.io/js/%40nju33%2Fvue-firebase-authentication)
npm package: @njudah/builder
Description: Build tool
Author: Francisco Ryan Tolmasky I
Latest version: 12.0.0-beta.4

# N Judah Builder

This is a build tool for applying transforms to files.

# How Do I use It?

You specify your build using (generic) JSX:

```JavaScript
const { build, transform } = require("@njudah/builder");
const babel = require("@njudah/builder/transform/babel");

<build  path = "/path/to/your/project"
        destination = "/path/to/build/folder"
        ignore = "**/node_modules" >
    <transform match = "**/*.js" >
        <babel options = { { presets: ["es2015-node4", "stage-0"] } } />
    </transform>
</build>

```

Use the promisified interface to run the build and grab the final location:

```JavaScript

require("@njudah/builder/promisifed")(
    <build  path = "/path/to/your/project"
        destination = "/path/to/build/folder"
        ignore = "**/node_modules" >
        <transform match = "**/*.js" >
            <babel options = { { presets: ["es2015-node4", "stage-0"] } } />
        </transform>
    </build>
)
    .then(function (x)
    {
        console.log(x);
    });

```

If you do not have access to generic JSX, you can use the alternative array syntax:

```JavaScript

require("@njudah/builder/promisifed")(
    [build,
    {
        path: "/path/to/your/project",
        destination: "/path/to/build/folder"
        ignore: "**/node_modules"
    },
        [transform, { match: "**/*.js" },
            [babel, { options: { presets: ["es2015-node4", "stage-0"] } }
        ]
    ]
)
    .then(function (x)
    {
        console.log(x);
    });

```

## build attributes

- **path**: source path
- **destination**: destination folder
- **ignore**: files to ignore. Can be glob string, or array of glob strings.

## transform attributes

- **match** - files to match. Can be glob string, or array of glob strings.

## transform child

Transform expects one child, the actual transform function to run. *babel* is the only currently supported one.

## babel attributes

- **options** - Babel options.
npm package: @njzy/mini-react-refresh-webpack-plugin
Description: A mini webpack plugin for react refresh
Author: njzy
Latest version: 0.2.3

# mini-react-refresh-webpack-plugin

A mini webpack plugin for react refresh

> This plugin is based on [https://github.com/maisano/react-refresh-plugin](https://github.com/maisano/react-refresh-plugin)

## Motivation

When I use this plugin [pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) in my project [chrome-extension-boilerplate](https://github.com/njzydark/chrome-extension-boilerplate), I meet this problem [issues/399](https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/399), It took me a long time to solve this problem on the original repository, and finally I realized I should make a separate version to meet my later needs, such as excluding specific entries, so this version was born

## Usage

```bash
npm i -D @njzy/mini-react-refresh-webpack-plugin
```

webpack config:

```ts
import { MiniReactRefreshWebpackPlugin } from '@njzy/mini-react-refresh-webpack-plugin';

...
plugins: [new MiniReactRefreshWebpackPlugin()]
...
```

**PS:** No need to set `react-refresh/babel`

## Thanks

- [maisano/react-refresh-plugin](https://github.com/maisano/react-refresh-plugin)
- [pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin)
- [react-refresh](https://github.com/facebook/react/tree/main/packages/react-refresh/src)
npm package: @njzy/ps4-pkg-info
Description: Get information (paramSfo and icon0) from a PlayStation 4 PKG file
Author: njzy
Latest version: 0.1.0

# ps4-pkg-info

Get information (paramSfo and icon0) from a PlayStation 4 PKG file

## Features

- Support generate paramSfo and icon0 data
- Support Nodejs and Browser
- Full type definition

## Install

```bash
npm i @njzy/ps4-pkg-info
```

## Usage

```ts
// nodejs
import { getPs4PkgInfo } from "@njzy/ps4-pkg-info";
// browser
import { getPs4PkgInfo } from "@njzy/ps4-pkg-info/web";

getPs4PkgInfo("nodejs: filePath or browser: fileUrl")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });
```

### Options

- generateParamSfo - true
- generateIcon0 - true
- generateBase64Icon - false

## Thanks

The main implementation principle of this project is derived from the following projects:

- [psdevwiki](https://www.psdevwiki.com/ps4/Package_Files)
- [dexter85/ps4-pkg-info](https://github.com/dexter85/ps4-pkg-info)
- [flatz/ps4_remote_pkg_installer](https://github.com/flatz/ps4_remote_pkg_installer)