open-index/open-npm huggingface dataset:
npm package: @jonniebigodes/learnstorybook-design-system-ts-yarn-modern
Description: Storybook design systems tutorial changes for ts and yarn
Author: jonniebigodes
Latest version: 0.1.3

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @jonniebigodes/learnstorybook-design-system-with-6-0
Description: Learn Storybook design system with Storybook version 6
Author: jonniebigodes
Latest version: 0.1.6

# The Learn Storybook design system

The Learn Storybook design system is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more at [Learn Storybook](https://learnstorybook.com).
npm package: @jonniebigodes/learnstorybook-design-system-with-actions
Description: Learn Storybook design system
Author: jonniebigodes
Latest version: 0.3.1

# The Learn Storybook design system with actions

The Learn Storybook design system is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more at [Learn Storybook](https://learnstorybook.com)
npm package: @jonniebigodes/learnstorybook-design-system-with-interactions
Description: Storybook design systems tutorial
Author: jonniebigodes
Latest version: 0.1.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @jonniebigodes/learnstorybook-design-system-with-template
Description: Storybook design systems tutorial
Author: jonniebigodes
Latest version: 0.1.4

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @jonniebigodes/testing-with-learnstorybook-design-system
Description: Storybook design systems tutorial
Author: jonniebigodes
Latest version: 0.2.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @jonnsl/interprete
Description: Simple expression evaluator in typescript
Author: Jonnathan Soares Lima
Latest version: 0.0.1

# Interprete

Simple expression evaluator in typescript

* Math operators + - * /
* Boolean operators (or || and &&)
* Comparisons (= != < > <= >=)

## Examples

```javascript
import evaluate from '@jonnsl/interprete';

const expression = 'year < 2004';
const result = evaluate(input, { year: '10' }); // result === true
```

## Installation

```bash
npm install --save interprete
```

## License

This project is licensed under the MIT License - see [LICENSE](LICENSE) for details.
npm package: @jonnsl/react-currency-input
Description: ATM style currency input for React
Author: Jonnathan Soares Lima
Latest version: 1.0.1

# React Currency Input

## Demo

![](demo.gif)

[Live Demo on CodePen](https://codepen.io/jonnsl/pen/WNJJapG)

## Installation

```bash
npm install --save @jonnsl/react-currency-input
```

## Examples

```javascript
import React, { useState } from "react";
import Money from "@jonnsl/react-currency-input";

function BRLInput (props) {
  const [value, setValue] = useState(0);

  return <Money prefix="R$" max={99999999} onChange={(v) => setValue(v)} value={value} />;
}

export default BRLInput;
```

## Props

| Props | Options | Default | Description |
| - | - | - | - |
| prefix | string | undefined | String to be added before the formatted number. |
| name | string | undefined | Attribute name for the html input |
| className | string | undefined | A string variable representing the class or space-separated classes of the current element. |
| id | string | undefined | the element's identifier |
| value | number | undefined | Input value |
| defaultValue | strnumbering | undefined | Initial value for the input when the component is first mounted.  |
| readOnly | boolean | undefined | indicates that the element is not editable, but is otherwise operable. |
| disabled | boolean | undefined | element is perceivable but disabled, so it is not editable or otherwise operable. |
| required | boolean | undefined |  indicates that user input is required on the element before a form may be submitted. |
| placeholder | string | undefined | defines a short hint intended to aid the user with data entry when the control has no value. |
| max | number | undefined | defines the maximum allowed value for the input. |
| style | CSSProperties | undefined | CSS styling declarations to be applied to the input element. |
| tabIndex | number | undefined | indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). |
| title | string | undefined | text representing advisory information related to the element it belongs to. |
| onChange | (newValue: number) => void | undefined | The change event is fired when the user modifies the input's value. |

## License

This project is licensed under the MIT License - see [LICENSE](LICENSE) for details.
npm package: @jonny/bibtex-parse-js
Description: A JavaScript library that parses BibTeX to JSON
Author: rcpeters
Latest version: 0.0.26

bibtexParseJs
=============
A JavaScript library that parses BibTeX parser. Forked from 
[ORCID bibtex-parser](https://github.com/ORCID/bibtexParseJs).
Added a modification that enables the parsing of the BibTeX format that Endnote uses.


## Using in Browser
Include bibtexParse.js and call 

```
bibtexParse.toJSON('@article{sample1,title={sample title}}');
```

## Using in [Node.js](http://nodejs.org/)
Install     ```npm install bibtex-parse-js```

```
var bibtexParse = require('bibtex-parse-js');

var sample = bibtexParse.toJSON('@article{sample1,title={sample title}}');

console.log(sample);
``` 

**Returns** A parsed bibtex file as a JSON Array Object

```
[ { citationKey: 'SAMPLE1',
    entryType: 'ARTICLE',
    entryTags: { TITLE: 'sample title' } } ]
```

## Contributing
   Contributions are welcome. Please make sure the unit test(test/runTest.js) reflects the
   changes and completes successfully. 

#### Travis CI
See the latest build and results at [https://travis-ci.org/ORCID/bibtexParseJs](https://travis-ci.org/ORCID/bibtexParseJs)

## Credits
(c) 2010 Henrik Muehe.  MIT License 
[visit](https://code.google.com/p/bibtex-js/)


CommonJS port maintained by Mikola Lysenko 
[visit](https://github.com/mikolalysenko/bibtex-parser)
npm package: @jonny/docusaurus-preset-shiki-twoslash
Description: A Docusaurus plugin which adds shiki with optional twoslash-powered code samples
Author: Orta Therox
Latest version: 1.1.36

### Docusaurus Preset Shiki Twoslash

Sets up markdown code blocks to run through [shiki](https://shiki.matsu.io) which means it gets the VS Code quality
syntax highlighting mixed with the twoslash JavaScript tooling from the TypeScript website.

#### Setup

1. **Install the dependency**: `yarn add docusaurus-preset-shiki-twoslash`
1. **Include `"docusaurus-preset-shiki-twoslash"` in the presets section** of `docusaurus.config.js`

   ```diff
     presets: [
    [
      '@docusaurus/preset-classic',
      {
        // ...
      },
    ],
   + [
   +     'docusaurus-preset-shiki-twoslash',
   +     {
   +       themes: ["min-light", "nord"],
   +     },
   + ],
   ],
   ```

1. Set up light/dark mode CSS in `src/css/custom.css`:
  
  ```css
  [data-theme="light"] .shiki.nord {
     display: none;
  }

  [data-theme="dark"] .shiki.min-light {
     display: none;
  }
  ```

1. **Go read [npmjs.com/package/remark-shiki-twoslash](https://www.npmjs.com/package/remark-shiki-twoslash)** to see what is available, this package leaves all the heavy work to that module.
npm package: @jonny/draft-js-single-line-plugin
Description: Restrict a draft-js editor to a single line of input.
Latest version: 2.0.1

# Draft.js Single Line plugin

*This is a plugin for the [`draft-js-plugins-editor`](https://www.draft-js-plugins.com/), a plugin system that sits on top of Draft.js.*

This plugin adds support restricting [Facebook’s Draft.js editor](https://facebook.github.io/draft-js/) to a single line of content. It will condense any blocks into a single block, and (optionally) strip any rich entities.

## What, why?!

Madness I know, however there places you want to allow _some_ rich styling yet the underlying value should still be a single line. Allowing titles for things like blog posts or pages to contain strong/emphasis is our main use-case.

## Usage

```js
import createSingleLinePlugin from 'draft-js-single-line-plugin'
const singleLinePlugin = createSingleLinePlugin()
```

This can then be passed into a `draft-js-plugins-editor` component:

```js
import createSingleLinePlugin from 'draft-js-single-line-plugin'
const singleLinePlugin = createSingleLinePlugin()
import Editor from 'draft-js-plugins-editor'

const plugins = [singleLinePlugin]

<Editor plugins={plugins}
    blockRenderMap={singleLinePlugin.blockRenderMap} />
```

The plugin export a custom `blockRenderMap` that overrides the draft-js defaults and restricts the editor from rendering anything _except_ an `unstyled` block. You’ll need to manually pass it as above as the `draft-js-plugins-editor` doesn’t yet support this.

## Options

You can pass options to the plugin as you call it:

```js
const options = {
  stripEntities: false
}
const singleLinePlugin = createSingleLinePlugin(options)
```

There’s only one option so far: `stripEntities: true/false`.

## Developing

```
npm install
npm install react react-dom draft-js
npm run test
```
npm package: @jonny/draft-js-typeahead
Description: Typeaheads for Draft.js inspired by Facebook.com
Author: Justin Vaillancourt
Latest version: 0.11.8

# draft-js-typeahead

[![NPM version][npm-image]][npm-url]

Typeaheads for [Draft.js](https://github.com/facebook/draft-js) inspired by Facebook.com.

![example](example.gif)

[Check out an example of mentions in draft using draft-js-typeahead here. 🎉](http://dooly-ai.github.io/draft-js-typeahead/)

This package provides a higher-order component that wraps draft's `Editor` component and augments it with typeahead superpowers. One popular use for draft-js-typeahead is to add mentions to your editors.

-

draft-js-typeahead helps in three ways:
 - It figures out *if* and *where* the typeahead should be showing.
 - It keeps track of the typeahead's highlighted item.
 - It triggers a callback when an item is selected (by hitting return).


## Installation

```sh
$ npm install --save draft-js-typeahead
```


## Examples

[Examples are available under the `examples/` directory.](examples/)


## Usage

First we'll need to import `TypeaheadEditor`:

```javascript
import { TypeaheadEditor } from 'draft-js-typeahead';
```

`TypeaheadEditor` is a react component that wraps draft's `Editor`.

-

It supports all of the same properties as the latter, as well as a few others:

`onTypeaheadChange => (typeaheadState)`:

This method is called when the typeahead's *visibility*, *position*, or *text* changes. `typeaheadState` is an object with `left`, `top`, `text`, and `selectedIndex` properties. A typical callback sets `typeaheadState` on its own state and uses it to render an overlay in its component's `render` method. This method is also called when the typeahead is hidden by passing `null` to `typeaheadState`.

`handleTypeaheadReturn => (text, selectedIndex, selection)`:

This method is called when an item in the typeahead is selected (by hitting return). A typical callback autocompletes the editor with the selected item and tags it with a draft entity.

*Note:* By default draft-js-typeahead does not filter items in the typeahead based on the entered text, [see the mentions example for one approach to filtering](/examples/mentions).


## License

MIT © [Justin Vaillancourt](mailto:justin@dooly.ai)


[npm-image]: https://badge.fury.io/js/draft-js-typeahead.svg
[npm-url]: https://npmjs.org/package/draft-js-typeahead
npm package: @jonny/ink-checkbox-list
Description:  Checkbox list component for ink.
Author: MaxMEllon
Latest version: 1.3.1

# ink-checkbox-list [![Build Status](https://travis-ci.org/MaxMEllon/ink-checkbox-list.svg?branch=master)](https://travis-ci.org/MaxMEllon/ink-checkbox-list) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

> Checkbox list component for [Ink](https://github.com/vadimdemedes/ink)

Demo
---

![Demo Image](./.github/demo.gif)

Install
---

```
$ npm install ink-checkbox-list
```

Usage
---

```js
const {h, render} = require('ink');
const {List, ListItem} = require('ink-checkbox-list');

render(
	<List
		onSubmit={(list) => {
			console.log(list)
			process.exit(0);
		}}
	>
		<ListItem value="1">option1</ListItem>
		<ListItem value="2">option2</ListItem>
		<ListItem value="3">option3</ListItem>
		<ListItem value="4">option4</ListItem>
	</List>
);
```

**Note**:

Use this snippet to enable `keypress` events:

```js
const readline = require('readline');

readline.emitKeypressEvents(process.stdin);
process.stdin.setRawMode(true);
```

## Props

### List

#### checkedChar

Type: `string`
Default: `☒`

This character is used checked component.

#### uncheckedChar

Type: `string`
Default: `☐`

This character is used unchecked component.

#### cursorChar

Type: `string`
Default: `❯`

This character is used current cursor line.

#### onChange

Type: `Function`

Function to call when you pressed <kbd>Space</kbd> key.

#### onSubmit

Type: `Function`

Function to call when you pressed <kbd>Enter</kbd> key.

### ListItem

#### value

Type: `string`
**Required**

`onChange()`/`onSubmit()` is used this props.
Callback function return `value` list.

Key bindings
---

| key | action |
|---|---|
| <kbd>Space</kbd>| toggle check/uncheck |
| <kbd>Enter</kbd>| submit item list |
| <kbd>↑</kbd>| move to up a cursor |
| <kbd>↓</kbd>| move to down a cursor |

LICENSE
---

MIT © 2017 MaxMellon
npm package: @jonny/pandoc-bin
Description: Super easy pandoc conversion
Author: Jonny Burger
Latest version: 1.0.3

# pandoc-bin [![Build Status](https://travis-ci.org/JonnyBurger/pandoc-bin.svg?branch=master)](https://travis-ci.org/JonnyBurger/pandoc-bin)

> Super easy format conversions in node using pandoc. No additional installations needed. macOS and Linux supported.

## Install

```
$ npm install --save pandoc-bin
```


## Usage

```js
const pandoc = require('pandoc-bin');

await pandoc({input: '*yo*'});
//=> '<p><em>yo</em></p>'

await pandoc(['--from=html', '--to=latex'], {input: 'e = mc<sup>2</sup>'})
//=> 'e = mc\\textsuperscript{2}'
```

# Warning
The binary included in this module is >80MB. You may experience slower `npm install`'s.

## API

### pandoc(input, [arguments], [options])

The API is the same as [execa](https://github.com/sindresorhus/execa). Go to the project to see how to use ut.

## License

MIT © [Jonny Burger](http://jonny.io)
npm package: @jonny/react-native-gesture-handler
Description: Experimental implementation of a new declarative API for gesture handling in react-native
Author: Krzysztof Magiera
Latest version: 1.4.1

<p align="center">
  <img height="150" src="https://kmagiera.github.io/react-native-gesture-handler/img/ghlogo.svg" />
  <h1 align="center">React Native Gesture Handler</h1>
  <h3 align="center">Declarative API exposing platform native touch and gesture system to React Native.</h3>
</p>

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread.
It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.

## Installation

Check [getting started](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) section of our docs for the detailed installation instructions.

## Documentation

Check out our dedicated documentation page for info about this library, API reference and more: [https://kmagiera.github.io/react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler)

## Examples

If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the `Example/` folder and run:
```bash
  yarn install
```

Then run `react-native run-android` or `react-native run-ios` (depending on which platform you want to run the example app on).

You will need to have an Android or iOS device or emulator connected as well as `react-native-cli` package installed globally.

## React native Support

| version | react-native version |
| ------- | -------------------- |
| 1.1.0+  | 0.57.2+              | 
| <1.1.0  | 0.50.0+              |

## License

Gesture handler library is licensed under [The MIT License](LICENSE).

## Credits

This project is supported by amazing people from [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com)

[![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 "Expo.io")](https://expo.io)
[![swm](https://avatars1.githubusercontent.com/u/6952717?v=3&s=100 "Software Mansion")](https://swmansion.com)
npm package: @jonny/react-native-highlight-words
Description: A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.
Author: Clauderic Demers
Latest version: 1.0.1

# React Native Highlight Words
React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words).

Check out a [demo](https://getexponent.com/@clauderic/react-native-highlight-words) using Exponent.

## Installation
Using [npm](https://www.npmjs.com/package/react-native-highlight-words):
```
npm i --save react-native-highlight-words
```

## Usage

To use it, just provide it with an array of search terms and a body of text to highlight:

```jsx
import Highlighter from 'react-native-highlight-words';

<Highlighter
  highlightStyle={{backgroundColor: 'yellow'}}
  searchWords={['and', 'or', 'the']}
  textToHighlight='The dog is chasing the cat. Or perhaps they're just playing?'
/>
```

And the `Highlighter` component will highlight all occurrences of search terms within the text:

<img width="368" alt="screen shot 2015-12-19 at 8 23 43 am" src="https://cloud.githubusercontent.com/assets/29597/11914033/e3c319f6-a629-11e5-896d-1a5ce22c9ea2.png">


## Props

| Property        | Type          | Required? | Description                                                                                                             |
|:----------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------|
| autoEscape      | Boolean       |           | Escape characters which are meaningful in regular expressions                                                           |
| highlightStyle  | Object        |           | Styles applied to highlighted text                                                                                      |
| sanitize        | Function      |           | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
| searchWords     | Array<String> |     ✓     | Array of search words                                                                                                   |
| style           | Object        |           | Styles applied to the text wrapper                                                                                      |
| textToHighlight | String        |     ✓     | Text to highlight matches in                                                                                            |

## License
MIT License - fork, modify and use however you want.
npm package: @jonny/react-native-mock
Description: A fully mocked and test-friendly version of react native
Author: Jake Howard
Latest version: 0.4.2

# react-native-mock [![Build Status](https://travis-ci.org/RealOrangeOne/react-native-mock.svg?branch=master)](https://travis-ci.org/RealOrangeOne/react-native-mock)

[![Join the chat at https://gitter.im/RealOrangeOne/react-native-mock](https://badges.gitter.im/RealOrangeOne/react-native-mock.svg)](https://gitter.im/RealOrangeOne/react-native-mock?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
A fully mocked and test-friendly version of react native

## Requirements
- Node.js 4+
- The latest version of react-native

__Note__: This library is designed to work with the most recent version of react-native. If you aren't using the most recent version, you will need to download an older version of this library, as the API is likely to be different, and the dependencies are likely to break.

## How Am I Supposed To Use This?

```bash
npm i react-native-mock --save-dev
```

```js
/* file-that-runs-before-all-of-my-tests.js */

// This will mutate `react-native`'s require cache with `react-native-mock`'s.
require('react-native-mock/mock'); // <-- side-effects!!!
```

## Why?

Testing React Native components is *hard*.  I'm hoping this makes it easier.

I wrote a React Testing Library that works really well for React "Web", but didn't really work for React "Native" without something like this.


## Wait... Is this actually a terrible idea?

I don't know. Maybe.

I'd love to figure that out though... feel free to file an issue if you have opinions.


## Contributing
Discovered a bug, got a new feature, or found something that needs improving? __Submit a PR!__

Make sure to read through the CONTRIBUTING.md file before submitting your PR!

### Core Contributors
- [Jake Howard](https://github.com/RealOrangeOne)
- [Leland Richardson](https://github.com/lelandrichardson) (Original Creator)

## What do the labels mean?
See [this wiki page](https://github.com/RealOrangeOne/react-native-mock/wiki/Labels---What-do-they-mean%3F).