open-index/open-npm huggingface dataset:
npm package: @jgamaraalv/react-auto-complete
Description: An amazing auto complete for your React application
Author: João G. A. Vequiato
Latest version: 1.2.1

# react-auto-complete

An awesome `Auto Complete` for your React application.

## How to install in your project

```
# Yarn
yarn add @jgamaraalv/react-auto-complete

# NPM
npm install @jgamaraalv/react-auto-complete
```

## How to run locally

First, you need to clone the repository

```
git clone https://github.com/jgamaraalv/react-auto-complete react-auto-complete
```

Then you can run

```
# Yarn
yarn install

# Run locally
yarn dev

# Unit tests
yarn test:unit

# NPM
npm install

# Run locally
npm dev

# Unit tests
npm test:unit
```

## How to use the Autocomplete Component

You can use the pre compounded component like the example below

```jsx
  import Autocomplete from "@jgamaraalv/react-auto-complete";
  // if you are running locally
  // import { Autocomplete } from "./components/Autocomplete";

  function App() {
    const { run, data } = useAsync<PromiseType<ReturnType<typeof products>>>();

    useEffect(() => {
      run(products());
    }, []);

    async function searchProductHandler(
      event: React.ChangeEvent<HTMLInputElement>
    ) {
      run(products(event.target.value));
    }

    return (
      <div>
        <Autocomplete options={data} onSearch={searchProductHandler} onOptionSelected={(selectedValue) => console.log(selectedValue)} />
      </div>
    );
  }

  export default App;
```

Or you can compound by yourself

```jsx
import { Autocomplete } from "@jgamaraalv/react-auto-complete";
// if you are running locally
// import { Autocomplete } from "./components/Autocomplete";

function App() {
  return (
    <div>
      <Autocomplete>
        <Autocomplete.Input placeholder="Input value" />

        <Autocomplete.List>
          <Autocomplete.ListItem value="value1">Value 1</Autocomplete.ListItem>
          <Autocomplete.ListItem value="value2">Value 2</Autocomplete.ListItem>
        </Autocomplete.List>
      </Autocomplete>
    </div>
  );
}

export default App;
```
npm package: @jgarber/capitalize
Description: Sometimes you need to capitalize the first character of a string.
Author: Jason Garber
Latest version: 0.1.0

# @jgarber/capitalize

**Sometimes you need to capitalize the first character of a string.**

[![npm](https://img.shields.io/npm/v/@jgarber/capitalize.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/capitalize)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/capitalize.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/capitalize)

## Installation

```sh
npm install --save-dev @jgarber/capitalize
```

## Usage

```js
import capitalize from "@jgarber/capitalize";

console.log(capitalize("foo"));
// => "Foo"
```

## Acknowledgments

The `capitalize` function was pulled straight from [this unsigned ui.dev article](https://ui.dev/capitalize-first-letter-of-string-javascript), so credit due to whomstever wrote that.

## License

This project is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/eleventy-plugin-postcss
Description: An Eleventy plugin for processing CSS files with PostCSS.
Author: Jason Garber
Latest version: 3.0.1

# eleventy-plugin-postcss

**An [Eleventy](https://www.11ty.dev) plugin for processing CSS files with [PostCSS](https://postcss.org).**

[![npm](https://img.shields.io/npm/v/@jgarber/eleventy-plugin-postcss.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eleventy-plugin-postcss)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/eleventy-plugin-postcss.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eleventy-plugin-postcss)

## Usage

First, add the plugin as [a development dependency](https://docs.npmjs.com/cli/configuring-npm/package-json#devdependencies) to your project's `package.json` file:

```sh
npm install --save-dev @jgarber/eleventy-plugin-postcss
```

Next, add the plugin to your project's [Eleventy configuration file](https://www.11ty.dev/docs/config#default-filenames) (e.g. `eleventy.config.js`):

```js
import postcssPlugin from "@jgarber/eleventy-plugin-postcss";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(postcssPlugin);
}
```

Optionally, add a PostCSS configuration file to your project:

```js
import cssnano from "cssnano";
import postcssNesting from "postcss-nesting";

export default {
  map: "inline",
  plugins: [postcssNesting, cssnano]
};
```

> [!TIP]
> This plugin uses [postcss-load-config](https://github.com/postcss/postcss-load-config) which will load PostCSS configuration from your project's `package.json` or from a litany of other files. We recommend creating a file named `postcss.config.js`.

## Options

eleventy-plugin-postcss supports the following options:

| Name              | Type(s)                   | Default                      |
|:------------------|:--------------------------|:-----------------------------|
| `templateFormats` | `Array<String>`, `String` | `['css', 'pcss', 'postcss']` |

```js
import postcssPlugin from "@jgarber/eleventy-plugin-postcss";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(postcssPlugin, {
    templateFormats: "css"
  });
};
```

> [!NOTE]
> For most use cases, the default `templateFormats` value will suffice.

## Sass-style Partials Support

eleventy-plugin-postcss treats files named with a leading underscore (e.g. `_variables.css`) as [Sass-style partials](https://sass-lang.com/guide/#partials). These files **will not** be written to the output directory.

## Acknowledgments

First and foremost, eleventy-plugin-postcss wouldn't be possible without [Zach Leatherman](https://www.zachleat.com)'s incredible work creating Eleventy and his stewardship of its community.

The plugin code is derived from [whoisvadym/eleventy-plugin-postcss](https://github.com/whoisvadym/eleventy-plugin-postcss).

eleventy-plugin-postcss is written and maintained by [Jason Garber](https://sixtwothree.org).
npm package: @jgarber/eleventy-plugin-routes
Description: An Eleventy plugin for generating `/resource`-style URLs.
Author: Jason Garber
Latest version: 0.1.0

# eleventy-plugin-routes

**An [Eleventy](https://www.11ty.dev) plugin for generating `/resource`-style URLs.**

[![npm](https://img.shields.io/npm/v/@jgarber/eleventy-plugin-routes.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eleventy-plugin-routes)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/eleventy-plugin-routes.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eleventy-plugin-routes)

This plugin implements [the example code](https://www.11ty.dev/docs/permalinks/#remove-trailing-slashes) from the Eleventy permalinks documentation. The section, "Removing trailing slashes," details the trade-offs and deployment concerns in using the configuration supplied by this plugin.

## Usage

First, add the plugin as [a development dependency](https://docs.npmjs.com/cli/configuring-npm/package-json#devdependencies) to your project's `package.json` file:

```sh
npm install --save-dev @jgarber/eleventy-plugin-routes
```

Next, add the plugin to your project's [Eleventy configuration file](https://www.11ty.dev/docs/config#default-filenames) (e.g. `eleventy.config.js`):

```js
import eleventyPluginRoutes from "@jgarber/eleventy-plugin-routes";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyPluginRoutes);
}
```

🏆 That's it! Your Eleventy project should now default to generating `resource.html`-style pages and return `/resource`-style URLs from `page.url` entries.

## Acknowledgments

First and foremost, eleventy-plugin-routes wouldn't be possible without [Zach Leatherman](https://www.zachleat.com)'s incredible work creating Eleventy and his stewardship of its community.

eleventy-plugin-routes is written and maintained by [Jason Garber](https://sixtwothree.org).
npm package: @jgarber/eslint-config
Description: Shareable ESLint configuration.
Author: Jason Garber
Latest version: 11.0.0

# @jgarber/eslint-config

**Shareable [ESLint](https://eslint.org) configuration.**

[![npm](https://img.shields.io/npm/v/@jgarber/eslint-config.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eslint-config)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/eslint-config.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/eslint-config)

## Installation

```sh
npm install --save-dev @jgarber/eslint-config
```

## Usage

```js
// eslint.config.js
export { default } from "@jgarber/eslint-config";
```

## License

@jgarber/eslint-config is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/gocomics-open-graph
Description: Parse Open Graph metadata from GoComics webpages.
Author: Jason Garber
Latest version: 0.1.0

# @jgarber/gocomics-open-graph

**Parse [Open Graph](https://ogp.me) metadata from [GoComics](https://www.gocomics.com) webpages.**

[![npm](https://img.shields.io/npm/v/@jgarber/gocomics-open-graph.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/gocomics-open-graph)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/gocomics-open-graph.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/gocomics-open-graph)

## Installation

```sh
npm install --save @jgarber/gocomics-open-graph
```

## Usage

On the command line:

```sh
npx gocomics-open-graph calvinandhobbes 2025-09-01
# {"title":["Calvin and Hobbes by Bill Watterson for September 1, 2025 | GoComics"],"description":["Read Calvin and Hobbes—a comic strip by creator Bill Watterson—for today, September 1, 2025, and check out other great comics, too!"],"image":["https://featureassets.gocomics.com/assets/a118dba04f72013ead4c005056a9545d"],"image:width":["900"],"image:height":["287"],"image:alt":["Read Calvin and Hobbes by Bill Watterson on GoComics"]}

npx gocomics-open-graph nancy
# {"title":["Nancy by Olivia Jaimes for September 18, 2025 | GoComics"],"description":["Read Nancy—a comic strip by creator Olivia Jaimes—for today, September 18, 2025, and check out other great comics, too!"],"image":["https://featureassets.gocomics.com/assets/0fea1f906b20013eb193005056a9545d"],"image:width":["900"],"image:height":["251"],"image:alt":["Read Nancy by Olivia Jaimes on GoComics"]}
```

In a JavaScript file:

```js
import gocomicsOpenGraph from "@jgarber/gocomics-open-graph";

console.log(await gocomicsOpenGraph("calvinandhobbes", "2025-09-01"));
// {"title":["Calvin and Hobbes by Bill Watterson for September 1, 2025 | GoComics"],"description":["Read Calvin and Hobbes—a comic strip by creator Bill Watterson—for today, September 1, 2025, and check out other great comics, too!"],"image":["https://featureassets.gocomics.com/assets/a118dba04f72013ead4c005056a9545d"],"image:width":["900"],"image:height":["287"],"image:alt":["Read Calvin and Hobbes by Bill Watterson on GoComics"]}

console.log(await gocomicsOpenGraph("nancy"));
// {"title":["Nancy by Olivia Jaimes for September 18, 2025 | GoComics"],"description":["Read Nancy—a comic strip by creator Olivia Jaimes—for today, September 18, 2025, and check out other great comics, too!"],"image":["https://featureassets.gocomics.com/assets/0fea1f906b20013eb193005056a9545d"],"image:width":["900"],"image:height":["251"],"image:alt":["Read Nancy by Olivia Jaimes on GoComics"]}
```

> [!IMPORTANT]
> A full list of available titles may be found on [GoComics' website](https://www.gocomics.com/comics/a-to-z).

> [!NOTE]
> The `YYYY-MM-DD`-formatted date argument is optional. If absent, the current date will be used. That value _might_ be tomorrow depending on the time of day and time zone of the computer generating the date.

## License

This project is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/metacrap
Description: Parse metacrap from a URL or HTML.
Author: Jason Garber
Latest version: 0.1.2

# @jgarber/metacrap

**Parse [metacrap](https://adactio.com/journal/9881) from a URL or HTML.**

[![npm](https://img.shields.io/npm/v/@jgarber/metacrap.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/metacrap)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/metacrap.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/metacrap)

## Installation

```sh
npm install --save @jgarber/metacrap
```

## Usage

If the URL `https://jgarber.example` existed and its HTML were a little something like this:

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <title>Hello, world!</title>

  <meta name="author" content="Jason Garber">
  <meta property="og:author" content="Jason Garber">

  <!-- Or, equivalently: -->
  <!-- <meta name="author" property="og:author" content="Jason Garber"> -->
</head>
</html>
```

On the command line:

```sh
npx metacrap https://jgarber.example
# { author: ["Jason Garber"], "og:author": ["Jason Garber"] }
```

In a JavaScript file:

```js
import metacrap from "@jgarber/metacrap";

console.log(await metacrap("https://jgarber.example"));
// { author: ["Jason Garber"], "og:author": ["Jason Garber"] }

console.log(await metacrap(`<meta name="author" content="Jason Garber">`));
// { author: ["Jason Garber"] }
```

> [!IMPORTANT]
> Values in the parsed data are returned as arrays of strings to account for HTML containing multiple `<meta>` elements with duplicative `name` or `property` attributes. This behavior may not be pervasive in practice, but is allowable in HTML.

> [!NOTE]
> Parsed data includes only `<meta>` elements with a `content` attribute and either a `name` or `property` attribute.

## License

This project is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/postcss-easy-import
Description: A PostCSS plugin adding support for glob importing CSS files.
Author: Jason Garber
Latest version: 6.0.0

# @jgarber/postcss-easy-import

**A [PostCSS](https://postcss.org) plugin adding support for glob importing CSS files.**

[![npm](https://img.shields.io/npm/v/@jgarber/postcss-easy-import.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/postcss-easy-import)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/postcss-easy-import.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/postcss-easy-import)

Forked from the original [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) project.

## Usage

First, add the plugin as [a development dependency](https://docs.npmjs.com/cli/configuring-npm/package-json#devdependencies) to your project's `package.json` file:

```sh
npm install --save-dev @jgarber/postcss-easy-import
```

Next, add the plugin to your project's PostCSS configuration. The example below demonstrates usage in a `postcss.config.js` configuration file:

```js
import postcssEasyImport from "@jgarber/postcss-easy-import";

export default {
  plugins: [postcssEasyImport],
};
```

Finally, in your project's CSS files, add `@import` rules tailored to your needs:

```css
/* Import the default export from a locally-installed package. */
@import "@jgarber/cosmic-latte";

/* Glob import a set of files from a locally-installed package. */
@import "@jgarber/cosmic-latte/*.css";

/* Import a CSS file using a relative path. */
@import "./theme.css";

/* Glob import a set of files from a relative path. */
@import "./components/**/*.css";
```

> [!NOTE]
> This project extends [postcss-import](https://github.com/postcss/postcss-import) and supports the same `@import` notations.

## Options

| Name         | Type(s)           | Default    |
|:-------------|:------------------|:-----------|
| `extensions` | `Array<String>`   | `[".css"]` |
| `prefix`     | `false`, `String` | `false`    |

```js
import postcssEasyImport from "@jgarber/postcss-easy-import";

export default {
  plugins: [
    postcssEasyImport({
      extensions: [".pcss", ".postcss"],
      prefix: "_",
    }),
  ],
};
```

The `prefix` option allows for matching file names with the provided string. Using the configuration above, an `@import` rule like `@import "./components/index.css";` would match a file at `./components/_index.css`.

> [!NOTE]
> If a `prefix` is configured _and_ both a prefixed and non-prefixed file of the same name exists, the file with the prefixed filename (e.g. `./components/_index.css`) takes priority.

## License

This project is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/stylelint-config
Description: Shareable Stylelint configuration.
Author: Jason Garber
Latest version: 8.0.0

# @jgarber/stylelint-config

**Shareable [Stylelint](https://stylelint.io) configuration.**

[![npm](https://img.shields.io/npm/v/@jgarber/stylelint-config.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/stylelint-config)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/stylelint-config.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/stylelint-config)

> [!NOTE]
> See [@jgarber/stylelint-config-scss](https://www.npmjs.com/package/@jgarber/stylelint-config-scss) for a shareable Stylelint configuration suitable for SCSS syntax Sass files.

## Installation

```sh
npm install --save-dev @jgarber/stylelint-config
```

## Usage

Stylelint supports [a variety of configuration file formats](https://stylelint.io/user-guide/configure).

### YAML

In a file named `.stylelintrc` or `.stylelintrc.yml`:

```yaml
---
extends: "@jgarber/stylelint-config"
---
```

### JSON

In a file named `.stylelintrc` or `.stylelintrc.json`:

```json
{
  "extends": "@jgarber/stylelint-config"
}
```

### JavaScript

In a JavaScript file using [ECMAScript module (ESM)](https://nodejs.org/api/esm.html) syntax:

```js
// stylelint.config.mjs
export { default } from "@jgarber/stylelint-config";
```

In a JavaScript file using [CommonJS module](https://nodejs.org/api/modules.html) syntax:

```js
// stylelint.config.cjs
module.exports = {
  extends: "@jgarber/stylelint-config"
}
```

## License

@jgarber/stylelint-config is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/stylelint-config-scss
Description: Shareable Stylelint configuration for SCSS syntax Sass files.
Author: Jason Garber
Latest version: 7.0.0

# @jgarber/stylelint-config-scss

**Shareable [Stylelint](https://stylelint.io) configuration for SCSS syntax [Sass](https://sass-lang.com) files.**

[![npm](https://img.shields.io/npm/v/@jgarber/stylelint-config-scss.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/stylelint-config-scss)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/stylelint-config-scss.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/stylelint-config-scss)

> [!NOTE]
> See [@jgarber/stylelint-config](https://www.npmjs.com/package/@jgarber/stylelint-config) for a shareable Stylelint configuration suitable for CSS files.

## Installation

```sh
npm install --save-dev @jgarber/stylelint-config-scss
```

## Usage

Stylelint supports [a variety of configuration file formats](https://stylelint.io/user-guide/configure).

### YAML

In a file named `.stylelintrc` or `.stylelintrc.yml`:

```yaml
---
extends: "@jgarber/stylelint-config-scss"
---
```

### JSON

In a file named `.stylelintrc` or `.stylelintrc.json`:

```json
{
  "extends": "@jgarber/stylelint-config-scss"
}
```

### JavaScript

In a JavaScript file using [ECMAScript module (ESM)](https://nodejs.org/api/esm.html) syntax:

```js
// stylelint.config.mjs
export { default } from "@jgarber/stylelint-config.scss";
```

In a JavaScript file using [CommonJS module](https://nodejs.org/api/modules.html) syntax:

```js
// stylelint.config.cjs
module.exports = {
  extends: "@jgarber/stylelint-config-scss"
};
```

## License

@jgarber/stylelint-config-scss is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarber/under-construction
Description: A Web Component that generates OSHA-compliant barricade tape.
Author: Jason Garber
Latest version: 0.1.1

# `<under-construction>` Web Component

**A dependency-free [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) that generates [OSHA](https://www.osha.gov)-compliant [barricade tape](https://en.wikipedia.org/wiki/Barricade_tape).**

[![npm](https://img.shields.io/npm/v/@jgarber/under-construction.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/under-construction)
[![Downloads](https://img.shields.io/npm/dt/@jgarber/under-construction.svg?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@jgarber/under-construction)

🚧 **[See `<under-construction>` in action!](https://jgarber.codeberg.page/under-construction/example/)**

## Getting `<under-construction>`

You've got several options for adding this Web Component to your project:

- [Download a release](https://codeberg.org/jgarber/under-construction/releases) from Codeberg and do it yourself _(old school)_.
- Install using [npm](https://www.npmjs.com/package/@jgarber/under-construction): `npm install @jgarber/under-construction --save`
- Install using [Yarn](https://yarnpkg.com/en/package/@jgarber/under-construction): `yarn add @jgarber/under-construction`

## Usage

First, add this `<script>` element to your page which defines the `<under-construction>` Web Component:

```html
<script type="module" src="under-construction.js"></script>
```

Use the `<under-construction>` Web Component anywhere on your page!

```html
<body>
  <under-construction></under-construction>

  <header>
    <h1>Hello, website guest!</h1>
    <p>Pardon our dust, but this site is a work-in-progress.</p>
  </header>
</body>
```

> [!TIP]
> This Web Component may be useful on development or staging websites as a visual reminder of which environment you're currently viewing.

## Compliance

OSHA and [ANSI](https://www.ansi.org) provide precise specifications for barricade tape colors. The relevant regulations are linked below:

- **OSHA:** [1910.22 - General requirements](https://www.osha.gov/laws-regs/regulations/standardnumber/1910/1910.22) and [1910.144 - Safety color code for marking physical hazards](https://www.osha.gov/laws-regs/regulations/standardnumber/1910/1910.144)
- **ANSI:** [Z535.5:2007](https://webstore.ansi.org/standards/nema/ansiz5352007-1284428)

For the world beyond America's borders, the ANSI Z535 series corresponds to [the ISO 3864 standard](https://en.wikipedia.org/wiki/ISO_3864).

This is _very_ serious business.

## License

The `<under-construction>` Web Component is freely available under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @jgarciac/phocus-ui
Description: A demo on how to create a Phocus table with Ant.
Author: Jesús García Carrasco
Latest version: 1.0.0

# My Demo UI Library

This is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created for an article update for [LogRocket](https://blog.logrocket.com/author/pelumiakintokun/) on how to create a UI component library in React. You can read the article [here](https://blog.logrocket.com/build-component-library-react-typescript/).

Visit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical contents like articles, codesnippets, tech goodies, community projects and more.

## Installation

You can install this demo UI library using npm:

```
npm install @timonwa/demo-ui-library
```

## Usage

To use this demo UI library in your project, import the components you need from the library and use them in your React components.

```jsx
import React from "react";
import { Input, PhocusTable } from "@timonwa/demo-ui-library";

function App() {
  return (
    <div>
      <Input
        id="name"
        disabled={false}
        label="Enter your name"
        message="This field is required"
        error={false}
        success={false}
        onChange={(e) => console.log(e.target.value)}
        placeholder="Enter your name here"
      />
      <PhocusTable
        size="medium"
        primary={true}
        disabled={false}
        text="Click me!"
        onClick={() => alert("PhocusTable clicked!")}
      />
    </div>
  );
}

export default App;
```

## Contributing

This library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.

### Steps

- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes.
- Test the changes using `npm test`.
- Build the library using `npm run build`.
- Commit the changes and push them to your forked repository.
- Publish the package on [npm](https://www.npmjs.com/).
- Install and use the package in your project.

## License

This demo UI library is licensed under the [MIT License](https://github.com/Timonwa/demo-ui-library/blob/main/license).

## Connect

More of my articles can be found in [Timonwa's Notes](https://blog.timonwa.com). Connect with me on Twitter: [@timonwa\_](https://twitter.com/timonwa_)
npm package: @jgarrow/spongebob-case
Description: JavaScript utility function to convert strings to Spongebob case
Author: Janessa Garrow
Latest version: 0.1.2

A JavaScript utility function to convert a string into "Spongebob case".

## Installation

```shell
npm i @jgarrow/spongebob-case
```

## Usage

```js
import { toSpongebobCase } from '@jgarrow/spongebob-case';

const myString = "This is a string.";
const spongebobString = toSpongebobCase(myString);

console.log(spongebobString); // "tHiS iS a StRiNg."
```
npm package: @jgb-solutions/pick-object
Description: A Prisma-like object selection utility.
Author: Jean Gerard Bousiquot
Latest version: 0.0.2

# @jgb-solutions/pick-object

![NPM Version](https://img.shields.io/npm/v/@jgb-solutions/pick-object)
![License](https://img.shields.io/npm/l/@jgb-solutions/pick-object)
![Bundle Size](https://img.shields.io/bundlephobia/minzip/@jgb-solutions/pick-object)
![Build Status](https://github.com/jgb-solutions/pick-object/actions/workflows/ci.yml/badge.svg)

A lightweight, zero-dependency utility for selecting fields from complex objects and arrays, inspired by Prisma's `select` syntax.

It works with deeply nested objects and arrays of objects, providing type-safety and type-inference for the result.

## Installation

```bash
npm install @jgb-solutions/pick-object
# or
bun add @jgb-solutions/pick-object
# or
yarn add @jgb-solutions/pick-object
# or
pnpm add @jgb-solutions/pick-object
```

## Usage

```typescript
import { pick } from '@jgb-solutions/pick-object';

const user = {
  id: 1,
  email: 'user@example.com',
  profile: {
    bio: 'Hello world',
    age: 30,
    ignored: 'this will not be picked'
  },
  posts: [
    { id: 101, title: 'First Post', content: '...' },
    { id: 102, title: 'Second Post', content: '...' }
  ]
};

const selection = pick(user, {
  id: true,
  profile: {
    bio: true
  },
  posts: {
    title: true
  }
});

console.log(selection);
/*
{
  id: 1,
  profile: {
    bio: 'Hello world'
  },
  posts: [
    { title: 'First Post' },
    { title: 'Second Post' }
  ]
}
*/
```

## Features

- **Deep Selection:** Pick fields from nested objects.
- **Array Support:** Automatically maps over arrays to pick fields from each item.
- **Type Safety:** The return type is inferred from your selection.
- **Zero Dependencies:** Tiny footprint.

## License

MIT © [JGB Solutions](https://github.com/jgb-solutions)
npm package: @jgbjs/cli
Description: ```shell npm i -g jgb-cli #全局安装 ```
Latest version: 2.0.0-alpha.2

# jgb-cli

```shell
npm i -g jgb-cli #全局安装
```



## 开始

```shell
jgb build #编译
jgb build --watch #监听
jgb build --no-cache #不使用cache

jgb build --help #具体查看help命令
```



## 命令

* build
* clean
* init
* create
* upgrade
npm package: @jgbjs/miniprogram-api-typings
Description: Type definitions for APIs of Wechat Mini Program in TypeScript
Author: Wechat Miniprogram
Latest version: 3.2.0

# 微信小程序定义文件-改

由于微信声明文件不能扩展namespace，所以做了一些修改能扩展一些微信的方法

> [English version](./README-en.md)

[![已在 DefinitelyTyped 发布](https://img.shields.io/npm/v/@types/wechat-miniprogram?label=%40types)](https://www.npmjs.com/package/@types/wechat-miniprogram)
[![已在 NPM 发布](https://img.shields.io/npm/v/miniprogram-api-typings.svg?style=flat)](https://www.npmjs.com/package/miniprogram-api-typings)
[![MIT 协议](https://img.shields.io/github/license/wechat-miniprogram/api-typings.svg)](https://github.com/wechat-miniprogram/api-typings)
[![Travis CI 测试状况](https://travis-ci.org/wechat-miniprogram/api-typings.svg?branch=master)](https://travis-ci.org/wechat-miniprogram/api-typings)

微信小程序 API 的 TypeScript 类型定义文件

## 安装

### 通过 DefinitelyTyped
```bash
npm install @types/wechat-miniprogram
```

或：

### 通过独立 npm 包
```bash
npm install miniprogram-api-typings
```
安装后手动导入：
- `import 'miniprogram-api-typings';`

或者在 ts 配置中指定：
- 在 `tsconfig.json` 中指定 `types: ["miniprogram-api-typings"]`

或者通过 [三斜杠指令](https://www.tslang.cn/docs/handbook/triple-slash-directives.html) 引用：
- `/// <reference path="node_modules/miniprogram-api-typings/index.d.ts" />`

## 更新日志

参考 [CHANGELOG.md](https://github.com/wechat-miniprogram/api-typings/blob/master/CHANGELOG.md)

## 贡献

API 的定义文件（`lib.wx.api.d.ts`）是随 [文档](https://developers.weixin.qq.com/miniprogram/dev/index.html) 一起自动生成的，如果发现了 API 接口的定义错误，请提一个 issue 给我们，关于 API 的 PR 将 __不会__ 被接受。

如果有针对页面（`Page`）、自定义组件（`Component`）等接口的 bug 和建议，欢迎 PR 或提一个 issue 给我们。非常感谢！

### 贡献者

- [Baran](https://github.com/baranwang)
- [MinLiang Zeng](https://github.com/zenml/)
- [Garfield Lee](https://github.com/Garfield550)
- [Mr.Hope](https://github.com/Mister-Hope)

### 测试

本定义文件使用 [`tsd`](https://github.com/SamVerschueren/tsd) 进行测试，所有的测试样例放在 `test` 目录下。

想执行测试的话，克隆本项目并完成 `npm install --save-dev` 后执行 `npm test` 即可。

如果您发现了不能通过自动化测试的测试样例，可以提交 PR 或者提一个 issue。当然，能通过自动化测试的强有力的测试样例也是欢迎的。
npm package: @jgbjs/plugin-babel
Description: 使用babel7做编译
Latest version: 2.0.0-alpha.3

# jgb-plugin-babel

使用babel7做编译

## 使用说明

当当前项目中没有配置.babelrc 时
默认配置为

```json
{
  "plugins": ["@babel/env"],
  "ignore": ["node_modules"]
}
```
npm package: @jgbjs/plugin-json
Description: 支持 json 编译的插件，会自动查找.json 中符合小程序引用规则的资源，例如 app.js 中的 pages 的相关四个文件、分包、 usingComponents 中的组件等资源
Latest version: 2.0.0-alpha.2

# jgb-plugin-json

支持 json 编译的插件，会自动查找.json 中符合小程序引用规则的资源，例如 app.js 中的 pages 的相关四个文件、分包、
usingComponents 中的组件等资源


## hook

|     hookName      |                 hooktime                  | emitdata |
| :---------------: | :---------------------------------------: | :------: |
| collect-app-json  |           当收集app.json依赖时            |   表1    |
| collect-page-json | 当收集其他包含usingComponents字段的json时 |   表2    |

|   字段名    |    值    |        描述        |
| :---------: | :------: | :----------------: |
| dependences |          | 依赖项:Set<string> |
|   appJson   | app.json |        json        |
|     ctx     |          |     JsonAsset      |

|   字段名    |    值     |        描述        |
| :---------: | :-------: | :----------------: |
| dependences |           | 依赖项:Set<string> |
|  pageJson   | page.json |        json        |
|     ctx     |           |     JsonAsset      |
npm package: @jgbjs/plugin-less
Description: 处理less
Latest version: 2.0.0-alpha.2

# jgb-plugin-less

处理less

## 默认支持的文件类型

- .less

## 注意事项

因为less编译css时

```less
@import 'xxx.css' 
/**
    默认是将xxx.css直接编译到当前文件中
    所以要显示指定 @import (css) 'xxx.css'
    详见 http://lesscss.cn/features/#import-options
    这里我做了优化默认将 @import 'xxx.css' =>  @import (css) 'xxx.css'
    以达到资源复用的目的
*/
```
npm package: @jgbjs/preset-aliapp
Description: 微信小程序预设值
Latest version: 2.0.0-alpha.3

# jgb-preset-weapp

微信小程序预设值

## 依赖插件

- jgb-plugin-css
- jgb-plugin-json
- jgb-plugin-html
- jgb-plugin-babel

## 入口文件

- app.js
- app.json
- app.wxss

## 默认支持编译的文件扩展名

- .js
- .json
- .css
- .wxss
- .html
- .wxml
npm package: @jgbjs/preset-weapp
Description: 微信小程序预设值
Latest version: 2.0.0-alpha.3

# jgb-preset-weapp

微信小程序预设值

## 依赖插件

- jgb-plugin-css
- jgb-plugin-json
- jgb-plugin-html
- jgb-plugin-babel

## 入口文件

- app.js
- app.json
- app.wxss

## 默认支持编译的文件类型

- .js
- .json
- .css
- .wxss
- .html
- .wxml
npm package: @jgchk/trpc-svelte-query
Description: tRPC Svelte lib
Author: jgchk
Latest version: 1.3.4

<p align="center">
  <a href="https://trpc.io/"><img src="https://assets.trpc.io/icons/svgs/blue-bg-rounded.svg" alt="tRPC" height="75"/></a>
</p>

<h3 align="center">tRPC</h3>

<p align="center">
  <strong>End-to-end typesafe APIs made easy</strong>
</p>

<p align="center">
  <img src="https://assets.trpc.io/www/v10/v10-dark-landscape.gif" alt="Demo" />
</p>

# `@jgchk/trpc-svelte-query`

> A tRPC wrapper around svelte-query.

## Installation

```bash
# npm
npm install @jgchk/trpc-svelte-query @tanstack/svelte-query

# Yarn
yarn add @jgchk/trpc-svelte-query @tanstack/svelte-query

# pnpm
pnpm add @jgchk/trpc-svelte-query @tanstack/svelte-query
```

## Basic Example

Set up tRPC in `lib/trpc.ts`

```ts
import { createTRPCSvelte } from '@trpc/svelte-query'
import type { AppRouter } from '../server/routers/_app'

export const { createClient, setContextClient, getContextClient } = createTRPCSvelte<AppRouter>()
```

Set up a tRPC client in `routes/+layout.ts`

```ts
import { browser, dev } from '$app/environment'
import { QueryClient } from '@tanstack/svelte-query'
import { httpBatchLink, loggerLink } from '@trpc/client'
import { createClient } from '$lib/trpc'
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch }) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        enabled: browser,
      },
    },
  })

  const trpc = createClient({
    queryClient,
    fetch,
    links: [
      loggerLink({ enabled: () => dev }),
      httpBatchLink({
        url: '/api/trpc',
        fetch,
      }),
    ],
  })

  return { trpc }
}
```

Then provide the client to the rest of your app via context in `routes/+layout.svelte`

```svelte
<script lang="ts">
  import { QueryClientProvider } from '@tanstack/svelte-query'
  import { setContextClient } from '$lib/trpc'
  import type { LayoutData } from './$types'

  export let data: LayoutData

  setContextClient(data.trpc)
</script>

<QueryClientProvider client={data.trpc.queryClient}>
  <slot />
</QueryClientProvider>
```

Now in any page or component, you can query your API using the client you created

```svelte
<script lang="ts">
  import { getContextClient } from '$lib/trpc'

  const trpc = getContextClient()
  const query = trpc.greeting.query({ name: 'tRPC' });
</script>

{#if $query.isSuccess}
  <p>{$query.data.greeting}</p>
{:else if $query.isError}
  <p>{$query.error.message}</p>
{:else}
  <p>Loading...</p>
{/if}
```

## SSR

You can prefetch queries on the server, which:

1. Renders their data during SSR
2. Prepopulates the client-side cache

In any `+page.ts` file, just call prefetchQuery

```ts
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ parent }) => {
  const { trpc } = await parent()
  await trpc.ping.prefetchQuery()
}
```
npm package: @jgensler8_2/serum-swap
Description: Client for swapping on the Serum DEX
Latest version: 0.0.1

# Serum Swap

[![Build Status](https://travis-ci.com/project-serum/serum-ts.svg?branch=master)](https://travis-ci.com/project-serum/serum-ts)
[![npm (scoped)](https://img.shields.io/npm/v/@project-serum/swap)](https://www.npmjs.com/package/@project-serum/swap)
[![Discord Chat](https://img.shields.io/discord/739225212658122886?color=blueviolet)](https://discord.com/channels/739225212658122886)
[![Documentation](https://img.shields.io/badge/typedoc-documentation-blue)](https://project-serum.github.io/serum-ts/swap/classes/swap.html)
[![License](https://img.shields.io/github/license/project-serum/serum-dex?color=blue)](https://opensource.org/licenses/Apache-2.0)

Client library for swapping directly on the serum orderbook.
The Solana program can be found [here](https://github.com/project-serum/swap).

## Installation

Using npm:

```
npm install @solana/web3.js @project-serum/swap
```

Using yarn:

```
yarn add @solana/web3.js @project-serum/swap
```

## API Reference

[API Reference](https://project-serum.github.io/serum-ts/swap/classes/swap.html).
npm package: @jgertig/react-native-toast-message
Description: Toast message component for React Native
Author: Calin Tamas
Latest version: 2.1.5

# react-native-toast-message

[![npm version](https://img.shields.io/npm/v/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
[![npm downloads](https://img.shields.io/npm/dw/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
[![Build](https://github.com/calintamas/react-native-toast-message/workflows/tests/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions?query=workflow%3Atests)
[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg?branch=master)](https://coveralls.io/github/calintamas/react-native-toast-message?branch=main)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Animated toast message component for React Native.

![toast gif](./docs/toast.gif)

## Features

- 🚀 Imperative API
- 📦 Very lightweight (~40 kB)
- ⌨️ Keyboard-aware
- 🎨 Customizable layouts
- 🔧 Flexible config

## Documentation

> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](./CHANGELOG.md#200).

- [Quick start](./docs/quick-start.md)
- [API](./docs/api.md)
- [Create custom layouts](./docs/custom-layouts.md)
- FAQ
  - [How to show the Toast inside a Modal?](./docs/modal-usage.md)
  - [How to render the Toast when using a Navigation library?](./docs/navigation-usage.md)
  - [How to mock the library for testing with jest?](./docs/jest-testing.md)

## License

MIT
npm package: @jgertig/react-native-webview-crypto
Description: [![npm](https://img.shields.io/npm/v/react-native-webview-crypto?style=flat-square)](https://www.npmjs.com/package/react-native-webview-crypto)
Latest version: 0.0.26

# react-native-webview-crypto

[![npm](https://img.shields.io/npm/v/react-native-webview-crypto?style=flat-square)](https://www.npmjs.com/package/react-native-webview-crypto)

Working version based on /saulshanabrook/react-native-webview-crypto and PR https://github.com/webview-crypto/react-native-webview-crypto/pull/9

This brings `window.crypto.subtle` to your React Native application. It does this by communicating with a hidden WebView, which performs the actual computation.

Refer to the [`webview-crypto`](https://github.com/webview-crypto/webview-crypto) repo for most of the code and some caveats.

## Installation

```sh
npm install --save react-native-webview react-native-webview-crypto
react-native link
```

### known issues

if you use react-native-crypto and get warnings about cyclic require make sure to import it before the bridge

```
import 'react-native-crypto'
import WebviewCrypto from 'react-native-webview-crypto'
```

### getRandomValues

for complete compatability with webcrypto (window.crypto.getRandomValues) you can install react-native-crytpo or react-native-get-random-values

## Usage

Rendering the `PolyfillCrypto` will start up a WebView to transparently proxy all the crypto calls to.

```javascript
import React, { Component } from 'react'
import { View } from 'react-native'

import App from './app'

import PolyfillCrypto from 'react-native-webview-crypto'

class TopLevelComponent extends Component {
  render() {
    return (
      <View>
        <PolyfillCrypto />
        <App />
      </View>
    )
  }
}

AppRegistry.registerComponent('WhateverName', () => TopLevelComponent)
```

Now, in any of your code, you can access `window.crypto.subtle`, just like you would in a browser.

[Example repo](https://github.com/gooddollar/gun-webcrypto-react-native)
There is also an [example repo](https://github.com/webview-crypto/react-native-webview-crypto-example) which runs some example crypto using this library.

_This project was funded by [Burke Software and Consulting LLC](http://burkesoftware.com/) for [passit](http://passit.io/)._
npm package: @jgg0sbp66/koishi-plugin-bash
Description: bash env
Latest version: 0.0.6

# @jgg0sbp66/koishi-plugin-bash

[![npm](https://img.shields.io/npm/v/@jgg0sbp66/koishi-plugin-bash?style=flat-square)](https://www.npmjs.com/package/@jgg0sbp66/koishi-plugin-bash)

跨平台终端命令执行插件，支持在 Windows/Linux/macOS 上运行各种 shell 命令。

## 功能特性

- 🌐 **跨平台支持**：自动检测并适配 Windows、Linux、macOS
- 🐚 **多 Shell 支持**：支持 cmd、PowerShell、bash、zsh、sh、fish 等
- ⚙️ **灵活配置**：可自定义 shell、超时时间、输出长度等
- 🔒 **权限控制**：可限制允许使用的用户列表
- ⏱️ **超时保护**：防止命令长时间运行

## 支持的环境

### Windows
- CMD (cmd.exe)
- PowerShell (powershell.exe)
- PowerShell Core (pwsh.exe)

### Linux
- Bash (/bin/bash)
- Zsh (/bin/zsh)
- Sh (/bin/sh)
- Fish (/usr/bin/fish)

### macOS
- Zsh (默认)
- Bash
- 其他 Unix shell

## 配置项

| 配置项 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| shell | string | 自动检测 | 指定使用的 shell 路径 |
| timeout | number | 30000 | 命令执行超时时间（毫秒）|
| maxOutputLength | number | 4000 | 最大输出长度（字符数）|
| allowedUsers | string[] | [] | 允许使用的用户 ID 列表（空数组表示所有人）|
| workingDirectory | string | '' | 工作目录（留空使用当前目录）|

## 使用方法

### 基本命令

#### exec - 执行终端命令
```
exec <command>
```

别名：`shell`、`run`

示例：
- `exec echo "Hello World"`
- `exec ls -la`（Linux/macOS）
- `exec dir`（Windows）
- `exec npm --version`

#### ls - 列出目录内容
```
ls [path]
```

示例：
- `ls` - 列出当前目录
- `ls /home` - 列出指定目录

#### pwd - 显示当前工作目录
```
pwd
```

#### sysinfo - 获取系统信息
```
sysinfo
```

## 配置示例

### 默认配置（自动检测）
```yaml
plugins:
  bash:
    timeout: 30000
    maxOutputLength: 4000
```

### Windows PowerShell
```yaml
plugins:
  bash:
    shell: powershell.exe
    timeout: 60000
    maxOutputLength: 5000
```

### Linux Bash
```yaml
plugins:
  bash:
    shell: /bin/bash
    workingDirectory: /home/user
    allowedUsers:
      - "123456789"  # 仅允许特定用户
```

### macOS Zsh
```yaml
plugins:
  bash:
    shell: /bin/zsh
    timeout: 45000
```

## 安全提示

⚠️ **重要安全提示**：

1. 此插件允许执行系统命令，具有较高的安全风险
2. 强烈建议配置 `allowedUsers` 限制使用权限
3. 不要在公共机器人中启用此插件
4. 谨慎执行来源不明的命令
5. 建议设置合理的 `timeout` 防止资源占用

## 使用场景

- 🔧 运维管理：执行系统维护命令
- 📊 状态查询：查看系统信息、进程状态
- 🗂️ 文件管理：浏览目录、查看文件
- 🚀 快速测试：测试脚本、验证环境
- 🔄 自动化任务：集成系统命令到聊天流程

## 常见问题

### Q: 如何知道当前使用的是哪个 shell？
A: 使用 `sysinfo` 命令可以查看当前配置的 shell。

### Q: 命令执行超时怎么办？
A: 增加 `timeout` 配置值，或者优化命令减少执行时间。

### Q: Windows 下某些命令不工作？
A: 确保使用正确的 Windows 命令语法，或切换到 PowerShell。

### Q: 如何限制只有管理员可以使用？
A: 在 `allowedUsers` 中添加管理员的用户 ID。

## License

MIT