open-index/open-npm huggingface dataset:
npm package: @nicmosc/image-palette-core
Description: Create ARIA-compliant color themes based on any image.
Author: Brandon Dail
Latest version: 0.2.3

# image-palette-core

The core logic for parsing a palette from image data. You can use this if you want an imperative
API for generating a palette. If you want to use it with React you can use [`react-image-palette`](https://github.com/FormidableLabs/image-palette/tree/master/packages/react-image-palette)

### Install

```
npm install --save image-palette-core
```

## Usage

The main export of the package is a `getImagePalette` function which takes an image and returns an accessible color palette representing the most dominant colors in the image.

```js
import getImagePalette from 'image-palette-core'

const img = new Image();
img.src = 'foo.jpg';
img.onload = function() {
  // The image *must* be loaded before calling `getImagePalette`
  const palette = getImagePalette(img);
}
```

> ⚠️ Keep in mind that the image will be loaded into a canvas and parsed as data, so you should only use images from trusted origins. 

### The Palette

The parsed palette will have the following shape:

```
type Palette = {
  backgroundColor: String,
  color: String,
  alternativeColor: String
}
```

* `backgroundColor` will be the most dominant color in the image.
* `color` will be the color that looks the best overlayed over `backgroundColor`. 
* `alternativeColor` will be the second best color. If there are only two colors parsed, it will default to `color`.

Both `alternativeColor` and `color` are guaranteed to meet the minimum contrast ratio requirements when overlayed with `backgroundColor`, but overlaying `color` on `alternativeColor` (or vice-versa) is a bad idea as they will often have very similar contrast levels.
npm package: @nicmosc/react-image-palette
Description: Create ARIA-compliant color themes based on any image.
Author: Brandon Dail
Latest version: 0.2.6

# react-image-palette


A React adpater for [`image-palette-core`](https://github.com/FormidableLabs/image-palette/tree/master/packages/image-palette-core)


### Install

```
npm install --save react-image-palette
```

## Usage

The main export of the package is the `ImagePalette` component, which uses a [render callback](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) to provide the color palette after the image is parsed.

```jsx
import ImagePalette from 'react-image-palette'

const SomeComponent = ({ image }) => (
  <ImagePalette image={image}>
    {({ backgroundColor, color, alternativeColor }) => (
      <div style={{ backgroundColor, color }}>
        This div has been themed based on
        <span style={{ color: alternativeColor }}>{image}</span>
      </div>
    )}
  </ImagePalette>
)
```


## API

### Palette

See the [`image-palette-core` documentation](https://github.com/FormidableLabs/image-palette/tree/master/packages/image-palette-core#the-palette)

### Props

Property  	| 	Type		|	  Description
:-----------------------|:--------------|:--------------------------------
`image` |   `String!` |  The URL for the image to parse.
`crossOrigin` | `Boolean` | Sets the `crossOrigin` property on the `Image` instance that loads the source image <sup>1</sup>
`render` | `Palette => ReactElement` | If you prefer to use a `render` prop over a function child, go for it! `react-image-palette` supports both.
`defaults` | `Palette` | A default palette to render if a palette cannot be parsed. This would typically occur when the source image fails to load

> <sup>1</sup> ⚠️ Keep in mind that the image will be loaded into a canvas and parsed as data, so you should only use images from trusted origins.
npm package: @nicnels/svelte-berlin-clock
Description: Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
Latest version: 1.0.1

# Svelte library

Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```sh
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```sh
npm pack
```

To create a production version of your showcase app:

```sh
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```sh
npm publish
```
npm package: @nicnocquee/chat-cli
Description: ## About
Latest version: 0.0.0

# chat-cli

## About

This is a demo of using React [Ink](https://github.com/vadimdemedes/ink) to make a real time chat app in command line using [Supabase](https://supabase.com). Check out the [blog post here](https://www.nico.fyi/blog/react-ink-cli-chat-supabase).

## Quick start

- Create a project in Supabase
- Take note of the project URL and the public anon key
- Open terminal then run `npx @nicnocquee/chat-cli --room myroom --nickname yournickname --supabaseUrl the-url-of-the-supabase-project --supabaseKey the-public-anon-key-of-the-project`
- Open another tab in the terninal then run the same command above but with different nickname

## Install

```bash
$ npm install --global @nicnocquee/chat-cli
```

## CLI

```
Usage
	  $ chat-cli

	Options
		--room  room id, anyone who has the room id can join
		--nickname your nickname, can be emoji
		--supabaseUrl URL of your supabase project
		--supabaseKey The public anon key of the supabase project

	Examples
	  $ chat-cli --room=room1 --nickname=john --supabaseUrl="https://supabase" --supabaseKey="xxx"
```

## Note

I made a book, [Pull Request Best Practices](https://pr.nico.fyi). Check it out!
npm package: @nicnocquee/dataqueue
Description: PostgreSQL or Redis-backed job queue for Node.js applications with support for serverless environments
Author: Nico Prananta
Latest version: 1.39.0

# DataQueue

A lightweight job queue backed by PostgreSQL or Redis.

- [Website](https://dataqueue.dev)
- [Documentation](https://docs.dataqueue.dev)

## Installation

```bash
npm install @nicnocquee/dataqueue
```

## Testing

First, run the following command to start the PostgreSQL and Redis containers:

```bash
docker-compose up
```

Then, run the tests:

```bash
pnpm run test
```

For E2E tests, run the following command:

```bash
# First time: create DB and run migrations
PGPASSWORD=postgres psql -h localhost -U postgres -d postgres -c "CREATE DATABASE e2e_test;"
cd apps/e2e && PG_DATAQUEUE_DATABASE=postgres://postgres:postgres@localhost:5432/e2e_test pnpm run migrate-dataqueue
# Run tests
pnpm test:e2e
```

## License

MIT

## Author

[Nico Prananta](https://nico.fyi)
npm package: @nicnocquee/dataqueue-react
Description: React hooks for subscribing to dataqueue job status and progress
Author: Nico Prananta
Latest version: 1.39.0

# @nicnocquee/dataqueue-react

React hooks for subscribing to [dataqueue](https://github.com/nicnocquee/dataqueue) job status and progress.

## Installation

```bash
npm install @nicnocquee/dataqueue-react
```

Requires React 18+.

## Quick Start

```tsx
import { useJob } from '@nicnocquee/dataqueue-react';

function JobTracker({ jobId }: { jobId: number }) {
  const { status, progress, isLoading, error } = useJob(jobId, {
    fetcher: (id) =>
      fetch(`/api/jobs/${id}`)
        .then((r) => r.json())
        .then((d) => d.job),
    pollingInterval: 1000,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <p>Status: {status}</p>
      <progress value={progress ?? 0} max={100} />
    </div>
  );
}
```

## Provider

Use `DataqueueProvider` to share config across your app:

```tsx
import { DataqueueProvider } from '@nicnocquee/dataqueue-react';

function App() {
  return (
    <DataqueueProvider
      fetcher={(id) =>
        fetch(`/api/jobs/${id}`)
          .then((r) => r.json())
          .then((d) => d.job)
      }
      pollingInterval={2000}
    >
      <YourApp />
    </DataqueueProvider>
  );
}
```

Then use `useJob` anywhere without repeating the fetcher:

```tsx
const { status, progress } = useJob(jobId);
```

## API

### useJob(jobId, options?)

| Option            | Type                               | Default       | Description                       |
| ----------------- | ---------------------------------- | ------------- | --------------------------------- |
| `fetcher`         | `(id: number) => Promise<JobData>` | from provider | Function that fetches a job by ID |
| `pollingInterval` | `number`                           | `1000`        | Milliseconds between polls        |
| `enabled`         | `boolean`                          | `true`        | Set to `false` to pause polling   |
| `onStatusChange`  | `(newStatus, oldStatus) => void`   | —             | Called when status changes        |
| `onComplete`      | `(job) => void`                    | —             | Called when job completes         |
| `onFailed`        | `(job) => void`                    | —             | Called when job fails             |

Returns `{ data, status, progress, isLoading, error }`.

Polling stops automatically when the job reaches a terminal status (`completed`, `failed`, `cancelled`).

## Documentation

Full documentation: [dataqueue docs](https://dataqueue.nico.fyi/docs/usage/react-sdk)

## License

MIT