open-index/open-npm huggingface dataset:
npm package: @jaqen404/brass
Description: state management
Author: jaqen404
Latest version: 0.1.5

# brass

基于[RxJS](https://github.com/ReactiveX/rxjs)和[Immer](https://github.com/immerjs/immer)的轻量级响应式状态管理器

## 安装

```bash
yarn add @jaqen404/brass
```

or

```bash
npm install @jaqen404/brass
```

## 使用

```js
// store.js
import { createStore } from "brass"
const state = {
  count: 1,
  people: {
    name: "tom",
    age: 11,
  },
}
const getters = {
  doubleCount: (state: State) => state.count * 2,
}
const mutations = {
  // 注意：mutasions方法里，不能有返回值
  add: (amount: number) => (state: any) => {
    state.count += amount
  },
  changeName: (name: string) => (state: any) => {
    state.people.name = name
  },
}
const actions = {
  doAsync:
    (a: number, b: number) =>
    async ({ mutations }) => {
      await new Promise((resolve: any) => {
        setTimeout(resolve, 3000)
      })
      mutations.sum(a, b)
      return a + b
    },
}
export const firstStore = createStore(
  "firstStore",
  state,
  getters,
  mutations,
  actionss
)
```

```js
// 响应式获取 state
import { state$ } from "@jaqen404/brass"
let state = {}
state$.subscribe((data: any) => {
  state = data.state
})
```

```js
// 响应式获取 getters
import { getters$ } from "@jaqen404/brass"
let getters = {}
getters$.subscribe((data: any) => {
  getters = data.getters
})
```

```js
// 同时获取 state | getters
import { brassData$ } from "@jaqen404/brass"
let getters = {}
let state = {}
brassData$.subscribe((data: any) => {
  state = data.state
  getters = data.getters
})
```

```js
// 使用 mutations
import { firstStore } from "./store"
firstStore.mutations.add(1)
```

```js
// 使用 actions
import { firstStore } from "./store"
firstStore.actions.doAsync(10, 100)
```

```js
// 使用 setState
// 注意：setState方法里，不能有返回值
import { firstStore } from "./store"
firstStore.setState((state) => {
  state.people.name = state.people.name + state.count
})
```

## vue 中使用

[vue-brass 插件](https://github.com/jaqen404/vue-brass)

## FAQ

### 命名由来？

> Brass 伯明翰，是一款经典的德式策略桌面游戏，背景是优雅而辉煌的维多利亚时代，玩家扮演工业革命期间白手起家的商人，缔造属于各自的英伦传奇。

<img src="https://cf.geekdo-images.com/UIlFaaTmaWms7F5xdEFgGA__imagepage/img/SitcV7akzI3P_dl8pPEneEpM-U4=/fit-in/900x600/filters:no_upscale():strip_icc()/pic3549793.jpg" width="300" height="153" />
npm package: @jaqen404/vue-brass
Description: brass integration for vue
Author: jaqen404
Latest version: 0.0.18

# vue-brass

[brass](https://github.com/jaqen404/brass) integration for vue

[brass](https://github.com/jaqen404/brass) 的 vue 插件

## 安装

```bash
yarn add @jaqen404/vue-brass
```

or

```bash
npm install @jaqen404/vue-brass
```

## 使用

```js
// store.js
import { createVueStore } from "@jaqen404/vue-brass";
const state = {
  count: 1,
  people: {
    name: "tom",
    age: 11,
  },
};
const getters = {
  doubleCount: (state: State) => state.count * 2,
};
const mutations = {
  // 注意：mutasions方法里，不能有返回值
  add: (amount: number) => (state: any) => {
    state.count += amount;
  },
  changeName: (name: string) => (state: any) => {
    state.people.name = name;
  },
};
const actions = {
  doAsync:
    (a: number, b: number) =>
    async ({ mutations }) => {
      await new Promise((resolve: any) => {
        setTimeout(resolve, 3000);
      });
      mutations.sum(a, b);
      return a + b;
    },
};
export const useFirstStore = createVueStore(
  "firstStore",
  state,
  getters,
  mutations,
  actionss
);
```

```vue
<script lang="ts" setup>
import { defineComponent, ref } from "vue";
import { useFirstStore } from "../store/main";
const store = useFirstStore();
const handleClick = () => {
    store.add(1);
};
const handleClickName = () => {
  store.setState(state => {
    state.people.name += state.count;
  })
}
</script>
<template>
    <div>
        <div @click="handleClick">{{ store.doubleCount }}</div>
        <div @click="handleClickName">{{store.people.name}}</div>
        <div @click="handleClick">{{ store.count }}</div>
    <div>
</template>
```
npm package: @jaqi.l/jaqi-ui
Description: Vue3 中基于Element-plus二次封装组件文档
Author: jaqi
Latest version: 0.0.4

# 安装

```shell
pnpm install @jaqi.l/jaqi-ui
```

# 使用

### 全局引用
```ts
// 在main.ts中按下引入
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import locale from "element-plus/es/locale/lang/zh-cn";
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import jaqiUi from '@jaqi.l/jaqi-ui'
import '@jaqi.l/jaqi-ui/lib/style.css'
const app = createApp(App)
// 注册所有图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  // 注册ElementPlus
  app.use(ElementPlus, {
    locale
  });
app.use(jaqiUi)
app.mount('#app')
```

## 按需引入

```ts
// 在main.ts中按下引入
import '@jaqi.l/jaqi-ui/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import { jaqiButton } from "@jaqi.l/jaqi-ui"
</script>
```

::: info
使用项目必须全局注册 `Element-plus` 、`@element-plus/icons-vue` 组件库
:::
npm package: @jaqi.l/vue-plugins
Description: vue-plugins
Author: jaqi.l@qq.com
Latest version: 0.0.1

# @jaqi.l/test-plugins

## 构建
```cmd
npm run build
```
## 发布
```cmd
npm login 

npm publish --access public  
```

## 安装
```cmd
pnpm install @jaqi.l/test-plugins
```

## 使用
```js
import vuePlugins from "@jaqi.l/vue-plugins";

Vue.use(vuePlugins)
```
npm package: @jaquekirino/draft-js-plugins-video
Description: Video Plugin for DraftJS
Author: Anchen li
Latest version: 4.1.6

# DraftJS Video Plugin

_This is a plugin for the `@draft-js-plugins/editor`._

This plugin allows you to copy a video url and paste the Videos to your editor!
but default it handles youtube and vimeo, but you can always write your own logic to handle you desired video source see more details at advanced usage.

### Getting Started

see https://www.draft-js-plugins.com/plugin/video
npm package: @jararaca/core
Description: A collection of React hooks and utilities
Latest version: 0.1.14

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```
npm package: @jarcelao/pi-exa-api
Description: Web search and content fetching for pi via the Exa API
Author: Jericho Renniel Arcelao
Latest version: 0.2.1

# pi-exa-api

Web search, content fetching, and code context for [pi](https://pi.dev) via the [Exa API](https://exa.ai/).

## Installation

Install as a pi package:

```bash
pi install npm:@jarcelao/pi-exa-api
```

## Configuration

Set your Exa API key as an environment variable before starting pi:

```bash
export EXA_API_KEY="your-api-key-here"
pi
```

Or add to your shell profile (`~/.bashrc`, `~/.zshrc`, etc.) for persistence.

### Check Configuration

Run the `/exa-status` command in pi to verify your API key is configured:

```
/exa-status
```

## Usage

### Web Search

The agent can use `exa_search` to find information on the web:

```
Search for recent developments in quantum computing
```

**Parameters:**

- `query` (required) - Natural language search query
- `contentType` (optional) - Type of content to retrieve:
  - `highlights` (default) - Key excerpts from each result
  - `text` - Full text content (may be truncated)
  - `summary` - AI-generated summary
  - `none` - Metadata only (title, URL, date, author)
- `numResults` (optional) - Number of results (1-100, default: 10)

### Fetch URL Content

The agent can use `exa_fetch` to extract content from a specific URL:

```
Fetch the content from https://example.com/article
```

**Parameters:**

- `url` (required) - URL to fetch
- `contentType` (optional) - Type of content:
  - `text` (default) - Full page text
  - `highlights` - Key excerpts
  - `summary` - AI-generated summary
- `maxCharacters` (optional) - Maximum characters to return (1000-100000)

### Code Context

The agent can use `exa_code_context` to find code snippets and examples from open source libraries and repositories:

```
Find examples of React hooks for state management
```

It's ideal for understanding how libraries, frameworks, or programming concepts are implemented in practice.

**Parameters:**

- `query` (required) - Search query for code snippets and examples (1-2000 characters)
- `tokensNum` (optional) - Token limit for the response:
  - `"dynamic"` (default) - Automatically determine optimal response length
  - `50-100000` - Specific number of tokens (5000 is a good default, use 10000 when more context is needed)

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Run linting
npm run lint

# Format code
npm run format
```

## License

MIT
npm package: @jarcodallo/lotr-sdk
Description: Lord of the Rings SDK
Author: Jose Ramirez
Latest version: 0.0.1

Lord of the Rings SDK
=====================

SDK for the Lord of the Rings [API](https://the-one-api.dev/v2).

## Install

```sh
npm i @jarcodallo/lotr-sdk
```

## Initialization

### Zero configuration

Just import `lotr-sdk` to your module:

```ts
import { LOTR } from '@jarcodallo/lotr-sdk';

const sdk = new LOTR({ apiKey: 'your-api-key' });
```

### Configuration params

`@jarcodallo/lotr-sdk` can be configured with this options:

```ts
interface SDKOptions {
  /**
   * Environment to use. Defaults to `development`.
   */
  env?: Environment;
  /**
   * Logger to use. Defaults to `pino`.
   */
  logger?: BaseLogger;
  /**
   * Logger options.
   */
  loggerOptions?: LoggerOptions;
  /**
   * API URL to use. Defaults to `https://the-one-api.dev`.
   */
  apiUrl?: string;
  /**
   * API version to use. Defaults to `v2`.
   */
  apiVersion?: string;
  /**
   * API key to use.
   */
  apiKey: string;
}
```

## Example

You can run the example with:

```sh
npm run examples
```

Or you can write your own code:

```ts
import { LOTR } from '@jarcodallo/lotr-sdk';

// Replace 'your-api-key' with your own API key
const sdk = new LOTR({ apiKey: 'your-api-key' });

const main = async () => {
  // Returns an array of Movies
  const movies = await sdk.getMovies();
  console.log(movies);
  
  // Returns a Movie
  const movie = await sdk.getMovie('5cd95395de30eff6ebccde5c');
  console.log(movie);
  
  // Returns an array of Quotes
  const movieQuotes = await sdk.getMovieQuotes('5cd95395de30eff6ebccde5c');
  console.log(movieQuotes);
  
  // Returns an array of Quotes
  const quotes = await sdk.getQuotes()
  console.log(quotes);
  
  // Returns a Quote
  const quote = await sdk.getQuote('5cd96e05de30eff6ebccfe8e');
  console.log(quote);
};

main();
```

## Change Log

See [Changelog](CHANGELOG.md) for more information.

## Collaborators

- [**Jose Ramirez**](https://github.com/0xslipk)

## License

Licensed under the MIT - see the [LICENSE](LICENSE) file for details.
npm package: @jardenliu/eslint-config
Description: 该配置支持 ESLint 9 版本，以下是适配此版本的安装和使用方法。 Personal preferences for eslint configuration.
Author: jardenliu
Latest version: 2.0.2

# jardenliu/eslint-config

该配置支持 ESLint 9 版本，以下是适配此版本的安装和使用方法。
Personal preferences for eslint configuration.

## Installation

```bash
$ pnpm install @jardenliu/eslint-config # 推荐使用 pnpm 安装
```

## Usage

在 ESLint 9 中，推荐使用 `eslint.config.js` 作为配置文件。你可以按以下步骤使用本配置：

### 使用 `eslint.config.js` 配置文件

在项目根目录创建或修改 `eslint.config.js` 文件，添加以下内容：

```javascript
import config from '@jardenliu/eslint-config'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([...config, globalIgnores(['**/dist/*'])])
```
npm package: @jardenliu/eslint-config-vue
Description: 该配置支持 ESLint 9 版本，以下是适配此版本的安装和使用方法。 Personal preferences for eslint configuration.
Author: jardenliu
Latest version: 2.0.4


# jardenliu/eslint-config-vue

该配置支持 ESLint 9 版本，以下是适配此版本的安装和使用方法。
Personal preferences for eslint configuration.

## Installation

```bash
$ pnpm install @jardenliu/eslint-config # 推荐使用 pnpm 安装
```

## Usage

在 ESLint 9 中，推荐使用 `eslint.config.js` 作为配置文件。你可以按以下步骤使用本配置：

### 使用 `eslint.config.js` 配置文件

在项目根目录创建或修改 `eslint.config.js` 文件，添加以下内容：

```javascript
import config from '@jardenliu/eslint-config-vue'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([...config, globalIgnores(['**/dist/*'])])
```
npm package: @jardenliu/eslint-config-vue3
Description: vue eslint config
Author: jardenliu
Latest version: 1.0.3

# eslint-config-vue
Personal preferences for vue eslint configuration

## Installation

```bash
    $ npm install @jardenliu/eslint-config-vue
```

## Usage

add extends `@jardenliu/vue` into your eslint config `.eslintrc`

```json
{
    "root": true,
    "extends": [
        "@jardenliu/vue"
    ],
    "rules": {
        
    }
}
```
npm package: @jardenliu/vue-eslint-config
Description: vue eslint config
Author: jardenliu
Latest version: 1.0.1

# vue-eslint-config
Personal preferences for eslint configuration.

## Installation

```bash
    $ npm install @jardenliu/vue-eslint-config
```

## Usage

add extends `@jardenliu/vue` into your eslint config `.eslintrc`

```json
{
    "root": true,
    "extends": [
        "@jardenliu/vue"
    ],
    "rules": {
        
    }
}
```
npm package: @jardimihaly/vue-wysiwyg
Description: A WYSIWYG HTML editor for Vue.js, with added localization option
Author: Gregory
Latest version: 1.7.2

[![](https://user-images.githubusercontent.com/11352152/30252159-1bbb9cfe-963b-11e7-966c-b44116c74a86.png)](https://chmln.github.io/vue-wysiwyg/)


## Usage


### Install vue-wysiwyg

``` bash
npm install vue-wysiwyg --save
```
OR

``` bash
yarn add vue-wysiwyg
```

In your `main.js`:

```js
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {}); // config is optional. more below
```

Also make sure to load the stylesheet.
The exact syntax will depend on what preprocessor you use.

```css
@import "~vue-wysiwyg/dist/vueWysiwyg.css";
```

In your components:
```html
<wysiwyg v-model="myHTML" />
```

## Config options

All keys are optional.

```js
{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px",

  // set to 'true' this will insert plain text without styling when you paste something into the editor.
  forcePlainTextOnPaste: true,

  // specify editor locale, if you don't specify this, the editor will default to english.
  locale: 'hu'
}
```
Available Modules:
 - bold
 - italic
 - underline
 - justifyLeft
 - justifyCenter
 - justifyRight
 - headings
 - link
 - code
 - orderedList
 - unorderedList
 - image
 - table
 - removeFormat
 - separator

Available Locales:
 - english (default)
 - hungarian

Note on the image upload API endpoint:
- Image is uploaded by `multipart/form-data`
- Your endpoint must respond back with a string, the URL for the image - e.g. `http://myapp.com/images/12345.jpg`
npm package: @jareckicode/ui-gen
Description: CLI generator for React components with TypeScript, Tailwind CSS, and testing setup
Author: Michał Jarecki
Latest version: 1.0.4

# @jareckicode/ui-gen

Automatyczny generator komponentów React/TypeScript z szablonami testów (Jest + React Testing Library) i Storybookiem.

## Użycie

```bash
npx @jareckicode/ui-gen create MyButton
```

## Co zostanie wygenerowane?

```
src/components/MyButton/
├── MyButton.tsx           # Komponent React z TypeScript i Tailwind
├── MyButton.test.tsx      # Szablon testów (Jest + RTL)
├── MyButton.stories.tsx   # Szablon Storybook
└── index.ts               # Eksport komponentu (opcjonalnie)
```

## Opcje CLI

- `--directory` lub `-d` — katalog docelowy (domyślnie `src/components`)
- `--classes` lub `-c` — domyślne klasy Tailwind (domyślnie `p-4 border rounded`)
- `--tag` lub `-t` — tag HTML do użycia (domyślnie `div`)
- `--skip-index` — pomiń generowanie pliku index.ts

### Przykłady użycia:

```bash
# Domyślny div
npx @jareckicode/ui-gen create MyContainer

# Button z custom klasami
npx @jareckicode/ui-gen create MyButton --tag button --classes "px-4 py-2 bg-blue-500 text-white rounded"

# Section z custom katalogiem
npx @jareckicode/ui-gen create MySection --tag section --directory src/layouts --classes "p-6 bg-gray-100"

# Aside bez pliku index.ts
npx @jareckicode/ui-gen create MySidebar --tag aside --classes "w-64 bg-gray-200 p-4" --skip-index
```

## Przykład szablonu testu

```tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MyButton } from './MyButton';

describe('MyButton', () => {
  it('renders without crashing', () => {
    render(<MyButton />);
    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  it('renders with correct HTML tag', () => {
    render(<MyButton />);
    const element = screen.getByRole('button');
    expect(element.tagName.toLowerCase()).toBe('button');
  });

  it('applies custom className', () => {
    render(<MyButton className="custom-class" />);
    const element = screen.getByRole('button');
    expect(element).toHaveClass('custom-class');
  });

  // Add your tests here
});
```

### Dostępne tagi HTML:
`div`, `button`, `section`, `aside`, `article`, `header`, `footer`, `main`, `nav`, `span`, `p`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `ul`, `ol`, `li`, `form`, `input`, `textarea`, `select`, `label`, `a`, `img`, `video`, `audio`, `canvas`, `svg`

## Rozwój (dla kontrybutorów)

### Instalacja lokalna
```bash
npm install
```

### Budowanie
```bash
npm run build
```

### Użycie lokalne
```bash
npx ts-node src/cli.ts create MyButton
# lub po buildzie
node dist/cli.js create MyButton
```

## Wymagania
- Node.js >= 16
- TypeScript

## Autor

**Michał Jarecki**

- 🌐 [Strona internetowa](https://jareckiweb.pl)
- 📧 [Email](mailto:jarecki.kontakt@gmail.com)

## Licencja

MIT License - zobacz plik [LICENSE](LICENSE) dla szczegółów.