open-index/open-npm huggingface dataset:
npm package: @poky85/chart.js
Description: Simple HTML5 charts using the canvas element.
Latest version: 4.2.1

<p align="center">
  <a href="https://www.chartjs.org/" target="_blank">
    <img src="https://www.chartjs.org/media/logo-title.svg" alt="https://www.chartjs.org/"><br/>
  </a>
    Simple yet flexible JavaScript charting for designers & developers
</p>

<p align="center">
    <a href="https://www.chartjs.org/docs/latest/getting-started/installation.html"><img src="https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Downloads"></a>
    <a href="https://github.com/chartjs/Chart.js/actions?query=workflow%3ACI+branch%3Amaster"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/chartjs/Chart.js/ci.yml?branch=master"></a>
    <a href="https://coveralls.io/github/chartjs/Chart.js?branch=master"><img src="https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Coverage"></a>
    <a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
    <a href="https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw"><img src="https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600" alt="Slack"></a>
</p>

<p align="center">
  <br/>
  <a href="https://cube.dev/events/chart-js-community-meetup?ref=chartjs-github" target="_blank">
    <img src="https://ucarecdn.com/7733444d-5200-4b4b-9155-57e4311a6fa7/" width="700"/>
  </a>
  <br/>
  <br/>
</p>

## Documentation

All the links point to the new version 4 of the lib.

* [Introduction](https://www.chartjs.org/docs/latest/)
* [Getting Started](https://www.chartjs.org/docs/latest/getting-started/index)
* [General](https://www.chartjs.org/docs/latest/general/data-structures)
* [Configuration](https://www.chartjs.org/docs/latest/configuration/index)
* [Charts](https://www.chartjs.org/docs/latest/charts/line)
* [Axes](https://www.chartjs.org/docs/latest/axes/index)
* [Developers](https://www.chartjs.org/docs/latest/developers/index)
* [Popular Extensions](https://github.com/chartjs/awesome)
* [Samples](https://www.chartjs.org/samples/)

In case you are looking for an older version of the docs, you will have to specify the specific version in the url like this: [https://www.chartjs.org/docs/2.9.4/](https://www.chartjs.org/docs/2.9.4/)

## Contributing

Instructions on building and testing Chart.js can be found in [the documentation](https://www.chartjs.org/docs/master/developers/contributing.html#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://www.chartjs.org/docs/master/developers/contributing) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) with the `chart.js` tag.

## License

Chart.js is available under the [MIT license](LICENSE.md).
npm package: @poky85/parcel-plugin-css-modules-type-generator
Description: Generates .d.ts files for CSS modules with Parcel
Author: Jannick Garthen
Latest version: 1.2.0

# Parcel Plugin CSS Modules Type Generator

Generates .d.ts files for your CSS modules with [Parcel](https://parceljs.org).

![](https://img.shields.io/npm/l/parcel-plugin-css-modules-type-generator.svg)
[![](https://img.shields.io/npm/v/parcel-plugin-css-modules-type-generator.svg)](https://www.npmjs.com/package/parcel-plugin-css-modules-type-generator)
![](https://img.shields.io/david/garthenweb/parcel-plugin-css-modules-type-generator.svg)
[![Build Status](https://travis-ci.org/garthenweb/parcel-plugin-css-modules-type-generator.svg?branch=master)](https://travis-ci.org/garthenweb/parcel-plugin-css-modules-type-generator)

This plugin is inspired by [typed-css-modules](https://www.npmjs.com/package/typed-css-modules), it will generate `.d.ts` files for your CSS modules so you have proper typing for your styles.

As Parcel already handles watching of files and generates CSS modules this plugin is super easy to use and works out of the box, you don't need to run tasks in parallel while working on your code to get proper types.

Further it supports all kind of extensions that compile to CSS (only those that are supported by Parcel) out of the 📦, e.g. scss, less and stylus.

## Installation

Just add the plugin to your `package.json`:

```
npm install --save-dev parcel-plugin-css-modules-type-generator
```

Parcel will handle the rest for you! 🚀

Please note that you need to activate CSS modules for Parcel by adding a `.postcssrc` file to the main directory with the following content:

```json
{
  "modules": true
}
```

## License

Licensed under the [MIT License](https://opensource.org/licenses/mit-license.php).
npm package: @poky85/react-resizzer
Description: A lite-weight component for resizing any element using handle
Author: Jiri Pokorny
Latest version: 0.1.0

A lite-weight component for resizing any element using handle.

### Example

```js
import React from "react";
import { render } from "react-dom";

import Resizzer from "../../../src";

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

        this.state = {
            width: null,
        };

        this.handleResize = this.handleResize.bind(this);
    }

    handleResize(diff) {
        const width = Math.max(0, this.targetEl.clientWidth + diff);

        this.setState({ width });
    }

    render() {
        const { width } = this.state;
        return (
            <Resizzer
                className="resizzer"
                handleClassName="resizzer__handle"
                onResize={this.handleResize}
            >
                <div
                    ref={el => {
                        this.targetEl = el;
                    }}
                    className="example"
                    style={width !== null ? { width: `${width}px` } : null}
                />
            </Resizzer>
        );
    }
}
```

```css
.example {
	background: aquamarine;
	height: 100px;
	width: 100px;
}

.resizzer {
	display: inline-block;
	position: relative;
}

.resizzer__handle {
	background: darkorange;
	cursor: col-resize;
	height: 100%;
	width: 4px;
	position: absolute;
	right: 0;
	top: 0;
}

```

### API

```js
<Resizzer
    className="resizzer"
    handleClassName="resizzer__handle"
    onResize={this.handleResize}
>
    <div className="your_resize_target" />
</Resizzer>
```

#### Props
- `children` – resize target (required)
- `onResize` – callback to be called when resizing target element (required)
- `className` – className for container element
- `handleClassName` – className for resize-handle element
- `style` – style object for container element
- `styleClassName` – style object for resize-handle element
- `resize` – CSS property to be resized, `width` (default) or `height`
npm package: @polac0/vue-gen
Description: CLI command to create VueJS components
Author: Bernardo de Melo Matuchewski
Latest version: 2.1.1

# Vue Gen

A smart CLI to scaffold Vue.js components with automatic UI Framework detection.

[![npm version](https://img.shields.io/npm/v/vue-gen.svg)](https://www.npmjs.com/package/vue-gen)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Open Source](https://img.shields.io/badge/Open%20Source-%E2%9D%A4-brightgreen)](https://github.com/BerPGR/cli-vue-component-generator)

## Why use Vue Gen?

Creating components manually involves repetitive boilerplate. **Vue Gen** automates this by detecting your project's ecosystem and providing the right template immediately.

- **Zero Config:** Automatically detects if you are using Tailwind, PrimeVue, Vuetify, and more.
- **Modern Standards:** Full support for `<script setup>` and TypeScript.
- **Smart Pathing:** Automatically creates directories if they don't exist.
- **No Junk:** Clean, lightweight, and focused.

---

## Installation & Usage

You don't need to install it globally. Use **npx** to keep your system clean:

```bash
npx @polac0/vue-gen
```

Alternatively, for global access:

```bash
npm install -g @polac0/vue-gen

# then run
vue-gen [name]
```

## Supported UI Frameworks

The CLI scans your package.json to detect your UI library and provides tailored templates:

| Framework / UI Library | Components |
|-----------------------|--------------------|
| **Shadcn UI (radix-vue)** | Card, Button, Footer |
| **Nuxt UI (@nuxt/ui)** | UContainer, UCard, UButton |
| **PrimeVue** | Panel, Button |
| **Vuetify** | v-card, v-btn |
| **Tailwind / DaisyUI** | Utility classes / DaisyUI components |
| **Element Plus** | el-card, el-button |
| **Quasar** | q-card, q-btn |
| **Naive UI** | n-card, n-button |

## Command Options

```bash
Usage: vue-gen [options] [name]

Arguments:
  name                Component name (optional, prompt will trigger if empty)

Options:
  -V, --version       Output the version number
  --js, --javascript  Use JavaScript
  --ts, --typescript  Use TypeScript
  -s, --setup         Use <script setup> (default: true)
  -p, --path <path>   Custom path (default: src/components)
  -h, --help          Display help
```

### Example
Running `vue-gen MyCard --ts -s` in a Tailwind/DaisyUI project will generate:

```javascript
<template>
  <div class="p-4 bg-white shadow rounded-lg">
    <h1 class="text-2xl font-semibold text-gray-800">Component MyCard</h1>
    <button class="btn btn-primary mt-4">Styled Button</button>
  </div>
</template>

<script setup lang="ts"></script>
```

### Image
**Tailwind** | ![Tailwind Template](https://github.com/BerPGR/cli-vue-component-generator/blob/master/image.png)


## Requirements
- VueJS Project: The CLI checks for the vue dependency.
- package.json: Must be run from the root of your project.
npm package: @polagram/cli
Description: CLI tool for Polagram
Latest version: 0.2.2

# @polagram/cli

The official CLI for Polagram, enabling CI/CD integration for sequence diagram transformations.

**Official Website:** [https://polagram.org/](https://polagram.org/)

## Installation

```bash
pnpm add -D @polagram/cli
```

## Supported Formats
- **Mermaid**: `.mmd`, `.mermaid`
- **PlantUML**: `.puml`, `.plantuml`, `.pu`

## Usage

### Configuration

Create a `polagram.yml` in your project root:

```yaml
version: 1
targets:
  - input: ["docs/design/**/*.mmd"]
    outputDir: "docs/generated"
    ignore: ["**/_*.mmd"]
    # format: mermaid        # Optional: auto-detected from file extension/content
    # outputFormat: plantuml # Optional: defaults to input format
    lenses:
      - name: "success"
        suffix: ".success"
        layers:
          # Resolve "Success" alt blocks (Show only the success case)
          - action: resolve
            selector: { kind: "fragment", condition: "Success" }
          
          # Remove infrastructure details (Logger, Metrics)
          - action: remove
            selector: { kind: "participant", name: { pattern: ".*(Logger|Metrics).*" } }
            
          # Focus on specific interactions
          - action: focus
            selector: { kind: "participant", name: { pattern: "Client.*" } }
```

### Running

```bash
pnpm polagram generate
```

Or with a specific config:

```bash
pnpm polagram generate --config my-config.yml
```

## Features

- **Multi-Format Support**: Works with both Mermaid and PlantUML sequence diagrams
- **Auto-Detection**: Automatically detects diagram format from file extension or content
- **Format Conversion**: Convert between Mermaid and PlantUML formats
- **Glob Support**: Use standard glob patterns to find input files
- **Directory Mirroring**: Output files preserve their directory structure relative to the project root
- **Strict Validation**: Validates `polagram.yml` against the Core schema to prevent errors (supports `merge`, `remove`, `focus`, `resolve` actions)

## Supported Formats

| Format | Extensions | Auto-Detection |
|--------|-----------|----------------|
| Mermaid | `.mmd`, `.mermaid` | `sequenceDiagram` keyword |
| PlantUML | `.puml`, `.plantuml`, `.pu` | `@startuml` keyword |

## Examples

### PlantUML to PlantUML

```yaml
version: 1
targets:
  - input: ["diagrams/**/*.puml"]
    outputDir: "generated"
    lenses:
      - name: "clean"
        layers:
          - action: remove
            selector: { kind: "participant", name: "Logger" }
```

### Cross-Format Conversion (PlantUML to Mermaid)

```yaml
version: 1
targets:
  - input: ["diagrams/**/*.puml"]
    outputDir: "generated"
    outputFormat: mermaid  # Convert to Mermaid format
    lenses:
      - name: "converted"
        layers:
          - action: focus
            selector: { kind: "participant", name: { pattern: "API.*" } }
```