open-index/open-npm huggingface dataset:
npm package: @mariosant/cn
Description: Utility for class names
Author: Marios Antonoudiou
Latest version: 0.3.0

![Cn](cn.png)

> Easy class names handling!

[![NPM version](https://img.shields.io/npm/v/@mariosant/cn.svg)](https://www.npmjs.com/package/@mariosant/cn)

Cn is a simple utility to help you manage class names in the modern app development ecosystem.

## Installation

Just add `@mariosant/cn` to your `package.json`.

```bash
$ npm install @mariosant/cn

# or
$ yarn add @mariosant/cn
```

You can now import the module and use it like

```javascript
import cn from "@mariosant/cn";
```

## Usage

Using cn is pretty simple. It is inspired by the well known [Classnames](https://github.com/JedWatson/classnames) package, but solves a few edge cases.

```javascript
import cn from '@mariosant/cn';

const isActive = true;
const SomeComponent = () => <Button className={cn('btn', [isActive, 'active'])} .../> // classnames would be 'btn active'
```

Why the tuple syntax, you may ask. Well, tuple allows to pass an alternative classname, optionally.
Consider the following:

```javascript
import cn from '@mariosant/cn';

const isActive = false;
const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../> // classnames would be 'btn inactive'
```

## Development

Easy enough!

```bash
$ yarn install  # to install dependencies
$ yarn test     # to run the test suite
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/cn](https://github.com/mariosant/cn)

## Contributing

1. Fork it (<https://github.com/mariosant/cn/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/package-name
Description: write-your-description-here
Author: Marios Antonoudiou
Latest version: 0.0.1

# react-render-when

Conditionally render a component

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M7W45W)

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-render-when.svg)](https://www.npmjs.com/package/@mariosant/react-render-when)
[![CircleCI](https://circleci.com/gh/mariosant/react-render-when/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/react-render-when/tree/master)

## Installation

Add `@mariosant/react-render-when` to your `package.json`.

```bash
$ npm install @mariosant/react-render-when
```

You can now import the module and use it like

```javascript
import {renderWhen, renderUnless} from '@mariosant/react-render-when';
```

## Usage

Both `renderWhen` and `renderUnless` take 2 parameters. A predicate function and a React component.

Check out the following example:

```
import {renderWhen} from '@mariosant/react-render-when';

const needsCowbell = ({cowbells}) => cowbells < 10;

const Advice = renderWhen(needsCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

The predicate inverses when using `renderUnless`:

```
import {renderUnless} from '@mariosant/react-render-when';

const enoughCowbell = ({cowbells}) => cowbells >= 10;

const Advice = renderUnless(enoughCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/react-render-when](https://github.com/mariosant/react-render-when)

## Contributing

1. Fork it (<https://github.com/mariosant/react-render-when/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-async-hooks
Description: > Tame that async beast right with the power of React Hooks!
Author: Marios Antonoudiou
Latest version: 0.5.1

# Async Hooks for React

> Tame that async beast right with the power of React Hooks!

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-async-hooks.svg)](https://www.npmjs.com/package/@mariosant/react-async-hooks)
[![Build Status](https://travis-ci.org/mariosant/react-async-hooks.svg?branch=master)](https://travis-ci.org/mariosant/react-async-hooks)

## Installation

Add `@mariosant/react-async-hooks` to your `package.json`.

```bash
$ npm install @mariosant/react-async-hooks

# or
$ yarn add @mariosant/react-async-hooks
```

You can now import the module and use it like

```javascript
import {useAsync, useAsyncTrigger} from '@mariosant/react-async-hooks';
```

## Usage

The module consists of two different hooks, `useAsync` and `useAsyncTrigger`. The reason for that is, this way you can easily pick when the hook is going to be executed.

### useAsync

`useAsync(fn, deps)` will execute the provided async function as soon as the component renders.

```javascript
import {useAsync} from '@mariosant/react-async-hooks';

const fetchAsyncFn = async () => {
	// do something async
};

const Component = props => {
	const [{pending, data, error}, {reload}] = useAsync(fetchAsyncFn, []);

	return <div>...</div>;
};
```

### useAsyncTrigger

`useAsyncTrigger(fn)` is very similar to `useAsync`, but instead the action will be invoked imperitevely.

```javascript
import {useAsyncTrigger} from '@mariosant/react-async-hooks';

const fetchAsyncFn = async () => {
	// do something async
};

const Component = props => {
	const [{pending, data, error}, {trigger] = useAsyncTrigger(fetchAsyncFn);

	return (
		<div>
			...
			<button onClick={trigger}>Click me</button>
			...
		</div>
	);
};
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/react-async-hooks](https://github.com/mariosant/react-async-hooks)

## Contributing

1. Fork it (<https://github.com/mariosant/react-async-hooks/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-cond
Description: Create components based on conditions, with ease
Author: Marios Antonoudiou
Latest version: 0.1.3

# React Cond

> Create components based on conditions, with ease.

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-cond.svg)](https://www.npmjs.com/package/@mariosant/react-cond)
[![CircleCI](https://circleci.com/gh/mariosant/package-name/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/react-cond/tree/master)

## Installation

Add `@mariosant/react-cond` to your `package.json`.

```bash
$ npm install @mariosant/react-cond
```

You can now import the module and use it like

```javascript
import cond from '@mariosant/react-cond';

// Components
const Pending = () => 'Loading. Please wait...';
const NonIdeal = () => 'It seems there is an error!';
const Component = ({data}) => `This is the actual data: ${data}`;

// Predicates
const isPending = ({pending}) => pending;
const hasError = ({error}) => error;
const isOk = ({error, pending, data}) => !error && !pending && data;

// Final complex component
export const ComplexComponent = cond(
	[isPending, Pending],
	[hasError, NonIdeal],
	[isOk, Component],
	NonIdeal,
);
```

## Usage

The package exports two main components you can use.

```javascript
import cond, {hoc} from '@mariosant/react-cond';
```

The `cond` function takes a list of predicates and a default component if everything else fails.

```javascript
const CommentsList = cond(
	[isPending, Pending], // Will render Pending if isPending returns true.
	[hasError, NonIdeal], // Will render NonIdeal if hasError returns true.
	[isOk, Component], // Will render Component if isOk returns true.
	NonIdeal, // If everything above fails, NonIdeal component will be rendered instead.
);
```

A predicate is a function. It will receive `props` and if it returns a truthy result, the associated component will be rendered.

For example,

```javascript
import cond from '@mariosant/react-cond'

const isPending = ({pending}) => pending;
const Pending = () => <div>'Loading. Please wait.'</div>;

return cond(
	[isPending, Pending],
	...
);
```

For the developer's ease, a high order component version has been included. It can be easily combined with Recompose's `compose`.

```javascript
import {hoc as cond} from '@mariosant/react-cond';
import {compose, withProps} from 'recompose';

return compose(
	withProps({something: true}),
	cond([isPending, Pending], [isOk, Component]),
)(DefaultComponent);
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/react-cond](https://github.com/mariosant/react-cond)

## Contributing

1. Fork it (<https://github.com/mariosant/react-cond/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-flex-list
Description: Create flex powered lists in react.
Author: Marios Antonoudiou
Latest version: 0.0.3

# React Flex List

Create flex powered lists in react.

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M7W45W)

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-flex-list.svg)](https://www.npmjs.com/package/@mariosant/react-flex-list)
[![CircleCI](https://circleci.com/gh/mariosant/react-flex-list/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/react-flex-list/tree/master)

## Installation

Add `@mariosant/react-flex-list` to your `package.json`.

```bash
$ npm install @mariosant/react-flex-list styled-components react
```

You can now import the module and use it like

```javascript
import List from '@mariosant/react-flex-list';

const items = ['rock', 'metal', 'thrash'];
const renderItem = item => <div key={item}>{item}</div>;

export default () => <List flexDirection="column" items={items} renderItem={renderItem} />;
```

## Usage

The component's purpose is to ease the rendering of avg sized lists. It is based on Rebass' Flex component and it basically inherits all the power the Flex component has.

### Props

The component extends [Rebass' Flex props](https://rebassjs.org/Flex) and adds the following:

```
items: any[]
renderItem: (item: any) => ReactElement
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/react-flex-list](https://github.com/mariosant/react-flex-list)

## Contributing

1. Fork it (<https://github.com/mariosant/react-flex-list/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-pagination-hook
Description: Create paginated content with this easy to use React Hook
Author: Marios Antonoudiou
Latest version: 0.0.1

# Pagination Hook for React

> Create paginated content with this easy to use React Hook

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-pagination-hook.svg)](https://www.npmjs.com/package/@mariosant/react-pagination-hook)
[![Build Status](https://travis-ci.org/mariosant/react-pagination-hook.svg?branch=master)](https://travis-ci.org/mariosant/react-pagination-hook)

## Installation

Add `@mariosant/react-pagination-hook` to your `package.json`.

```bash
$ npm install @mariosant/react-pagination-hook
```

You can now import the module and use it like

```javascript
import usePagination from '@mariosant/react-pagination-hook';

const Component = ({data}) => {
	const {
		nextPage,
		previousPage,
		paginated,
	} = usePagination(data) // data must be an array

	return (
		<div>
			{paginated.map(record => (
				<div key={record.key}>{record}</div>
			))}
			<button onClick={previousPage}>Previous</button>
			<button onClick={nextPage}>Next</button>
		</div>

	)
```

## Usage

WIP

## Development

WIP

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/react-pagination-hook](https://github.com/mariosant/react-pagination-hook)

## Contributing

1. Fork it (<https://github.com/mariosant/react-pagination-hook/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-render-when
Description: Conditionally render a component
Author: Marios Antonoudiou
Latest version: 0.1.4

# react-render-when

Conditionally render a component

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-render-when.svg)](https://www.npmjs.com/package/@mariosant/react-render-when)

## Installation

Add `@mariosant/react-render-when` to your `package.json`.

```bash
$ npm install @mariosant/react-render-when
```

You can now import the module and use it like

```javascript
import {renderWhen, renderUnless} from '@mariosant/react-render-when';
```

## Usage

Both `renderWhen` and `renderUnless` take 2 parameters. A predicate function and a React component.

Check out the following example:

```
import {renderWhen} from '@mariosant/react-render-when';

const needsCowbell = ({cowbells}) => cowbells < 10;

const Advice = renderWhen(needsCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

The predicate inverses when using `renderUnless`:

```
import {renderUnless} from '@mariosant/react-render-when';

const enoughCowbell = ({cowbells}) => cowbells >= 10;

const Advice = renderUnless(enoughCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/react-render-when](https://github.com/mariosant/react-render-when)

## Contributing

1. Fork it (<https://github.com/mariosant/react-render-when/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-sweet-scroll
Description: > Easily scroll within an element using hooks!
Author: Marios Antonoudiou
Latest version: 0.0.2

# React Sweet Scroll

> Easily scroll within an element using hooks!

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-sweet-scroll.svg)](https://www.npmjs.com/package/@mariosant/react-sweet-scroll)
[![Build Status](https://travis-ci.org/mariosant/react-sweet-scroll.svg?branch=master)](https://travis-ci.org/mariosant/react-sweet-scroll)

## Installation

Add `@mariosant/react-sweet-scroll` to your `package.json`.

```bash
$ npm install @mariosant/react-sweet-scroll

# or
$ yarn add @mariosant/react-sweet-scroll
```

You can now import the module and use it like

```javascript
import useScroll from '@mariosant/react-sweet-scroll';
```

## Usage

The hook accepts an array with dependencies which work exactly like `useEffect` and a set of options, similar to `scrollIntoView`.

It returns a component, that should be placed to the point the list container should scroll to.

Consider the example below.

```javascript
import useScroll from '@mariosant/react-sweet-scroll';
import List from './some-component';

const toString = JSON.stringify;

const Component = ({messages}) => {
    const ScrollPoint = useScroll([toString(messages)]);

    return (
        <List>
            {messages.map(...)}
            <ScrollPoint />
        </List>
    )
};
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/react-sweet-scroll](https://github.com/mariosant/react-sweet-scroll)

## Contributing

1. Fork it (<https://github.com/mariosant/react-sweet-scroll/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/react-wizard
Description: Multi step wizards in React - easy and painless
Author: Marios Antonoudiou
Latest version: 0.0.5

# React Wizard

> Multi step wizards in React - easy and painless.

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-wizard.svg)](https://www.npmjs.com/package/@mariosant/react-wizard)
[![CircleCI](https://circleci.com/gh/mariosant/react-wizard/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/react-wizard/tree/master)

## Installation

Add `@mariosant/react-wizard` to your `package.json`.

```bash
$ npm install @mariosant/react-wizard
```

You can now import the module and use it like

```javascript
import {createWizard} from '@mariosant/react-wizard';
// or
import {Wizard} from '@mariosant/react-wizard';
```

## Usage

The package exports two flavors of the same component.

A function that return a wizard component and a component that can be used directly within JSX scope.

```javascript
import {createWizard} from '@mariosant/react-wizard';
import {SceneA, SceneB, SceneC} from './scenes';
import Modal from './modal';


export default () => {
	const Wizard = createWizard(SceneA, SceneB, SceneC);

	return (
		<Modal>
			<Wizard />
		</Modal>
	);
}
```

or if you prefer the alternate syntax,

```javascript
import {Wizard} from '@mariosant/react-wizard';
import {SceneA, SceneB, SceneC} from './scenes';
import Modal from './modal';

export default () => {
	return (
		<Modal>
			<Wizard>
				{SceneA}
				{SceneB}
				{SceneC}
			</Wizard>
		</Modal>
	);
};
```

The following props are passed into every scene component.

```
next: function to call in order to advance
previous: function to call in order to go to previous
goTo: function to call with an index - goes right to that step (warning, first is 0)
index: the index number of current step
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/react-wizard](https://github.com/mariosant/react-wizard)

## Contributing

1. Fork it (<https://github.com/mariosant/react-wizard/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/stylish
Description: CSS in JS helpers at your disposal.
Author: Marios Antonoudiou
Latest version: 0.1.0

# Stylish 🎀🎀🎀

CSS in JS helpers at your disposal.

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M7W45W)

[![NPM version](https://img.shields.io/npm/v/@mariosant/stylish.svg)](https://www.npmjs.com/package/@mariosant/stylish)
[![CircleCI](https://circleci.com/gh/mariosant/stylish/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/stylish/tree/master)

## Installation

Add `@mariosant/stylish` to your `package.json`.

```bash
$ npm install @mariosant/stylish
```

You can now import the module and use it.

```javascript
import {unless} from '@mariosant/stylish';
```

## Usage

Stylish is a collection of helpers for your CSS in JS projects. Known to be compatible with styled-components and emotion. It aims to provide helpers and not to reimplement functionality found in other similar modules, like polished.

This being said, all exported functions are meant to be used within your styles. For example

```javascript
import {ifProp} from '@mariosant/stylish';

const Title = styled('h1')`
	color: ${ifProp('extra', 'black', 'grey')};
`;
```

### Reference

Please find the full api reference within the `docs` directory.

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/stylish](https://github.com/mariosant/stylish)

## Contributing

1. Fork it (<https://github.com/mariosant/stylish/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosant/work
Description: Run lean rabbitmq consumers
Author: Marios Antonoudiou
Latest version: 0.2.0

# Work

Guaranteed to do the work!

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M7W45W)

[![NPM version](https://img.shields.io/npm/v/@mariosant/work.svg)](https://www.npmjs.com/package/@mariosant/work)
[![CircleCI](https://circleci.com/gh/mariosant/work/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/work/tree/master)

Work is a framework for developing processing systems that rely on RabbitMQ. It provides the developer a simplified set of tools to build

## Installation

Add `@mariosant/work` to your `package.json`.

```bash
$ npm install @mariosant/work
```

For local development, you might want run an instance of Rabbit MQ, via docker.

## Usage

The idea is pretty simple. Develop modules that consume messages and run them via a cli tool or programmatically.

```javascript
// consumer.js
const {getContent} = require('@mariosant/work')
const consume = (message. {publish, retry, reject}, context) => {
	const content = getContent(message);

	// Process the message here. No need to return anything.
	// Async/await is fully supported.

	// If you need to retry processing, call retry()
	// If you need to discard the message, call reject()
	// And if you need to publish a new message, call publish(topic, content)
};

const init = ({publish}) => {
	// anything you return here, it is going to be available in the consume's context
}

// Export the following
module.exports = {
	consume,
	init,
	uri: 'amqp://guest:guest@localhost',
	exchange: 'test-exchange',
	queue: 'service-name',
	routingKey: 'records.#',
};
```

And run it:
```bash
$ npx work consumer.js
```

## Development

Easy-peasy!

```bash
$ yarn install        # to install dependencies
$ yarn test           # to run the test suite
$ docker-compose up   # run a local Rabbit MQ instance
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license.

[https://github.com/mariosant/work](https://github.com/mariosant/work)

## Contributing

1. Fork it (<https://github.com/mariosant/work/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
npm package: @mariosenese/ciaomondo
Description: First NPM package - Ciao Mondo
Author: Mario Senese
Latest version: 1.0.23

# @mariosenese/ciaomondo

[![npm (scoped)](https://img.shields.io/npm/v/@mariosenese/ciaomondo)](https://www.npmjs.com/package/@mariosenese/ciaomondo)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@mariosenese/ciaomondo)](https://www.npmjs.com/package/@mariosenese/ciaomondo)
[![license](https://img.shields.io/github/license/MarioSenese/create-readme)](https://github.com/MarioSenese/CiaoMondo/blob/main/LICENSE)

First NPM package - CiaoMondo

## Install

```
$ npm install @mariosenese/ciaomondo
```

## Usage

```
Call external script into <head></head>
```

```js
<head>
	<script type="module" src="index.js"></script>
</head>
```


```
In index.js file, insert the next code
```

```js
import {} from './node_modules/@mariosenese/ciaomondo/index.js'; 
import {stampaMessaggio} from './node_modules/@mariosenese/ciaomondo/index.js'; 
stampaMessaggio();
```
npm package: @marioslab/buckety-buckeroo
Description: Streaming histogram library.
Author: Mario Zechner
Latest version: 1.0.1

# buckety-buckeroo
Got streaming data and want to create an approximate histogram for it? Want to also render the bins to a canvas without bells and whistles? That's what buckety-buckeroo does for you.

The implementation is based on the paper [Streaming Parallel Decision Trees](http://jmlr.org/papers/volume11/ben-haim10a/ben-haim10a.pdf).

# Demo
![demo.png](demo.png)

[Online demo](https://marioslab.io/dump/buckety-buckeroo)
[Source](https://github.com/badlogic/buckety-buckeroo/blob/main/index.html)

# Usage
You can include `buckety-buckeroo` directly on your page via.
```
<script src="https://cdn.jsdelivr.net/npm/@marioslab/buckety-buckeroo@1.0.0/dist/iife/buckety-buckero.min.js">
```

Every function and "class" is exposed on the global `buckety` object.

If you manage your project dependencies with NPM, add `buckety-buckeroo` as follows:

```
npm install @marioslab/buckety-buckeroo
```

Then import all exported functions and classes in your source files via:

```
import * as buckety from "@marioslab/buckety-buckeroo"
```

Create a histogram and specify the number of buckets it should have:

```
let histogram = new buckety.Histogram(100);
```

Then add values:

```
histrogram.addValue(432.32);
histrogram.addValue(-0.21);
histrogram.addValue(64);
```

You can calculate approximate quantiles:

```
let tenPercentQuantile = histogram.quartile(0.1);
```

Or perform your own calculation by iterating the buckets:

```
let mean = 0;
for (let bucket of histogram.buckets) {
	mean += bucket.value;
}
mean /= histogram.buckets.length;
```

Finally, you can draw the histogram to a canvas.

```
<canvas></canvas>
<script>
	let canvas document.querySelector("canvas");
	let histogram = new buckety.Histogram(20);
	let histogramChart = new buckety.HistrogramChart(canvas, { histrogram: histogram });
	histrogramChart.render();
</script>
```

See the demo above for an interactive example.

# Will you add feature $X
No, but I might accept pull requests.

# Development
Install Git, Node.js, and Visual Studio Code. Then:

```
git clone https://github.com/badlogic/buckety-buckeroo
cd buckety-buckeroo
npm run dev
code.
```

Press `F5`, modify code, press `CTRL+S`, see the page auto-update with your changes, set some breakpoints.
npm package: @mariotacke/color-thief
Description: Get the dominant color or color palette from an image.
Author: Lokesh Dhakar
Latest version: 3.0.1

# Color Thief

A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.

[See a Demo](http://lokeshdhakar.com/projects/color-thief) | [Read more on my blog](http://lokeshdhakar.com/color-thief)


## How to use

### Get the dominant color from an image
```js
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
```

```js
getColor(sourceImage[, quality])
returns [num, num, num]
```

### Build a color palette from an image

In this example, we build an 8 color palette.

```js
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
```

```js
getPalette(sourceImage[, colorCount, quality])
returns [ [num, num, num], [num, num, num], ... ]
```
npm package: @mariotacke/parcel-plugin-static-files-copy
Description: ParcelJS plugin to copy static files from static dir to bundle directory.
Author: Kamil Banach
Latest version: 2.0.0
Deprecated: false

# parcel-plugin-static-files-copy [![Build Status](https://travis-ci.org/elwin013/parcel-plugin-static-files-copy.svg?branch=master)](https://travis-ci.org/elwin013/parcel-plugin-static-files-copy)

ParcelJS plugin to copy static files from some dir to directory with bundle.

## Install

```
yarn add parcel-plugin-static-files-copy --dev
```

## Usage

1. Create `static` dir in you project root.
2. Fill it with your static files
3. Run build - and that's all!

## Customization

Beyond the default settings, you can:

1. Name of the folder to be copied.
1. Copy multiple folders.
1. Watch for changes during development (rebuilding when necessary).

### Example

The following configures the plugin to copy all files in `public` to the build folder and watch for changes in all source files (`**` is a deep wildcard).

```json
// package.json
{
	...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": "**"
    }
}
```

### Multiple Static Directories

To copy more than one directory to the build folder, specify `staticPath` as an array. The following copies `public` and `vendor/public`:

```json
// package.json
{
	...
    "staticFiles": {
        "staticPath": ["public", "vendor/public"]
    }
}
```

### Watching for Changes

Parcel can rebuild your bundle(s) whenever changes occur in the static directory. This is disabled by default, but it can be enabled by specifying a glob pattern for files that shoudl be watched.

Note the relative file path is used in matching (not just the file name). To match filenames in deep directories, start with a "globstar" (double star). The plugin uses Node's built-in [Minimatch Library](https://github.com/isaacs/minimatch) for glob matching.

The following watches all XML files in the static directory:

```json
// package.json
{
	...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": "**/*.xml"
    }
}
```

To disable watching, either remove the `"watcherGlob"` key (disabled is the default) or set it to false/null/undefined:

```json
// package.json
{
	...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": false
    }
}
```

## Contribute

You're interested in contributing? Awesome! Fork, make change, commit and create pull request. I'll do my best to merge changes!

## License

[MIT](/LICENSE)
npm package: @mariotzz/tzz-element
Description: [![NPM version](https://img.shields.io/npm/v/tzz-element.svg?style=flat)](https://npmjs.org/package/tzz-element) [![NPM downloads](http://img.shields.io/npm/dm/tzz-element.svg?style=flat)](https://npmjs.org/package/tzz-element)
Latest version: 2.1.0

# tzz-element

[![NPM version](https://img.shields.io/npm/v/tzz-element.svg?style=flat)](https://npmjs.org/package/tzz-element)
[![NPM downloads](http://img.shields.io/npm/dm/tzz-element.svg?style=flat)](https://npmjs.org/package/tzz-element)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor
```

## LICENSE

MIT

```
tzz-element
├─ 📁.dumi
├─ 📁.husky
│  ├─ 📁_
│  │  ├─ 📄.gitignore
│  │  └─ 📄husky.sh
│  ├─ 📄commit-msg
│  └─ 📄pre-commit
├─ 📁docs
│  ├─ 📄guide.md
│  ├─ 📄index.md
│  └─ 📄test.md
├─ 📁src
│  ├─ 📁Demo
│  │  ├─ 📄index.md
│  │  └─ 📄index.tsx
│  ├─ 📁Foo
│  │  ├─ 📄index.md
│  │  └─ 📄index.tsx
│  └─ 📄index.ts
├─ 📄.dumirc.ts
├─ 📄.editorconfig
├─ 📄.eslintrc.js
├─ 📄.fatherrc.ts
├─ 📄.gitignore
├─ 📄.prettierignore
├─ 📄.prettierrc.js
├─ 📄.stylelintrc
├─ 📄LICENSE
├─ 📄README.md
├─ 📄package.json
├─ 📄pnpm-lock.yaml
└─ 📄tsconfig.json
```
npm package: @mariowork/antv-x6
Description: 基于antvx6的流程图编辑器
Author: Mario
Latest version: 0.1.0

# web

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mariowork/web-demo
Description: 基于antvx6
Author: Mario
Latest version: 0.6.0

# web

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mariozechner/ai
Description: Unified API for OpenAI, Anthropic, and Google Gemini LLM providers
Author: Mario Zechner
Latest version: 0.5.9

# @mariozechner/ai

Unified API for OpenAI, Anthropic, and Google Gemini LLM providers with streaming, tool calling, and thinking support.

## Installation

```bash
npm install @mariozechner/ai
```

## Quick Start

```typescript
import { AnthropicLLM } from '@mariozechner/ai/providers/anthropic';
import { OpenAICompletionsLLM } from '@mariozechner/ai/providers/openai-completions';
import { GoogleLLM } from '@mariozechner/ai/providers/gemini';

// Pick your provider - same API for all
const llm = new AnthropicLLM('claude-sonnet-4-0');
// const llm = new OpenAICompletionsLLM('gpt-5-mini');
// const llm = new GoogleLLM('gemini-2.5-flash');

// Basic completion
const response = await llm.complete({
  messages: [{ role: 'user', content: 'Hello!' }]
});
console.log(response.content);

// Streaming with thinking
const streamResponse = await llm.complete({
  messages: [{ role: 'user', content: 'Explain quantum computing' }]
}, {
  onText: (chunk) => process.stdout.write(chunk),
  onThinking: (chunk) => process.stderr.write(chunk),
  // Provider specific config
  thinking: { enabled: true }
});

// Tool calling
const tools = [{
  name: 'calculator',
  description: 'Perform calculations',
  parameters: {
    type: 'object',
    properties: {
      expression: { type: 'string' }
    },
    required: ['expression']
  }
}];

const toolResponse = await llm.complete({
  messages: [{ role: 'user', content: 'What is 15 * 27?' }],
  tools
});

if (toolResponse.toolCalls) {
  for (const call of toolResponse.toolCalls) {
    console.log(`Tool: ${call.name}, Args:`, call.arguments);
  }
}
```

## Development

This package is part of the pi monorepo. See the main README for development instructions.

## License

MIT
npm package: @mariozechner/cc-antidebug
Description: Disable Claude Code's anti-debugging so you can debug your NodeJS apps using the official Claude Code Typescript SDK.
Latest version: 1.4.3

# cc-antidebug

Patches Claude Code to enable debugging and cost tracking features.

## Problem

1. Claude Code's TypeScript SDK prevents debugging by checking for inspector/debugger presence and terminating the process if detected
2. The `/cost` command is restricted to Free tier users only, preventing Pro/Max users from tracking their token usage

## Solution

This package patches the Claude binary to:
1. Disable anti-debugging checks, allowing you to use debuggers with NodeJS apps that integrate the Claude Code SDK
2. Enable the `/cost` command for Pro and Max plan users, showing token usage and cost information for the current session

The patched binary is automatically formatted with Biome to ensure consistent code formatting.

**Note:** Claude Code may restore the binary on its own (e.g., during automatic version upgrades). You may need to re-run the patch command after Claude Code updates.

## Usage

### CLI

```bash
# Apply the patch
npx @mariozechner/cc-antidebug patch

# Restore the original binary
npx @mariozechner/cc-antidebug restore

# Optionally specify a custom Claude binary path
npx @mariozechner/cc-antidebug patch /path/to/claude
npx @mariozechner/cc-antidebug restore /path/to/claude
```

### Programmatic API

Import and patch before using Claude Code SDK, optionally restore the original binary:

```javascript
import { query } from "@anthropic-ai/claude-code/sdk.mjs";
import { patchClaudeBinary, restoreClaudeBinary } from "../src/index.js";

// Apply anti-debugging patch for Claude Code SDK
patchClaudeBinary();

try {
	const response = query({prompt: "What is your function?"});
	for await (const message of response) {
		console.log(JSON.stringify(message, null, 2));
	}
} catch (error) {
	console.error("Error:", error);
} finally {
	// Restore the original Claude binary
	restoreClaudeBinary();
}

```

## License

MIT
npm package: @mariozechner/chatoly
Description: YouTube chat overlay for macOS
Author: Mario Zechner
Latest version: 1.0.4

# Chatoly

A native macOS YouTube chat overlay application that displays YouTube live stream chat in a beautiful, always-on-top window. Features a clean SwiftUI interface with real-time message streaming directly from YouTube's API. Perfect for live-streamers who want to monitor chat without switching windows.

https://github.com/user-attachments/assets/ecc489bd-8649-4321-aa45-ccf3c0eb5415

*<sub>Watch this thing get built from scratch in [2 hours](https://www.youtube.com/watch?v=0YsGtKKWEn4)</sub>*

## Installation

```bash
npm install -g @mariozechner/chatoly
chatoly
```

## Features

- **Native SwiftUI Interface** - Beautiful, clean chat display with smooth animations
- **Real-time Streaming** - Direct connection to YouTube's chat API for instant message updates
- **Smart Message Display** - Avatar thumbnails, author names, badges, and special message types (memberships, super chats)
- **Auto-scroll** - Automatically scrolls to new messages with smooth animations
- **Frosted Glass Background** - Elegant translucent design that integrates with macOS
- **Always on top** - Chat window stays above all other applications
- **Movable & Resizable** - Position and size the chat window exactly where you need it
- **Performance Optimized** - Limits message history and efficiently handles high-volume chats
- **Connection Status** - Visual indicators showing connection state and message count

## Development

### Building

```bash
# Build debug mode (default)
./build.sh

# Build release mode
./build.sh release

# Clean and build
./build.sh clean

# Build and run the main app
./build.sh run

# Build release and run
./build.sh release run

# Build for distribution (signs and notarizes both executables)
./build.sh notarize
```

### Executables

The project builds two executables:

1. **`chatoly`** - The main GUI application with the overlay window
2. **`chatoly-stream`** - A CLI tool for streaming YouTube chat to console (useful for debugging/testing)

After building, executables are located in:
- Debug: `./.build/debug/chatoly` and `./.build/debug/chatoly-stream`
- Release: `./.build/release/chatoly` and `./.build/release/chatoly-stream`

```bash
# Run the stream CLI tool after building
./build.sh
./.build/debug/chatoly-stream

# Or use Swift directly
swift build
swift run chatoly-stream
```

For notarization to work, you need an Apple Developer account with a valid Developer ID certificate. Set the `NOTARY_TOOL_PASSWORD` environment variable with an app-specific password generated from your Apple ID account. The build script expects your certificate to be named "Developer ID Application" in your keychain. You'll also need your Team ID from your Apple Developer account. Without these, use the regular build commands which produce unsigned binaries that work locally but may trigger Gatekeeper warnings when shared.

### Requirements

- macOS 13.0+
- Swift 6.0+
npm package: @mariozechner/clipboard
Description: > **Fork of [@crosscopy/clipboard](https://github.com/CrossCopy/clipboard)** > > This fork updates to the latest `clipboard-rs` (0.3.1) and adds musl (Alpine Linux) support. > All credit goes to the original authors.
Latest version: 0.3.2

# @mariozechner/clipboard

> **Fork of [@crosscopy/clipboard](https://github.com/CrossCopy/clipboard)**
>
> This fork updates to the latest `clipboard-rs` (0.3.1) and adds musl (Alpine Linux) support.
> All credit goes to the original authors.

![NPM Version](https://img.shields.io/npm/v/@mariozechner/clipboard)
[![CI](https://github.com/badlogic/clipboard/actions/workflows/CI.yml/badge.svg)](https://github.com/badlogic/clipboard/actions/workflows/CI.yml)

**NPM Package**: https://www.npmjs.com/package/@mariozechner/clipboard

**GitHub**: https://github.com/badlogic/clipboard

> This is a clipboard API npm package that allows you to copy and paste data to and from the clipboard.
> There doesn't seem to be a good clipboard package for node.js (that supports data format beyond text), so I decided to make one.
> Data Format Supported
>
> - Text
> - Image
> - Rich Text Format
> - Files
> - HTML

## Acknowledgements

- [ChurchTao/clipboard-rs](https://github.com/ChurchTao/clipboard-rs) is written in rust, which is used to provide the native clipboard support for this package across Linux, Windows and MacOS. This package is basically a wrapper around this rust package.
  - https://crates.io/crates/clipboard-rs
- [napi.rs](https://napi.rs/) was used to create the node.js addon for this package, so that API calls written in rust can be called from node.js.

## API

Detailed API function declarations can be found in the [index.d.ts](./index.d.ts).

Or you can refer to the source code in [src/lib.rs](./src/lib.rs).

## Sample

```javascript
import Clipboard from "@mariozechner/clipboard";

console.log(await Clipboard.getText());

console.log(await Clipboard.getHtml());

if (await Clipboard.hasImage()) {
  console.log(await Clipboard.getImageBase64());
} else {
  console.log("No Image");
}
```

## Publish

Everything is done with GitHub Action.

Run `npm version patch` to bump the version.
Then `git push --follow-tags` to push the changes and tags to GitHub. GitHub Action will automatically build and publish.
npm package: @mariozechner/clipboard-linux-riscv64-gnu
Description: This is the **riscv64gc-unknown-linux-gnu** binary for `@mariozechner/clipboard`
Latest version: 0.3.2

# `@mariozechner/clipboard-linux-riscv64-gnu`

This is the **riscv64gc-unknown-linux-gnu** binary for `@mariozechner/clipboard`
npm package: @mariozechner/clipboard-linux-x64-gnu
Description: This is the **x86_64-unknown-linux-gnu** binary for `@mariozechner/clipboard`
Latest version: 0.3.2

# `@mariozechner/clipboard-linux-x64-gnu`

This is the **x86_64-unknown-linux-gnu** binary for `@mariozechner/clipboard`
npm package: @mariozechner/clipboard-linux-x64-musl
Description: This is the **x86_64-unknown-linux-musl** binary for `@mariozechner/clipboard`
Latest version: 0.3.2

# `@mariozechner/clipboard-linux-x64-musl`

This is the **x86_64-unknown-linux-musl** binary for `@mariozechner/clipboard`
npm package: @mariozechner/clipboard-win32-arm64-msvc
Description: This is the **aarch64-pc-windows-msvc** binary for `@mariozechner/clipboard`
Latest version: 0.3.2

# `@mariozechner/clipboard-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@mariozechner/clipboard`
npm package: @mariozechner/clipboard-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@mariozechner/clipboard`
Latest version: 0.3.2

# `@mariozechner/clipboard-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@mariozechner/clipboard`