open-index/open-npm huggingface dataset:
npm package: @humanmade/react-flame-graph
Description: React component for visualizing profiling data
Author: Brian Vaughn
Latest version: 1.3.1

# react-flame-graph

> React component for visualizing profiling data

[![NPM](https://img.shields.io/npm/v/react-flame-graph.svg)](https://www.npmjs.com/package/react-flame-graph) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-flame-graph
```

## Usage

Learn more at [react-flame-graph.now.sh](https://react-flame-graph.now.sh/).

## License

MIT © [bvaughn](https://github.com/bvaughn)
npm package: @humanmade/react-tasklist
Description: react-tasklist React component
Latest version: 0.0.4

# react-tasklist

Simple task lists in React.

![Demo GIF](https://user-images.githubusercontent.com/21655/37268389-620dc798-2611-11e8-91bf-8b257b4f814a.gif)

## Installation

```sh
npm install --save @humanmade/react-tasklist
```

## Usage

```js
import Tasklist from '@humanmade/react-tasklist';

import '@humanmade/react-tasklist/css/index.css';

class MyComponent extends React.Component {
	constructor( props ) {
		super( props );

		this.state = {
			items: [
				{
					label: 'Item one',
					checked: false,
				},
				{
					label: 'Item two',
					checked: false,
					disabled: true,
				},
				{
					label: 'Item three',
					checked: true,
				},
			],
		};
	}

	onChange = ( index, checked ) => {
		const { items } = this.state;
		this.setState( {
			items: [
				...items.slice( 0, index ),
				{ ...items[ index ], checked },
				...items.slice( index + 1 )
			],
		} );
	}

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

		return <Tasklist
			items={ items }
			onChange={ this.onChange }
			onReorder={ items => this.setState( { items } ) }
		/>
	}
```

## Props API

### `items`

A sorted list of items to display on the list. Each item is an object with the following properties:

* `label` (required, `string|ReactElement`): Label for the item. May be a React element.
* `task` (`boolean`, default `true`): Is this a task item? Set to `false` for regular list items.
* `checked` (required, `boolean`): Checkbox state.
* `disabled` (`boolean`, default `false`): Is the checkbox disabled?
* `id` (`string`, default `label`): Unique ID for the item. Value of `label` by default.

### `disableSort`

`Boolean`

Whether sorting is disabled (e.g. for users without permission to edit the list).


### `onChange`

`( index: Number, checked: Boolean ) => void`

Callback function for when the checked state of an item changes. Passed following parameters:

* `index` (`Number`): Index of the item which changed.
* `checked` (`Boolean`): True if the new state is checked, false if the new state is unchecked.


### `onReorder`

`( items: Array, oldIndex: Number, newIndex: Number ) => void`

Callback function for when items are reordered. This receives the reordered items for convenience, but you can use the `oldIndex` and `newIndex` parameters to manually reorder your items if you'd prefer.

Passed following parameters:

* `items` (`Array`): Reordered list of items.
* `oldIndex` (`Number`): Index of the item in the original array.
* `newIndex` (`Number`): Index of the item in the new array.
npm package: @humanmade/webpack-helpers
Description: Reusable Webpack configuration components & related helper utilities.
Author: Human Made
Latest version: 1.0.1

# Webpack Helpers

A [Human Made](https://humanmade.com) project. ![Build Status](https://app.travis-ci.com/humanmade/webpack-helpers.svg?token=xNUfWUZqcGkpUy3iiQyu&branch=main)

## Background

A WordPress project can encompass a number of individual themes & plugins, and any of these components may contain frontend scripts or styles. This package provides reusable fragments of Webpack configurations and associated helper methods that would otherwise need to be duplicated across many project components.

## [Documentation](https://humanmade.github.io/webpack-helpers)

Visit [humanmade.github.io/webpack-helpers](https://humanmade.github.io/webpack-helpers) to view the complete project documentation, including a guide to each included module and getting-started instructions.

Visit the [`docs/`](./docs) folder to view or modify the content used to generate this documentation site.

## Requirements

- Node.js >= 22.0.0

This project includes an `.nvmrc` file specifying Node.js 22. If you use nvm, you can run:

```bash
nvm use
```

## What's In The Box

### [Opinionated Configuration Presets](https://humanmade.github.io/webpack-helpers/modules/presets)
### [Loader Generators](https://humanmade.github.io/webpack-helpers/modules/loaders)
### [Plugin Generators](https://humanmade.github.io/webpack-helpers/modules/plugins)
### [Helpers](https://humanmade.github.io/webpack-helpers/modules/helpers)
npm package: @humans/loading-icon
Description: Loading icon component
Author: Wu Qicheng
Latest version: 3.0.0-beta.3

# @humans/loading-icon

### Base usage

Base usage use the humans universal usage.

### Set custom icon in loading-icon globally

``` javascript
import share from '@humans/share'
import customIcon from './customIcon.vue'

// Global use customIcon
share.setLoading(customIcon)
```

### Set custom icon in the specified loading-icon

``` vue
<template>
  <mn-loading-icon :icon="customIcon"></mn-loading-icon>
</template>

<script>
  import customIcon from './customIcon.vue'
  import loadingIcon from '@humans/loading-icon'

  export default {
    components: {
      ...loadingIcon.map()
    },
    data () {
      return {
        customIcon
      }
    }
  }
</script>
```

### Create many different loading-icons with custom icon by Mixins

``` javascript
// appLoadingIcon.vue
import customIcon from './customIcon.vue'
import loadingIcon from '@humans/loading-icon'

export default {
  name: 'app-loading-icon',
  mixins: [
    loadingIcon['mn-loading-icon']
  ],
  props: {
    icon: {
      type: Object,
      default () {
        const Component = Vue.extend(customIcon)
        return new Component().$mount()
      }
    }
  }
}
```

``` vue
<template>
  <app-loading-icon></app-loading-icon>
</template>

<script>
  import appLoadingIcon from './appLoadingIcon.vue'

  export default {
    components: {
      appLoadingIcon
    }
  }
</script>
```
npm package: @humansareweak/lightweight-framework
Description: An ultra lightweight Framework based on Express.JS
Author: Maik Steiger
Latest version: 1.1.4

# Lightweight Framework

An ultra Lightweight Framework based on Express. It is used to quickly get started with a project and at the same time have an object oriented design pattern, which is also pretty clean. Included is a CLI, the - LWF - cli commands makes it easier to initialize your project and after that even to create specific files. The commands are pretty straight forward and should only save some coding.

# Installation

Install this package easily via YARN:

```
yarn add @humansareweak/lightweight-framework
```

or alternatively via NPM:

```
npm install @humansareweak/lightweight-framework
```

To create a project, just enter

```
lwf --init
```

into the console and vóila! Your project has built itself and is now ready for development.
npm package: @humanscape/eslint-config
Description: All of ESLint configurations for Humanscape
Author: humanscape
Latest version: 1.0.1

# ESLint Configurations for Humanscape

### Installation & Usage

1. Install `@humanscape/eslint-config`.

Using `npm`

`$ npm install --save-dev @humanscape/eslint-config`

Using `yarn`

`$ yarn add -D @humanscape/eslint-config`

2. Add some ESLint config to `package.json`.

```
{
  "eslintConfig": {
    "extends": "@humanscape"
  }
}
```

or your preferred config file. (ex. `.eslintrc`)

```
{
  "extends": "@humanscape"
}
```
npm package: @humanscape/react-summernote-bs4
Description: Summernote (Super simple WYSIWYG editor) adaptation for react
Author: Ivan Kitaev
Latest version: 2.0.2

# react-summernote
[Summernote](https://github.com/summernote/summernote) adaptation for react (Headache free)

[![npm version](https://badge.fury.io/js/react-summernote.svg)](https://www.npmjs.com/package/react-summernote)


### Getting Started

#### Install

```
npm install react-summernote
```

#### Configure Webpack

Add ProvidePlugin to your webpack config

```javascript
new webpack.ProvidePlugin({
	$: "jquery",
	jQuery: "jquery"
})
```

### Example

```javascript
import React, { Component } from 'react';
import ReactSummernote from 'react-summernote';
import 'react-summernote/dist/react-summernote.css'; // import styles
import 'react-summernote/lang/summernote-ru-RU'; // you can import any other locale

// Import bootstrap(v4) dependencies
import 'bootstrap/js/modal';
import 'bootstrap/js/dropdown';
import 'bootstrap/js/tooltip';
import 'bootstrap/dist/css/bootstrap.css';

class RichTextEditor extends Component {
  onChange(content) {
    console.log('onChange', content);
  }

  render() {
    return (
      <ReactSummernote
        value="Default value"
        options={{
          lang: 'ru-RU',
          height: 350,
          dialogsInBody: true,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview']]
          ]
        }}
        onChange={this.onChange}
      />
    );
  }
}

export default RichTextEditor;
```

### PropTypes

|  Property  |  Type  |  Description  |
|------------|--------|---------------|
| value | `String` | Default value |
| codeview | `Boolean` | Option to render in codeview mode |
| options | `Object` | Options object. More info about options http://summernote.org/deep-dive |
| onInit | `Function` | Being invoked when summernote is launched |
| onEnter | `Function` | Enter/Return button pressed |
| onFocus | `Function` | Editable area receives the focus |
| onBlur | `Function` | Editable area loses the focus |
| onKeyDown | `Function` | `e.keyCode` is pressed |
| onKeyUp | `Function` | `e.keyCode` is released |
| onPaste | `Function` | Triggers when event paste's been called |
| onChange | `Function` | handler: `function(contents, $editable) {}`, invoked, when content's been changed |
| onImageUpload | `Function` | handler: `function(files) {}` |

### Static methods

```javascript
reset() // Clear contents and remove all stored history
insertImage(url, filenameOrCallback) // Insert a image
insertNode(node) // Insert a element or textnode
insertText(text) // Insert a text
```

##### Example

```javascript
ReactSummernote.insertImage(`/resources/getImage?imageGuid=${image.imageGuid}`, $image => {
	$image.css("width", Math.floor($image.width() / 2));
	$image.attr("alt", image.name);
});
```
npm package: @humansean/mcp-appwrite-filesystem
Description: A simple but helpful MCP server combined the power of Appwrite Storage and file system
Author: HumanSean
Latest version: 1.0.1

# MCP-Appwrite-Filesystem

A Model Context Protocol (MCP) server based on Appwrite Storage, providing file storage and processing capabilities for AI agents.

## Introduction

MCP-Appwrite-Filesystem is a tool that exposes Appwrite Storage functionality through the Model Context Protocol. It allows AI assistants to programmatically read and write files, while supporting the processing of various file formats, including images, audio, text documents, Excel spreadsheets, PowerPoint presentations, PDFs, and mind maps.

## Tool List

| Tool Name                                  | Description                                   | Parameters                                           |
| ------------------------------------------ | --------------------------------------------- | ---------------------------------------------------- |
| `mcp-appwrite-filesystem_read`                | Read file from Appwrite Storage by fileId     | `fileId`: The ID of the file to read                 |
| `mcp-appwrite-filesystem_write_by_content`    | Write file to Appwrite Storage by content     | `filename`: File name<br>`content`: File content     |
| `mcp-appwrite-filesystem_write_by_path`       | Write file to Appwrite Storage by path        | `filename`: File name<br>`path`: File path           |
| `mcp-appwrite-filesystem_write_by_base64`     | Write file to Appwrite Storage by base64      | `filename`: File name<br>`data`: Base64 encoded data |
| `mcp-appwrite-filesystem_delete`              | Delete a file from Appwrite Storage           | `fileId`: The ID of the file to delete               |
| `mcp-appwrite-filesystem_list`                | List all files in Appwrite Storage            | No parameters                                         |
| `mcp-appwrite-filesystem_get_file_metadata`   | Get the metadata of a file in Appwrite Storage| `fileId`: The ID of the file to get metadata for     |

## Supported File Formats

- Images - Returned as image content
- Audio - Returned as audio content
- Plain text and markdown - Returned as text
- Word documents (doc/docx) - Converted to markdown text
- Excel spreadsheets (xls/xlsx) - Converted to JSON
- PowerPoint presentations (ppt/pptx) - Converted to JSON
- PDF documents - Converted to text (text-based PDFs only)
- XMind mind maps - Converted to JSON

## Usage

```json
{
  "mcpServers": {
    "mcp-appwrite-filesystem": {
      "command": "npx",
      "args": ["-y", "@humansean/mcp-appwrite-filesystem"],
      "env": {
        "ENDPOINT": "YOUR_APPWRITE_ENDPOINT",
        "PROJECT_ID": "YOUR_APPWRITE_PROJECT_ID",
        "API_KEY": "YOUR_APPWRITE_API_KEY",
        "BUCKET_ID": "YOUR_APPWRITE_STORAGE_BUCKET_ID"
      }
    }
  }
}
```

## License

Apache-2.0 license
npm package: @humansean/mcp-bocha
Description: A simple but helpful MCP server using bocha api service
Author: HumanSean
Latest version: 1.0.1

# mcp-bocha

A Model Context Protocol (MCP) server that provides web search capabilities to AI agents using the Bocha API.

## Introduction

MCP-Bocha is a tool that exposes Bocha AI's web search API capabilities through the Model Context Protocol. It allows AI assistants to search the web programmatically, enabling tasks such as information retrieval, research, and up-to-date data collection.

## Tools

| Tool Name            | Description                      | Parameters                                                                           |
| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------ |
| `mcp-bocha_search`   | Search the web for information   | `query`: The search query string<br>`freshness`: Optional time filter ["oneDay", "oneWeek", "oneMonth", "oneYear", "noLimit"]<br>`summary`: Optional boolean for summarized results<br>`include`: Optional array of domains to include<br>`exclude`: Optional array of domains to exclude<br>`count`: Optional number of results to return |

## Usage

```json
{
  "mcpServers": {
    "mcp-bocha": {
      "command": "npx",
      "args": ["-y", "@humansean/mcp-bocha"],
      "env": {
        "BOCHA_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}
```

## License

Apache-2.0 license
npm package: @humansean/mcp-puppeteer
Description: A simple but helpful mcp server that based on puppeteer, providing browser ablities for llm models
Author: HumanSean
Latest version: 1.0.7

# MCP-Puppeteer

A Model Context Protocol (MCP) server based on Puppeteer that provides web automation capabilities to AI agents.

## Introduction

MCP-Puppeteer is a tool that exposes Puppeteer's web automation capabilities through the Model Context Protocol. It allows AI assistants to control web browsers programmatically, enabling tasks such as web scraping, screenshot capture, form filling, and more.

## Tools

| Tool Name                  | Description                                              | Parameters                                                                          |
| -------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `mcp-puppeteer_initialize` | Initialize a Puppeteer browser instance in headless mode | `args`: Optional array of browser launch arguments                                  |
| `mcp-puppeteer_close`      | Close the Puppeteer browser instance                     | None                                                                                |
| `mcp-puppeteer_navigate`   | Navigate to a specified URL                              | `url`: The URL to navigate to                                                       |
| `mcp-puppeteer_screenshot` | Capture a screenshot of the current page                 | `path`: File path to save the screenshot                                            |
| `mcp-puppeteer_click`      | Click on an element specified by selector                | `selector`: CSS selector of the element to click                                    |
| `mcp-puppeteer_fill`       | Fill a text input with specified content                 | `selector`: CSS selector of the input element<br>`text`: Text to enter in the input |
| `mcp-puppeteer_select`     | Select an option from a dropdown menu                    | `selector`: CSS selector of the select element<br>`value`: Value to select          |
| `mcp-puppeteer_hover`      | Hover the mouse over a specified element                 | `selector`: CSS selector of the element to hover over                               |
| `mcp-puppeteer_evaluate`   | Execute JavaScript code in the page context              | `script`: JavaScript code to execute                                                |

## Usage

```json
{
  "mcpServers": {
    "mcp-puppeteer": {
      "command": "npx",
      "args": ["-y", "@humansean/mcp-puppeteer"]
    }
  }
}
```

## License

Apache-2.0 license