open-index/open-npm huggingface dataset:
npm package: @plumbblake/styled-components-feature-detection
Description: Feature detection utilities for styled-components
Author: Blake Plumb
Latest version: 1.1.0

# styled-components-feature-detection

Feature detection utilities for [styled-components](https://www.styled-components.com/)

## ref

Boolean value indicating if the version of [styled-components](https://www.styled-components.com/) installed supports `ref` property.

```
import isRefSupported from "@plumbblake/styled-components-feature-detection/ref"
```

## createGlobalStyle

Boolean value indicating if the version of [styled-components](https://www.styled-components.com/) installed supports `createGlobalStyle`.

```
import isCreateGlobalStyleSupported from "@plumbblake/styled-components-feature-detection/createGlobalStyle"
```

## Contributing

See [contributing.md](contributing.md)
npm package: @plumbiu/md
Description: tools for markdown parser
Author: Plumbiu
Latest version: 0.4.5

# @plumbiu/md

this respository is used for [@plumbiu/blog](https://github.com/Plumbiu/blog) as I don't want to install too many dependencies

## Feature

- lazy loading for `<img />`
- Toc API

## Usage

### parseMd

> `md2html` + `md2toc`

```ts
/*
  function parseMd(
    md: string,
    options = {
      isPython: false,
      lazy: true
    },
  ): Promise<{
    html: string
    toc: {
      level: number
      title: string
    }[]
  }>
*/
import { parseMd } from '@plumbiu/md'
await parseMd('# hello\r\nworld', {
  // if lazy option is true, img label will be <img loading="lazy" />
  lazy: true, // true by default
})

/*
{
  html: `<h1>hello</h1>
  <p>World</p>`,
  toc: [
    { title: 'hello', level: 1 }
  ]
}

*/
```

### md2html

```ts
/*
  function md2html(md: string, options?: {
    lazy?: boolean
  }): Promise<string>
*/
import { md2html } from '@plumbiu/md'

await md2html('# hello\r\nworld', {
  // if lazy option is true, img label will be <img loading="lazy" />
  lazy: true, // true by default
})
/*
  <h1>hello</h1>
  <p>World</p>
*/
```

### html2toc

```ts
/*
  function html2Toc(html: string, options?: {
    depth: number
  }): {
    level: number
    content: string
    hash: string
  }[]
*/

import { md2html } from '@plumbiu/md'

await md2toc('<h1 id="hello-world">hello world</h1>', {
  // WARNING: this will very slowly
  isPython: false, // default by true, if you use Python, remeber set this option to `true`
})

/*
  [
    { level: 1, content: 'hello world', hash: 'hello-world' }
  ]
*/
```

> As this repo is used for transfrom markdown, html(at least `h` label) should not be nested.

HTML like this will get error output:

```html
<div>
  <div>
    <h1>hello</h1>
  </div>
  <div>
    <h2>world</h2>
  </div>
</div>
```

### md2toc

```ts
/* function md2toc(md: string, options?: Md2tocOpts): {
  level: number
  id: string
  content: string
}[]; */

import { md2toc } from '@plumbiu/md'

await md2toc(
  `
# hello
world
# foo bar
baz
`,
  {
    // depth mean the toc depth
    depth: 3, // 3 by default
  },
)

/*
  [
    { level: 1, content: 'hello', id: 'hello' },
    { level: 1, content: 'foo bar', id: 'foobar' },
  ]
*/
```

### styles

`@plumbiu/md` offer the `highliht.js` and `github-markdown.css` style

```ts
import '@plumbiu/styles/github-markdown.css'
// for code block
import '@plumbiu/styles/hljs-markdown.css'
```

`dark-theme` needs add `<html theme="dark"></html>`
npm package: @plumbiu/react-live
Description: Render live React components.
Latest version: 0.0.1

# @plumbiu/react-live

Render live React components.

# Usage

```js
import { Preview } from '@plumbiu/react-live'

const code = `
  export default function App() {
    return <div>Hello @plumbiu/react-live</div>
  }
`

function App() {
  return <Preview code={code} />
}

export default App
```

# scope

If you want add some packages, such as [`clsx`](https://github.com/lukeed/clsx)，add `scope` props to `<Preview />`

```js
import className from 'clsx'
import { Preview } from '@plumbiu/react-live'

const code = `
  import clsx from 'clsx'
  export default function App() {
    return <div className={clsx({ ['foo']: true })}>Hello @plumbiu/react-live</div>
  }
`

function App() {
  return (
    <Preview
      code={code}
      scope={{
        clsx: className,
      }}
    />
  )
}

export default App
```
npm package: @plumbiu/ui
Description: ui for plumbiu's blog
Author: Plumbiu
Latest version: 0.0.5

# @plumbiu/ui

> 🚧 Work in Progress

ui for [my blog](https://github.com/Plumbiu/blog)

# Usage

```bash
npm install @plumbiu/ui
```

```jsx
import { Button } from '@plumbiu/ui'

export default function Demo() {
  return <Button>Button</Button>
}
```
# size

run:

```bash
pnpm run bundle-size
```

output:

```txt
js gziped size:  22.0185546875 kb
css gziped size:  5.328125 kb
total gziped size:  27.3466796875 kb
```
npm package: @plumbiu/v-web
Description: > 使用 cli 工具在线开发 vue 组件！
Author: Plumbiu
Latest version: 0.0.4

# v-web

> 使用 cli 工具在线开发 vue 组件！

## 安装

```bash
npm i -g @plumbiu/v-web
```

## 使用

终端输入：

```bash
vw s
```

你可以在网页的右边写代码，按下 `alt + enter` 会自动同步到对应文件！

![](https://plumbiu.github.io/blogImg/image-20230905163618794.png)

## Todo

- [x] 网页展示
- [x] websocket
- [x] support `unplugin-vue-components/vite` ...
- [ ] 新增组件
- [ ] vite plugin
npm package: @plumbus/ui
Description: Plumbus UI — client generation and frontend templates
Latest version: 0.2.8

# @plumbus/ui

**UI code generation for the Plumbus framework.**

Generates typed API clients, React hooks, auth helpers, form metadata, and full Next.js project scaffolds — all derived from your Plumbus capability and entity contracts.

## Install

```bash
pnpm add @plumbus/ui
```

> **Note:** `@plumbus/core` is a peer dependency and must be installed in your project.

## What It Generates

### Typed API Clients

Generate fetch-based clients with full type safety from your capability contracts:

```typescript
import { generateClientCode } from "@plumbus/ui";

const code = generateClientCode([getUserContract, createOrderContract]);
// → typed fetch functions + React hooks for each capability
```

### Auth Helpers

Generate authentication types, token utilities, and route guards:

```typescript
import { generateAuthCode } from "@plumbus/ui";

const code = generateAuthCode(authConfig);
// → AuthUser type, useAuth hook, token helpers, withAuth guard
```

### Form Metadata

Extract form field metadata from Zod schemas in your entity definitions:

```typescript
import { generateFormMetadata } from "@plumbus/ui";

const fields = generateFormMetadata(userEntity);
// → field types, labels, validation rules, select options
```

### Next.js Scaffolding

Generate a complete Next.js project from your contracts:

```typescript
import { generateNextjsTemplate } from "@plumbus/ui";

const files = generateNextjsTemplate({
  capabilities: [getUser, createOrder],
  entities: [User, Order],
  auth: { provider: "jwt" },
});
// → Full Next.js app with pages, layouts, API routes, and auth
```

## AI Agent Instructions

This package ships instruction files for AI coding agents:

```
node_modules/@plumbus/ui/instructions/
├── framework.md         # UI package overview and concepts
├── client-generator.md  # Typed fetch clients and React hooks
├── auth-generator.md    # Auth types, token utils, route guards
├── form-generator.md    # Zod schema → form field extraction
├── nextjs-template.md   # Full Next.js project scaffold
├── patterns.md          # UI conventions and best practices
└── testing.md           # UI test setup and patterns
```

## Documentation

Full documentation: [github.com/plumbus-framework/plumbus/docs](https://github.com/plumbus-framework/plumbus/tree/main/docs)

## License

MIT
npm package: @plume-fr/plume-editor
Description: >
Author: sawsenfattahi
Latest version: 1.7.5

# plume-editor

> 

[![NPM](https://img.shields.io/npm/v/plume-editor.svg)](https://www.npmjs.com/package/plume-editor) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @plume-fr/plume-editor
```

## Usage

```jsx
import React, { Component } from 'react'

import Editor from '@plume-fr/plume-editor';
import  '@plume-fr/plume-editor/EditorDefaultStyle.css';

const initDoc =[
  {
    type: "heading",
    attrs: {
      level: 1
    },
    content: [
      {
        type: "text",
        text: "welcome to prosemirror"
      }
    ]
  }
];
  
export default class App extends Component {
  updateContent = () => {console.log('call your API here')}
  render () {
    const DDOC = {
      type: "doc",
      content: [
        {
          type: "heading",
          attrs: {
            level: 1
          },
          content: [
            {
              type: "text",
              text: "titre 1"
            }
          ]
        },
        {
          type: "paragraph",
          content: [
            {
              type: "text",
              text: "paragraphe 1"
            }
          ]
        },
        
        {
          type: "paragraph",
          content: [
            {
              type: "text",
              text: "paragraphe 2"
            }
          ]
        }
      ]
    };
    return (
      <div>
        <Editor
          importedDoc={DDOC}
          updateContent={this.updateContent}
          id={1}
          updateBtn='save'
          uploadBtn='upload'
          elements={initDoc}
        />
      </div>
    )
  }
}

```

## License

MIT © [sawsenfattahi](https://github.com/sawsenfattahi)
npm package: @plume-org/forms
Description: ## Installation
Latest version: 0.0.12

# Plume forms

## Installation

```
$ npm install @plume-org/forms
$ npm install @plume-org/utils
```

## Usage

```typescript
import { DIRECTION, DynamicFormGroup, DynamicFormGroupComponent, DynamicTextInput } from '@plume-org/forms';

@Component({
  selector: 'my-component',
  imports: [DynamicFormGroupComponent],
  template: `<plume-dynamic-form-group [formElements]="formElements"></plume-dynamic-form-group>`,
})
class MyComponent {
  formElements = [
    new DynamicFormGroup({
      key: 'name',
      direction: DIRECTION.ROW,
      formElements: [
        new DynamicTextInput({
          key: 'firstName',
          label: 'First name',
          placeholder: 'Please enter your first name',
          validators: [Validators.required, Validators.minLength(3)],
        }),
        new DynamicTextInput({
          key: 'lastName',
          label: 'Last name',
          placeholder: 'Please enter your last name',
          validators: [Validators.required, Validators.minLength(3)],
        }),
      ],
    }),
    new DynamicTextInput({
      key: 'email',
      label: 'Email address',
      placeholder: 'Please enter your email address',
      validators: [Validators.required, Validators.email],
    }),
  ];
}
```
npm package: @plume-ui-react/core
Description: Core stuff for Plume UI lib
Author: Dario E Gonzalez B
Latest version: 0.0.9

# Plume UI React Core

The Plume UI Core is the foundational module for the Plume UI library of React components. It provides configuration options and basic types used throughout the library.

## Installation

You can install the Plume UI Core module using your preferred package manager:

```sh
npm install @plume-ui-react/core
# Or
yarn add @plume-ui-react/core
```

## Configuration

The Plume UI Core allows you to customize the default configuration for the entire Plume UI library. You can configure various aspects, but the primary configuration is related to color palettes.

### Default Configuration

The default configuration includes a set of predefined colors:

```javascript
import { DefaultConfig } from '@plume-ui-react/core'

const defaultConfig: DefaultConfig = {
  colors: {
    primary: 'rgb(99, 102, 241)',
    secondary: 'rgb(107, 114, 128)',
    info: 'rgb(59, 130, 246)',
    warning: 'rgb(234, 179, 8)',
    error: 'rgb(239, 68, 68)',
    success: 'rgb(34, 197, 94)',
    dark: 'rgb(31, 41, 55)',
    light: 'rgb(250, 250, 250)',
  },
}
```

### Custom Configuration

You can override the default configuration by providing your custom configuration:

```javascript
import { setUserConfig } from '@plume-ui-react/core'

const customConfig = {
  colors: {
    primary: 'your-primary-color',
    // Add more custom color overrides as needed
  },
}

setUserConfig(customConfig)
```

### Merged Configuration

To access the merged configuration that combines the default and custom configurations, use the following function:

```javascript
import { getMergedConfig } from '@plume-ui-react/core'

const mergedConfig = getMergedConfig()
```

## Types and Interfaces

The Plume UI Core module exports various types and interfaces that are essential for consistent and type-safe usage across the Plume UI library. These include:

- `DefaultConfig`: The default configuration structure.
- `CustomUserConfig`: The user's custom configuration structure.
- `PlumeUIConfig`: The merged configuration that combines the default and user configurations.
- `ComponentProps`: Common component props that allow custom classes and styles to be applied.

Additionally, it defines color palette types, sizing options, custom color palette interfaces, etc. to ensure consistent styling and theming across Plume UI components.
npm package: @plume-ui-react/lib
Description: A lightweight TypeScript React UI component library
Author: Dario E Gonzalez B
Latest version: 0.0.17

# Plume UI React

Welcome to the Plume UI React! This library provides a collection of reusable React components to enhance your web application development experience. You can easily integrate these components into your projects to save time and maintain a consistent user interface.

## Installation

To use this library in your React project, follow these steps:

1. Install the library using npm or yarn:

   ```bash
   npm install @plume-ui-react/lib
   # Or
   yarn add @plume-ui-react/lib
   ```

2. Import the stylesheet into your root component file:

   ```javascript
   import '@plume-ui-react/lib/dist/index.css'
   ```   

3. Import the components you need in your JavaScript or TypeScript files:

   ```javascript
   import { Button, ... } from '@plume-ui-react/lib'
   ```

4. Start using the components in your application:

   ```javascript
   <Button label="Click Me!" />
   ...
   ```

## Contributions

Contributions to this library are welcome! If you have a new component to add or improvements to existing ones, feel free to submit a pull request.

## About

This library is maintained by Darío Gonzalez. If you have any questions or need assistance, please reach out to us at darioegb@gmail.com.

Thank you for using the Plume UI React Library. Happy coding!
npm package: @plume/lib
Description: > TODO: description
Author: FreMaNgo
Latest version: 0.0.19

# `lib`

## TODOS

- [ ] 静态资源引用
- [ ] 压缩

## Usage

```
yarn add @plume/lib -D
```

### js

lib 模式下，会把{src}目录下的文件、文件夹转化输出到 lib 目录的不同打包方式(cjs | esm | umd)目录下

例如，有 lib 的目录结构如下：

```
// lib: HELLOWORLD
|- src
  |- components
    |- A
      |- index.jsx
  |- index.js
```

输出为：

```
|- lib
  |- cjs
    |- A
      |- index.js
    |- index.js
  |- esm
    |- A
      |- index.js
    |- index.js
  |- umd
  	|- assets
  		|- a.jpg
  		|- xx.svg
  	|- style.css
    |- index.js
```

### css

- 支持`sass|less|css`
- 支持`cssModules|styled-components`

对于`cjs|esm`，会把转义的 css 文件放在对应的目录内
对于`umd`，会把 css 文件打包成`style.css`放在 umd 的输出目录内
对于`styled-components`不会提取 css，会内置在相应的 js 文件内

### assets

assets 配置项在 config/options/assetsExt，相关后缀的文件将被当作静态资源
打包规则与 css 相似，不同的是，对于`umd`，会放在配置的{assets}目录下
npm package: @plume2/plugin-remote
Description: For umi webpack5 MF
Latest version: 1.0.5

# @plume/plugin-remote

> @plume/plugin-remote.


## Install

Using npm:

```bash
$ npm install --save-dev @plume/plugin-remote
```

or using yarn:

```bash
$ yarn add @plume/plugin-remote --dev
```
npm package: @plumejs/testing
Description: a scoped package of plumejs with all testing utilities
Author: KiranMantha
Latest version: 4.1.4

[![GitHub contributors badge](https://img.shields.io/github/contributors/kiranmantha/plumejs-testing?color=blue)](https://GitHub.com/KiranMantha/plumejs-testing/graphs/contributors/) 
[![PRs Welcome badge](https://img.shields.io/badge/PRs-welcome-blue.svg)](https://GitHub.com/KiranMantha/plumejs-testing/pulls) 
[![Number of hits badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fhits.dwyl.com%2Fkiranmantha%2Fplumejs-testing.json&label=hits&color=blue)](http://hits.dwyl.com/KiranMantha/plumejs-testing)

[![NPM version badge](https://img.shields.io/npm/v/@plumejs/testing)](https://www.npmjs.com/package/@plumejs/testing)
[![NPM downloads badge](https://img.shields.io/npm/dw/%40plumejs/testing?color=blue)](https://www.npmjs.com/package/@plumejs/testing)


[![Dependencies badge](https://img.shields.io/badge/dependencies-%40plumejs%2Fcore-blue)](https://GitHub.com/KiranMantha/plumejs) 
[![Dependencies badge](https://img.shields.io/badge/dependencies-@testing--library/dom-blue)](https://github.com/testing-library/dom-testing-library)
[![Dependencies badge](https://img.shields.io/badge/dependencies-@testing--library/jest--dom-blue)](https://github.com/testing-library/jest-dom)
[![Dependencies badge](https://img.shields.io/badge/dependencies-jsdom-blue)](https://github.com/jsdom/jsdom)
[![Dependencies badge](https://img.shields.io/badge/dependencies-vitest-blue)](https://vitest.dev/)
[![Dependencies badge](https://img.shields.io/badge/dependencies-@vitest/coverage--v8-blue)](https://vitest.dev/guide/coverage.html)
[![Dependencies badge](https://img.shields.io/badge/dependencies-shadow--dom--testing--library-blue)](https://github.com/KonnorRogers/shadow-dom-testing-library)

[![GitHub watchers badge](https://img.shields.io/github/watchers/kiranmantha/plumejs-testing?style=social)](https://github.com/kiranmantha/plumejs-testing/watchers)
[![GitHub stars badge](https://img.shields.io/github/stars/kiranmantha/plumejs-testing.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/kiranmantha/plumejs-testing/stargazers/)


**PlumeJS Testing** is a scoped package in PlumeJS Ecosystem that provides all testing utilities

## Documentation

For documentation, please visit [wiki](https://github.com/KiranMantha/plumejs/wiki/Unit-testing)