open-index/open-npm huggingface dataset:
npm package: @shadryx/pptk
Description: Pixel-Perfect ToolKit, a library to help make pixel-perfect applications on high-DPI devices
Author: Shad Amethyst
Latest version: 0.1.10

# Pixel-Perfect ToolKit

This library aims to solve two problems in web-development, that are notoriously hard to both solve at once:
- support for mobile devices (high-DPI, multi-touch, etc.)
- pixel-perfect control, notably for [pixel fonts](https://github.com/adri326/online-pixel-font-creator)

## Limitations

### Canvases must be contained

Because canvases must have an integer width and height, and because `window.devicePixelRatio` may be a floating-point value.

For instance, if `dpr = 1.5` and the desired with is `81` CSS pixels, then the desired canvas width would be `81 * 1.5 = 121.5`.
Naively setting `canvas.width = 121.5` results in the browser truncating it to `121`, which only cover `121 / 1.5 ≈ 80.66` CSS pixels, resulting in blurred edges as the element has to be stretched horizontally by `0.4%`.

Instead, we set `canvas.width = Math.ceil(121.5) = 122`, then set `canvas.style.width` to `122 / 1.5 ≈ 81.33px`.
This requires a parent "container" element to read the desired width from and to hide the overflowing `0.33` CSS pixel.

This is what the container element should have as style:

```css
.container {
    /* Necessary properties */
    overflow: hidden;

    /* Optionally set a different background color to reduce flicker */
    background-color: /* ... */;

    /* Width and height should be set to anything besides `fit-content` */
    width: /* ... */;
    height: /* ... */;
}
```
npm package: @shadx/cli
Description: A CLI tool to generate UI components for your project
Author: shadx
Latest version: 1.0.6

# Shadcn-Extension

A CLI (inspired by shadcn-ui) for adding components to your project, making it easier to integrate and manage UI components within your codebase.

## Installation

To get started with the `shadcn-Extension` CLI, ensure you have `npx` installed. This tool allows you to run packages directly from npm without globally installing them.

> ## NOTE
>
> ALL TYPES PACKAGES FOR NOW NEEDS TO BE INSTALLED MANUALLY

## Usage

### Initializing a New Project

Use the `init` command to initialize dependencies for a new project. This command sets up everything you need, including installing necessary dependencies, adding the `cn` utility, configuring `tailwind.config.js`, and setting up CSS variables.

1. **Initialize Dependencies**

   Run the following command to initialize the project:

   ```bash
   npx shadcn-ui init
   ```

2. **Initialize Shadcn-Extension CLI**

   Next, set up your project with the shadcn-extension CLI:

   ```bash
   npx @shadx/cli init
   ```

### Adding Components

Use the `add` command to add components to your project. This command installs the required dependencies and integrates the specified component into your project.

1. **Add a Specific Component**

   To add a specific component, specify the component name:

   ```bash
   npx @shadx/cli add [component]
   ```

   **Example:**

   Adding a `tree-view` component:

   ```bash
   npx @shadx/cli add tree-view
   ```

2. **View Available Components**

   If you want to see a list of all available components, run the `add` command without any arguments:

   ```bash
   npx @shadx/cli add
   ```

   This will display a list of components that you can add to your project.

## Full Documentation

For detailed documentation, including installation guides, component usage, and more, visit the [shadcn-Extension Documentation](https://shadcn-extension.vercel.app/docs/installation).

## License

This project is licensed under the [MIT license](https://github.com/BelkacemYerfa/shadcn-extension/blob/master/packages/cli/LICENSE.md).

## Contributing

Contributions are welcome! If you have suggestions for improvements, please open an issue or submit a pull request on the [GitHub repository](https://github.com/BelkacemYerfa/shadcn-extension).
npm package: @shady-gabal/react-draft-wysiwyg
Description: A wysiwyg on top of DraftJS.
Author: Jyoti Puri
Latest version: 1.15.2

# React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).

[![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)

![](http://i.imgur.com/tU7kJ6i.gif)

## Features

- Configurable toolbar with option to add/remove controls.
- Option to change the order of the controls in the toolbar.
- Option to add custom controls to the toolbar.
- Option to change styles and icons in the toolbar.
- Option to show toolbar only when editor is focused.
- Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
- Support for block types: Paragraph, H1 - H6, Blockquote, Code.
- Support for setting font-size and font-family.
- Support for ordered / unordered lists and indenting.
- Support for text-alignment.
- Support for coloring text or background.
- Support for adding / editing links
- Choice of more than 150 emojis.
- Support for mentions.
- Support for hashtags.
- Support for adding / uploading images.
- Support for aligning images, setting height, width.
- Support for Embedded links, flexibility to set height and width.
- Option provided to remove added styling.
- Option of undo and redo.
- Configurable behavior for RTL and Spellcheck.
- Support for placeholder.
- Support for WAI-ARIA Support attributes
- Using editor as controlled or un-controlled React component.
- Support to convert Editor Content to HTML, JSON, Markdown.
- Support to convert the HTML generated by the editor back to editor content.
- Support for internationalization.

## Installing

The package can be installed from npm `react-draft-wysiwyg`

```
$ npm install --save react-draft-wysiwyg draft-js
```

## Getting started

Editor can be used as simple React Component:

```js
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;
```

## Docs

For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).

## Questions Discussions

For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).

## Fund

You can fund project at [Patreon](https://www.patreon.com/jyotipuri).

## Thanks

Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.

## License

MIT.