open-index/open-npm huggingface dataset:
npm package: @jneander/a11y-dom
Description: Accessibility behavior for the DOM
Author: Jeremy Neander
Latest version: 2.0.0

# @jneander/a11y-dom

Accessibility behavior for the DOM

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/a11y-dom/blob/master/LICENSE
npm package: @jneander/a11y-react
Description: Accessibility behavior for React
Author: Jeremy Neander
Latest version: 2.1.1

# @jneander/a11y-react

Accessibility behavior for React

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/a11y-react/blob/master/LICENSE
npm package: @jneander/babel-plugin-themeable-styles
Description: A babel plugin to transform CSS imports for themeable components
Author: Instructure, Inc. Engineering and Product Design
Latest version: 0.0.3
Deprecated: This project is no longer supported

# @jneander/babel-plugin-themeable-styles

This is a temporary fork of [@instructure/babel-plugin-themeable-styles](https://github.com/instructure/instructure-ui/tree/beta/packages/babel-plugin-themeable-styles).
npm package: @jneander/browserslist-config
Description: Personal browserslist configuration
Author: Jeremy Neander
Latest version: 1.0.0

# @jneander/browserslist-config

Shareable [browserslist](https://github.com/ai/browserslist) configuration.

## Installation

```console
npm install @jneander/browserslist-config
```

## Usage

Add this to your `package.json`:

```json
// package.json
{
  "browserslist": ["extends @jneander/browserslist-config"]
}
```
npm package: @jneander/commitlint-config
Description: Personal commitlint configuration
Author: Jeremy Neander
Latest version: 1.0.1

# @jneander/commitlint-config

Shareable [commitlint](https://commitlint.js.org/) configuration for consistent commits across
repositories.

## Installation

```console
npm install @commitlint/cli @jneander/commitlint-config --save-dev
```

## Usage

Add this to your `package.json`:

```json
// package.json
{
  "scripts": {
    "lint:commits": "commitlint --from origin/main --to HEAD"
  },
  "commitlint": {
    "extends": "@jneander/commitlint-config"
  }
}
```

Now when you run `npm run lint:commits` commitlint will lint your recent commits.
npm package: @jneander/dev-utils-node
Description: Shared Development Tools for Node
Author: Jeremy Neander
Latest version: 2.0.0

# @jneander/dev-utils-node

Shared Development Tools for Node

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/dev-utils-node/blob/master/LICENSE
npm package: @jneander/event-bus
Description: Event Bus
Author: Jeremy Neander
Latest version: 1.0.1

# @jneander/event-bus

A Basic Event Bus

## EventBus

A class which allows for the subscription to, and publication of, named events and associated data.

### subscribe

Subscribe a callback function to an event with the given name.

#### Parameters

- `eventName` {string} The unique name for the event to be subscribed to.
- `handler` {EventHandler} A function which will be called when the event with the given name is
  published. This handler will receive any data included with the published event as well as an
  EventInfo object containing information about the event itself.

Returns **EventUnsubscribeFn** A function which, when called, will unsubscribe the event handler
from this event.

### publish

Publish an event with the given name and data. Subscribed handlers associated with this name will be
called synchronously with the given data and information about the event.

#### Parameters

- `eventName` {string} The name of the event to publish.
- `data` {unknown} Any data to include with the published event.

## EventBusDouble

**Extends EventBus**

A class extending EventBus which includes additional methods intended for test environments.

### getPublishedEvents

Return an array containing each event published from this EventBus.

Returns **Array\<EventBusDoubleEvent>**

### clearPublishedEvents

Remove internal records for each event published from this EventBus.

Returns **Array\<EventBusDoubleEvent>**

### getSubscriptions

Return an array containing information about each event subscription not yet unsubscribed from this
EventBus.

Returns **Array\<EventBusDoubleSubscription>**
npm package: @jneander/focus-dom
Description: Focus management for the DOM
Author: Jeremy Neander
Latest version: 2.0.0

# @jneander/focus-dom

Focus management for the DOM

## Next Steps

- Add examples of borrowing from outside Focus.

### Questions

- How to ensure everything works correctly while window is in background?
- What might need to happen when the element hierarchy rearranges?

### Unknown Behaviors to Consider

- automatic reconciliation
  - might depend on more fine-grained fallback rules
    - i.e. removed borrowers release to lenders instead of fallback
- observability
  - onFocus, onBlur for the FocusRegion?
    - alternately, at the root Focus container
- iframes in focus
  - focus fallback out of an iframe
  - focus falling into an iframe
npm package: @jneander/genetics
Description: Genetic Algorithms in JavaScript
Author: Jeremy Neander
Latest version: 0.8.0

# @jneander/genetics

Genetic Algorithm Implementations

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/genetics/blob/master/LICENSE
npm package: @jneander/prettier-config
Description: Personal prettier configuration
Author: Jeremy Neander
Latest version: 1.0.1

# @jneander/prettier-config

Shareable [prettier](https://prettier.io/) configuration for consistent files across repositories.

## Installation

```console
npm add -D @jneander/prettier-config
```

## Usage

Add this to your `package.json`:

```json
{
  "prettier": "@jneander/prettier-config"
}
```

## Editor Integration

Please see the [official guide](https://prettier.io/docs/en/editors.html) for editor integration.
npm package: @jneander/spec-utils-dom
Description: Spec utilities for DOM interactions
Author: Jeremy Neander
Latest version: 2.0.2

# @jneander/spec-utils-dom

Spec utilities for DOM interactions

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-state/blob/master/LICENSE
npm package: @jneander/spec-utils-react
Description: Spec utilities for React interfaces
Author: Jeremy Neander
Latest version: 2.0.1

# @jneander/spec-utils-react

Spec utilities for React interfaces

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-state/blob/master/LICENSE
npm package: @jneander/utils-arrays
Description: Array Generation, Transformation, and Traversal Utilities
Author: Jeremy Neander
Latest version: 1.0.0

# @jneander/utils-arrays

Array Generation, Transformation, and Traversal Utilities

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-arrays/blob/master/LICENSE
npm package: @jneander/utils-async
Description: Asynchronous Utilities
Author: Jeremy Neander
Latest version: 2.1.2

# @jneander/utils-async

Asynchronous Utilities

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-async/blob/master/LICENSE
npm package: @jneander/utils-browser
Description: Utilities for browser-based apps
Author: Jeremy Neander
Latest version: 2.0.0

# @jneander/utils-browser

Utilities for browser-based apps

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-state/blob/master/LICENSE
npm package: @jneander/utils-functions
Description: JavaScript function-related utilities
Author: Jeremy Neander
Latest version: 1.0.0

# @jneander/utils-functions

Function Utilities

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-functions/blob/master/LICENSE
npm package: @jneander/utils-react
Description: React Utilities
Author: Jeremy Neander
Latest version: 2.1.0

# @jneander/utils-react

React Utilities

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-react/blob/master/LICENSE
npm package: @jneander/utils-state
Description: Utilities for managing state
Author: Jeremy Neander
Latest version: 2.0.2

# @jneander/utils-state

Utilities for managing state

[![License: MIT][license-badge]][license-url]

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square
[license-url]: https://github.com/jneander/utils-state/blob/master/LICENSE
npm package: @jnesbella/body-builder
Description: by jesse nesbella
Author: jnesbella
Latest version: 5.3.8

# body-builder

> by jesse nesbella

[![NPM](https://img.shields.io/npm/v/body-builder.svg)](https://www.npmjs.com/package/body-builder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save body-builder
```

## Usage

```tsx
import React, { Component } from "react";

import MyComponent from "body-builder";
import "body-builder/dist/index.css";

class Example extends Component {
  render() {
    return <MyComponent />;
  }
}
```

## License

MIT © [jnesbella](https://github.com/jnesbella)
npm package: @jnields/vue-redux
Description: Vue bindings for redux
Author: Joseh Nields
Latest version: 0.0.0-alpha.1

Vue Redux
=========================

Vue bindings for [Redux](https://github.com/reactjs/redux).  
Performant and flexible.

[![build status](https://img.shields.io/travis/jnields/vue-redux/master.svg?style=flat-square)](https://travis-ci.org/jnields/vue-redux) [![npm version](https://img.shields.io/npm/v/@jnields/vue-redux.svg?style=flat-square)](https://www.npmjs.com/package/@jnields/vue-redux) [![Coverage Status](https://coveralls.io/repos/github/jnields/vue-redux/badge.svg?branch=master)](https://coveralls.io/github/jnields/vue-redux?branch=master)


## Installation

Vue Redux requires **Vue 2.2.1 or later.**

```
npm install --save @jnields/vue-redux
```

This assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).

## Documentation

- [API](docs/api.md#api)
  - [`<Provider store>`](docs/api.md#provider-store)
  - [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
- [Troubleshooting](docs/troubleshooting.md#troubleshooting)

## How Does It Work?

We do a deep dive on how Vue Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).  
Enjoy!

## License

MIT
npm package: @jnimbus/angular-mentions
Description: Angular mentions for text fields.
Author: Michael Moffet
Latest version: 0.0.4

# Angular Mentions

Simple Angular mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).

[Click here for a Demo](http://dmacfarlane.github.io/angular-mentions/)

Provides auto-complete suggestions for @mentions in text input fields, text areas,
and content editable fields. Not fully browser tested and comes without warranty!

To install and start the demo application:

    git clone https://github.com/dmacfarlane/angular-mentions.git
    cd angular-mentions
    npm install
    ng serve

### Usage

Add the package as a dependency to your project using:

    npm install --save angular-mentions

Add the CSS to your index.html:

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Add the module to your app.module imports:

    import { MentionModule } from 'angular-mentions/mention';
    ...

    @NgModule({
        imports: [ MentionModule ],
        ...
    })

Add the `[mention]` directive to your input element:

    <input type="text" [mention]="items">

Where `items` is a string array of the items to suggest. For example:

    items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

#### Configuration Options

The following optional configuration items can be used.

| Option        | Default  | Description |
| ---           | ---      | ---         |
| triggerChar   | @        | The character that will trigger the menu behavior. |
| maxItems      |          | Limit the number of items shown in the pop-up menu. The default is no limit. |
| mentionSelect |          | An optional function to format the selected item before inserting the text. |
| labelKey      | 'label'  | The field to be used as the item label (when the items are objects). |
| filterKeys    | ['label']| The field(s) to search on, if the items are objects. |
| showListHeader | false   | Show or hide a header for the search list. |
| maxHeight     | 300      | Option to set a max height for the search list, in pixels. |
| minWidth      | 250      | Option to set a minimum width for the search list, in pixels. |
| maxWidth      | 500      | Option to set a max width for the search list, in pixels. |
| positionType  | 'cursor' | Specify the position of the list. Options are cursor, above, below, or detect. |
| xPos          | 0        | Option to specify a specific x-offset, in pixels. |
| yPos          | 0        | Option to specify a specific y-offset, in pixels. |
| listItemHeight  | 26     | Option to specify a particular line-item height, in pixels. (only needed if using an advanced custom template for the list items) |
| disableSearch | false    | Disable internal filtering (only useful if async search is used). |

For Example: 

    <input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#', maxItems:10, labelKey:'name', positionType: 'above', showListHeader: true}">

#### Output Events

- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.
npm package: @jnjacobson/progress-network-generator
Description: Generate progress networks from raw data.
Author: Jan Jacobson
Latest version: 3.0.1

# Progress Network Generator

Generates progress networks from raw data based on _Progress Networks as a Tool for Analysing
Student Programming Difficulties_ from Jessica McBroom et al. In Australasian Computing
Education Conference, ACE’21, page 158–167, New York, NY, USA, 2021.
Association for Computing Machinery.

<img alt="Example progress network" src="./example.svg">
npm package: @jnlietta/randomid-generator
Description: @jnlietta/id-generator is easy-to-use package that will help you generate a random id that contains big and small letters, numbers from 0 to 9 and have length that you'll choose.
Latest version: 1.0.1

# @jnlietta/id-generator

## Description
@jnlietta/id-generator is easy-to-use package that will help you generate a random id that contains big and small letters, numbers from 0 to 9 and have length that you'll choose.

## Installation
To install the package, run the following command in your terminal:

```
yarn add @jnlietta/randomid-generator
```

## Usage
After installation you can easily import the function into your project. Here is a example of usage the package: 

```js
// import package to your project as a randomID
const randomID = require('@jnlietta/randomid-generator');

// generate a random ID with length 10
const newRandomID = randomID(10);
console.log(newRandomID); // console will show a random string, e.g., 'Dc1ZzS95rD'
```

## Requirements
To use method properly you have to put a single argument that is a number:

- **idLength** : number that will determine the amount of signs used in the generated id in string type.

## License
This project is licensed under MIT License.
npm package: @jnlong/eutils
Description: js tools, css tools；整理前端常用js工具集、css通用样式库；减少项目中公共库的重复开发；css reset, css common; js utils, cookie、browser detector、imglazy、date format loadscript checktype urlparse
Author: jnlong
Latest version: 0.9.14

# 项目介绍
该项目整理了前端比较常用的工具集，包括js工具和css工具；
当我们新建一个前端项目时，只需要引入这个npm包，就可以省去很多写工具的重复工作；

* [源码地址](https://github.com/jnlong/eutils)
* [API](https://github.com/jnlong/eutils/blob/master/API.md)
* [version](https://github.com/jnlong/eutils/blob/master/version.md)
* [collection](https://github.com/jnlong/eutils/blob/master/collection.md)

![](https://github.com/jnlong/eutils/blob/master/doc/nt.png?raw=true)

# 项目规范
* 函数使用小驼峰方式命名
* 对象使用大驼峰方式命名
* 项目使用webpack构建，支持按需引入
* 支持直接引入编译前的源文件：less文件、es6文件

# 安装
$ npm install @jnlong/eutils

# 使用
## js
``` javascript
    // js引用方法1
    import eutils from 'eutils';

    eutils.date.format('2018-9-6', '{y}/{m}/{d} {h}:{i}:{s}');

    // js引用方法2
    import {type, urlParse, date, log as ulog} from 'eutils';
    date.format(new Date(), 'YYYY-MM-DD HH:mm:ss.SSS');

    // 按需引入js源文件
    import date as uDate from 'eutils/src/js/date'
```
## style
``` javascript
    // 引入css
    @import 'eutils/dist/index.css';

    // 引入less：webpack需要配置less解析
    @import 'eutils/src/style/index.less';
    @import 'eutils/src/style/index.less';
```

## 用法
在 example/main.js中编写了每一个API的用法，可以打开文件查看。

## example
可以运行样例查看example

* ```git clone git@github.com:jnlong/eutils.git```
* ```cd eutils```
* ```npm install --save-dev```
* ```npm run dev```
* 用浏览器打开 ```http://localhost:8088/```查看example，也可以同时打开浏览器的控制台查看console信息

# 参考
* 工具集utils:  https://github.com/cd-dongzi/utils （star 190，css js）
* 工具集outils: https://github.com/proYang/outils （start 1189 js）
npm package: @jnmorse/prettier-config
Description: Personal Prettier Configuration
Author: Joseph Morse
Latest version: 0.1.0

# Pettier Configuration

My personal prettier config setup

## Usage

### Install

```sh
npm install --save-dev @jnmorse/prettier-config
```

### Edit `package.json`

```json
{
  "prettier": "@jnmorse/prettier-config"
}
```
npm package: @jnmorse/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.1.2

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.