open-index/open-npm huggingface dataset:
npm package: @jakeherp/nextjs-starter
Description: This is a [Next.js](https://nextjs.org/) starter which comes preloaded with TypeScript, ESLint, Prettier, Jest and a few other goodies.
Author: Jacob Herper
Latest version: 0.1.0

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run develop
# or
yarn develop
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
npm package: @jakejarrett/collection
Description: Minimal collection inspired by Backbone's collection
Author: Jake Jarrett
Latest version: 1.0.0

# Collection
* **Tiny** Unminified filesize is ~450 bytes
* **Extensible** Its a small class that you can easily extend with ES6
* **Easy to use** Simply call add / remove for your models
* **Agnostic** Simply works with objects, doesn't have any dependency for any function from each model (You could mix & match models if you needed)

## Notice
Be aware, this project is only written for ES6+ clients at the moment.

For a list of supported browsers, check the [mdn browser compatability list](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Browser_compatibility) for ES6 classes

## API

### ES6
```js
// Import the dependency
import Collection from '@jakejarrett/collection'
import Model  from '@jakejarrett/model'

const MyModel = new Model({ username: 'jake', id: 0 })
const MyCollection = new Collection([MyModel.freeze()])

const models = MyCollection.freeze()
// models contains the Frozen version of MyModel

```

## Documentation

### add
The `add` function takes a **Object** parameter.

It has no return value.

```js
MyCollection.add({ username: 'jake' })
```

### remove

The `remove` value takes an object. It will do a shallow comparison & remove the first similar model / object

It has no return value.

```js
MyCollection.remove({ username: 'jake' })
```

### freeze
A simple function that returns a "frozen" version of the Array of models (If you add one, it will not mutate the return value of freeze())

```js
MyCollection.add({ username: 'jake' })

const divergePoint = MyCollection.freeze()

MyCollection.remove({ username: 'jake' })

// Will fail
divergePoint === MyCollection.freeze()

```
npm package: @jakejarrett/compare
Description: Minimal object comparison function
Author: Jake Jarrett
Latest version: 1.0.0

# Compare
* **Tiny** Unminified filesize is ~410 bytes
* **Easy to use** Simply call `compare(object, object)`

## API

### ES6
```js
import compare from '@jakejarrett/compare'

const firstObject = {
    hello: {
        yes: true,
        no: false
    },
    user: {
        name: 'jake',
        id: 0
    }
}

const secondObject = Object.assign({}, firstObject)

// true
compare(firstObject, secondObject)

secondObject.user.name = 'not jake'
secondObject.user.id = 1

// false
compare(firstObject, secondObject)

```
npm package: @jakejarrett/gtk-theme
Description: Get the current GTK3 theme
Author: Jake Jarrett
Latest version: 2.0.1

# gtk-theme

Get the current GTK theme.

## Usage
### Theme object

The `theme` object returned from this package will have the following;

```
{
    name: String;
    gtk: {
        css: String;
        folder: String;
        root: String;
    };
    supported: {
        buttons: String[];
        csd: Boolean
    },
    layout: {
        buttons: 'right' | 'left';
        decoration: String (EG/ ':minimize,maximize,close')
    }
}

```
* name
    * Theme name
* gtk
    * GTK Theme object
    * css
        * The stringified CSS
    * folder
        * Folder for the CSS (if found)
    * root
        * Root of the gtk theme
* supported
    * Supported elements of gtk (buttons etc)
    * buttons
        * Array of buttons enabled (min, max & close etc)
    * csd
        * Whether CSD is supported on the current gtk version
* layout
    * GTK Layout (whether buttons are right/left aligned etc)
    * buttons
        * Whether they're on left or right of the window
    * decorations
        * Window decorations enabled (minimize, maximize, close etc)

### Events
* layoutChange
    * When the layout has changed (eg/ align decorations to left & then right)
    * Gets the theme objected
* themeChange
    * When the theme has changed
    * Gets the theme object

### Plugin support / Hooks
You can hook into the lifecycle via these;

* hooks
    * prefetch
        * do stuff before we actually start fetching the new theme
        * Passes in a reference to the GtkTheme context that it's running under
    * postfetch
        * mutate the theme if needed before it is returned to the consumer
        * Passed a clone of the theme, must return the new version of the theme or null if you aren't mutating the theme.


Example usage. (console logs each theme change)
```ts
import { GtkTheme, GtkData } from '@jakejarrett/gtk-theme';

new GtkTheme({
    events: {
        layoutChange: console.log,
        themeChange: (data: GtkData) => {
            console.log('data changed', data.name);
        }
    },
    hooks: {
        prefetch: [(GtkContext: GtkTheme) => console.log(GtkContext)]
        postfetch: [(theme: GtkData) => console.log(theme)]
    }
}); 
```

## Requirements
* GTK3+
* gsettings

## Performance

Performance will vary depending on if you have a Harddrive or SSD, but was `~0.055s` on an SSD.
npm package: @jakejarrett/marionette-component
Description: Create reusable components for your marionette application
Author: Jake Jarrett
Latest version: 0.2.10

# Marionette Component [![npm version](https://badge.fury.io/js/%40jakejarrett%2Fmarionette-component.svg)](https://badge.fury.io/js/%40jakejarrett%2Fmarionette-component)

Re-usable encapsulated views for your MarionetteJS Application `Marionette 3.x & Backbone.Radio 2.x required.`

# Installation
`npm i --save @jakejarrett/marionette-component`

# Dependencies
* [Backbone](http://backbonejs.org) v1.3.3
* [Backbone.Radio](https://github.com/marionettejs/backbone.radio) v2.0.0+
* [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) v3.0.0+

# Usage
**Using Webpack 2 with html-loader, sass-loader & css-loader**

### Importing
```javascript
import { Component, on } from "@jakejarrett/marionette-component";
import Template from "./index.html"; // Optional, You can inline the HTML too.
import Styles from "!css-loader?modules!sass-loader!./style.scss"; // Optional, can also inline styles
```

### Creating a component
Currently only supports ES6 class syntax
```javascript
// Extend the Component object
class DemoComponent extends Component {

    /**
     * Setup our component.
     */
    constructor (elementName, props, /* Optional */ { disableShadowDOM: true }) {
        /** Initialize component **/
        super(elementName);

        // you can setup state etc here.

        // Call render
        this.render(elementName, props);

        // Return the element
        return this.element;
    }

    /**
     * The render method, we'll define what is being rendered onto the dom here.
     */
    render (elementName, props) {
        /**
         * Assume that we're pre-filling the elements with this object.
         */
        let data = {
            elements: {
                input: {
                    placeholder: props.input.placeholder
                },
                textarea: {
                    value: props.textarea.value
                }
            }
        };

         const renderedTemplate = _.template(Template)(data);

        this.renderComponent(elementName, renderedTemplate, Styles);
    }

    /** Custom annotation - This hooks into this.events (You have to support compiling annotations) **/
    @on("change input")
    onInputValueChange (event) {
        // Log out the new value
        console.log(event.path[0].value);
    }
}

/**
 *  Export the Component
 *
 * @exports DemoComponent
 */
export default DemoComponent;
```
npm package: @jakejarrett/model
Description: Minimal model inspired by Backbone's model
Author: Jake Jarrett
Latest version: 1.0.0

# Model
* **Tiny** Unminified filesize is ~350 bytes
* **Extensible** Its a small class that you can easily extend with ES6
* **Easy to use** Simply call getters & setters 

## Notice
Be aware, this project is only written for ES6+ clients at the moment.

For a list of supported browsers, check the [mdn browser compatability list](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Browser_compatibility) for ES6 classes

If you require any eventing etc, you can extend the class & bake in your own events, or try out another model system ([backbone-model](https://www.npmjs.com/package/backbone-model) is avaliable as a standalone module on npm)

## API

### ES6
```js
// Import the dependency
import Model from '@jakejarrett/model';

// Initialize the model with some values
const MyModel = new Model({ username: 'jake', id: 0 });

// Get the current username
MyModel.get('username'); // returns "jake"

// Lock the current state of the model
const model = MyModel.freze();

// Updates the model
MyModel.set('username', 'not jake');

// Model & frozen model are not the same
MyModel.get('username') === model.username; // False

```

## Documentation

### get
The `get` function takes a **string** parameter.

It returns either `undefined` if the value could not be found, or the value you stored under that key.

```js
MyModel.set('hello', 'world')

// Returns 'world'
MyModel.get('hello')
```

### set

The `set` value takes 2 paramaters

The first being a **string** parameter, which is used for the `get` lookup.

The second being any type you wish to set.

```js
MyModel.set('hello', {
    world: {
        nested: 'objects'
    }
});
```

### freeze
A simple function that returns a "frozen" object (Think diverged)

Useful for state comparison & preventing mutation of your object reference

```js
MyModel.set('user', { name: 'jake', id: 0 });

const divergePoint = MyModel.freeze();

MyModel.set('user', { name: 'not jake', id: 1 });

// Will fail
MyModel.get('user').name === divergePoint.user.name;

```

### isNew
A simple function to check if the model is new (the existence of the id attribute)

```js
MyModel.isNew(); // true

MyModel.set('id', 0);

MyModel.isNew(); // false
```
npm package: @jakejarvis/cli
Description: The Jake Jarvis CLI
Author: Jake Jarvis
Latest version: 1.26.337

# 🧑🏻‍💻 @jakejarvis/cli [![npm (scoped)](https://img.shields.io/npm/v/@jakejarvis/cli?logo=npm)](https://www.npmjs.com/package/@jakejarvis/cli) [![GitHub Workflow Status (event)](https://img.shields.io/github/workflow/status/jakejarvis/jakejarvis/CLI:%20Test?logo=github&logoColor=ffffff)](https://github.com/jakejarvis/jakejarvis/actions/workflows/cli-test.yml)

> The [Jake Jarvis](https://jarv.is/) CLI (aka the most useless Node module ever published, in history, by anyone, ever).

<p align="center"><img src="https://raw.githubusercontent.com/jakejarvis/jakejarvis/main/cli/screenshot.png" width="700"></p>

## Usage

```sh
npx @jakejarvis/cli
```

## Inspired by

- [@sindresorhus/sindresorhus](https://github.com/sindresorhus/sindresorhus)
- [@yg/ygcodes](https://github.com/yg/ygcodes)

## Built with

- [ink](https://github.com/vadimdemedes/ink) - React for interactive command-line apps

## License

MIT
npm package: @jakejarvis/eslint-config
Description: My ESLint config. Inspired heavily by eslint-config-google and moderately by eslint-config-airbnb.
Author: Jake Jarvis
Latest version: 4.0.7

# @jakejarvis/eslint-config

> [Shareable ESLint config](https://eslint.org/docs/developer-guide/shareable-configs.html) inspired heavily by [eslint-config-google](https://github.com/google/eslint-config-google) and moderately by [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).

## Installation

```bash
yarn add --dev eslint "@jakejarvis/eslint-config@*"
```

## Usage

`.eslintrc.json`:

```json5
{
  "extends": [
    "@jakejarvis/eslint-config"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    // Project-specific overrides...
  }
}
```

## License

MIT
npm package: @jakeklassen/afk
Description: Linux/Windows lock screen from terminal
Author: Jake Klassen
Latest version: 2.0.3

Linux/Windows lock screen from terminal.

This project uses [robot.js](https://github.com/octalmage/robotjs), see for installation requirements.

## Install

`npm i -g @jakeklassen/afk`

## Run

`afk`


## Limitations

Not Mac ready yet.
npm package: @jakeklassen/ecs
Description: Entity Component System
Author: Jake Klassen
Latest version: 4.0.7

## @jakeklassen/ecs

TypeScript Entity Component System.

You might also like [objecs](https://github.com/jakeklassen/objecs). A different take on ECS that I've been working on.

[Live Demos](https://ecs-examples.netlify.app/)

[Examples](../examples/)

## Benchmarks

🚧
npm package: @jakeklassen/fdenv
Description: Find environment variables
Author: Jake Klassen
Latest version: 0.3.25

# fdenv (Find Env) 🔎

Find environment variables - `process.env.*`, within your JavaScript/TypeScript code.

## Usage

```sh
# Find all environment variables
npx @jakeklassen/fdenv -c /home/user/workspace

# Find all environment variables, write to file
npx @jakeklassen/fdenv -a '=' -c /home/user/workspace/project > /home/user/workspace/project.env
```
npm package: @jakelowen/knex-graphql-filters
Description: A small helper module to make rich postgres queries from graphql queries.
Latest version: 2.4.1

A small helper module to make rich postgres queries from graphql queries.

## comes with typedefs StringWhere, BooleanWhere, DateTimeWhere and others.

Use like:

```
type Query {
  users(input: UsersInput): UsersResults!
}

input UsersInput {
  where: UsersWhere
  limit: Int
  offset: Int
  sort: UserSort
}

input UsersWhere {
  OR: [UsersWhere]
  AND: [UsersWhere]
  id: StringWhere
  name: StringWhere
  email: StringWhere
  active: BooleanWhere
  createdAt: DateTimeWhere
  updatedAt: DateTimeWhere
}

input UserSort {
  id: SortDirection
  name: SortDirection
  email: SortDirection
  createdAt: SortDirection
  updatedAt: SortDirection
}

type UsersResults {
  hasMore: Boolean!
  totalCount: Int!
  items: [User]!
}

enum SortDirection {
  ASC
  DESC
}

```

## comes with Higher order Resolvers to quickly compose resolvers

```
import { getManyHOR } from "@jakelowen/knex-graphql-filters";

export default async (root, args, context, info) => {
  // "users" is table name.
  return getManyHOR("users")(root, args, context, info);
};

```

This will automatically enable very reach prisma style queries

```
query {
  users(
    input: {
      where: {
        OR: [
            { name: { starts_with: "Bil" } },
            { name: { starts_with: "Joe" } }
        ],
        createdAt: { gte: "2019-02-18 12:28:56.399868-06" }
      }
    }
  ) {
    hasMore
    totalCount
    items {
      id
      name
      email
      active
      createdAt
    }
  }
}
```
npm package: @jakelowen/sqorn-graphql-filters
Description: A small helper module to make rich postgres queries from graphql queries using Sqorn
Latest version: 0.4.5

A small helper module to make rich postgres queries from graphql queries using Sqorn

## comes with typedefs StringWhere, BooleanWhere, DateTimeWhere and others.

Use like:

```
type Query {
  users(input: UsersInput): UsersResults!
}

input UsersInput {
  where: UsersWhere
  limit: Int
  offset: Int
  sort: UserSort
}

input UsersWhere {
  OR: [UsersWhere]
  AND: [UsersWhere]
  id: StringWhere
  name: StringWhere
  email: StringWhere
  active: BooleanWhere
  createdAt: DateTimeWhere
  updatedAt: DateTimeWhere
}

input UserSort {
  id: SortDirection
  name: SortDirection
  email: SortDirection
  createdAt: SortDirection
  updatedAt: SortDirection
}

type UsersResults {
  hasMore: Boolean!
  totalCount: Int!
  items: [User]!
}

enum SortDirection {
  ASC
  DESC
}

```

## comes with Higher order Resolvers to quickly compose resolvers

```
import { getManyHOR } from "@jakelowen/sqorn-graphql-filters";

export default async (root, args, context, info) => {
  const dbHandle = sq.from("users)
  return getManyHOR(dbHandle)(root, args, context, info);
};

```

This will automatically enable very reach prisma style queries

```
query {
  users(
    input: {
      where: {
        OR: [
            { name: { starts_with: "Bil" } },
            { name: { starts_with: "Joe" } }
        ],
        createdAt: { gte: "2019-02-18 12:28:56.399868-06" }
      }
    }
  ) {
    hasMore
    totalCount
    items {
      id
      name
      email
      active
      createdAt
    }
  }
}
```
npm package: @jakemott/reactshared
Description: a shared repo for react native and react native web application
Latest version: 1.0.7

# reactShared
a shared repo for react native and react native web application

create sites for creating your own npm account and npm package
https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/
https://docs.npmjs.com/creating-node-js-modules
https://docs.npmjs.com/creating-and-publishing-scoped-public-packages
https://prateeksurana.me/blog/react-library-with-typescript/
https://stackoverflow.com/questions/66488492/solve-having-more-than-one-copy-of-react-in-the-same-app
npm package: @jakeols/css-cleaner
Description: Clean your unused css bloat
Author: Jake Ols
Latest version: 1.2.1

# `@jakeols/css-cleaner`

Small utility to find unused CSS classes in your HTML files, allowing you to purge them. Made for static sites where there is a large number of generated `.html` files with a lot of compiled styles. 

## Installation
Install via `npm` or `yarn` globally
```bash
$ npm install @jakeols/css-cleaner -g
```
## Usage 
`css-cleaner --help` will show the following CLI args
```bash
Options:
  -s, --styles     The path to your styles.                           [required]
  -t, --templates  The path to your templates                         [required]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]

Examples:
  css-cleaner -s=style.css -t=index.html  Print unused styles from given
                                          templates
```

__Note__: `--templates` and `--styles` can be files, or directories. 

## Todo
- Support parsing other file types (such as `.js` / `.jsx` , `.php`, `.hbs`, etc.) for `class` or `className` (configurable)
npm package: @jakeortega/react-native-button-toggle-group
Description: An animated button toggle group for string selection
Author: Jake Ortega
Latest version: 1.2.0

<h1 align="center">
  React Native Button Toggle Group
</h1>
<div align="center">

[![Our npm path](https://badgen.net/npm/v/react-native-button-toggle-group)](https://www.npmjs.com/package/react-native-button-toggle-group/)

</div>

## Install

```
npm i --save react-native-button-toggle-group
```

Or

```
yarn add react-native-button-toggle-group
```

## Usage



![A preview of the component in use](./preview.gif)

```jsx
import ButtonToggleGroup from 'react-native-button-toggle-group';

// ...

const [value, setValue] = React.useState('Light');

return (
<ButtonToggleGroup
    highlightBackgroundColor={'blue'}
    highlightTextColor={'white'}
    inactiveBackgroundColor={'transparent'}
    inactiveTextColor={'grey'}
    values={['Auto', 'Light', 'Dark']}
    value={value}
    onSelect={val => setValue(val)}
/>
)
```

## Props

| Property | Type | Description |
| -------- | ---- | ----------- |
|  `values`        | `string[]` | The list of strings to render as options for the button group |
|  `value`        | `string` | The string to render as the selected option |
|  `onSelect`        | `(val: string) => void` | A function that's called whenever one of the values is selected |
|  `highlightBackgroundColor`        | `string` | The color that the selected background will be. In the above GIF, it's blue. |
|  `highlightTextColor`        | `string` | The color that the selected text will be. In the above GIF, it's white. |
|  `inactiveBackgroundColor`        | `string` | The color that the inactive background will be. In the above GIF, it's white. |
|  `inactiveTextColor`        | `string` | The color that the inactive text will be. In the above GIF, it's a light blue grey. |
|  `style`        | StyleProp | Overwrite styling that can be applied to the container of the button toggle group. In the above GIF, we've added a border, border radius, and some padding. |
| `textStyle`         | StyleProp | Overwrite styling that can be applied to the text of the button toggle group. In the above GIF, we've changed the font family and font size. |