open-index/open-npm huggingface dataset:
npm package: @jhanxtreme/angular2-query-builder
Description: A modernized Angular 2+ query builder based on jquery QueryBuilder
Latest version: 0.0.7

# Angular-QueryBuilder
This is the enhanced version from the original [angular2-query-builder] that supports group options.

# Getting Started

## Install

- Angular 9, use 0.6.0
- Angular 8, use 0.5.1
- Angular 6-7, use 0.4.2
- Angular 4-5, use 0.3.2

`npm install @jhanxtreme/angular2-query-builder`

## Basic Usage

##### `app.module.ts`
```javascript
import { QueryBuilderModule } from "angular2-query-builder";
import { AppComponent } from "./app.component"

@NgModule(imports: [
  ...,
  QueryBuilderModule,
  IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+
])
export class AppModule { }
```

##### `app.component.html`
```html
...
<query-builder [groupFieldsConfig]="groupConfig" [(ngModel)]="query" [config]="config"></query-builder>
...
```
##### `app.component.ts`
```javascript
import { QueryBuilderConfig, GroupFieldsConfig } from 'angular2-query-builder';

export class AppComponent {
  query = {
    condition: 'and',
    rules: [
      {field: 'age', operator: '<=', value: 'Bob'},
      {field: 'gender', operator: '>=', value: 'm'}
    ]
  };
  
  config: QueryBuilderConfig = {
    fields: {
      age: {name: 'Age', type: 'number'},
      gender: {
        name: 'Gender',
        type: 'category',
        options: [
          {name: 'Male', value: 'm'},
          {name: 'Female', value: 'f'}
        ]
      }
    }
  }
  
  groupConfig: Array<GroupFieldsConfig> = [
    {
      label: "Group 1",
      fields: ["Gender", "Name", "Age"]
    },
    {
      label: "Group 2",
      fields: ["Notes", "Educated","Birthday", "School", "Occupation"]
    }
  ]

}
```

# Credits to
[zebzhao]https://github.com/zebzhao
npm package: @jhao413/vue-audio-player
Description: A Vue out of the box audio player component(一款Vue开箱即用的音频播放器组件)
Author: jhao413
Latest version: 1.0.8

# vue-audio-player

> Vue音乐播放器组件

[在线浏览](https://codesandbox.io/s/jhao413-vue-audio-player-xnuxft)

## 示例图
![](https://jhao413.oss-cn-beijing.aliyuncs.com/blog/20221109125827.png)
![](https://jhao413.oss-cn-beijing.aliyuncs.com/blog/20221109130003.png)

## 组件功能
* 基础音乐播放暂停切歌
* 显示音乐缓存进度
* 显示音乐列表
* 进度条拖动
* 音量控制

## 安装
### NPM

``` bash
npm i @jhao413/vue-audio-player
```

## 使用
> main.js

```js
import audioPlayer from "@jhao413/vue-audio-player";

Vue.use(audioPlayer);
```
> 组件中使用
> 
> music-list为必填参数

```html
<template>
  <div id="app">
    <audio-player :music-list="list"></audio-player>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      list: [
        {
          name: '可惜没如果',
          url: 'http://xxx.mp3',
          img:
            'http://p3.music.126.net/QXZRckFTN5375vdQSyG0jA==/109951166919095160.jpg?param=300x300',
          singer: '林俊杰',
        },
      ],
    }
  },
}
</script>

```
# License
vue-audio-player is open source and released under the MIT License.
npm package: @jharrilim/use-navigation-history
Description: React Hook: Navigation History
Author: Joseph Harrison-Lim
Latest version: 0.2.1

# React Hook: useNavigationHistory

[![Azure DevOps tests]](https://dev.azure.com/josephharrisonlim/josephharrisonlim/_build?definitionId=5&_a=summary)

React hook for creating and tracking navigation history

[Azure DevOps tests]: https://img.shields.io/azure-devops/tests/josephharrisonlim/josephharrisonlim/5?style=flat-square
npm package: @jharrilim/use-rss
Description: React hook for RSS Feeds
Author: Joseph Harrison-Lim
Latest version: 0.1.4

# useRss Hook

![npm (scoped)](https://img.shields.io/npm/v/@jharrilim/use-rss?style=flat-square)
![npm](https://img.shields.io/npm/dt/@jharrilim/use-rss?style=flat-square)
![Node.js CI](https://github.com/jharrilim/use-rss/workflows/Node.js%20CI/badge.svg)

React hook for RSS feeds.

## Install

```sh
npm i @jharrilim/use-rss
```

## Usage

[![Edit use-rss-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-rss-demo-2eqdg?fontsize=14&hidenavigation=1&theme=dark)

```tsx
import React from 'react';
import useRss from '@jharrilim/use-rss';

export const MyApp = () => {
  const redditFeed = useRss('https://reddit.com/.rss');
  if (redditFeed === null)
    return <h1>Loading...</h1>;
  return (
    <div>
      <h1>{redditFeed?.title}</h1>
      <p>{redditFeed?.description}</p>
      {redditFeed?.items.map((item, i) => (
        <div key={item?.title ?? i}>
          <h2>{item?.title}</h2>
          <h3>{item?.creator} - {item?.pubDate}</h3>
          <p>{item?.content}</p>
        </div>
      ))}
    </div>
  );
}
```
npm package: @jhaynie/react-relative-portal
Description: React component for place dropdowns outside overflow: hidden; elements
Author: Alex Lunyov
Latest version: 1.8.0

# React relative portal
React component for place dropdown-like components outside overflow: hidden; sections

## Installation
`npm install react-relative-portal --save`

## Example
```es6
import React from 'react';
import RelativePortal from 'react-relative-portal';

export default class DropdownLink extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      show: false,
    };

    this._setShowAsyncTimer = null;

    this._handleShow = () => {
      this._setShowAsync(true);
    };

    this._handleHide = () => {
      this._setShowAsync(false);
    };
  }
  
  componentWillUnmount() {
    // Prevent the asynchronous `setState` call after unmount.
    clearTimeout(this._setShowAsyncTimer);
  }
  
  /**
   * Changes the dropdown show/hide state asynchronously.
   *
   * Need to change the dropdown state asynchronously,
   * otherwise the dropdown gets immediately closed
   * during the dropdown toggle's `onClick` which propagates to `onOutClick`.
   */
  _setShowAsync(show) {
    // Prevent multiple asynchronous `setState` calls, jsut the latest has to happen.
    clearTimeout(this._setShowAsyncTimer);
    this._setShowAsyncTimer = setTimeout(() => {
      this.setState({ show: show });
    }, 0);
  }

  render() {
    const { show } = this.state;

    return (
      <div>
        <button onClick={show ? this._handleHide : this._handleShow}>
          Dropdown toggle
        </button>
        <RelativePortal
          component="div"
          left={0}
          top={10}
          onOutClick={show ? this._handleHide : null}
        >
          {show &&
            <div style={{ padding: 10, backgroundColor: '#FFF' }}>
              Dropdown content
            </div>
          }
        </RelativePortal>
      </div>
    );
  }

}
```

## Props
```es6
export default class RelativePortal extends React.Component {
  static propTypes = {
    right: PropTypes.number, // set right offset from current position. If undefined portal positons from left
    left: PropTypes.number, // set left offset from current position. If `right` prop is set, `left` ignores
    fullWidth: PropTypes.bool, // enables you to set both left and right portal positions
    top: PropTypes.number, // set top offset from current position
    children: PropTypes.any.isRequired, // portal content
    onOutClick: PropTypes.func, // called when user click outside portal element
    component: PropTypes.string.isRequired, // dom tagName
  };

  static defaultProps = {
    left: 0,
    top: 0,
    component: 'span',
  };

  ...

}
```
npm package: @jhaynie/storybook-tailwind-dark-mode
Description: Toggle stories between light and dark mode using tailwind
Author: Renato Moor
Latest version: 1.0.11

# storybook-tailwind-dark-mode

![Example](./example.gif)

## Installation

Install the following npm module:

```sh
npm i --save-dev storybook-tailwind-dark-mode
```

or with yarn:

```sh
yarn add -D storybook-tailwind-dark-mode
```

Then, add following content to `.storybook/main.js`

```js
module.exports = {
  addons: ['storybook-tailwind-dark-mode']
};
```

### Set Dark Mode as default

To set dark mode as default, Add the following lines of code to your preview.js file

```
export const globalTypes = {
  darkMode: true,
};
```
npm package: @jhb.software/payload-admin-search
Description: A global search plugin for the Payload CMS admin panel.
Author: JHB Software
Latest version: 0.2.1

# JHB Software - Payload Admin Search Plugin

[![NPM Version](https://img.shields.io/npm/v/%40jhb.software%2Fpayload-admin-search)](https://www.npmjs.com/package/@jhb.software/payload-admin-search)

A plugin for [Payload CMS](https://payloadcms.com) that adds a search modal to quickly find documents across collections in the admin panel.

## Features

- Global search modal triggered by `Cmd + K` / `Ctrl + K`
- Search across collections in your Payload admin panel
- Quickly open collections and globals by name
- Search index powered by [@payloadcms/plugin-search](https://www.npmjs.com/package/@payloadcms/plugin-search)
- Real time search results
- Keyboard navigation support
- Configurable search component styles (button or bar)
- Clean, minimal UI

## Setup

This plugin requires the official [Payload search plugin](https://payloadcms.com/docs/plugins/search) to be installed. To use this plugin, simply install it and add it to your Payload config.

```ts
import { adminSearchPlugin } from '@jhb.software/payload-admin-search'
import { searchPlugin } from '@payloadcms/plugin-search'

export default {
  plugins: [
    adminSearchPlugin({}),
    searchPlugin({
      collections: ['pages', 'posts', 'authors'],
    }),
  ],
}
```

You can control which collections you can search by adjusting the `collections` option in the search plugin config.

## Configuration

The plugin accepts the following configuration options:

### `enabled`
- **Type**: `boolean`
- **Default**: `true`

### `headerSearchComponentStyle`
- **Type**: `'button' | 'bar'`
- **Default**: `'button'`
- **Description**: Choose the style of the search component in the admin header

#### Button Style (Default)
The default button style shows a compact search button with "Search" text and keyboard shortcut:

```ts
adminSearchPlugin({
  headerSearchComponentStyle: 'button', // or omit for default
})
```

#### Bar Style
The bar style shows a full search input bar similar to modern search interfaces:

```ts
adminSearchPlugin({
  headerSearchComponentStyle: 'bar',
})
```

## Contributing

We welcome contributions! Please open an issue to report bugs or suggest improvements, or submit a pull request with your changes.
npm package: @jhb.software/payload-cloudinary-plugin
Description: Payload CMS storage adapter for Cloudinary
Author: JHB Software
Latest version: 0.3.3

# JHB Software - Cloudinary Storage Adapter for Payload CMS

This package provides a Payload CMS Storage Adapter for [Cloudinary](https://cloudinary.com/) to seamlessly integrate Cloudinary with Payload CMS for media asset management.

## Usage

- Configure the `collections` object to specify which collections should use the Cloudinary adapter. The slug _must_ match one of your existing collection slugs.
- When enabled, this package will automatically set `disableLocalStorage` to `true` for each collection.
- When deploying to Vercel, server uploads are limited with 4.5MB. Set `clientUploads` to `true` upload directly on the client.

```ts
import { cloudinaryStorage } from '@jhb.software/payload-cloudinary-plugin'
import { Media } from './collections/Media'
import { MediaWithPrefix } from './collections/MediaWithPrefix'

export default buildConfig({
  collections: [Media, MediaWithPrefix],
  plugins: [
    cloudinaryStorage({
      collections: {
        media: true,
        'media-with-direct-urls': {
          disablePayloadAccessControl: true,
        },
        'media-with-prefix': {
          prefix: 'my-prefix',
        },
      },
      cloudName: process.env.CLOUDINARY_CLOUD_NAME,
      credentials: {
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
      },
      // Optional, specifies the folder to upload files to:
      folder: 'uploads',
      // Optional, enables client uploads to bypass limits on Vercel:
      clientUploads: true,
      // Optional, enables the use of the original filename as part of the public ID:
      useFilename: true,
    }),
  ],
})
```

The plugin automatically adds a `cloudinaryPublicId` field to your upload collections. This can be used to directly access the uploaded file from Cloudinary.

## Roadmap

> ⚠️ **Warning**: This plugin is actively evolving and may undergo significant changes. While it is functional, please thoroughly test before using in production environments.

Have a suggestion for the plugin? Any feedback is welcome!

## Contributing

We welcome contributions! Please open an issue to report bugs or suggest improvements, or submit a pull request with your changes.
npm package: @jhb.software/payload-seo-plugin
Description: SEO plugin for Payload CMS with AI-powered meta descriptions, keyword tracking and content analysis
Author: JHB Software
Latest version: 0.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# JHB Software - Payload SEO Plugin

[![NPM Version](https://img.shields.io/npm/v/%40jhb.software%2Fpayload-seo-plugin)](https://www.npmjs.com/package/@jhb.software/payload-seo-plugin)

Extends the official [SEO plugin](https://payloadcms.com/docs/plugins/seo) with additional features:

- AI-powered meta description generation for compelling search results
- Focus keyword tracking with intelligent warnings when keywords are missing from crucial elements (title, description, content)
- Multi-keyword support with content usage analytics

## Setup

Add the plugin to your payload config as follows:

```ts
 plugins: [
    payloadSeoPlugin({
      // ### Options which are passed to the official seo plugin ###
      collections: ['pages', 'projects'],

      // ### Options of this seo plugin ###
      websiteContext: {
        topic: 'A website of a software developer for mobile, web-apps and websites.',
      },
      documentContentTransformers: {
        pages: async (doc, lexicalToPlainText) => ({
          title: doc.title,
          body: (await lexicalToPlainText(doc.body)) ?? '',
        }),
        projects: async (doc, lexicalToPlainText) => ({
          title: doc.title,
          excerpt: doc.excerpt,
          tags: doc.tags?.join(', '),
          body: (await lexicalToPlainText(doc.body)) ?? '',
        }),
      },
    }),
  ],
```

Because this plugin extends the official SEO plugin, you can pass all config options of the official SEO plugin to this plugin.

### Config options

For information about the config options of this plugin, see the [SeoPluginConfig](https://github.com/jhb-software/payload-plugins/blob/main/seo/src/types/SeoPluginConfig.ts) type.

### Environment variables

The following environment variables are required:

- `OPENAI_API_KEY`