open-index/open-npm huggingface dataset:
npm package: @ryands17/rcomp
Description: A CLI tool for generating React Components
Latest version: 1.2.4

# rcomp CLI

A CLI for generating React Components.

## Commands

- `rcomp create component` or `rcomp c component` will generate a component in the **components** folder of `src` by default
- `rcomp create page` or `rcomp c page` will generate a page / route in the **pages** folder of `src` by default

Currently this plugin supports 2 options:
1. Creating a function or class Component
2. Creating a scss or styled-component file

### Configuration options

- You can specify the following configuration in your `package.json`. Default values for all are shown below

```json
"rcomp": {
  "componentsDirectory": "components",
  "pagesDirectory": "pages",
  "createStories": false,
  "outputExtension": "js"
}
```

- `componentsDirectory`: The custom folder for components
- `pagesDirectory`: The custom folder for pages
- `createStories`: If you want to generate stories for your component (if using Storybook)
- `outputExtension`: The generated extension for your project (.js or .ts)

**Note**: The base directory will be `src` though.

# License

MIT - see LICENSE

### Enhancements

- [ ] Write robust tests!
- [x] ~~Read components and pages folder from project config (currently statically set to `components` and `pages`)~~
- [x] ~~Add support for .ts/.tsx~~

### Changelog

**Version 1.1.2**
- Fix an issue where the users' custom config was not imported

**Version 1.0.3**
- Add support for generating stories for components (if using Storybook)

**Version 1.0.2**
- Add support for the .ts/.tsx extension
npm package: @ryaneharris/bbms-schematics
Description: Angular schematics for BBMS
Latest version: 0.1.7

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with
```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @ryanep/eslint-config
Description: A personal ESLint config
Latest version: 2.2.0

<p align="center">
  <img width=100 height=100 alt="Screenshot" src="https://raw.githubusercontent.com/ryanep/eslint-config/main/docs/icon.svg">
</p>
<div align="center">
  <h1>@ryanep/eslint-config</h1>
  <p>A personal ESLint config.</p>
</div>

## Introduction

This project is a personal ESLint configuration to ensure code quality and consistency across multiple personal projects.

## Usage

Install the packages using `npm install --save-dev eslint @ryanep/eslint-config`.

Create a new `eslint.config.js` file and add the following:

```javascript
import { createConfig } from "@ryanep/eslint-config";

export const eslintConfig = createConfig();

export default eslintConfig;
```

## License

Licensed under the MIT license.
npm package: @ryanep/prettier-config
Description: A personal prettier config
Latest version: 1.3.0

<div align="center">
  <img width="100" height="100" alt="Prettier Config Icon" src="https://raw.githubusercontent.com/ryanep/prettier-config/main/docs/icon.svg" />
  <h1>@ryanep/prettier-config</h1>
  <p>My personal Prettier configuration.</p>
</div>

## Introduction

This project is a personal Prettier configuration to ensure simple and consistent use of rules across multiple personal projects.

## Usage

Install the package using `npm install --save-dev @ryanep/prettier-config`.

Create a new `.prettierrc` file and add the following:

```
"@ryanep/prettier-config"
```

## License

Licensed under the MIT license.
npm package: @ryanflorence/batch-loader
Description: Intelligently batch naive calls to load records
Author: Ryan Florence
Latest version: 0.0.1

# batch-loader

A lightweight, efficient data loader utility for batching multiple calls into a single operation. Particularly useful for optimizing database queries and API calls in JavaScript servers, Remix loaders, and React Server Components.

Highly inspired by [GraphQL dataloader](https://github.com/graphql/dataloader) but smaller in scope.

## Key Features

- 🚀 Automatic load batching within the same tick of the event loop
- 💾 Request-scoped caching to prevent duplicate loads
- ⚡️ Handles parallel requests for the same key via in-flight request tracking
- 🔄 Support for custom cache implementations
- 📊 Request monitoring via batch operation callbacks

## Installation

```bash
npm install @ryanflorence/batch-loader
```

## Usage

```typescript
import { batch } from "@ryanflorence/batch-loader";

// Create a loader for users
const loadUsers = batch(async (ids: string[]) => {
  // Single query/request to load multiple users
  const users = await db.users.findMany({
    where: { id: { in: ids } },
  });

  // Must return array in same order as input ids
  return ids.map(id => users.find(user => user.id === id));
});

// Use the loader - these will be batched automatically
const [user1, user2] = await Promise.all([
  loadUsers("1"),
  loadUsers("2"),
  loadUsers("2"), // will be de-duped
]);
```

## Important Notes

- **Request-Scoped Caching**: Loader caches are never explicitly cleared. The intended usage is to create loaders within the scope of a request or operation. When that operation completes, the cache is automatically garbage collected along with the loader instance. A convenient way to do this is with [async-provider](https://github.com/ryanflorence/async-provider).
- **Batch Function Requirements**: Your batch function must return results in the same order as the input keys. This ensures the loader can correctly match results to individual requests.
- **Error Handling**: If the batch function throws an error, all requests in that batch will receive the same error.

## API

### `batch<Key, T>(batchFn, options?)`

Creates a new data loader that batches calls.

#### Parameters

- `batchFn`: `(keys: Key[]) => Promise<T[]>`

  - Function that loads multiple items in a single batch
  - Must return results in same order as input keys

- `options`: (optional)
  - `cacheMap`: Custom Map implementation for caching (e.g., LRUMap)
  - `onBatch`: Callback for monitoring batch operations

#### Returns

- `(key: Key) => Promise<T>`
  - Function to load individual items
  - Automatically batches concurrent calls

### Batch Info

The `onBatch` callback receives an object with:

```typescript
{
  batcher: Function,     // The batch function
  requestedKeys: Key[],  // All keys requested in this tick
  inflightKeys: Key[],   // Keys currently being loaded
  cachedKeys: Key[],     // Keys found in cache
  batchedKeys: Key[]     // Keys included in this batch
}
```

## License

MIT
npm package: @ryanflorence/mdtut
Description: Process markdown into objects for display as a tutorial
Author: Ryan Florence
Latest version: 1.2.1

# mdtut

Convert markdown files to data structures used in tutorials.

## Usage

```ts
let processor = remark().use(html);
let result = await process(processor, markdownString);
```

Look at the test to see the input format and output.
npm package: @ryanflorence/sqlite-typegen
Description: A lightweight utility to automatically generate TypeScript types from SQLite database schemas. Helps maintain type safety between your database and TypeScript code.
Author: Ryan Florence
Latest version: 0.2.0

# sqlite-typegen

A lightweight utility to automatically generate TypeScript types from SQLite database schemas. Helps maintain type safety between your database and TypeScript code.

## Features

- 🚀 Automatic type generation from SQLite schemas
- 💪 TypeScript support
- 🎯 Handles nullable columns
- 🛠 Both CLI and programmatic API
- 📝 Configurable type namespace

## Installation

```bash
npm install -D @ryanflorence/sqlite-typegen
```

## CLI Usage

The command-line interface provides a simple way to generate types from your SQLite database:

```bash
sqlite-typegen <database-path> [options]
```

### Options

- `-o, --out <path>` - Write output to a file instead of stdout
- `-n, --namespace <name>` - Custom namespace for generated types (default: "DB")
- `-h, --help` - Show help message

### Examples

Generate types and output to console:

```bash
sqlite-typegen ./database.sqlite
```

Generate types and save to file:

```bash
sqlite-typegen ./database.sqlite -o src/types/db.ts
```

Use custom namespace:

```bash
sqlite-typegen ./database.sqlite -n MyDatabase -o types.ts
```

## Programmatic Usage

You can also use the type generator programmatically in your code:

```typescript
import { generate } from "sqlite-typegen";

// Generate types as a string
let types = generate("./database.sqlite", "MyDB");

// Now you can do whatever you want with the generated types
console.log(types);
fs.writeFileSync("types.ts", types);
```

### API

#### `generate(dbPath: string, namespace?: string): string`

Generates TypeScript types from a SQLite database schema.

- `dbPath`: Path to your SQLite database file
- `namespace`: Optional name for the generated type namespace (default: "DB")
- Returns: String containing the generated TypeScript types

## Type Mappings

SQLite types are mapped to TypeScript types as follows:

| SQLite Type | TypeScript Type |
| ----------- | --------------- |
| INTEGER     | number          |
| REAL        | number          |
| TEXT        | string          |
| BLOB        | Buffer          |
| BOOLEAN     | boolean         |
| DATETIME    | Date            |
| NUMERIC     | number          |
| VARCHAR     | string          |
| CHAR        | string          |

## Example Output

For a database with a `users` table, the generated types might look like:

```typescript
export namespace SQLiteSchema {
  export type users = {
    id: number;
    name: string;
    email: string;
    created_at?: Date; // nullable columns become optional
  };
}
```

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.
npm package: @ryanflorence/testing-123
Description: The simplest typescript package template I can think of.
Latest version: 0.0.3

# package-name

The simplest typescript package template I can think of.

- Node built-in testing: `node:test` and `node:assert`
- TypeScript with Node's `--experimental-strip-types` instead of compiling
- Develop, test, debug directly in your code with VSCode's built-in features, no CLI + console.log shenanigans
- Publish with `npm version` and a GitHub action

## Setting up

1. Install [Node Test Runner Extension](https://marketplace.visualstudio.com/items?itemName=connor4312.nodejs-testing)
2. Click the "Testing" tab in the VSCode Activity Bar
3. Reload VSCode Window or restart vscode if you don't see any tests in the sidebar

## Development

1. Open a test file
2. Click the testing buttons in the gutter to run a test
3. Set breakpoints in the gutter and run the test in the debugger (click the play button in the error popup with the bug on it)

**Keyboard shortcuts**

- Run all tests in the current **f**ile with `Command + ; + f`
- Run **c**urrent test at the cursor with `Command + ; + c`

## Playing around

You can run any file in the debugger with F5. Or click the debug icon in the Activity Bar and click the play button up top.

## CI Scripts

```sh
# run tests
pnpm test
# compile typescript to ./dist
pnpm build
```

## Releasing

**Setup**

First add an NPM token to your GitHub repository secrets. Log into npm to get one.

**Publishing a Release**

Create a tag and update package.json with `npm version`

```sh
# npm version patch | minor | major
npm version patch
```

Then push to GitHub.

```sh
git push origin main --tags
```

The GitHub action will match the tag and release.
npm package: @ryanforever/pmp
Description: Map ports using PMP (NAT Port Mapping Protocol)
Author: Nathan Rajlich
Latest version: 2.0.2

# pmp
Map ports using PMP (NAT Port Mapping Protocol)

This is a fork of [nat-pmp](https://www.npmjs.com/package/nat-pmp).  Added async/await and easier methods.

## usage
```javascript
const PMP = require("@ryanforever/pmp")
const pmp = new PMP({
    gateway: "192.168.1.1", // i.e. your router ip address
    ttl: 1800,              // amount of time in seconds port(s) should remain mapped
    ports: [69, 420],       // ports you want to map
    autoRefresh: true,      // automatically refresh port(s) before they expire
    description: "my-app",  // a description to be send along with the mapping
    debug: true,            // debug logging
})

// map the ports
pmp.map()

// unmap the ports
pmp.unmap()
```

You can also map the ports in the methods themselves
```javascript
const PMP = require("@ryanforever/pmp")
const pmp = new PMP({
    gateway: "192.168.1.1",
    ttl: 1800
})

pmp.map(42)
pmp.unmap(42)
```
npm package: @ryanfw/content-tools
Description: Tools and utilities for working with FirstWho as a headless CMS
Author: Ryan Mahoney
Latest version: 3.0.0

# FirstWho Content Tools
Tools and utilities for working with FirstWho as a headless CMS

### Getting Started
- obtain an content API key from FirstWho
- set your local environment variables (see `.env-sample`)

### Running from CLI
The following command will pull all content from FirstWho as a zip file (`content.zip`) and extract it.

```sh
./fetch.sh
```
npm package: @ryangallacher/design-system
Description: Personal design system — reusable UI components and design tokens
Latest version: 0.1.0

# Personal Design System

A reusable design system and component library for building internal tools and applications.

## Purpose

This project provides a consistent foundation of design tokens, UI components, and layout patterns intended for use as a starting point for new software projects.

It is designed to support rapid development while maintaining visual and structural consistency across applications.

## Authorship and Origin

This design system was created independently by Ryan Gallacher on personal time, using personal equipment and tools.

It was developed outside of any employment context and is not derived from or dependent on any proprietary or employer-owned systems.

## Installation

```sh
npm install @ryangallacher/design-system
# or
pnpm add @ryangallacher/design-system
```

Requires React 18+.

### Components

```tsx
import { Button } from '@ryangallacher/design-system';
```

### Tokens

CSS custom properties are available as standalone token files:

```css
@import '@ryangallacher/design-system/tokens/index.css';
```

Or import individual token groups:

```css
@import '@ryangallacher/design-system/tokens/semantic/color.css';
@import '@ryangallacher/design-system/tokens/primitives/spacing.css';
```

## Usage

This project is licensed under the MIT License.

You may use, copy, modify, and adapt this design system in any project, including personal, commercial, or internal company projects.

Company-specific implementations, extensions, and integrations should be maintained within appropriate company infrastructure.

## Scope

This repository contains only generic, reusable design system components, tokens, and templates.

It does not contain:

- Sensitive data  
- Proprietary business logic  
- Confidential information  

## License

MIT License — see LICENSE file for details.
npm package: @ryangjchandler/alpine-hooks
Description: A collection of hooks for Alpine.js.
Author: Ryan Chandler
Latest version: 1.0.0

# Hooks for Alpine.js

This package contains a variety of hooks for [Alpine.js](https://alpinejs.dev/) that can be used to improve the developer experience of common front-end development tasks.

## Installation

You can install this package via npm:

```sh
npm install @ryangjchandler/alpine-hooks
```

You can then register all of the available hooks as an Alpine plugin.

```js
import Alpine from 'alpinejs';
import Hooks from '@ryangjchandler/alpine-hooks';

Alpine.plugin(Hooks);
Alpine.start();
```

Or if you only need particular hooks, you can import and register them separately.

```js
import Alpine from 'alpinejs';
import { useHover, useWindowSize } from '@ryangjchandler/alpine-hooks';

Alpine.plugin(useHover);
Alpine.plugin(useWindowSize);
Alpine.start();
```

## Usage

The table below lists all of the available hooks.

| Hook | Description | Example |
| --- | --- | --- |
| `$useHover` | Reacts to a mouse hovering over a specific element. | [View](/examples/useHover.html) |
| `$useFocus` | Reacts to a specific element being focused and blurred. | [View](/examples/useFocus.html) |
| `$useHash` | Update and react to changes to `window.location.hash`. | [View](/examples/useHash.html) |
| `$useWindowSize` | Read and react to changes in the window / viewport size. | [View](/examples/useWindowSize.html) |

### `$useHover`

This hook can be used to react to the cursor hovering over a specific element.

```html
<div x-data="{ hovering: $useHover($refs.target) }">
    <div id="target" x-ref="target"></div>
</div>
```

When the `#target` element is being hovered over, `hovering` will be `true`. Otherwise it will default to `false.`

### `$useFocus`

This hook can be used to react to focus changes on an element.

```html
<div x-data="{ focused: $useFocus($refs.target) }">
    <input x-ref="target" />
</div>
```

When the `input` element is focused, the property will be `true`. When the `blur` event is fired (unfocusing), it will be `false`.

### `$useHash`

This hook allows you to modify `window.location.hash` and react to external changes too.

```html
<div x-data="{ tab: $useHash('#one') }">
    <button x-on:click="tab = '#two'">Two</button>

    <!-- More buttons go here... -->

    <div x-show="tab === '#two'">
        <!-- ... -->
    </div>
</div>
```

Changing the value of the `tab` property updates the hash in the URL and is reactive. The `tab` property will also read the hash when the component is initialised, defaulting to the value passed in to the hook.

### `$useWindowSize`

This hook lets returns the `width` and `height` of the viewport and reacts to changes.

```html
<div x-data="{ size: $useWindowSize() }">
    <p x-show="size.width < 720">
        Your screen is very narrow.
    </p>
</div>
```