open-index/open-npm huggingface dataset:
npm package: @jasonrundell/dropship
Description: Get a React project up and running really fast with Dropship.
Author: Jason Rundell
Latest version: 3.3.1

# Dropship

Dropship is a component library designed to provide reusable UI components for
your projects. It currently includes a small variety of atoms (molecules and
organisms are TBD) to help you build consistent and maintainable user
interfaces.

## View Dropship on Storybook

You can see the latest build of Dropship on Storybook at
[https://dropship-storybook.vercel.app/](https://dropship-storybook.vercel.app/).

## Installation

You can install Dropship via npm for use in your project. Start by installing
the package:

```sh
npm install @jasonrundell/dropship
```

In your project, you'll need to import the base style.css file in order to
render the components correctly:

```js
import '@jasonrundell/dropship/style.css'
```

You can then import individual components as needed:

```js
import { Button } from '@jasonrundell/dropship'

function App() {
  return <Button>Click Me</Button>
}
```

## Atoms

Atoms are the basic building blocks of a user interface. Here are all of the
atoms included in Dropship:

- Blockquote
- Box
- Button
- Container
- Grid
- Heading
- Link
- Row
- Spacer

## Storybook

This project uses Storybook for developing and showcasing components. You can
find stories for various components in the src/stories directory.

## Scripts

Here are some useful scripts you can run:

- `npm run start`: Starts the development server.
- `npm run build`: Builds the project.

## Contributing

If you would like to contribute, please create an issue and then open up a PR
from a fork.

## License

This project is licensed under the MIT License. See the LICENSE file for
details.

## Links

- [NPM @jasonrundell/dropship](https://www.npmjs.com/package/@jasonrundell/dropship)
npm package: @jasonsbarr/collections
Description: Awesome collection types for fluent functional programming
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/collections

Iterable collections in JavaScript with functionalities that far outstrip the native capabilities of JavaScript Arrays, Objects, Sets, and Maps.

Collections include:

- Dict - a hash table or dictionary-like data structure intended for use with single-type values
- List - a linked list using Array-based cells
- Nil - represents the empty List for safe use with what would otherwise be `null` and `undefined` values
- Range - if all you need is to iterate over a range of numbers, this is what you need
- Map - like native JavaScript Maps, but with additional methods and functionality
- Tuple - immutable, Array-like collection
- Set - Ordered collection of unique values based on structural (value) equality
- LinkedList - a doubly linked list using objects as nodes

## Basic Usage

Import the collections you need and use as follows:

```js
import { Tuple } from "@jasonsbarr/collections";
import { isOdd } from "@jasonsbarr/functional-core/lib/predicates/isOdd";

const nums = Tuple(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
const evens = nums.reject(isOdd);

console.log(evens.inspect()); // -> Tuple(2, 4, 6, 8, 10)
```

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/collections)
npm package: @jasonsbarr/concurrency
Description: Handling concurrency the functional way
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/concurrency

A functional type for handling concurrent and asynchronous operations.

Includes the monadic Future type.

## Basic Usage

Import the Future type and use as follows:

```js
import { Future } from "@jasonsbarr/concurrency/lib/Future";

// assume the existence of a handleError function and an addToDom function that appends an HTML string to the DOM
Future.fromPromise(
  fetch("https://jsonplaceholder.typicode.com/posts").then((res) => res.json())
)
  .map((posts) => posts.map((post) => ({ title, body })))
  .map((posts) =>
    posts.reduce(
      (html, post) =>
        (html += `<article class="post">
        <header class="post-header">
            <h1>${post.title}</h1>
        </header>
        <section class="post-body">${post.body}</section>
    </article>`),
      ""
    )
  )
  .fork(
    (err) => handleError(err),
    (posts) => addToDom(posts)
  );
```

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/concurrency)
npm package: @jasonsbarr/custom-hooks
Description: Custom React hooks
Author: Jason Barr
Latest version: 0.3.1

# React Custom Hooks

Custom React hooks to handle side effects, interact with browser APIs, and more.

## Installation

```
npm install @jasonsbarr/custom-hooks
```

## Usage

- [useLocalStorage](https://github.com/jasonsbarr/react-hooks-and-utils/tree/master/packages/custom-hooks/src/data-storage)
- [useHttpRequest](https://github.com/jasonsbarr/react-hooks-and-utils/tree/master/packages/custom-hooks/src/http-requests)
npm package: @jasonsbarr/dict
Description: Functions that treat plain JS objects like iterable, immutable dictionaries
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/dict

A collection of functions that treat Plain Old JavaScript Objects as iterable, keyed collections (a.k.a. Dictionaries).

Note that returned objects will have a `null` prototype. This is to give you the greatest flexibility with your allowable keys.

## Basic Usage

Import and use only the functions you need:

```js
import { filter } from "@jasonsbarr/dict/lib/filter";
import { endsWith } from "@jasonsbarr/functional-core/lib/string/endsWith";

const contacts = {
  john: "john.doe@gmail.com",
  jimmy: "jimmy@yahoo.com",
  jane: "jane-the-awesome@gmail.com",
  jeremy: "jeremy@msn.com",
};

const gmailContacts = filter(
  (contact) => endsWith("@gmail.com", contact),
  contacts
);
```

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/dict)
npm package: @jasonsbarr/functional-core
Description: A function-based version of the JavaScript standard library plus additional awesome functions
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/core

Core functions and types for functional programming in JavaScript, including the ability to create your own tagged union types and a functional, largely curried interface to the JavaScript standard library.

## What's Included

Included function categories:

- Array
- Boolean
- Helpers
- Lambda
- Math
- Number
- Object
- Predicates
- RegExp
- String
- Symbol
- Type conversion
- Type creation
- Type matching

Included types:

- Either
- Future
- Id
- Option
- Record
- Result

Also includes a selection of type classes that include default implementation of methods like `map` and `chain` you can use to speed along creation of your own types.

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/core)
npm package: @jasonsbarr/htdp-image
Description: A JavaScript port of the Racket Image library used in How To Design Programs
Author: Jason Barr
Latest version: 0.8.0

# HTDP/Image.js

A JavaScript port of the Racket Image library used in How To Design Programs.

Shared via the MIT License under the terms of [the original HTDP library's license](https://github.com/racket/htdp/blob/master/htdp-lib/LICENSE).

Special thanks to [Joe Gibbs Politz](https://twitter.com/joepolitz) and [Ben Lerner](https://www.khoury.northeastern.edu/people/benjamin-lerner/) for all their work on the Pyret language, Danny Yoo, Emmanuel Schanzer, and Ben Lerner for doing the bulk of the work translating the Image library from Racket into the original JavaScript version that was adapted for Pyret, and to all others who have worked on the code for this library. All I'm really doing is updating their work to use modern JavaScript syntax and idioms.

**Warning:** This port is still in beta status as we continue testing it. Use at your own risk.

## Installation

Simply run `npm install @jasonsbarr/htdp-image` to install the package. There are bundles for CJS modules, ES modules, and UMD modules.

## Usage

For use with ES Modules:

```js
import * as Image from "@jasonsbarr/htdp-image";

const square = Image.square(20, "solid", "red");
Image.render(square);
```

Or import a single function:

```js
import { square, render } from "@jasonsbarr/htdp-image";
```

For use with CommonJS (classic Node.js) modules:

```js
const Image = require("@jasonsbarr/htdp-image");

// or

const { square, render } = require("@jasonsbarr/htdp-image");
```

If you need the library available as a global variable in the browser you can simply include the bundle from unpkg:

```html
<script src="https://www.unpkg.com/@jasonsbarr/htdp-image@0.8.0/dist/index.umd.js"></script>

<script>
  const square = htdpImage.square(20, "solid", "red");
  htdpImage.render(square);
</script>
```

Image functions should run in both browser and Node.js (via JSDom) environments, so you should be able to do testing with a test runner like Mocha using this library.

## Documentation

The documentation is very much still a work in progress, if you can even call it that. I recommend using [the documentation for the original Racket library](https://docs.racket-lang.org/teachpack/2htdpimage.html) for now while I translate it into JavaScript. Note that in this library all function names are written in camelCase. The `triangle-*` functions have the letters all capitalized, e.g. `triangleSAS`.

### Rendering Images

Note that I've added an additional `render` function that is exported as a member of the main library that is necessary to render images to the screen in a vanilla JavaScript environment. It calls the `render` method on the image given to it and takes as an optional 2nd parameter a selected DOM element to render the image to (defaults to `document.body`).

The original Racket package obviously doesn't need this extra rendering function, so you won't find it in the documentation for it.
npm package: @jasonsbarr/iterable
Description: A collection of iterable functions that extend the capability of arrays and other collections
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/iterable

A collection of iterable functions that work equally well on plain JavaScript arrays and other indexed iterables that implement a simple specification: they have a `constructor` method that doesn't take the `new` keyword.

## Basic Usage

Just import the functions you need. They work with arrays just fine, or you can use another iterable type as long as it has a `constructor` method that doesn't require using `new`.

```js
import { reject } from "@jasonsbarr/iterable/lib/reject";
import { isEven } from "@jasonsbarr/functional-core/lib/predicates/isEven";

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const odds = reject(isEven, nums);
console.log(odds); // -> [1, 3, 5, 7, 9]
```

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/iterable)
npm package: @jasonsbarr/json-db
Description: Simple JSON DB class for educational purposes
Author: Jason Barr
Latest version: 0.2.0

# `@jasonsbarr/json-db`

Simple JSON file-based database with a fluent query API.

## Usage

```js
import { Db } from "@jasonsbarr/json-db";
```

### Creating a database

In file.json:

```js
{
    "users": [],
    "companies": [],
    "organizations": [],
    "members": [],
    "organization_member": []
}
```

```js
// entities map a model to its table
const entities = {
    user: "users",
    company: "companies"
}

const db = Db("path/to/file.json", { entities });
```

### Fetching records

```js
const users = from("users")
    .select()
    .where("joinDate", ">", new Date("January 1, 2015").getTime())
    .include("organization")
    .get();
```

### Inserting records

Unique IDs are generated automatically on insertion. IDs are UUID v4.


```js
const newCompany1 = {
    name: "Acme Inc.",
    founded: 1955
};

const newCompany2 = {
    name: "Umbrella Corporation",
    founded: 1968
}

const rows = into("companies")
    .insert(newCompany1)
    .insert(newCompany2)
    .write();
```

### Updating records

```js
const rows = from("companies")
    .updateWhere("founded", "<", 1970)
    .set({ old: true })
    .write();
```

### Deleting records

```js
const rows = from("users")
    .delete("0803d10b-6f50-4e40-b9e7-e107466c65ac")
    .write();
```
npm package: @jasonsbarr/sexpr-parser
Description: A simple parser for S-expressions that produces a minimal, array-based AST
Author: Jason Barr
Latest version: 0.2.0

# `@jasonsbarr/sexpr-parser`

> TODO: description

## Usage

```
const sexprParser = require('@jasonsbarr/sexpr-parser');

// TODO: DEMONSTRATE API
```
npm package: @jasonsbarr/simple-io
Description: A collection of simple file and console IO functions
Author: Jason Barr
Latest version: 0.1.0

# Simple IO

A collection of file and console IO functions for use in a Node.js environment.

Created for my [Introduction to Computer Science and Programming in JavaScript](https://github.com/jasonsbarr/intro-to-programming-javascript) course.

## Installation

```
npm install @jasonsbarr/simple-io
```

## Usage

You can either `require` or `import` the package based on your needs:

```js
import { readFile } from "@jasonsbarr/simple-io";
```

or

```js
const { readFile } = require("@jasonsbarr/simple-io");
```

See [documentation]("https://jasonsbarr.github.io/simple-io/") for more information.
npm package: @jasonsbarr/types
Description: A collection of algebraic data types for JavaScript
Author: Jason Barr
Latest version: 0.11.0

# @jasonsbarr/types

A set of functional types and type-related conversions to supplement the core package types.

## Basic Usage

Just import and use the types you need. For example, doing form field validation in a React app:

```js
import { useState } from "react";
import { Validation, succeed, fail } from "@jasonsbarr/types/lib/Validation";
import { gte } from "@jasonsbarr/functional-core/lib/predicates/gte";
import { length as strLength } from "@jasonsbarr/functional-core/lib/string/length";
import { test } from "@jasonsbarr/functional-core/lib/regexp/test";
import { length } from "@jasonsbarr/functional-core/lib/array/length";

// This is not necessarily how you should handle your form field state - this is not a React tutorial
const [passFieldState, setPassFieldState] = useState("");
const [passFieldErrors, setPassFieldErrors] = useState([]);

const isPasswordLongEnough = (password) =>
  gte(strLength(password), 10)
    ? succeed(password)
    : fail(password, "Password must be at least 10 characters long");

const doesPasswordContainSpecialChars = (password) =>
  test(/#!\.#\*&\^%\$\?\\\/@/, password)
    ? succeed(password)
    : fail(password, "Password must contain at least one special character");

const isPasswordValid = (password) =>
  Validation.empty()
    .concat(isPasswordLongEnough(password))
    .concat(doesPasswordContainSpecialChars(password));

const handlePasswordFieldChange = (event) => {
  isPasswordValid(event.target.value).fold(
    ({ value, messages }) => {
      setPassFieldState(value);
      setPassFieldErrors(messages);
    },
    ({ value }) => {
      setPassFieldState(value);
      setPassFieldErrors([]);
    }
  );
};

// For demonstration purposes only - this is not a React tutorial
export default function PasswordField() {
  return (
    <div className="form-control">
      {gte(length(passFieldErrors), 1) && (
        <p className="error">{passFieldErrors[0]}</p>
      )}
      <input
        type="password"
        value={passFieldState}
        onChange={handlePasswordFieldChange}
      />
    </div>
  );
}
```

## Documentation

[Documentation](https://github.com/jasonsbarr/functional/tree/main/docs/types)
npm package: @jasonsbarr/use-storage
Description: Two simple React hooks for using browser storage
Author: Jason Barr
Latest version: 1.1.1

# useStorage

Two simple React hooks for using browser storage.

## Install

```
npm install @jasonsbarr/use-storage
```

## Usage

The only difference between the two hooks is whether you're using localStorage or sessionStorage. The APIs are exactly the same.

```js
import { useLocalStorage } from "@jasonsbarr/use-storage";
```

- `use(Local|Session)Storage(key[, defaultValue = {}, deserializer = null]);`

The initial call to `useLocalStorage` returns an array pair containing the JSON parsed item for `key`, or just a string if the value is a simple string, as well as a function to update the value for `key`. If there is no value in storage for `key`, you can pass in a default initial value as the second argument to `useLocalStorage`.

```js
const [value, setValue] = useLocalStorage("key", "default value");
```

Passing a new value to the setter function will update the value for `key` in storage and in your application.

```js
setValue("new value");
```

If the value you pass to the setter function is a string, it will pass through into browser storage untouched. This lets you use custom serializers as long as you convert the data to a string before passing it to the setter. Any non-string values will have `JSON.stringify` called on them before saving them to storage. You can pass a custom deserializer function as the third argument to `useLocalStorage`.

```js
const [value, setValue] = useLocalStorage(
  "key",
  "default value",
  customDeserializerFunction
);
```