open-index/open-npm huggingface dataset:
npm package: @helpscout/kiwi
Description: Seamless syncing for Design Wikis
Author: Jon Quach
Latest version: 0.0.17

# 🥝 Kiwi

> Seamless syncing for Design Github Wikis

Kiwi was specifically designed to handle automatic Wiki deploys for [Help Scout's](https://www.helpscout.com/) Design System.

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Setup](#setup)
  - [CI Variables](#ci-variables)
  - [Git User](#git-user)
- [Usage](#usage)
- [Examples](#examples)
  - [Netlify](#netlify)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Setup

### CI Variables

Add the following global environment variables to your build/CI tool:

```
GITHUB_USER = bob_belcher_2019
GITHUB_REPO = baby-you-can-chive-my-car-burger
TOKEN = CV9$Xc]6iZVJRJiE*uV6MooXg
LOCAL_DIR = burger-project
```

##### `GITHUB_USER`

The Github user name of your repository.

##### `GITHUB_REPO`

The Github repository name.

##### `TOKEN`

Your super secret [Github personal access token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/)

##### `LOCAL_DIR`

The directory of your (CI) local directory.

### Git User

Since Kiwi needs to push to a Github wiki, ensure that your environment's Git has been set up with a username and email:

```
git config --global user.email "bob@bobsburgers.com"
git config --global user.name "bob_belcher_2019"
```

## Usage

Once you have the above ☝️ set up (it's very important!), all you have to do is run:

```
npx @helpscout/kiwi
```

## Examples

### Netlify

For [Netlify](https://www.netlify.com/), you can create a simple `netlify.sh` file (or call it whatever you'd like 😍)

```
# Configures the Git name and email for the commits
git config --global user.email "bob@bobsburgers.com"
git config --global user.name "bob_belcher_2019"

# Set the environment variables
export GITHUB_USER=bob_belcher_2019
export GITHUB_REPO=baby-you-can-chive-my-car-burger
export TOKEN=CV9$Xc]6iZVJRJiE*uV6MooXg
export LOCAL_DIR=repo

# Runs Kiwi
npx @helpscout/kiwi

# Creates an empty page for Netlify to deploy
mkdir public
touch public/index.html
```

With that, you can set up the following:

- **Build command**: `sh netlify.sh`
- **Publish directory**: `public`
npm package: @helpscout/motion
Description: A simple animation library for React
Author: Jon Quach
Latest version: 0.0.8

# 💫 Motion

[![Build Status](https://travis-ci.org/helpscout/motion.svg?branch=master)](https://travis-ci.org/helpscout/motion)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fmotion.svg)](https://badge.fury.io/js/%40helpscout%2Fmotion)

> A simple animation library for React

**[Check out the demo](https://helpscout-motion.netlify.com/)**

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [See Also](#see-also)
- [Thanks!](#thanks)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save @helpscout/motion
```

## Usage

Start adding animations to any React component with the `Motion` component:

```jsx
import React from 'react'
import {Motion} from '@helpscout/motion'
import Zoolander from './components/Zoolander'

class App extends React.Component {
  render() {
    return (
      <Motion
        componentDidMount={fadeInAndMoveUp}
        componentWillUnmount={fadeOut}
      >
        <Zoolander />
      </Motion>
    )
  }
}

// Technically these animation callbacks can be writing in line.
// It's advisable to keep them as separate functions to make the code
// more readable.
function fadeInAndMoveUp({animate}) {
  return animate({
    opacity: [0, 1],
    translateY: [-20, 0],
  }).finished
}

function fadeOut({animate}) {
  return animate({
    opacity: [0, 1],
    duration: 500,
    easing: 'linear',
  }).finished
}
```

## Documentation

For additional info on Motion, check out [our documentation](./docs)!

## See Also

- [react-utils](https://github.com/helpscout/react-utils)
- [stats](https://github.com/helpscout/stats)

## Thanks!

A big thanks to [Julian Garnier](https://github.com/juliangarnier) for creating [Anime.js](https://github.com/juliangarnier/anime), which powers the animations for Motion.
npm package: @helpscout/moxie
Description: Create client side mock API endpoints
Author: Jon Quach
Latest version: 0.0.1

# 😘 Moxie

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

> Create client side mock API endpoints

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [Thanks!](#thanks)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @helpscout/moxie
```

## Usage

```js
import {createMoxie, createSchema, faker} from '@helpscout/moxie'

// Define your schemas
const UserSchema = createSchema({
  id: faker.random.uuid(),
  name: faker.name.firstName(),
})

// Create some initial state
const initialState = {
  users: [
    {
      id: '123',
      name: 'Randy Marsh',
    },
  ],
}

// Create the mock database
const moxie = createMoxie(
  'users',
  {
    users: UserSchema,
  },
  initialState,
)

// Make the "get" request!
moxie.get('users/123').then(response => {
  console.log(response)
  // {
  //   status: 200,
  //   statusText: 'OK',
  //   data: {
  //     id: '123',
  //     name: 'Randy Marsh',
  //   },
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  // }
})
```

## Thanks!

Thanks to [lowdb](https://github.com/lowdb/lowdb) for the database set up and to [@jmauerhan](https://github.com/jmauerhan) for picking the 😘 emoji for Moxie!
npm package: @helpscout/prestart
Description: A tiny tool to make Javascript development a little more delightful
Author: Jon Quach
Latest version: 0.0.10

# 🔑 Prestart

[![npm version](https://badge.fury.io/js/%40helpscout%2Fprestart.svg)](https://badge.fury.io/js/%40helpscout%2Fprestart)

> A tiny tool to make Javascript development a little more delightful

Prestart is a tool can hook into `npm prestart` to help setup your Javascript development workflow. The main feature is that it will automatically check and install any missing dependencies for you.

```
PreStart

Project details
--------------------------------------------
node   version   8.11.4
git    branch    master
       email     name@email.com
--------------------------------------------

  ✔ [1/2] 🔌   Checking connection...
  ✔ [2/2] 🚚   Fetching packages...

Success!
✨  Have fun developing!
```

## Installation

```
npm install --save-dev @helpscout/prestart
```

## Usage

Add `@helpscout/prestart` to your `prestart` script in your project's `package.json`.

```
"scripts": {
  ...
  "prestart": "prestart",
  ...
},
```
npm package: @helpscout/react-utils
Description: Handy utilities for React
Author: Jon Quach
Latest version: 2.4.1

# 🌀 React Utils

[![npm version](https://badge.fury.io/js/%40helpscout%2Freact-utils.svg)](https://badge.fury.io/js/%40helpscout%2Freact-utils) [![Build Status](https://travis-ci.org/helpscout/react-utils.svg?branch=master)](https://travis-ci.org/helpscout/react-utils) [![Coverage Status](https://coveralls.io/repos/github/helpscout/react-utils/badge.svg?branch=master)](https://coveralls.io/github/helpscout/react-utils?branch=master) [![npm version](https://badge.fury.io/js/%40helpscout%2Fblue.svg)](https://badge.fury.io/js/%40helpscout%2Fblue) ![node](https://img.shields.io/badge/node-8.11.3-blue.svg) ![npm](https://img.shields.io/badge/npm-6.4.1-blue.svg)

> A collection of handy utilities for React.

## Table of contents

- [🔧 Installation](./#-installation)
- [🕹 Usage](./#🕹-usage)

## 🔧 Installation

```text
npm install --save @helpscout/react-utils
```

This library has a `peerDependencies` listing of `react` \(version `15` or `16`\).

## 🕹 Usage

This library comes with a handful of useful functions. Below is an example of how you can use the `getDocumentFromComponent` function to retrieve the actual `document` the component is mounted to \(rather than assuming `window.document`\).

```jsx
import React from 'react'
import getDocumentFromComponent from '@helpscout/react-utils/dist/getDocumentFromComponent'

class Napoleon extends React.Component {
  ...
  componentDidMount () {
    this.doc = getDocumentFromComponent(this)
    // document
  }
  ...
}
```

Check out [**the documentation**](docs/) for more details.
npm package: @helpscout/specter
Description: JSON API Mocking and Testing for Node
Latest version: 0.0.1

# Specter [![Build Status](https://travis-ci.org/helpscout/node-specter.svg?branch=master)](https://travis-ci.org/helpscout/node-specter) [![Coverage Status](https://coveralls.io/repos/github/helpscout/node-specter/badge.svg?branch=master)](https://coveralls.io/github/helpscout/node-specter?branch=master)

This is the Node port of our [PHP Specter library](https://github.com/helpscout/specter).

Still WIP!
npm package: @helpscout/stats
Description: Easy performance monitoring for JavaScript / React
Author: Jon Quach
Latest version: 0.0.5

# 📊 Stats

[![Build Status](https://travis-ci.org/helpscout/stats.svg?branch=master)](https://travis-ci.org/helpscout/stats)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fstats.svg)](https://badge.fury.io/js/%40helpscout%2Fstats)

> Easy performance monitoring for JavaScript / React

![Stats](https://raw.githubusercontent.com/helpscout/stats/master/images/stats-demo.gif)

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
  - [JavaScript](#javascript)
  - [React](#react)
- [Graphs](#graphs)
- [Options](#options)
- [Thanks](#thanks)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Add `stats` to your project via `npm install`:

```
npm install --save @helpscout/stats
```

## Usage

### JavaScript

To use Stats in your JavaScript project, simply import it and instantiate!

```js
import createStats from '@helpscout/stats'

const stats = createStats()
// Stats will automatically mount to window.document

// For clean up, execute the destroy() method
stats.destroy()
```

### React

Stats comes with a handy `<StatsGraph />` component. To add it to your React project, import it and render it:

```jsx
import React from 'react'
import {StatsGraph} from '@helpscout/stats'

class App extends React.Component {
  render() {
    return (
      <div>
        ...
        <StatsGraph />
        ...
      </div>
    )
  }
}

export default App
```

`StatsGraph` cleans up after itself if it unmounts.

## Graphs

- **FPS** Frames rendered in the last second. The higher the number the better.
- **MB** MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
- **NODES** Number of DOM nodes in `window.document` (including iFrame nodes).

## Options

Stats accepts a handful of options to adjust it's position and UI.

| Prop     | Type              | Default  | Description                 |
| -------- | ----------------- | -------- | --------------------------- |
| top      | `number`/`string` | 0        | (CSS) top position.         |
| right    | `number`/`string` | 0        | (CSS) right position.       |
| bottom   | `number`/`string` | 0        | (CSS) bottom position.      |
| left     | `number`/`string` | 0        | (CSS) left position.        |
| opacity  | `number`          | 0.5      | Opacity for the Stats UI.   |
| position | `string`          | fixed    | Position for the Stats UI.  |
| zIndex   | `string`          | 99999999 | `z-index` for the Stats UI. |

The React `StatsGraph` uses the same options for it's `defaultProps`

## Thanks

Thanks for [mrdoob](https://github.com/mrdoob) for his [stats.js](https://github.com/mrdoob/stats.js) library, which inspired this one!
npm package: @helpscout/test-utils
Description: Test Utils: Handy utils for React and JavaScript testing
Author: Jon Quach
Latest version: 0.0.1

# ☂️ Test Utils

[![Build Status](https://travis-ci.org/helpscout/test-utils.svg?branch=master)](https://travis-ci.org/helpscout/test-utils)
[![Coverage Status](https://coveralls.io/repos/github/helpscout/test-utils/badge.svg?branch=master)](https://coveralls.io/github/helpscout/test-utils?branch=master)

> Test Utils: Handy utils for React and JavaScript testing

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [See also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @helpscout/test-utils
```

## See also

- [React Utils](https://github.com/helpscout/react-utils)