open-index/open-npm huggingface dataset:
npm package: @fransvilhelm/changeset-changelog
Description: Changeset changelog generator
Author: Adam Bergman
Latest version: 1.1.1

# @fransvilhelm/changeset-changelog

This is a package very similar to
[`@changeset/changelog-github`](https://github.com/atlassian/changesets/tree/master/packages/changelog-github)
but with tweaks on how each release line is formatted. The goal is to make the
changelog inputs look more like they do on the
[react repository](https://github.com/facebook/react/blob/master/CHANGELOG.md).

While `@changeset/changelog-github` would format a changelog entry something
like this:

```
- [commitsha] #1 Thanks @adambrgmn! - [summary]
```

… this package puts the commit/pr and user behind the summary:

```
- [summary] (by @adambrgmn in #1)
```

See [this projects changelog](CHANGELOG.md) for more detailed examples.

## Installation

```sh
npm install --save-dev @fransvilhelm/changeset-changelog
# or with yarn
yarn add --dev @fransvilhelm/changeset-changelog
```

## Setup

The configuration is done in your projects
[`.changeset/config.json`](.changeset/config.json):

```js
{
  "changelog": [
    "@fransvilhelm/changeset-changelog",
    { "repo": "user/repo" }
  ],
  // ... rest of config
}
```

Also note that for this changelog generator to work properly you need to set the
environment variable `GITHUB_TOKEN`. This can easily be done with
[changesets's official GitHub action](https://github.com/changesets/action):

```yml
- name: Create Release Pull Request or Publish to npm
  id: changesets
  uses: changesets/action@master
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

If you use this together with some other CI service make sure to set the token
according to that vendors recommended methods.

## License

[MIT](LICENSE)
npm package: @fransvilhelm/feather
Description: Feather Icons as React components
Author: Adam Bergman
Latest version: 2.0.0

# Feather Icons as React components

> [Feather icons](https://feathericons.com/) as opinionated React components.

- [Installation](#installation)
- [Usage](#usage)
  - [Setting the color](#setting-the-color)
  - [Text alignment](#text-alignment)
- [License](#license)

## Installation

Use your package manager of choice:

```sh
# npm
npm i @fransvilhelm/feather
# yarn
yarn add @fransvilhelm/feather
```

The package will now be available to import and use in any of you react
components.

## Usage

All icons are created individually, unrelated to each other. And all icons found
on [Feather](https://feathericons.com/) are exported as named exports. They
names are transformed to pascal case: `align-center -> AlignCenter`.

```jsx
import { Trash } from '@fransvilhelm/feather';

export const RemoveButton = () => {
  return (
    <button>
      <Trash baseline /> Remove item
    </button>
  );
};
```

Since all icons are named exports and unrelated to eachother the library is
easily tree-shaken. This means that if your bundler supports tree-shaking only
the icons you actually use will be included in your final bundle.

### Setting the color

The icons uses `currentColor` as the color of the strokes. That means the color
will be inherited from the wrapping element:

```jsx
<div style={{ color: 'rebeccapurple' }}>
  <ChevronRight />
</div>
```

### Text alignment

The icons only accept one prop; `baseline`. When set it will align the icon to
the baseline of your text. This makes it very easy to add the icons as inline in
text, easily replacing old font icons. If you are aligning with flex and
`align-items: center` you should not set `baseline` on the icons.

## License

[MIT](https://oss.ninja/mit/adambrgmn)
npm package: @fransvilhelm/hooks
Description: A set of reusable React hooks
Author: Adam Bergman
Latest version: 3.1.4

# @fransvilhelm/hooks

A set of reusable hooks to use inside react components.

## Installation

The package can be installed using [npm](https://www.npmjs.com) or
[yarn](https://yarnpkg.com) or any other node package manager.

```shell
npm install @fransvilhelm/hooks
# or with yarn
yarn add @fransvilhelm/hooks
```

**NOTE:** This packages uses
[React Hooks](https://reactjs.org/docs/hooks-intro.html) and those where
releases in `react@16.8.0`. Therefore you must use a version of react that's
greater than that.

## Usage

This package contains a set of named exports and no default export is provided.

```jsx
// Use named imports to import a separate hook:
import { useInput, useCheckbox } from '@fransvilhelm/hooks';
// Or import everything:
import * as hooks from '@fransvilhelm/hooks';
```

_This package is distributed as an ESM package and if you use a modern
javascript bundler (eg. Webpack, Rollup or Parcel) the source code will be
tree-shaked and only the hooks you use will be included in your final bundle._

## Typescript

This package was originally written in Typescript and types are included by
default.

## Contribute

Contributions are more than welcome! But I also urge you to create your own
versions. These hooks are hooks that I've found that I use a lot and therefore I
started to collect them inside a repo so that I can easily use them in my
projects. You should do the same!

## License

MIT
npm package: @fransvilhelm/mjml-sendgrid-toolkit
Description: ## Installation
Author: Adam Bergman
Latest version: 0.2.0

# MJML Sendgrid Toolkit

## Installation

```shell
# YARN
yarn add -D @fransvilhelm/mjml-sendgrid-toolkit mjml mjml-core mjml-parser-xml mjml-validator eslint prettier

# NPM
npm i -D @fransvilhelm/mjml-sendgrid-toolkit mjml mjml-core mjml-parser-xml mjml-validator eslint prettier
```
npm package: @fransvilhelm/react-breadcrumbs
Description: A small library to manage breadcrumbs in a React app.
Author: Adam Bergman
Latest version: 2.0.0

# React Breadcrumbs

A small library to manage breadcrumbs in a React app.

## Installation

```sh
npm i @fransvilhelm/react-breadcrumbs
# or
yarn add @fransvilhelm/react-breadcrumbs
```

## Usage

The way this works is that you place a crumb in every place along the trail you
are walking. This is especially powerful in apps that uses sub routes with for
example `react-router-dom` or `@reach/router`.

In every component that should leave a trail:

```jsx
import React from 'react';
import { useParams, useRouteMatch } from 'react-router-dom';
import { useBreadcrumb } from '@fransvilhelm/react-breadcrumbs';

export const Trail = () => {
  const { label } = useParams();
  const { url } = useRouteMatch();
  useBreadcrumb({ label, url });

  return <div>{label}</div>;
};
```

And then anywhere else:

```jsx
import React from 'react';
import { Link } from 'react-router-dom';
import { useBreadcrumbs } from '@frasnvilhelm/react-breadcrumbs';

export const Breadcrumbs = () => {
  const breadcrumbs = useBreadcrumbs();

  return (
    <ul>
      {breadcrumbs.map(({ label, url, id }) => (
        <li key={id}>
          <Link to={url}>{label}</Link>
        </li>
      ))}
    </ul>
  );
};
```

And last but not least, wrap it all in `BreadcrumbsProvider`:

```jsx
import React from 'react';
import { BreadcrumbsProvider } from '@fransvilhel/react-breadcrumbs';

export const App = () => {
  return (
    <BreadcrumbsProvider>
      <Breadcrumbs />
      <Trail />
    </BreadcrumbsProvider>
  );
};
```
npm package: @frantche/plugin-graphql
Description: Vuex-ORM persistence plugin to sync the store against a GraphQL API.
Author: Benjamin Klein
Latest version: 1.0.0-rc.42

<p align="center">
  <img width="192" src="https://github.com/vuex-orm/vuex-orm/blob/master/logo-vuex-orm.png" alt="Vuex ORM">
</p>

<h1 align="center">Vuex ORM Plugin: GraphQL</h1>

<h3 align="center">This project is powered by <a href="https://www.i22.de/" target="_blank">i22 Digitalagentur GmbH</a></h3>

<p align="center">
  <a href="https://travis-ci.org/vuex-orm/plugin-graphql">
    <img src="https://travis-ci.org/vuex-orm/plugin-graphql.svg?branch=master" alt="Travis CI">
  </a>
  <a href="https://standardjs.com">
    <img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide">
  </a>
  <a href="https://github.com/vuex-orm/plugin-graphql/blob/master/LICENSE.md">
    <img src="https://img.shields.io/npm/l/@vuex-orm/core.svg" alt="License">
  </a>
</p>

Vuex-ORM-GraphQL is a plugin for the amazing [Vuex-ORM](https://github.com/vuex-orm/vuex-orm), which brings
Object-Relational Mapping access to the Vuex Store. Vuex-ORM-GraphQL enhances Vuex-ORM to let you sync your Vuex state
via the Vuex-ORM models with your server via a [GraphQL API](http://graphql.org/).

The plugin will automatically generate GraphQL queries and mutations based on your model definitions and by
reading your and GraphQL schema from your server. Thus it hides the specifics of Network Communication, GraphQL,
Caching, De- and Serialization of your Data and so on from the developer. Getting a record of a model from the server
is as easy as calling `Product.fetch()`. This allows you to write sophisticated Single-Page Applications fast and
efficient without worrying about GraphQL.


## Documentation

You can find the complete documentation at https://vuex-orm.github.io/plugin-graphql/.


## Questions & Discussions

Join us on our [Slack Channel](https://join.slack.com/t/vuex-orm/shared_invite/enQtNDQ0NjE3NTgyOTY2LTc1YTI2N2FjMGRlNGNmMzBkMGZlMmYxOTgzYzkzZDM2OTQ3OGExZDRkN2FmMGQ1MGJlOWM1NjU0MmRiN2VhYzQ) for any questions and discussions.

While there is the Slack Channel, do not hesitate to open an issue for any question you might have.
We're always more than happy to hear any feedback, and we don't care what kind of form they are.


## Donations

Support this project by sending a small donation to the developer.

[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MF6ST3SXPC4G8)


## License

Vuex ORM GraphQL is open-sourced software licensed under the [MIT license](https://github.com/phortx/plugin-graphql/blob/master/LICENSE.md).
npm package: @frantche/vue-plotly
Description: <p align="center"><img width="140"src="https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/master/example/assets/logo.png"></p>
Latest version: 1.0.2


<p align="center"><img width="140"src="https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/master/example/assets/logo.png"></p>

# vue-plotly
[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/issues)
[![CircleCI](https://circleci.com/gh/David-Desmaisons/vue-plotly.svg?style=shield)](https://circleci.com/gh/David-Desmaisons/vue-plotly)
[![codecov](https://codecov.io/gh/David-Desmaisons/vue-plotly/branch/master/graph/badge.svg)](https://codecov.io/gh/David-Desmaisons/vue-plotly)
[![Npm version](https://img.shields.io/npm/v/vue-plotly.svg)](https://www.npmjs.com/package/vue-plotly)
[![MIT License](https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE)

<h2>Thin vue wrapper for <a
              href="https://plot.ly/javascript/"
              target="_blank"
            >plotly.js</a></h2>
<span>It provides:</span>
<ul>
  <li>all plotly.js methods and events</li>
  <li>data reactivity</li>
  <li>Redraw on resizing</li>
</ul>

![example](./example/assets/demo.gif)

## Live example
https://david-desmaisons.github.io/vue-plotly/

## Usage
```HTML
<Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>
```
```javascript
import { Plotly } from 'vue-plotly'

export default {
  components: {
    Plotly
  },
  data:{
    data:[{
      x: [1,2,3,4],
      y: [10,15,13,17],
      type:"scatter"
    }],
    layout:{
      title: "My graph"
    }
  }
}
```
## API

#### Props 

- `data` ***Array*** (*optional*) 

  [Data](https://plot.ly/javascript/reference/) to be displayed

- `layout` ***Object*** (*optional*) 

  Graphic [layout](https://plot.ly/javascript/reference/#layout)

- `id` ***String*** (*optional*) 

  Id of the root HTML element of the component.

- Others:

  Plotly component implements the [transparent wrapper pattern](https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html):<br>All other props will be passed as plotly graphic [option](https://plot.ly/javascript/configuration-options/).

## Installation
```
npm install vue-plotly
```

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Run your unit tests
```
npm run test:unit
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @franziz/database-service
Description: A wrapper for MongoDB database service.
Author: Frans Siswanto
Latest version: 2.1.1

# Database Service

MongoDB Database Wrapper. This is not ORM. This is just to warp on how we can connect to the database. We changed on how the database is being connected. We don't use static anymore. We use class instead.

## How to Use

You need to initialise first

```
import DatabaseService from "@franziz/database-service";

const databaseService = new DatabaseService({
  connectionString: process.env.DATABASE_URL,
  databaseName: process.env.DATABASE_NAME
});

const db = await databaseService.getInstance();

```
npm package: @franziz/headers-middleware
Description: This middleware will check if the header available or not.
Author: Frans Siswanto
Latest version: 1.0.0

# Must Have Headers

A simple ExpressJS middleware to check if the header is available or not.

## How to Use

Please refer to below reference on how to use the package

```js
import MustHaveHeaders from ".";
import express from "express";

const app = express();
app.use(MustHaveHeaders.handle(["x-consumer-id"]));
app.listen(3000, () => console.log("Listening to port 3000"));
```
npm package: @franziz/morgan-middleware
Description: This uses @franziz/logger to log morgan.
Author: Frans Siswanto
Latest version: 1.0.1

# Morgan Middleware
This is middleware to capture morgan to @franziz/logger

## How to Use
Use import the middlware and call `handle()` function. For example
```
import express from "express";
import MorganMiddleware from "@franziz/morgan-middleware";

const app = express();
app.use(MorganMiddlware.handle());
app.listen(3000, () => console.log("Connected to port 3000"));
```
npm package: @franzmoca/opencode-lombok
Description: OpenCode plugin that adds Lombok support for JDTLS
Latest version: 0.1.4

# opencode-lombok

`opencode-lombok` is an OpenCode plugin that adds Lombok support to Java projects.

This plugin was inspired by [opencode PR #8031](https://github.com/anomalyco/opencode/pull/8031).

It automatically:

- detects Lombok usage in `pom.xml`, `build.gradle`, and `build.gradle.kts`
- downloads `lombok.jar` when needed
- configures `JAVA_TOOL_OPTIONS` with `-javaagent:<path-to-lombok.jar>` so JVM-based LSP servers (including JDTLS) pick it up

If `JAVA_TOOL_OPTIONS` already exists, the plugin appends the Lombok javaagent and avoids duplicates.

## Install

Add the plugin to your OpenCode config:

```json
{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["@franzmoca/opencode-lombok"]
}
```

You can also pin a specific version:

```json
{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["@franzmoca/opencode-lombok@0.1.2"]
}
```

OpenCode will install npm plugins automatically at startup.

## Behavior

- If `lsp` is globally disabled (`"lsp": false`), the plugin does nothing.
- If `jdtls` is explicitly disabled (`"lsp": { "jdtls": { "disabled": true } }`), the plugin does nothing.
- If `OPENCODE_DISABLE_LSP_DOWNLOAD=true`, the plugin will not download `lombok.jar`.

## Development

```bash
bun install
bun run typecheck
bun test
bun run build
```

## Publish to npm

```bash
npm login
npm publish --access public
```

Or use the GitHub Actions workflow:

- `CI` runs typecheck, tests, and build on push/PR.
- `Publish` runs on `main` when `package.json` changes version, publishes to npm, and creates a GitHub release/tag (`v<version>`).

### Required GitHub secret

- `NPM_TOKEN`: npm automation token with publish rights for `@franzmoca/opencode-lombok`

## License

MIT
npm package: @franzmoro-os/pusher-capacitor-plugin
Description: Enables Pusher Beams to communicate with JS thread on Capacitor app.
Latest version: 0.0.0-alpha.1

# pusher-capacitor-plugin

Enables Pusher Beams to commuincate with JS thread on Capacitor app.

## Install

```bash
yarn add pusher-capacitor-plugin@file:platforms/emp/libs/pusher-capacitor-plugin
npx cap sync
```

## API

<docgen-index>

* [`authenticateUser(...)`](#authenticateuser)
* [`logoutUser()`](#logoutuser)
* [Interfaces](#interfaces)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### authenticateUser(...)

```typescript
authenticateUser(options: AuthenticatePusherUserParams) => Promise<void>
```

| Param         | Type                                                                                  |
| ------------- | ------------------------------------------------------------------------------------- |
| **`options`** | <code><a href="#authenticatepusheruserparams">AuthenticatePusherUserParams</a></code> |

--------------------


### logoutUser()

```typescript
logoutUser() => Promise<void>
```

--------------------


### Interfaces


#### AuthenticatePusherUserParams

| Prop            | Type                |
| --------------- | ------------------- |
| **`authUrl`**   | <code>string</code> |
| **`authToken`** | <code>string</code> |
| **`userId`**    | <code>string</code> |

</docgen-api>
npm package: @franzparks/number-formatter
Description: A number formatter
Author: Francis Phiri
Latest version: 0.1.0

Number Formatter
=========

A small library that adds commas to numbers

## Installation

  `npm install @franzparks/number-formatter`

## Usage

    var numFormatter = require('@franzparks/number-formatter');

    var formattedNum = numFormatter(35666);
  
  
  Output should be `35,666`


## Tests

  `npm test`

## Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
npm package: @frap129/oc-buddy
Description: OpenCode TUI plugin that renders a virtual companion sprite in the sidebar
Author: Joe Maples
Latest version: 0.1.0

# oc-buddy

OpenCode TUI plugin that renders a virtual companion (sprite) in the sidebar. Hatch companions with randomized species, rarity, and stats — optionally powered by LLM-generated names and reactions.

![oc-buddy showcase](assets/showcase.png)

## Install

```bash
opencode plugin @frap129/oc-buddy@latest --global
```

Or add it manually to `~/.config/opencode/tui.json`:

```json
{
  "plugin": ["@frap129/oc-buddy@latest"]
}
```

## License

[MIT](LICENSE)
npm package: @frappefinance-libs/eslint-config-frappe
Description: Eslint config for FrappeFinance
Author: frappechef
Latest version: 1.0.0

# eslint-config-frappe

Frappe Finance ESLint config with:

- Airbnb config
- TypeScript
- Prettier

## npm

https://www.npmjs.com/package/@frappefinance-libs/eslint-config-frappe

## Usage

```
npx install-peerdeps --dev @frappefinance-libs/eslint-config-frappe
```

Add `"extends": "@frappefinance-libs/eslint-config-frappe"` to your ESLint config file.
npm package: @frappefinance-libs/uikit
Description: Set of UI components for Frappe projects
Author: frappechef
Latest version: 1.0.0

#  Frappe Finance UIkit

[![Version](https://img.shields.io/npm/v/@frappefinance-libs/uikit)](https://www.npmjs.com/package/@frappefinance-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@frappefinance-libs/uikit)](https://www.npmjs.com/package/@frappefinance-libs/uikit)

Frappe UIkit is a set of React components and hooks used to build pages on Frappe's apps.

It also contains a theme file for dark and light mode.

## Install

`yarn add @frappefinance-libs/uikit`

## npm

https://www.npmjs.com/package/@frappefinance-libs/uikit

## Setup

### Theme

Before using Frappe UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@frappefinance-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@frappefinance-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://frappefinance.github.io/frappe-uikit/)