open-index/open-npm huggingface dataset:
npm package: @pogasanov/sanity-plugin-color-list
Description: Displays a list of colors
Author: Kim Björkman
Latest version: 2.0.0

> This is a **Sanity Studio v3** plugin.

## Installation

```
npm install --save sanity-plugin-color-list@studio-v3
```

## Usage

# sanity-plugin-color-list

> This is a **Sanity Studio v3** plugin.

## Installation

```
npm install --save sanity-plugin-color-list@studio-v3
```

## Usage
Add it as a plugin in sanity.config.ts (or .js):

```
 import {defineConfig} from 'sanity'
 import {myPlugin} from 'sanity-plugin-color-list'

 export const defineConfig({
     //...
     plugins: [
         myPlugin({})
     ]
 })
```
## License

[MIT](LICENSE) © Kim Björkman

## Develop & test

This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.

See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.

## License

[MIT](LICENSE) © Kim Björkman


## Develop & test

This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
with default configuration for build & watch scripts.

See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
on how to run this plugin with hotreload in the studio.

### Release new version

Run ["CI & Release" workflow](https://github.com/pogasanov/sanity-color-list/actions/workflows/main.yml).
Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.
npm package: @poggle/colors
Description: [![GhostCrawl3r - Poggle](https://img.shields.io/static/v1?label=GhostCrawl3r&message=Poggle&color=blue&logo=github)](https://github.com/GhostCrawl3r/Poggle) [![stars - Poggle](https://img.shields.io/github/stars/GhostCrawl3r/Poggle?style=social)](https:/
Author: Nick Morgan
Latest version: 1.0.2

# Poggle React Colors Library
[![GhostCrawl3r - Poggle](https://img.shields.io/static/v1?label=GhostCrawl3r&message=Poggle&color=blue&logo=github)](https://github.com/GhostCrawl3r/Poggle)
[![stars - Poggle](https://img.shields.io/github/stars/GhostCrawl3r/Poggle?style=social)](https://github.com/GhostCrawl3r/Poggle)
[![forks - Poggle](https://img.shields.io/github/forks/GhostCrawl3r/Poggle?style=social)](https://github.com/GhostCrawl3r/Poggle)
![maintained - yes](https://img.shields.io/badge/maintained-yes-blue)
[![Made with JavaScript](https://img.shields.io/badge/Made_with-JavaScript-blue?logo=javascript&logoColor=white)](https://www.javascript.com/)
[![Made with TypeScript](https://img.shields.io/badge/TypeScript-4-blue?logo=typescript&logoColor=white)](https://typescriptlang.org)
[![Made with React](https://img.shields.io/badge/React-17-blue?logo=react&logoColor=white)](https://www.npmjs.com/package/react)

Welcome to the Poggle colors library! This library is based on Googles Material Design color library.

You can read our full docs [here.](https://ghostcrawl3r.github.io/-poggle-colors/?path=/docs/getting-started--introduction)

Please feel free to follow the project on GH.


## Install Poggle Colors
You can easily install Poggle Colors from NPM or Yarn using the following commands in your terminal:

##### NPM

```
npm install @Poggle/colors
```
##### Yarn

```
yarn add @Poggle/colors
```
npm package: @poggle/core
Description: [![GhostCrawl3r - Poggle](https://img.shields.io/static/v1?label=GhostCrawl3r&message=Poggle&color=blue&logo=github)](https://github.com/GhostCrawl3r/Poggle) [![stars - Poggle](https://img.shields.io/github/stars/GhostCrawl3r/Poggle?style=social)](https:/
Author: Nick Morgan
Latest version: 1.0.226

# Poggle React Component Library
[![GhostCrawl3r - Poggle](https://img.shields.io/static/v1?label=GhostCrawl3r&message=Poggle&color=blue&logo=github)](https://github.com/GhostCrawl3r/Poggle)
[![stars - Poggle](https://img.shields.io/github/stars/GhostCrawl3r/Poggle?style=social)](https://github.com/GhostCrawl3r/Poggle)
[![forks - Poggle](https://img.shields.io/github/forks/GhostCrawl3r/Poggle?style=social)](https://github.com/GhostCrawl3r/Poggle)
![maintained - yes](https://img.shields.io/badge/maintained-yes-blue)
[![Made with JavaScript](https://img.shields.io/badge/Made_with-JavaScript-blue?logo=javascript&logoColor=white)](https://www.javascript.com/)
[![Made with TypeScript](https://img.shields.io/badge/TypeScript-4-blue?logo=typescript&logoColor=white)](https://typescriptlang.org)
[![Made with React](https://img.shields.io/badge/React-17-blue?logo=react&logoColor=white)](https://www.npmjs.com/package/react)

Welcome to Poggle a react component library! This library is currently heavily in development.

You can read our full docs [here.](http://poggle.io)

Please feel free to follow the project on GH. 


## Install Poggle
You can easily install Poggle from NPM or Yarn using the following commands in your terminal:

##### NPM

```
npm install @Poggle/core
```
##### Yarn

```
yarn add @Poggle/core
```
npm package: @pogix3m/short-number
Description: Convert long number to short number for readability
Author: Harold Niones
Latest version: 1.0.1

# short-number [![Build Status](https://travis-ci.org/Pogix3m/short-number.svg?branch=master)](https://travis-ci.org/Pogix3m/short-number) [![GitHub license](https://img.shields.io/github/license/Pogix3m/short-number)](https://github.com/Pogix3m/short-number/blob/master/LICENSE) ![GitHub package.json version](https://img.shields.io/github/package-json/v/Pogix3m/short-number)

Convert long number to short number for readability.
By default up to Unvigintillion(10^66)

## Installation

```sh
$ npm install --save @pogix3m/short-number
```

## Usage

```js
var shortNumber = require('@pogix3m/short-number');

shortNumber(1000);
// => 1K

shortNumber(756_159_852);
// => 756.15M

shortNumber(-6248645.13);
// => -6.24M

shortNumber("6248645.13");
// => 6.24M

// provide the suffix
const suffix = [
    "Thousand",
    "Million",
    "Billion",
    "Trillion",
    "Quadrillion"
];

shortNumber(28728, suffix);
// => 28.72Thousand

shortNumber(756159852, suffix);
// => 756.15Million
```
npm package: @pogr/pogr_components_library
Description: Reusable components library for POGR inc.
Author: Juno Kim
Latest version: 0.0.78

To use library

```
yarn add @pogr/pogr_components_library
```

To view components on Storybook
```
npm run storybook
```

To publish
```
1. increment version in package.json
2. npm run rollup
3. npm publish
```
npm package: @pogr/pogr_components_library_2
Description: Reusable components library for POGR inc.
Author: Juno Kim
Latest version: 0.0.64

# pogr_components_library_2

To use library

```
yarn add @pogr/pogr_components_library_2
```

To view components on Storybook
```
npm run storybook
```

To publish
```
1. increment version in package.json
2. npm run rollup
3. npm publish
```
npm package: @pogr/pogr_widget_library
Description: Reusable components library for POGR inc.
Author: Juno Kim
Latest version: 0.0.2

# pogr_components_library_2

To use library

```
yarn add @pogr/pogr_components_library_2
```

To view components on Storybook
```
npm run storybook
```

To publish
```
1. increment version in package.json
2. npm run rollup
3. npm publish
```
npm package: @pogrib0k/library-builder
Description: Build tool for vue3 component libraries
Latest version: 0.0.1-alpha1

# LibraryBuilder

This library provides tools and plugins for building UI libraries.

## Why you should use this library build tool?
There are few thing to consider when building UI library:
- Components must be tree-shakable (both JS and CSS).
- Components must be optimized for SSR.
- Library must provide Nuxt support.
- It must be easy and fast to build as UI library for Vuejs.
- Generates correct `exports` in `package.json`, so library works within any bundler and components are tree-shakable

Library produces builds:
- cjs - for node (SSR like vite-ssr)
- iife - for browsers
- es - for bundlers (like Vite)
- esm-node - for bundlers, but without vue and css plugins (pure Rollup)
- nuxt - nuxt module for nuxt3
- web-components - ES build optimized to be used as web-components (not ready for production usage yet)
- types - ts types
- styles - compiled css styles

## Usage
As a CLI:
```bash
  build-ui-library
```
Arguments:
- entry - path to main.ts file. Default `./src/main.ts`
- nuxtDir - path to nuxt folder where `module.ts` and `runtime` folder are stored. Default: entry file dir + `./nuxt`
- outDir - path where to put output files. Default `./dist`

As a library: (not ready yet)

## Recommended project structure

- 📁 src
  - 📁 components
    - 📁 [component-name]
      - 📄 [component-name].vue
  - 📁 composables
  - 📁 nuxt (can be changed with nuxtDir argument)
    - 📁 runtime
      - 📄 plugin.ts
    - 📄 module.ts
  - 📁 utils
  - 📁 styles (*)
  
## Nuxt module

Nuxt module must have `module.ts` in the root folder. 
`runtime` folder will be copied to dist and will be available for `module.ts` to load `plugins`.

To correctly resolve library in development and build you can use `// @replace-next-line: ` compiler macro.

```ts
// @replace-next-line: import { createVuestic } from 'vuestic-ui'
import { createVuestic } from '../main.ts'
```

[See example](./tests/demo/src/nuxt)
npm package: @pohfy/react-prism-editor
Description: React prism editor with theme,line-numbers,copy to dashboard
Author: zhang yue
Latest version: 1.1.1

# React Prism Editor


> A dead simple code editor with theme,syntax highlighting,line numbers.

## Demo

[react-prism-editor](https://lumia2046.github.io/react-prism-editor/)


## Features
- Theme
- Copy to dashboard
- Code Editing ^^
- Syntax highlighting
- Undo / Redo
- Copy / Paste
- The spaces/tabs of the previous line is preserved when a new line is added
- Works on mobile (thanks to contenteditable)
- Resize to parent width and height
- Support for line numbers
- Support for autosizing the editor
- Autostyling the linenumbers 

## Install

```sh
npm install react-prism-editor
```

or

```sh
yarn add react-prism-editor
```

## Usage



```js
import ReactPrismEditor from "react-prism-editor";

<ReactPrismEditor
  language={language}
  theme={theme}
  code={code}
  lineNumber={lineNumber}
  readOnly={readOnly}
  clipboard={true}
  changeCode={code => {
    this.code = code
    console.log(code)
  }}
/>


```
## Props

| Name                 | Type      | Default | Options                              | Description                                      |
| -------------------- | --------- | ------- | ------------------------------------ | ------------------------------------------------ |
| code                 | `string`  | `""`    | -                                    |  the code                                        |
| language             | `String`  |`"javascript"`| `json,javascript,jsx,tsx,typescript`<br>`html,vue,angular,css,sass,markup`<br>`java,php,csharp,c,cpp,sql,xml,yaml` | language of the code |
| lineNumbers          | `Boolean` | `false` | -                                    | Whether to show line numbers or not              |
| readonly             | `Boolean` | `false` | -                                    | Indicates if the editor is read only or not      |               
| clipboard            | `Boolean` | `false` | -                                    | Whether to show clipboard or not                 |
| showLanguage         | `Boolean` | `false` | -                                    | Whether to show language or not                  |



## Events

| Name       | Parameters | Description                     |
| ---------- | ---------- | ------------------------------- |
| changeCode | `(code)`   | Fires when the code is changed. |


## Thanks

inspired by [react-live](https://github.com/FormidableLabs/react-live).

## License

MIT
npm package: @pohodnik/babel-preset
Description: base babel preset for pohodnik's
Author: pohodnik58
Latest version: 2.0.12

# babel-preset
Babel preset for js project

## Install

```
yarn add -D @pohodnik/babel-preset
```
or

```
npm install --save-dev @pohodnik/babel-preset
```

## Usage

in *.babelrc* file

```
{
	"presets": ["@pohodnik/babel-preset"]
}
```

### Adding Typescript (Optional)
```
yarn add -D @babel/preset-typescript
```

in *.babelrc*
```
{
	"presets": [
		"@pohodnik/babel-preset",
		"@babel/preset-typescript"
	]
}
```
npm package: @pohodnik/babel-preset-react
Description: Babel preset for pohodnik's react developers
Author: Pohodnik
Latest version: 1.1.15

# babel-preset-react
Babel preset for react project

## Install

```
yarn add -D @pohodnik/babel-preset-react
```
or

```
npm install --save-dev @pohodnik/babel-preset-react
```

## Usage

in *.babelrc* file

```
{
	"presets": ["@pohodnik/babel-preset-react"]
}
```

### Adding Typescript (Optional)
```
yarn add -D @babel/preset-typescript
```

in *.babelrc*
```
{
	"presets": [
		"@pohodnik/babel-preset-react",
		"@babel/preset-typescript"
	]
}
```
npm package: @pohodnik/eslint-config
Description: Pohodnik code style
Author: Pohodnik
Latest version: 5.0.3

# @pohodnik/eslint-config
eslint configuration for pohodnik developers

## install
```bash
 yarn add -D @pohodnik/eslint-config
```

or 

```bash
 npm install --save-dev @pohodnik/eslint-config
```

## usage
in root of your project place file `.eslintrc` with content:

### basic
```json
{
    "extends": "@pohodnik"
}
```

### for react
```json
{
    "extends": ["@pohodnik", "@pohodnik/eslint-config/react"]
}
```

### for jest
```json
{
    "extends": ["@pohodnik", "@pohodnik/eslint-config/jest"]
}
```

### for all
```json
{
    "extends": [
        "@pohodnik",
        "@pohodnik/eslint-config/react",
        "@pohodnik/eslint-config/jest"
    ]
}
```
npm package: @pohodnik/stylelint-config
Description: Stylesheets config for pohodnik developers
Author: Pohodnik58
Latest version: 1.0.4

# stylelint-config
stylesheets config for pohodnik developers


## install
```bash
 yarn add -D @pohodnik/stylelint-config
```

or 

```bash
 npm install --save-dev @pohodnik/stylelint-config
```

## usage
in root of your project place file `.stylelintrc` with content:

```json
{
    "extends": "@pohodnik/stylelint-config"
}
```
npm package: @pohodnik/webpack-config
Description: Webpack configuration for Pohodnik's projects
Author: Pohodnik58
Latest version: 1.3.9

# webpack-config
Pohodnik webpack configuration for frontend build

## install
```shell script
yarn add -D @pohodnik/webpack-config
```

## usage
In root of your project file `webpack.config.js`
```javascript
const { createConfig } = require('@pohodnik/webpack-config');

module.exports = createConfig({
    // local webpack config extends @pohodnik/webpack-config
});
```
or

```javascript
const { createConfig } = require('@pohodnik/webpack-config');

module.exports = createConfig(argv => {
    if (argv.mode === 'production') {
        return {
            // ...
        }
    }
});
```
npm package: @pohy/ableton
Description: Parser for Ableton Live's .als format
Latest version: 0.0.10

# Ableton [![Build Status](https://travis-ci.org/lavelle/ableton.svg)](https://travis-ci.org/lavelle/ableton)

> Parser for Ableton Live's .als file format.

## Intro

Ableton project files are just XML underneath, so the parser returns a [Cheerio][] object for the project file. You can then use all the normal jQuery commands to get the data out.

## Install

```bash
$ npm install --save ableton
```

## Use

### Initialise

```js
var Ableton = require('ableton');
var ableton = new Ableton('/path/to/project.als');
```

### Read

```js
ableton.read(function(error, $) {
  if (error) {
    console.error(error);
  }
  else {
    // `$` is the Cheerio root object.
    console.log($('ableton').attr('creator'));
  }
});
```

### Write

```js
var xml = ... // An XML string representing an Ableton project file.
ableton.write(xml, function(error) {
  if (error) {
    console.log(error);
  }
  else {
    console.log('Written successfully to ' + ableton.path);
  }
});
```

## License

MIT

[cheerio]: https://github.com/cheeriojs/cheerio
npm package: @pohy/py-util
Description: For when you need to work with string indices calculated in python. If the strings contain emojis, you'll know what I mean. 🙃
Author: pohy
Latest version: 1.1.2

# _Python_ utils

For when you need to work with string indices calculated in python. If the strings contain emojis, you'll know what I
mean. 👩‍❤️‍💋‍👩

See the following threads for more details:

- https://stackoverflow.com/questions/54369513/how-to-count-the-correct-length-of-a-string-with-emojis-in-javascript
- https://stackoverflow.com/questions/69584227/javascript-vs-python-emoji-length
- https://stackoverflow.com/a/46085089

```javascript
import {pyLen, pySlice} from '@pohy/py-util'

const length = pyLen(textWithEmojis)
const substring = pySlice(textWithEmojis, pythonCalculatedStartIndex, pythonCalculatedEndIndex)
```
npm package: @poi/plugin-astroturf
Description: Use [astroturf](https://github.com/4Catalyzer/astroturf) to write CSS in JS with zero-runtime.
Latest version: 0.2.0

# @poi/plugin-astroturf

Use [astroturf](https://github.com/4Catalyzer/astroturf) to write CSS in JS with zero-runtime.

## Install

```bash
yarn add astroturf @poi/plugin-astroturf --dev
```

## How to use

In your `poi.config.js`:

```js
module.exports = {
  plugins: [
    {
      resolve: '@poi/plugin-astroturf',
      options: {}
    }
  ]
}
```

Then write css-in-js:

```jsx
import { css } from 'astroturf'

const style = css`
  .title {
    font-size: 2em;
  }
`
export const App = () => {
  return <div className={style.title}>Hello world</div>
}
```

Check out [astroturf](https://github.com/4Catalyzer/astroturf/) for more usages.

## Options

- `loaderOptions`: `astroturf/loader` [options](https://github.com/4Catalyzer/astroturf/tree/1741c3e702049f6e75483cd000b439d42e57ef2d#options)
  - `loaderOptions.extension`: Default `.module.css`. You can also change it to `.scss` or `.module.scss` etc to use [CSS pre-processors](https://poi.js.org/guide/pre-processing-css.html), but make sure that it ends with `.module.xxx` if you want CSS modules support.

## License

MIT.
npm package: @poi/plugin-babel-minify
Description: Use [babel-minify](https://github.com/babel/babel-minify) to minimize JavaScript.
Latest version: 10.0.1

# plugin-babel-minify

Use [babel-minify](https://github.com/babel/babel-minify) to minimize JavaScript.

## Install

```bash
yarn add @poi/plugin-babel-minify --dev
```

## Usage

This plugin will replace UglifyjsPlugin with [babel-minify-webpack-plugin](https://github.com/webpack-contrib/babel-minify-webpack-plugin) for you:

```js
// poi.config.js
module.exports = {
  plugins: [
    require('@poi/plugin-babel-minify')()
  ]
}
```

Then it will compress JS code when you run `poi build`.

It accepts the same options as which in [babel-minify-webpack-plugin](https://github.com/webpack-contrib/babel-minify-webpack-plugin#options):

```js
require('poi-plugin-babel-minify')(minifyOpts, pluginOpts)
```

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-buble
Description: Use buble to compile js files
Author: EGOIST
Latest version: 10.1.0

# plugin-buble

Use buble instead of babel to transpile `.js` `.es6` and script tag in `.vue` files

**ES2017 -> [buble](https://github.com/Rich-Harris/buble) -> [nodent](https://github.com/MatAtBread/nodent-compiler) for async/await -> ES5**

## Install

```bash
yarn add @poi/plugin-buble --dev
```

## Usage

```js
// poi.config.js
module.exports = {
  plugins: [
    require('@poi/plugin-buble')(/* options */)
  ]
}
```

Default Buble options:

```js
{
  transforms: {
    dangerousForOf: true,
    generator: false,
    modules: false
  },
  objectAssign: 'Object.assign'
}
```

## API

### options

#### options.asyncAwait

Transform `async/await` to pure `Promise` using [nodent](https://github.com/MatAtBread/nodent-compiler).

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-bundle-report
Description: This is a preset for adding [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) which could help you:
Latest version: 12.1.2

# @poi/plugin-bundle-report

This is a preset for adding [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) which could help you:

1. Realize what's really inside your bundle
2. Find out what modules make up the most of it's size
3. Find modules that got there by mistake
4. Optimize it!

## Install

```bash
yarn add @poi/plugin-bundle-report --dev
```

## Usage

Activate it in config file:

```js
// poi.config.js
module.exports = {
  plugins: [
    {
      resolve: '@poi/bundle-report',
      options: {}
    }
  ]
}
```

Add `--bundle-report` while building your app in **production mode** to get report:

```bash
poi --prod --bundle-report
# then you'll be automatically navigated to http://localhost:8888
```

## Options
Options object for [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin.

## LICENSE

MIT © [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-coffee
Description: Use CoffeeScript in your Poi project
Author: EGOIST
Latest version: 10.0.0-rc.1

# plugin-coffee

Use CoffeeScript in your Poi project.

## Install

```bash
yarn add coffeescript @poi/plugin-coffee --dev
```

## Usage

```js
// poi.config.js
module.exports = {
  plugins: [
    require('@poi/plugin-coffee')(options)
  ]
}
```

**Notes:**

-   To use in Vue SFC, set `lang="coffee"` or `lang="coffeescript"`:

```vue
<script lang="coffee">
export default
  data: ->
    foo: 'foo'
</script>
```

## API

### options

#### options.loaderOptions

Options for [better-coffee-loader](https://github.com/egoist/better-coffee-loader#options).

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-eslint
Description: Use ESLint to lint JavaScript.
Latest version: 12.1.0

# @poi/plugin-eslint

Use ESLint to lint JavaScript.

## Install

```bash
yarn add @poi/plugin-eslint --dev
```

## How to use

In your `poi.config.js`:

```js
module.exports = {
  plugins: [
    {
      resolve: '@poi/plugin-eslint'
    }
  ]
}
```

Then add a `.eslintrc.js` in your project:

```js
module.exports = {
  extends: ['eslint:recommended']
}
```

Now ESLint will check your JS files at compile time.


## Options

### loaderOptions

- Type: `any`

Addtional [options](https://github.com/webpack-contrib/eslint-loader#options) for `eslint-loader`.
npm package: @poi/plugin-html-entry
Description: This is a built-in Poi plugin which makes Poi support HTML entrypoint.
Latest version: 0.2.3

# @poi/plugin-html-entry

This is a built-in Poi plugin which makes Poi support HTML entrypoint.

## Features

### Process local scripts and styles

```html
<link rel="stylesheet" href="./style.css">
<script src="./main.js"></script>
```

Note that only relative paths will be processed by webpack, which means you can use absolute paths like `https://...` or `/static/foo.css` to reference external resources.

### Process certain HTML attributes

It processes certain HTML attributes:

- `<img>`: `src`
- `<image>`: `xlink:href`
- `<video>`: `src` `poster`
- `<source>`: `src`

### Reloading

Modifing HTML entry will trigger a full reload.

### Template Interpolations

Your HTML entry will also be processed by [lodash.template](https://lodash.com/docs/4.17.11#template), see [here](https://poi.js.org/guide/custom-html-template.html#template-data) for available template data.

## License

MIT &copy; EGOIST