open-index/open-npm huggingface dataset:
npm package: @shinychang/hooks
Description: [![npm version](https://badge.fury.io/js/%40shinychang%2Fhooks.svg)](https://badge.fury.io/js/%40shinychang%2Fhooks) [![Netlify Status](https://api.netlify.com/api/v1/badges/c72d3b6a-166d-434f-9024-5e1c5d2fc344/deploy-status)](https://app.netlify.com/site
Author: Shiny
Latest version: 0.5.0

# hooks
[![npm version](https://badge.fury.io/js/%40shinychang%2Fhooks.svg)](https://badge.fury.io/js/%40shinychang%2Fhooks)
[![Netlify Status](https://api.netlify.com/api/v1/badges/c72d3b6a-166d-434f-9024-5e1c5d2fc344/deploy-status)](https://app.netlify.com/sites/cocky-kirch-2289e7/deploys)

## Installation

```
yarn add @shinychang/hooks
```
npm package: @shinydocs/eslint-config
Description: Extensible shared ESLint configuration
Author: Shinydocs Corporation
Latest version: 3.0.0

# @shinydocs/eslint-config

This package provides the extensible shared [ESLint](https://eslint.org/) config used at [Shinydocs](https://shinydocs.com/).

## Usage

First, install the package from npm:

```shell
npm install -D @shinydocs/eslint-config
```

Then, in your `.eslintrc.js` file, add the following:

```js
module.exports = {
  extends: ["@shinydocs/eslint-config"],
};
```

That's it! You can override the settings from `@shinydocs/eslint-config` by editing the `.eslintrc.js` file. Learn more about configuring ESLint on the [ESLint website](https://eslint.org/docs/latest/use/configure/configuration-files).

## Changelog

This project adheres to [Semantic Versioning](https://semver.org/). Please refer to the [CHANGELOG.md](CHANGELOG.md) for detailed changes and migration instructions.
npm package: @shinydocs/tailwind-config
Description: Extensible shared Tailwind CSS configuration
Author: Shinydocs Corporation
Latest version: 2.0.0-beta.1

# @shinydocs/tailwind-config

This package provides the extensible shared [Tailwind CSS](https://tailwindcss.com/) config used at [Shinydocs](https://shinydocs.com/).

## Usage

First, install the package from npm:

```shell
npm install -D @shinydocs/tailwind-config
```

Then, in your `tailwind.config.js` file, add the following:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("@shinydocs/tailwind-config")],
};
```

That's it! You can override the settings from `@shinydocs/tailwind-config` by editing the `tailwind.config.js` file. Learn more about configuring Tailwind on the [Tailwind CSS website](https://tailwindcss.com/docs/configuration).

## Changelog

This project adheres to [Semantic Versioning](https://semver.org/). Please refer to the [CHANGELOG.md](CHANGELOG.md) for detailed changes and migration instructions.
npm package: @shinydocs/ui
Description: React component library built with Tailwind CSS
Author: Shinydocs Corporation
Latest version: 2.0.0-beta.2

﻿# @shinydocs/ui

✨ React UI component library built with [Tailwind CSS](https://tailwindcss.com/) ✨

These React UI components are designed from [Shinydocs](https://shinydocs.com/) UI, our internal design system. We use them to build simple, intuitive and beautiful user experiences across our web products.

## Features

- 🐱‍🚀 Over 35 beautifully designed, accessible React UI components
- 🦜 Custom hooks for managing theme, watching media queries, etc.
- 🔠 Full support for localization
- 🔗 Link integration with the routing library of your choice
- 🌞 Light & dark mode designs
- 🛸 Seamless integration with existing Tailwind CSS projects

## Usage

First, install the package from npm:

```shell
npm install -D @shinydocs/ui @shinydocs/tailwind-config
```

Then, in your application's Tailwind CSS config, extend your content array with the path to Shinydocs UI. This will ensure all Tailwind utilities required by the library are generated.

Make sure to also include the [`@shinydocs/tailwind-config` plugin](https://www.npmjs.com/package/@shinydocs/tailwind-config).

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: ["@shinydocs/tailwind-config"],
  content: ["./node_modules/@shinydocs/ui/dist/**/*.js"],
  theme: {
    extend: {},
  },
};
```

### Setting up your application

This project provides a general context provider to handle global aspects like light and dark theme.

```tsx
import { Provider } from "@shinydocs/ui";
import * as React from "react";

export function MyApp() {
  return <Provider>...</Provider>;
}
```

You can import React components, hooks, and TypeScript types from the top-level module:

```ts
import { Button, useTheme, type ButtonProps } from "@shinydocs/ui";
```

## Changelog

This project adheres to [Semantic Versioning](https://semver.org/). Please refer to the [CHANGELOG.md](CHANGELOG.md) for detailed changes and migration instructions.
npm package: @shinyongjun/react-datepicker
Description: DatePicker component in React App.
Author: shinyongjun
Latest version: 3.6.0

## 라이브러리 개요

react-datepicker는 날짜와 기간, 시간 선택 UI를 제공하는 React 컴포넌트 라이브러리 입니다.
​

## 기능 소개

- 날짜를 선택하는 <DatePicker /> 컴포넌트를 제공합니다.
- 기간을 선택하는 <RangePicker /> 컴포넌트를 제공합니다.
- timeselector 옵션을 사용하여 시간선택자를 활성화 할 수 있습니다.
  ​

## 설치

npm을 사용하여 설치할 수 있습니다.

```bash
npm install @shinyongjun/react-datepicker
```

또는 yarn을 사용할 수도 있습니다.

```bash
yarn add @shinyongjun/react-datepicker
```

​

## 사용법

react-datepicker를 사용하려면 먼저 컴포넌트를 import해야 합니다.

```javascript
import { DatePicker, RangePicker } from '@shinyongjun/react-datepicker';
```

최상위 컴포넌트(app/layout.tsx or pages/\_app.tsx)에 css 파일도 import 합니다.

```javascript
import '@shinyongjun/react-datepicker/css';
```

​

## API 문서

라이브러리의 주요 API들에 대한 문서를 [Docs](https://www.shinyongjun.com/library/react-datepicker/docs/Getting%20Started/Overview)에서 확인할 수 있습니다.

## 실제 사용 사례

라이브러리의 실제 사용 예시는 [Demo](https://www.shinyongjun.com/library/react-datepicker/demo)에서 확인할 수 있습니다.
​

## 피드백 및 지원

라이브러리에 대한 피드백이나 문제 신고는 [GitHub Issues 페이지](https://github.com/flamecommit/react-datepicker/issues)에서 제공합니다.
npm package: @shinyongjun/react-dialog
Description: Dialog component in React App.
Author: shinyongjun
Latest version: 1.4.2

## 라이브러리 개요

react-dialog 는 비동기 Dialogbox를 제공하는 React 컴포넌트 라이브러리 입니다.

## 기능 소개

- DialogProvider 컴포넌트를 사용하여 최상위 컴포넌트를 감싸줍니다.
- useDialog를 사용하여 alert, confirm, prompt 메소드를 가져옵니다.
- javascript의 async, await 기능을 사용하여 Dialogbox를 동기적으로 사용합니다.
  ​

## 설치

npm을 사용하여 설치할 수 있습니다.

```bash
npm install @shinyongjun/react-dialog
```

또는 yarn을 사용할 수도 있습니다.

```bash
yarn add @shinyongjun/react-dialog
```

## 예제 코드

라이브러리의 간단한 사용 예제 코드입니다.

```tsx
import { DialogProvider } from '@shinyongjun/react-dialog';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';
import '@shinyongjun/react-dialog/css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DialogProvider>
      <App />
    </DialogProvider>
  </React.StrictMode>
);
```

```tsx
import * as React from 'react';
import { useDialog } from '@shinyongjun/react-dialog';

function App() {
  const { alert } = useDialog();

  const onAlertClick = async () => {
    await alert('are you sure?');
    console.log('closed alert');
  };

  return (
    <div>
      <button type="button" onClick={alert}>
        Open to Alert Dialog
      </button>
    </div>
  );
}

export default App;
```

## API 문서

라이브러리의 주요 API들에 대한 문서를 [Docs](https://www.shinyongjun.com/library/react-dialog/docs/Getting%20Started/Overview)에서 확인할 수 있습니다.

## 실제 사용 사례

라이브러리의 실제 사용 예시는 [Demo](https://www.shinyongjun.com/library/react-dialog/demo)에서 확인할 수 있습니다.

## 피드백 및 지원

라이브러리에 대한 피드백이나 문제 신고는 [GitHub Issues 페이지](https://github.com/flamecommit/react-dialog/issues)에서 제공합니다.
npm package: @shinyongjun/react-fullpage
Description: This is a Fullpage library that operates in React.
Author: shinyongjun
Latest version: 1.10.1

## 라이브러리 개요

react-fullpage는 전체 화면 전환 UI를 제공하는 리액트 컴포넌트 라이브러리입니다.

## 기능 소개

- 웹 페이지를 여러 섹션으로 나누고, 각 섹션을 전체 화면으로 표시할 수 있습니다.
- 다양한 스크롤 이벤트를 사용하여 사용자 경험을 향상시킬 수 있습니다.
- 사용자 정의 가능한 옵션을 통해 페이지 전환 효과나 스타일을 설정할 수 있습니다.
  ​

## 설치

npm을 사용하여 설치할 수 있습니다.

```bash
npm install @shinyongjun/react-fullpage
```

또는 yarn을 사용할 수도 있습니다.

```bash
yarn add @shinyongjun/react-fullpage
```

## 예제 코드

라이브러리의 간단한 사용 예제 코드입니다.

```tsx
'use client';

import { useState } from 'react';
import {
  FullpageContainer,
  FullpageSection,
} from '@shinyongjun/react-fullpage';
import '@shinyongjun/react-fullpage/css';

function MyPage() {
  const [activeIndex, setActiveIndex] = useState<number>(0);

  return (
    <FullpageContainer
      activeIndex={activeIndex}
      setActiveIndex={setActiveIndex}
    >
      <FullpageSection>
        <div>Section 1</div>
      </FullpageSection>
      <FullpageSection>
        <div>Section 2</div>
      </FullpageSection>
      <FullpageSection>
        <div>Section 3</div>
      </FullpageSection>
      <FullpageSection isAutoHeight>
        <footer>Footer</footer>
      </FullpageSection>
    </FullpageContainer>
  );
}

export default MyPage;
```

## API 문서

라이브러리의 주요 API들에 대한 문서를 [Docs](https://www.shinyongjun.com/library/react-fullpage/docs/Getting%20Started/Overview)에서 확인할 수 있습니다.

## 실제 사용 사례

라이브러리의 사용 예시는 [Demo](https://www.shinyongjun.com/library/react-fullpage/demo)에서 확인할 수 있습니다.

## 피드백 및 지원

라이브러리에 대한 피드백이나 문제 신고는 [GitHub Issues 페이지](https://github.com/flamecommit/react-fullpage/issues)에서 제공합니다.
npm package: @shinyongjun/react-modal
Description: Modal component in React App.
Author: shinyongjun
Latest version: 1.1.3

## 라이브러리 개요

react-modal React 기반의 웹 애플리케이션에서 Modal UI를 사용하기 쉽게 제공하는 라이브러리입니다.
​

## 설치

npm을 사용하여 설치할 수 있습니다.

```bash
npm install @shinyongjun/react-modal
```

또는 yarn을 사용할 수도 있습니다.

```bash
yarn add @shinyongjun/react-modal
```

​

## 사용법

react-modal를 사용하려면 먼저 컴포넌트를 import해야 합니다.

```javascript
import { Modal } from '@shinyongjun/react-modal';
```

최상위 컴포넌트(app/layout.tsx or pages/\_app.tsx)에 css 파일도 import 합니다.

```javascript
import '@shinyongjun/react-modal/css';
```

​

## API 문서

라이브러리의 주요 API들에 대한 문서를 [Docs](https://www.shinyongjun.com/library/react-modal/docs/Getting%20Started/Overview)에서 확인할 수 있습니다.

## 실제 사용 사례

라이브러리의 실제 사용 예시는 [Demo](https://shinyongjun.com/library/react-modal/demo)에서 확인할 수 있습니다.
​

## 피드백 및 지원

라이브러리에 대한 피드백이나 문제 신고는 [GitHub Issues 페이지](https://github.com/flamecommit/react-modal/issues)에서 제공합니다.
npm package: @shinyongjun/react-transition
Description: Transition component in React App.
Author: shinyongjun
Latest version: 1.4.2

## 라이브러리 개요

react-transition 은 React 기반의 웹 애플리케이션에서 Node의 등장과 퇴장 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리 입니다.

## 기능 소개

- <Transition> 컴포넌트를 사용하여 쉽게 애니메이션을 구현합니다.
- 등장과 퇴장 원하는 구간에 애니메이션을 적용합니다.
- name 속성을 사용하여 애니메이션을 커스텀 할 수 있습니다.
  ​

## 설치

npm을 사용하여 설치할 수 있습니다.

```bash
npm install @shinyongjun/react-transition
```

또는 yarn을 사용할 수도 있습니다.

```bash
yarn add @shinyongjun/react-transition
```

## 예제 코드

라이브러리의 간단한 사용 예제 코드입니다.

```tsx
import { Transition } from '@shinyongjun/react-transition';
import { useState } from 'react';

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button type="button" onClick={() => setShow(!show)}>
        Animation Toggler
      </button>
      <Transition show={show}>
        <div>Animation</div>
      </Transition>
    </div>
  );
}

export default App;
```

```css
.default-enter-active,
.default-leave-active {
  transition: all 1s ease-in;
}

.default-enter-from,
.default-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
```

## API 문서

라이브러리의 주요 API들에 대한 문서를 [Docs](https://www.shinyongjun.com/library/react-transition/docs/Getting%20Started/Overview)에서 확인할 수 있습니다.

## 실제 사용 사례

라이브러리의 실제 사용 예시는 [Demo](https://www.shinyongjun.com/library/react-transition/demo)에서 확인할 수 있습니다.

## 피드백 및 지원

라이브러리에 대한 피드백이나 문제 신고는 [GitHub Issues 페이지](https://github.com/flamecommit/react-transition/issues)에서 제공합니다.
npm package: @shinyoshiaki/ebml-builder
Description: Simple DSL for building EBML byte array (mkv/webm).
Author: ryiwamoto
Latest version: 0.0.1

simple-ebml-builder
====

Simple DSL for building EBML byte array (mkv/webm).

## install
```
npm install simple-ebml-builder
```

## Sample code
```TypeScript
import * as EBML from "simple-ebml-builder";

// EBML element object. The name is EBMLVersion and body is 1. The Size is generated automatically.
EBML.element(EBML.ID.EBMLVersion, EBML.number(1));

// 0x01FFFFFFFFFFFFFF is assigned as the element size for unknownSizeElement.
EBML.unknownSizeElement(EBML.ID.EBMLVersion, EBML.number(1));

// Element can have multiple elements.
EBML.element(EBML.ID.Info, [
    EBML.element(EBML.ID.TimecodeScale, EBML.number(1000000)),
    EBML.element(EBML.ID.MuxingApp, EBML.string("MuxingApp")),
    EBML.element(EBML.ID.WritingApp, EBML.string("WritingApp")),
]);

// Build single Uint8Array from element.
EBML.build(EBML.element(EBML.ID.EBMLVersion, EBML.number(1))); // => Uint8Array.of(0x42, 0x86, 0x81, 0x01)

// dumpBytes is useful for debugging.
console.log(EBML.dumpBytes(EBML.build(EBML.element(EBML.ID.EBMLVersion, EBML.number(1))))); // "0x42, 0x86, 0x81, 0x1"
```

## npm scripts
- __build__ Compile TypeScript to JavaScript file
- __test__ Run test
- __test:watch__ Watch files and run test.
- __benchmark:test__ Run benchmark
- __benchmark:update__ Run benchmark and update baseline.

## Licence
[MIT](./LICENSE)
npm package: @shinyoshiaki/skyway-red
Description: SkyWay が公式にサポートしているコンポーネントではありません
Author: shinyoshiaki
Latest version: 0.1.3

# skyway-audio-redundancy

SkyWay が公式にサポートしているコンポーネントではありません

このライブラリの不具合はこのリポジトリの issue に報告してください。作者が対応する場合があります。

## サンプルコードの実行方法

```sh
npm i
npx parcel ./example/index.html
```

コンソール画面に表示される URL を chrome ブラウザで開いて下さい。

**デプロイ版**
https://shinyoshiaki.github.io/skyway-red/build/example/
npm package: @shinyoshiaki/whip
Description: https://github.com/medooze/whip-whep-js
Author: shinyoshiaki2012@gmail.com
Latest version: 0.0.1

https://github.com/medooze/whip-whep-js

# Example

## browser

```js
import { WhipSender } from "@shinyoshiaki/whip";

//Get mic+cam
const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

//Create peerconnection
const pc = new RTCPeerConnection();

//Send all tracks
for (const track of stream.getTracks()) {
  //You could add simulcast too here
  pc.addTrack(track);
}

//Create whip client
const whip = new WhipSender();

const url = "https://whip.test/whip/endpoint";
const token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IndoaXAgdGVzdCIsImlhdCI6MTUxNjIzOTAyMn0.jpM01xu_vnSXioxQ3I7Z45bRh5eWRBEY2WJPZ6FerR8";

//Start publishing
whip.publish(pc, url, token);
```
npm package: @ship-cli/core
Description: Linear + jj workflow CLI for AI agents
Author: Eduardo Santos de Brito
Latest version: 0.1.15

# @ship-cli/core

[![npm version](https://img.shields.io/npm/v/@ship-cli/core)](https://www.npmjs.com/package/@ship-cli/core)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](../../LICENSE)

**Linear + jj workflow CLI for AI coding agents.**

This is the core CLI package for [Ship](https://github.com/EduSantosBrito/ship-cli). See the [main README](../../README.md) for full documentation.

## Installation

```sh
# npm
npm install -g @ship-cli/core

# pnpm
pnpm add -g @ship-cli/core

# npx (one-off)
npx @ship-cli/core init
```

## Quick Start

```sh
# Initialize in your project
ship init

# See what's ready to work on
ship task ready

# Start working on a task
ship task start BRI-123

# Create a workspace and change
ship stack create

# Submit your changes
ship stack submit

# Mark task complete
ship task done BRI-123
```

## Requirements

- Node.js 20, 22, or 24 (LTS versions)
- [Linear](https://linear.app) or [Notion](https://notion.so) account
- [jj](https://martinvonz.github.io/jj) (for VCS features)

## Task Providers

Ship supports Linear (default) and Notion as task backends. To use Notion:

```sh
ship init  # Select "Notion" when prompted
```

See [Notion Setup Guide](docs/NOTION.md) for detailed configuration.

## Commands

### Task Management

| Command | Description |
|---------|-------------|
| `ship init` | Initialize ship (authenticate + select team/project) |
| `ship task ready` | List tasks with no blockers |
| `ship task list` | List all tasks |
| `ship task blocked` | List blocked tasks |
| `ship task show <id>` | Show task details |
| `ship task start <id>` | Start working on a task |
| `ship task done <id>` | Mark task as complete |
| `ship task create "<title>"` | Create a new task |

### Stacked Changes (jj)

| Command | Description |
|---------|-------------|
| `ship stack log` | Show stack of changes |
| `ship stack status` | Show current change status |
| `ship stack create` | Create a new change in the stack |
| `ship stack sync` | Sync with remote (fetch + rebase) |
| `ship stack submit` | Push changes and create/update PRs |

See [full command reference](../../README.md#commands) in the main documentation.

## OpenCode Integration

For AI agent integration, install the [@ship-cli/opencode](https://www.npmjs.com/package/@ship-cli/opencode) plugin:

```json
{
  "plugins": ["@ship-cli/opencode"]
}
```

## License

[MIT](../../LICENSE)