open-index/open-npm huggingface dataset:
npm package: @pkyeck/storybook-addon-mock
Description: A storybook addon to mock fetch/XHR request
Author: Farhad Yasir
Latest version: 5.0.1-alpha

<div align="center">
        <img src="https://raw.githubusercontent.com/nutboltu/storybook-addon-mock/master/assets/logo.svg" alt="Storybook addon mock" height="150" />
        <h1>Storybook Addon Mock</h1>
</div>

<p>
    <a href="https://github.com/nutboltu/storybook-addon-mock/actions">
        <img src="https://github.com/nutboltu/storybook-addon-mock/workflows/CI/badge.svg" alt="Actions Status" />
    </a>
    <a href="#">
        <img src="https://img.shields.io/npm/dm/storybook-addon-mock.svg" alt="Npm download" />
    </a>
    <a href="https://badge.fury.io/js/storybook-addon-mock">
        <img src="https://badge.fury.io/js/storybook-addon-mock.svg" alt="npm version" />
    </a>
     <a href="https://github.com/nutboltu/storybook-addon-mock/blob/main/LICENSE">
        <img src="https://img.shields.io/github/license/nutboltu/storybook-addon-mock" alt="License" />
    </a>
</p>

[![NPM](https://nodei.co/npm/storybook-addon-mock.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/storybook-addon-mock/)


This addon allows you to mock fetch or XMLHttprequest requests in [storybook](https://storybook.js.org/).
If your component depends on backend requests, and your backend requests are not ready yet to feed your component,
this addon provides mock response to build your component.


### Purpose

There are few packages those help the developers to mock the backend requests while building components.
But those packages aren't integrated properly in storybook and also there's no scope to play with those requests in the storybook.
Mostly, there's no playground to modify the response and see the changes in the storybook.

### Highlights

`storybook-addon-mock` provides the following features.
 
 <ul>
    <li> You can mock <strong>fetch or XMLHttpRequest</strong>.</li>
    <li> A <strong>dedicated panel</strong> where you can see the list of mock requests.</li>
    <li> An <strong>on/off button for each request</strong> which can turn off the mock and try the real request.</li>
    <li> A <strong>dropdown list of status code</strong> where you can change the status and experience the difference.</li>
    <li> A <strong>response JSON object which can be modified in the panel.</strong> You can see the changes straight away in the story.</li>
    <li> A <strong>delay option which helps you delaying the response</strong> so that you can test any kind of loading behaviour.</li>
 </ul>

### Documentation

[See the documentation](https://storybook-addon-mock.netlify.app)

[Older(2.*) version documentation](https://github.com/nutboltu/storybook-addon-mock/blob/2.4.1/README.md)
### License

This project is licensed under the MIT License - see the LICENSE file in the source code for details.
npm package: @pl-core/components
Description: Componentes
Author: Polo
Latest version: 0.5.0

# @pl-core/components

[![npm version](https://badge.fury.io/js/@pl-core%2Fcomponents.svg)](https://badge.fury.io/js/@pl-core%2Fcomponents)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@pl-core/components)](https://bundlephobia.com/package/@pl-core/components)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Una librería de componentes modulares para React, construida con TypeScript y Tailwind CSS. Diseñada con una arquitectura de componentes compuestos (Compound Components) para ofrecer la máxima flexibilidad y una excelente experiencia de desarrollo.

## 📦 Instalación

Para instalar la librería junto con sus dependencias necesarias, ejecuta el siguiente comando en la raíz de tu proyecto:

```bash
npm install @pl-core/components
```

_(Si usas otros gestores de paquetes como `yarn` o `pnpm`, utiliza su comando de instalación equivalente)._

## ⚙️ Configuración de Tailwind CSS (¡Importante!)

Como esta librería utiliza Tailwind CSS para sus estilos, necesitas indicarle al compilador de tu proyecto que escanee las clases de nuestros componentes.

Abre el archivo `tailwind.config.ts` (o `.js`) de tu proyecto y agrega nuestras rutas exportadas en la propiedad `content`:

```typescript
import type { Config } from 'tailwindcss';
// 1. Importa las rutas de la librería
import { contentPaths } from '@pl-core/components/tailwind';

const config: Config = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    // 2. Agrega las rutas al escáner
    ...contentPaths,
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;
```

> **Nota:** La librería utiliza variables CSS para los colores (ej. `--primary`, `--background`). Asegúrate de tener estas variables definidas en tu archivo CSS global.

## 🧩 Componentes Disponibles

Actualmente, la librería cuenta con los siguientes componentes modulares:

- **Input**: Un campo de texto altamente personalizable que soporta etiquetas, iconos, contadores, mensajes de error y addons.
- **Autocomplete**: Un selector de autocompletado avanzado, virtualizado para un alto rendimiento, que incluye manejo de estado, filtrado y popover.
npm package: @pl-core/utils
Description: Funciones para array, base64, blob, file, hash, interval, merge, mime, mobile, numbers, object, react, string, units, url
Author: Polo
Latest version: 0.1.1

# @pl-core/utils

[![npm version](https://badge.fury.io/js/@pl-core%2Futils.svg)](https://badge.fury.io/js/@pl-core%2Futils)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@pl-core/utils)](https://bundlephobia.com/package/@pl-core/utils)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Funciones para array, base64, blob, file, hash, interval, merge, mime, mobile, numbers, object, react, string, units, url.

## Instalación

Puedes instalar la librería usando npm o yarn:

```bash
npm install @pl-core/utils
# o
yarn add @pl-core/utils
```
npm package: @pl-numiko/splide-extension-video
Description: The Splide extension for embedding videos.
Author: Naotoshi Fujita
Latest version: 0.8.1

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>Video - Splide Extension</h1>

<p>
The extension for assigning HTML, YouTube and Vimeo videos to slides in a <a href="https://github.com/Splidejs/splide">Splide</a> slider and controlling play/pause on slide change.
</p>

[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide-extension-video/badge)](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-video)

<p>
  <a href="https://splidejs.com/extensions/video/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/video/">Getting Started</a>
  <br>
  <a href="https://splidejs.com/extensions/video/#options">Options</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-video).

```
$ npm install @splidejs/splide-extension-video
```

Or download files from the dist directory.

## License
Splide is released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @pl-pluto/api-gen
Description: ```bash yarn add @pl-pluto/api-gen ```
Latest version: 1.4.1

# ![@pl-pluto/api-gen cover](https://pluto.proglimes.com/cover/api-gen.png '@pl-pluto/api-gen cover')

## @pl-pluto/api-gen

### Install

```bash
yarn add @pl-pluto/api-gen
```

### Usage

#### Generate client

```typescript
import {
  generateClient,
  ValidationLocationType,
  createEndpoint,
  createEndpointLeaf,
  HttpMethods,
} from '@pl-pluto/api-gen';
import { z } from 'zod';

const plutoApiSpecification = {
  baseUrl: 'https://api.pluto.com',
  endpoints: createEndpointLeaf({
    login: createEndpoint({
      method: HttpMethods.POST,
      tags: ['auth'],
      summary: 'Login',
      path: '/auth/login',
      requestBody: z.object({ email: z.string(), password: z.string() }),
      response: {
        200: z.object({ token: z.string() }),
        401: z
          .object({ message: z.string() })
          .describe('Invalid login credentials'),
      },
    }),
  }),
  docs: { info: { title: 'Pluto API', version: '1.0.0' } },
};

const plutoApi = generateClient(plutoApiSpecification);

plutoApi.login({ requestBody: { email: '', password: '' } }).then((res) => {
  console.log(res.data?.token);
});
```

#### Generate openapi

```typescript
import { generateOpenapi } from '@pl-pluto/api-gen';

const openapi = generateOpenapi(plutoApiSpecification);

console.log(openapi.json);
console.log(openapi.html);
```
npm package: @pl-pluto/ui
Description: ```bash yarn add @pl-pluto/ui ```
Latest version: 1.8.3

# ![@pl-pluto/ui cover](https://pluto.proglimes.com/cover/ui.png '@pl-pluto/ui cover')

## @pl-pluto/ui

### Install

```bash
yarn add @pl-pluto/ui
```

### Setup

- Import the css file in the root of your application
- Use your theme class with a theming library

```typescript jsx
import '@pl-pluto/ui/dist/index.css';
import { themeClasses } from '@pl-pluto/ui';
import { ThemeProvider } from 'next-themes';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class" value={themeClasses}>
      {Component}
    </ThemeProvider>
  );
}
```

### Component documentation

[Component documentation](https://pluto-ui.proglimes.com/)
npm package: @pl-projects/pl-crud
Description: crud
Latest version: 2.0.5


## 功能
- 继承了 Element 中表格所有功能
- 新增表格数据
- 修改表格数据
- 删除表格数据
- 使用 Element 中的组件渲染表格内容和表单内容
- 表单校验
- 表格内编辑
- 渲染自定义组件

## 安装
使用npm
``` bash
npm i element-ui @pl-projects/pl-crud -S
```

使用yarn
``` bash
yarn add element-ui @pl-projects/pl-crud
```

## 在项目中使用
在`main.js`中写入以下内容：
``` js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import PLCrud from '@pl-projects/pl-crud'

Vue.use(ElementUI)
Vue.use(PLCrud)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

之后就可以在项目中使用`PL-Crud`了。
npm package: @pl-projects/vue-filename-injector
Description: Inject the file path of .vue
Latest version: 1.1.0

# Vue Filename Injector

Inject the file path of the `.vue` on `this.$options.__source`.

## Install

``` sh
yarn add @pl-projects/vue-filename-injector -D
```

or

``` sh
npm install @pl-projects/vue-filename-injector -D
```

## Usage

Only used for vue-cli3, `vue.config.js`:

``` js
const VueFilenameInjector = require('@pl-projects/vue-filename-injector')

module.exports = {

  chainWebpack: config => {
    // ...

    // in here, only with chainWebpack
    VueFilenameInjector(config, {
      propName: '__source' // default
    })

  }
}
```

## Relevant

https://github.com/neutrinojs/webpack-chain
https://vue-loader.vuejs.org/guide/custom-blocks.html