open-index/open-npm huggingface dataset:
npm package: @hypersprite/hs-utils
Description: Variouse utils for dealing with npm packaging
Author: C. Dunavan
Latest version: 2.0.0

# hs-utils

Some utilities for managing npm packages.

For best results use npm 5.2 or later.

## Usage

### Install

This should be a dev dependency

```npm i -D --save @hypersprite/hs-utils```

### Setup

Optional setup needed for `--projects` commands.

Add a section for `hsUtils` to the package.json file that contains.

`projectDirs` is an array of related project directories you want to work with.

`compareTo` is a usually a main or master project directory, will use installed directory if none is defined.

These are based on the location of the package.json file.

Example folder structure:
```bash
~/all-code $  tree -L 2
.
├── modules-code
│   ├── this-project
│   ├── project-one
│   └── project-two
├── main-project
└── project-three
```

The hsUtils of `this-project` package.json might look like this:

```json

"hsUtils": {
  "projectDirs": [
    "project-one",
    "project-two",
    "../project-three"
  ],
  "compareTo": "../main-project"
},
```

### Usage

Runs `npm install` on each projectDirs project

`npx hs-utils  --projects install`

Remove node_modules folders from each projectDirs project.

`npx hs-utils --projects clean`

Compares Prod and Dev dependencies based on the package.json file for each projectDir project to the compareTo project. The output will show you what is missing or different version than the `compareTo`.

`npx hs-utils --projects compare`

Runs npm outdated on each projectDirs project. Same as running npm outdated in the projects directory.

`npx hs-utils --projects outdated`


Validate package.json file for basic things.

`npx hs-utils --package validate`

find/replace text in the package.json file

`npx hs-utils --pacakge rename --old component-starter --new cool-component`

All commands can take a `--debug` flag for extra output, prefixed with **hsUtils**.

If npm 5.2 is not available, commands could be placed in the **scripts** section of the package.json file but this is less convenient.
npm package: @hypersprite/material-ui-dropins
Description: Dropin components built on material-ui
Author: C. Dunavan
Latest version: 1.0.6

# Material-ui Dropins

Specialized components used in A Race athlete that are probably of little use to anyone else.

Install
`npm i @hypersprite/material-ui-dropins`


## Components

### AltitudeTable

Creates a table of Power at Altitude with Power Zone modal

[Demo](https://codesandbox.io/s/z67molq8ox)

##### Receives Props

| prop name | type | values | description |
| --------- | ---- | ------ | ----------- |
| baseElevation | Number | Meters | Athlete's base altitude in meters |
| currentFTP | Number | FTP | Athlete's current FTP |
| mPref | Boolean | true or false* | true: imperial, false: metric |
npm package: @hypersprite/react-geolocation-hoc
Description: Geolocation HOC
Author: C. Dunavan
Latest version: 1.1.4

# React Geolocation HOC

This is a small HOC that injects browser geolocation into the child component.

## Usage

### Install
```npm install @hypersprite/react-geolocation-hoc --save```

### Import
```import ExtGeolocation from '@hypersprite/react-geolocation-hoc';```

### In Practice

my-map.js user created file imports ExtGeolocation
```js
const MyMap = (props) => {
  const { lat, lng, geolocation, timestamp } = props;
  /** ... all your other component code
  *
  * use the props as you see fit
  *
  */
};

export default ExtGeolocation(MyMap);
```

Then from your view file

Uses default lat/lng and asks for permission and allows for browser geolocation
```js
<MyMap />
```

Assigns props as default lat/lng and asks for permission and allows for browser geolocation
```js
<MyMap
  lat={39.28756}
  lng={-120.19987}
/>
```

Assigns props as default lat/lng and does NOT ask for premission, disables browser geolocation
```js
<MyMap
  lat={39.28756}
  lng={-120.19987}
  noGeolocation
/>
```

### Scripts

use `npm run <script>`

* `lint` - runs linter
* `test` - runs test
* `test:dev` - runs test in watch mode
* `build` - runs build
* `build:dev` - runs build in watch mode

`npm version <major | minor | patch>`

### API

#### Receives Props

| prop name | type | values | description |
| --------- | ---- | ------ | ----------- |
| lat | Number | Latitudes | Optional if default needed |
| lng | Number | Longitude | Optional if default needed |
| noGeolocation | Boolean | true or false* | true === geolocation is disabled, will not ask |

> noGeolocation can be used with a pre-dialog box asking if they want to enable geolocaton, this way they can say no to you and not set disabled in the browser, giving you the opportunity to ask the next time. See this [Google recommendation](https://developers.google.com/web/fundamentals/native-hardware/user-location/#ask_permission_responsibly) for more information.  

#### New Passed Props

| prop name | type | values | description |
| --------- | ---- | ------ | ----------- |
| lat | Number | Latitudes | Can pass default props or user location |
| lng | Number | Longitude | Can pass default props or user location |
| geolocation | Boolean | true or false* | true: geolocation allowed, false, geolocation blocked |
| timestamp | Number | Unix time in seconds |   |
| refreshLocation | function |  |   |
npm package: @hypersprite/react-vignette
Description: Simple component to add vignette over an image
Author: C. Dunavan
Latest version: 1.0.3

# React Vignette

Adds a basic vignette to a sibling.

## Usage

### Install
```npm install --save @hypersprite/react-vignette```

### Import
```import Vignette from '@hypersprite/react-vignette';```

### In Practice
Add ```<Vignette />``` as a sibling to another component

```js
<div>
  <SomeSiblingDiv />
  <Vignette />
</div>
```

### Scripts

use `npm run <script>`

* `lint` - runs linter
* `test` - runs test
* `test:dev` - runs test in watch mode
* `build` - runs build
* `build:dev` - runs build in watch mode

`npm version <major | minor | patch>`

### API

#### Receives Props

none

#### New Passed Props

none
npm package: @hypersprite/toggle-state-rp
Description: 'toggle' state render props controller
Author: C. Dunavan
Latest version: 1.0.10

# Toggle State Render Props Component

Demo [codesandbox.io...](https://codesandbox.io/s/xp91vq473w)

> This is a Render Prop Component, this style of component was introduced by [Michael Jackson](https://twitter.com/mjackson) of [react-router](https://github.com/ReactTraining/react-router) fame.
See [Official React Render Props docs](https://reactjs.org/docs/render-props.html) for more information.

Accepts an initialState and passes as props: a `toggle` boolean state and three functions to update the `toggle` state.

## Usage

### Install
`npm install --save @hypersprite/toggle-state-rp`

### Import
`import ToggleState from '@hypersprite/toggle-state-rp';`

## Usage
Place child component inside function return and use the parameters.

parent-container.jsx
```js
// some place in your component, you need a DialogMessage

    <ToggleState
      initialState
      render={toggleStateRP => (
        <DialogMessage
          {...toggleStateRP}
        />
      )}
    />
```

dialog-message.jsx
```js
const DialogMessage = ({ toggle, handleToggle }) => {
  return (
    <div>
      <p>
        {`Toggle is: ${toggle}`}
      </p>
      <button onClick={handleToggle}>Toggle</button>
    </div>
  );
};
```

### API

#### Receives Props

| prop name | type | values | description |
| --------- | ---- | ------ | ----------- |
| initialState | bool | true or false* | Sets initial state ||

#### New Passed Props

| prop name | type | values | description |
| --------- | ---- | ------ | ----------- |
| toggle    | bool | true or false* | The State being toggled |
| handleFalse | function |  | Call to set toggle to **false** |
| handleToggle | function |  | Call to toggle toggle |
| handleTrue | function |  |  Call to set toggle to **true** |