open-index/open-npm huggingface dataset:
npm package: @susonwaiba/react-media-uploader
Description: `Status: Under development`
Author: Suson Waiba
Latest version: 0.1.6

# React Media Uploader

`Status: Under development`

## Quick start

```bash
bun install

bun run build
```

## Hook

#### Upload on select

```typescript
"use client";

import { useMediaUploader } from "@susonwaiba/react-media-uploader";

export function Uploader() {
  const uploader = useMediaUploader();
  return (
    <input
      name="image"
      type="file"
      onChange={uploader.onFileInputChange}
    />
  );
}
```

#### Manual upload

```typescript
"use client";

import { useMediaUploader, MediaStatusEnum } from "@susonwaiba/react-media-uploader";

export function ManualUploader() {
  const uploader = useMediaUploader({
    enableManualUpload: true,
    // Update media status to ACTIVE status on success
    mediaUploadSuccessStatus: MediaStatusEnum.ACTIVE,
  });

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const mediaValues = await uploader.uploadManually();
    console.log("mediaValues ->", mediaValues);
    // submit data to API
  };

  return (
    <form onSubmit={onSubmit}>
      <div className="mb-4">
        <input
          name="image"
          type="file"
          multiple
          onChange={uploader.onFileInputChange}
        />
      </div>
      <div>
        <button type="submit">Upload</button>
      </div>
    </form>
  );
}
```

#### UseMediaUploaderProps

```typescript
export interface UseMediaUploaderProps<T extends object> {
  defaultValues?: T;
  mediaUploadSuccessStatus?: MediaStatusEnum;
  enableManualUpload?: boolean;
  serverConfig?: {
    additionalHeaders?: Record<string, string>;
    generateUploadUrl?: string;
    onGenerateUploadUrl?: (
      media: Partial<Media>,
    ) => Promise<{ item: Media; uploadUrl: string }>;
    markMediaAsTemp?: string;
    onMarkMediaAsTemp?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
    markMediaAsActive?: string;
    onMarkMediaAsActive?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
    markMediaAsCanceled?: string;
    onMarkMediaAsCanceled?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
  };
  onUploadSuccess?: (currentValues: any) => Promise<void>;
  onUploadFailure?: (uploadRes: any) => Promise<void>;
}
```

#### UseMediaUploaderResponse

```typescript
export interface UseMediaUploaderResponse<T extends object> {
  values: T;
  setValues: (val: T) => void;
  enableManualUpload?: boolean;
  uploadManually: () => Promise<T>;
  mediaItems: Record<string, MediaItem>;
  setMediaItems: (items: Record<string, MediaItem>) => void;
  uploadInfos: Record<string, UploadMediaInfo>;
  onFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
  onFileChange: (file: File, name: string, multiple?: boolean) => Promise<void>;
}
```
npm package: @susp3nse/awful-wow-declarations
Description: Typescript declarations for the Retail World of Warcraft LUA API For Awful Framework
Author: Susp3nse
Latest version: 10.0.7-dev.1

# Typescript declarations for the Retail World of Warcraft LUA API for Awful Framework

> WoW Classic developers should use the [wow-classic-declarations](https://github.com/wartoshika/wow-classic-declarations) repository.

## DragonFlight

Updates for the DragonFlight expansion are currently in development.

**Supported transpilers for LUA targets**:

- TypescriptToLua [GitHub-Page](https://github.com/TypeScriptToLua/TypeScriptToLua)

## Setup

Please add the awful-wow-declarations path to your `tsconfig.json` compiler options like below:

```json
{
  "compilerOptions": {
    // ...
    "typeRoots": ["@types", "@susp3nse/awful-wow-declarations"]
  }
}
```

## Disclaimer

This was forked from [wow-declarations](https://github.com/wartoshika/wow-declarations).

I'm retro fitting this to work better with the awful framework and [awful-types](https://github.com/aqwerty420/awful-types).

Majority of the code was written by wartoshika. If needed I'll make required changes if the author finds that I have wrongly used the code above.
npm package: @suspack-item/chartjs
Description: This is a sample project for suspack.
Latest version: 0.0.4

# @suspack-item/chartjs 

This is a sample project for suspack.


## package 

2 가지 방식으로 제공 

* npm package - @suspack-item/chartjs
* dist 디렉토리 - 복사해서 쓰세요.
  * index.mjs
  * style.css

## config 

특정 config 를 사용하고 싶다면, 아래와 같이 설정하세요.

`%%CONFIG%%` 문자열 그대로 JSON string 으로 치환해줍니다. 


```js

content = content.replace('%%CONFIG%%', JSON.stringify(config))

```

## Properties 

### suspack: SuspackInstance 

suspack dependencies manager for remote component 

### type: string 

chart type 

* line 
* pie 


### data: object 

chart data 

* lables: x axis labels 
* datasets: y axis data 

```jsx
<ChartJS data={{
  labels: ["2", "February", "March", "April", "May", "June", "July"],
  datasets: [
      {
          label: "My First dataset",
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: "rgb(75, 192, 192)",
          tension: 0.1,
      },
  ],
}} />
```

### style: object 

chart style 

```jsx
<ChartJS style={{
  width: 300,
  height: 400
}} />
```

### options: object 

chart meta options 

```jsx
<ChartJS options={{
  scales: {
    y: {
      beginAtZero: true
    }
  }
}} />

```
npm package: @suspack-item/item
Description: This is a sample project for suspack.
Latest version: 0.0.3

# @suspack-item/item 

This is a sample project for suspack.


## package 

2 가지 방식으로 제공 

* npm package - @suspack-item/item
* dist 디렉토리 - 복사해서 쓰세요.
  * index.mjs
  * style.css

## config 

특정 config 를 사용하고 싶다면, 아래와 같이 설정하세요.

`%%CONFIG%%` 문자열 그대로 JSON string 으로 치환해줍니다. 


```js

content = content.replace('%%CONFIG%%', JSON.stringify(config))

```

## Properties 

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `'Hello World'` |  |
| `description` | `string` | `'This is a sample project for suspack.'` |  |
| `color` | `string` | `'red'` |  |
| `backgroundColor` | `string` | `'white'` |  |
| `border` | `string` | `'1px solid red'` |  |
npm package: @suspensive/cache
Description: Suspensive interfaces for caching
Author: Jonghyeon Ko
Latest version: 0.5.7

# Introduction

[![npm version](https://img.shields.io/npm/v/@suspensive/cache?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/cache)
[![npm](https://img.shields.io/npm/dm/@suspensive/cache?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/cache)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/cache?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/cache)

## Installation

@suspensive/cache lives in npm. To install the latest stable version, run the following command

```shell npm2yarn
npm install @suspensive/cache
```
npm package: @suspensive/codemods
Description: Codemods for @suspensive.
Author: Gwansik Kim
Latest version: 3.20.2

# Introduction

Suspensive provides a codemod to facilitate easy code modifications. This helps in managing the Suspensive codebase more effectively.

## Usage

In your terminal, navigate into your project's folder, then run:

```shell
npx @suspensive/codemods <transform> <path>
```
npm package: @suspensive/jotai
Description: Suspensive interfaces for jotai
Author: Gwansik Kim
Latest version: 3.20.2

# Introduction

@suspensive/jotai builds on the Jotai state management library, adding features that work well with React Suspense. It provides utilities for managing state using atom, which can be easily integrated into Suspense-based workflows.

## Installation

@suspensive/jotai lives in npm. To install the latest stable version, run the following command

```shell npm2yarn
npm install @suspensive/jotai
```
npm package: @suspensive/promise
Description: Useful interfaces for React Suspense
Author: Jonghyeon Ko
Latest version: 0.1.0

# Introduction

[![npm version](https://img.shields.io/npm/v/@suspensive/promise?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/promise)
[![npm](https://img.shields.io/npm/dm/@suspensive/promise?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/promise)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/promise?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/promise)

## Installation

@suspensive/promise lives in npm. To install the latest stable version, run the following command

```shell npm2yarn
npm install @suspensive/promise
```
npm package: @suspensive/react-await
Description: Useful interfaces for React Suspense
Author: Jonghyeon Ko
Latest version: 0.2.2

# Introduction

[![npm version](https://img.shields.io/npm/v/@suspensive/react-await?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-await)
[![npm](https://img.shields.io/npm/dm/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/react-await?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-await)

## Installation

@suspensive/react-await lives in npm. To install the latest stable version, run the following command

```shell npm2yarn
npm install @suspensive/react-await
```
npm package: @suspensive/react-image
Description: Integrates with React Suspense for image loading and management
Author: Jonghyeon Ko
Latest version: 0.0.37
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Introduction

[![npm version](https://img.shields.io/npm/v/@suspensive/react-image?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-image)
[![npm](https://img.shields.io/npm/dm/@suspensive/react-image?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-image)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@suspensive/react-image?color=000&labelColor=000)](https://www.npmjs.com/package/@suspensive/react-image)

## Installation

@suspensive/react-image lives in npm. To install the latest stable version, run the following command

```shell npm2yarn
npm install @suspensive/react-image
```
npm package: @suspensive/react-query
Description: Suspensive interfaces for @tanstack/react-query
Author: Jonghyeon Ko
Latest version: 3.20.2

# Introduction

@suspensive/react-query provides components and hooks to use @tanstack/react-query's suspense option easily.

## Installation

Install the package that matches your @tanstack/react-query version. By using npm aliases, the import path remains `@suspensive/react-query` across your codebase. When upgrading your @tanstack/react-query version, you only need to change the alias in package.json — no code changes required.

#### @tanstack/react-query v5

```shell npm2yarn
npm install @suspensive/react-query@npm:@suspensive/react-query-5 @tanstack/react-query@5
```

#### @tanstack/react-query v4

@tanstack/react-query v4 supports [lower version browsers](https://suspensive.org/docs/react-query/motivation#v5-drops-support-for-older-browsers) compared to v5.

```shell npm2yarn
npm install @suspensive/react-query@npm:@suspensive/react-query-4 @tanstack/react-query@4
```
npm package: @sustainablebrands/gotcha
Description: A simple node-based Web page capture CLI.
Author: Andrew Marconi
Latest version: 1.0.0

# gotcha

A simple node-based Web page capture CLI.

## Usage

There are two ways that this command can be used:

1. Create a screenshot of a single web page URL.
1. Create screenshots of all of the URLs in a sitemap.

### Get a Single URL

```bash
gotcha https://example.com/full-path-url/pagename
```

This will save a PNG in the current directory called
``./example.com/full-path-url/pagename.png``.

### Get a Full Sitemap

```bash
gotcha --sitemap https://example.com/sitemap.xml
```

This will grab the sitemap and loop through each page and save a screen capture.
**Note**: If you're using a multi-level site map (such as what Yoast's plugin for
WordPress creates), you will need to call the command multiple times on the
individual sitemaps that it lists -- it will not resolve sub-sitemap referecnes.

### Command Line Options

- ``--sitemap`` or ``-m`` - This URL is a sitemap.
- ``--url`` | ``-u`` - This URL is a page.
- ``{URL}`` - The URL you want to capture.

## Requirements

- Requires at least node >8 (tested on v8.11.3).