open-index/open-npm huggingface dataset:
npm package: @ryniaubenpm2/voluptatum-sed-doloribus
Description: [![github actions][actions-image]][actions-url] [![coverage][codecov-image]][codecov-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]
Author: ryniaube
Latest version: 1.0.0

# @ryniaubenpm2/voluptatum-sed-doloribus <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

[![github actions][actions-image]][actions-url]
[![coverage][codecov-image]][codecov-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

[![npm badge][npm-badge-png]][package-url]

A simple list of possible Typed Array names.

## Example

```js
const assert = require('assert');

const names = require('@ryniaubenpm2/voluptatum-sed-doloribus');

assert(Array.isArray(names));
assert(names.every(name => (
    typeof name === 'string'
    && typeof globalThis[name] === 'function'
    && globalThis[name].name === name
)));
```

## Tests
Simply clone the repo, `npm install`, and run `npm test`

## Security

Please email [@ljharb](https://github.com/ljharb) or see https://tidelift.com/security if you have a potential security vulnerability to report.

[package-url]: https://npmjs.org/package/@ryniaubenpm2/voluptatum-sed-doloribus
[npm-version-svg]: https://versionbadg.es/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus.svg
[deps-svg]: https://david-dm.org/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus.svg
[deps-url]: https://david-dm.org/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus
[dev-deps-svg]: https://david-dm.org/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus/dev-status.svg
[dev-deps-url]: https://david-dm.org/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/@ryniaubenpm2/voluptatum-sed-doloribus.png?downloads=true&stars=true
[license-image]: https://img.shields.io/npm/l/@ryniaubenpm2/voluptatum-sed-doloribus.svg
[license-url]: LICENSE
[downloads-image]: https://img.shields.io/npm/dm/@ryniaubenpm2/voluptatum-sed-doloribus.svg
[downloads-url]: https://npm-stat.com/charts.html?package=@ryniaubenpm2/voluptatum-sed-doloribus
[codecov-image]: https://codecov.io/gh/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus/branch/main/graphs/badge.svg
[codecov-url]: https://app.codecov.io/gh/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus/
[actions-image]: https://img.shields.io/endpoint?url=https://github-actions-badge-u3jn4tfpocch.runkit.sh/ljharb/@ryniaubenpm2/voluptatum-sed-doloribus
[actions-url]: https://github.com/ryniaubenpm2/voluptatum-sed-doloribus/actions
npm package: @rynpsc/focus-trap
Description: Basic focus trap
Author: Ryan Pascoe
Latest version: 3.0.3

# Focus Trap

Simple focus trap for trapping focus within a given element.

![npm version](https://img.shields.io/npm/v/@rynpsc/focus-trap)
![npm bundle size (minified and gzipped)](https://img.shields.io/bundlephobia/minzip/@rynpsc/focus-trap?label=size)

## Install

```
$ npm install @rynpsc/focus-trap
```

## API

### FocusTrap(element: HTMLElement)

Creates a focusTrap instance.

```js
import { FocusTrap } from '@rynpsc/focus-trap';

let trap = FocusTrap(HTMLElement);
```

#### .activate(element: HTMLElement | undefined | null , scroll: boolean)

Active the trap and set focus to the given `element`. If `element` is `undefined` the first focuable element will be focused. Set to `null` to disable focusing any element.

Pass `true` as the second parameter to scroll element into view, by default this is set to false.

```js
trap.activate();
trap.activate(document.getElementById('my-id'), true);
```

#### .deactivate(element: HTMLElement | undefined | null, scroll: boolean)

Deactivate the trap and set focus to the given `element`. If `element` is `undefined` the element that had focus before calling `activate` will be focused. Set to `null` to disable focusing any element.

Pass `true` as the second parameter to scroll element into view, by default this is set to false.

```js
trap.deactive();
trap.deactivate(document.getElementById('my-id'), true);
```

#### activated: boolean

Returns a `boolean` indicating if the trap is activate.

### getFocusableElements(element: HTMLElement): HTMLElement[]

Gets the focusable child elements within a given element.

```js
import { getFocusableElements } from '@rynpsc/focus-trap';

let elements = getFocusableElements(HTMLElement);
```

## Example

```html
<button id="activate">Activate</button>

<div id="trap">
  <a href="#">Link</a>
  <label for="name">Name</label>
  <input type="text" id="name">
  <button id="deactivate">Deactivate</button>
</div>
```

```js
import { FocusTrap } from '@rynpsc/focus-trap';

const trap = FocusTrap(document.getElementById('trap'));

document.getElementById('activate').addEventListener('click', function() {
  trap.activate();
});

document.getElementById('deactivate').addEventListener('click', function() {
  trap.deactivate();
});
```

## Browser support

Requires the following APIs:

- Array.from
- Array.prototype.filter
- Array.prototype.some
- DOMTokenList.contains
- Element.matches
- Element.querySelectorAll
- HTMLElement.dataset

## License

MIT
npm package: @ryntab/panel-bear
Description: Panel Bear Module for Nuxt.js
Latest version: 1.0.1


![Panelbear](/assets/banner.png)
A simple module for using Panelbear analytics with Nuxt.js

## Installation
`npm i @ryntab/panel-bear`

Then include the module in your config.
```JS
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
	'@ryntab/panel-bear',
],
```

## Configuration
Add the configuration settings to your `nuxt.config.js`, for the minimum configuration you need to pass your Panelbear site ID. [Where to find your site ID](https://panelbear.com/docs/how-to-find-site-id/)
```JS
panelBear: {
	id:  'YOUR-PROJECT-ID',
},
```
This can also be done by passing along your configuration object in the module.
```JS
modules: [
	["@ryntab/panel-bear",{
		id:  "HYleEXITkCD",
	}],
],
```
 ## 
### Additional Configuration
This module supports all Panelbear configuration options. [@Configuration Docs](https://panelbear.com/docs/#configuration)

```JS
panelBear: {
	id:  'YOUR-PROJECT-ID',
	autoTrack: false,
	honorDNT: true,
	includeURLFragment: true,
	enabled: true
},
```
## 
### Debug Mode
For tracking locally, enable debugging mode in your config. [@Local Development](https://panelbear.com/docs/local-development/)
```JS
panelBear: {
	id:  'YOUR-PROJECT-ID',
	debug: true,
},
```

## Event Tracking
To track custom events, you can use the plugins track property. Event names must not include spaces or special characters.

```JS
this.$panelBear.track("Custom-Event");
```
npm package: @ryntab/web-vitals
Description: Web Vitals for Nuxt.js
Latest version: 0.2.4

# Nuxt Web Vitals

> Web Vitals: Essential module for a healthy [Nuxt.js](https://github.com/nuxt/nuxt.js)

[Web Vitals](https://web.dev/vitals) is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
This module will gather those metrics on each page view, and send them to a provider using either [`Navigator.sendBeacon()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) or [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

## Installation

```bash
# yarn
yarn add --dev @nuxtjs/web-vitals

# npm
npm install --save-dev @nuxtjs/web-vitals
```

Add `@nuxtjs/web-vitals` to the `buildModules` section of your `nuxt.config.js`

```javascript
export default {
  buildModules: [
    '@nuxtjs/web-vitals'
  ]
}
```

:warning: If you are using Nuxt **< v2.9** you have to install the module as a `dependency` (No `--save-dev` or `--dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.

## Options

```js
{
  webVitals: {
    // provider: '', // auto detectd
    debug: false,
    disabled: false
  }
}
```

## Providers

### Google Analytics

_Report WebVitals to GA_

Create a GA property and get `trackingID`

Either provide `GOOGLE_ANALYTICS_ID` environement variable or set inside `nuxt.config`:

(Top level `googleAnalytics.id` is supported for backward compatibility as fallback)

```js
export default {
  webVitals: {
    ga: { id: 'UA-XXXXXXXX-X' }
  }
}
```

Behavior > Events > Overview > Event Category > Event Action

![Events Actions](/assets/event-action.png)


### Vercel Analytics

_Report WebVitals to Vercel_

Works without configuration

### Basic logger

_Report WebVitals to Console_

Output metrics to the console insead of sending them to a remote provider

```js
{
  webVitals: {
    provider: 'log',
    debug: true, // debug enable metrics reporting on dev environments
    disabled: false
  }
}
```

:warning: this provider does not send WebVitals trough network, issues with navigator extensions can not be deteced with this method.

### Logging to custom api

_Report WebVitals to a custom api endpoint_

```js
export default {
  webVitals: {
    provider: 'api',
    api: { url: '/api/web-vitals' }
    debug: true // debug enable metrics reporting on dev environments
  }
```

Example body:

```js
{
  href: 'http://localhost:3000/',
  name: 'LCP',
  value: 303.599,
  rating: 'good',
  delta: 303.599,
  entries: [
    {
      name: '',
      entryType: 'largest-contentful-paint',
      startTime: 303.599,
      duration: 0,
      size: 5698,
      renderTime: 303.599,
      loadTime: 0,
      firstAnimatedFrameTime: 0,
      id: '',
      url: ''
    }
  ],
  id: 'v3-1669725914225-9792921995831',
  navigationType: 'reload'
}
```

### License

[MIT](https://opensource.org/licenses/MIT)
npm package: @ryo-98/react-api-bridge
Description: A registry for component imperative api
Author: Deliang Shu deliangshu@yahoo.com
Latest version: 1.0.2

# react-api-bridge

> **语言版本**: [English](./README.md) | [简体中文](#)

<p align="center">
  <img src="https://raw.githubusercontent.com/Ryo98-SL/react-api-bridge/master/logo/react-api-bridge-logo.svg" alt="react-api-bridge logo" width="200">
</p>

React 的作用域命令式 API 桥。

React 对数据流已经有成熟答案，但对功能流还没有对应方案。\
这个库提供了一种带作用域、类型安全的方式，
可以让你在 React 子树中跨组件暴露和调用方法，而***不需要层层传递 props （Props Drilling）或者层层转发从forwardRef获取的Ref***。

| 场景      | React 的答案                   |
| ------- | --------------------------- |
| 数据下传，单层 | props                       |
| 数据下传，跨层 | Context                     |
| 功能上传，单层 | useImperativeHandle         |
| 功能上传，跨层 | **空白（react-api-bridge来填补）** |

<br />

## 文档

- English: <https://ryo98-sl.github.io/react-api-bridge/>
- 简体中文: <https://ryo98-sl.github.io/react-api-bridge/zh/>

## 安装

```bash
npm install @ryo-98/react-api-bridge
```

## 它的能力

- 用 `Boundary` 做 API 作用域隔离
- 直接调用强类型组件方法，而不是广播事件
- 支持获取当前或父级作用域 API
- 支持异步等待稍后挂载的 API
- 支持同名 API 的多实例注册

## 快速示例

```tsx
import { useState } from "react";
import {
  createBridge,
  createBoundary,
  useAPI,
  useRegister,
} from "@ryo-98/react-api-bridge";

interface AppAPIs {
  modal: {
    open: (content: string) => void;
    close: () => void;
  };
}

const bridge = createBridge<AppAPIs>();
const Boundary = createBoundary(bridge);

function ModalHost() {
  const [content, setContent] = useState<string | null>(null);

  useRegister(
    bridge,
    "modal",
    () => ({
      open: (nextContent) => setContent(nextContent),
      close: () => setContent(null),
    }),
    [],
  );

  if (!content) return null;
  return <dialog open>{content}</dialog>;
}

function OpenButton() {
  const modalAPI = useAPI(bridge, "modal");

  return (
    <button onClick={() => modalAPI.current?.open("Hello from anywhere")}>
      打开弹窗
    </button>
  );
}

export default function App() {
  return (
    <Boundary>
      <ModalHost />
      <OpenButton />
    </Boundary>
  );
}
```

## API 一览

- `createBridge()`
- `createBoundary()`
- `useRegister()`
- `useAPI()`
- `useUpperAPI()`
- `getBridgeAPI()`
- `getBridgeAPIAsync()`

## 典型场景

- Modal、Drawer、Toast 控制器
- Wizard、Tree 等复杂组件联动
- 局部插件系统 API
- 不适合抽成全局状态的命令式动作

## 许可证

MIT
npm package: @ryo-kagawa/is-equivalent.js
Description: > オブジェクト同士の比較を行うライブラリです
Author: ryo-kagawa
Latest version: 3.1.0

# is-equivalent

> オブジェクト同士の比較を行うライブラリです

このREADMEはv3.0.xの内容です

# v3.x系未満には致命的なバグが存在しており正常に判定できていませんでしたので使用しないでください

JavaScriptでは通常オブジェクト同士の比較では同一オブジェクトでない限りfalseとなってしまいます  
本当に欲しいのは同じ内容であった場合にtrueが返って欲しいです  
これを解消するためのライブラリです

引数は4つです
* 第一引数：比較するオブジェクトその1  
* 第二引数：比較するオブジェクトその2  
* 第三引数：比較するパラメーターを指定するオブジェクト（指定しなくてもかまいません）  
* 第四引数：オプション（指定しなくてもかまいません）

対応ブラウザ
* Google Chrome：73以降  
* Internet Explorer：11  
* Microsoft Edge：18以降  
* Mozilla Firefox：66以降  
* Opera：58以降  

一応の対応ブラウザ
* Safari：12以降（設定上は含めているが、テスト端末を所有していない為）

対応終了予定
* Internet Explorer：11（2023年1月11日にWindows 8.1でのサポートが終了する為、Windows 10ではEdgeがデフォルトの為終了しても問題ない認識）


# 第一引数と第二引数について
第一引数と第二引数には比較したい値を入れます

通常の比較
```
var a_1 = {};
var b_1 = {};
console.log(a_1 === b_1); // false
var a_2 = {test: 1};
var b_2 = {test: 1};
console.log(a_2 === b_2); // false
```

isEquivalentを使った比較
```
var a_1 = {};
var b_1 = {};
console.log(isEquivalent(a_1, b_1)); // true
var a_2 = {test: 1};
var b_2 = {test: 1};
console.log(isEquivalent(a_2, b_2)); // true
```

# 第三引数について
第三引数では比較するパラメーターを指定します
これはどういうことかというと比較したいパラメーターを個別に指定できます
```
var a = {a: 1, test: 1};
var b = {b: 1, test: 1};
var compare = {test: true};
console.log(isEquivalent(a, b)); // false
console.log(isEquivalent(a, b, compare)); // true
```

もちろん深い階層の比較もできます
```
var a = {a: 1, test: {test_1: 1, test_2: 1}};
var b = {b: 1, test: {test_1: 1, test_2: 2}};
var compare = {test: {test_1: true}};
console.log(isEquivalent(a, b, compare)); // true
```

深い階層のオブジェクトの持つパラメーターを全て比較したい場合には記述を省略することもできます
```
var a = {
  test_1: {
    test_1_1: 1,
    test_1_2: 2
  },
  test_2: {
    test_2: 1
  }
};
var b = {
  test_1: {
    test_1_1: 1,
    test_1_2: 2
  },
  test_2: {
    test_2: 2
  }
};
var compare = {
  test_1: true
};
console.log(isEquivalent(a, b, compare)); // true
```

コレクションの比較にも対応しています
```
var a = [{a: 1, test: 2}];
var b = [{b: 1, test: 2}];
var compare = {test: true};
console.log(isEquivalent(a, b, compare)); // true
```

また、特殊な処理を行いたい場合には関数を指定することもできます
```
var a = {test: 1};
var b = {test: "1"};
var compare = {test: function(a, b) {return a == b}};
console.log(isEquivalent(a, b)); // false
console.log(isEquivalent(a, b, compare)); // true
```

# 第四引数について
第四引数で指定するのはオプションです  
isCompareFunctionは関数の比較をするか指定するオプションです  
デフォルトはfalseが指定されています
```
var a = {test: function() {return 1;}};
var b = {test: function() {return 2;}};
var option = {isEquivalent: true};
console.log(isEquivalent(a, b)); // true
console.log(isEquivalent(a, b, undefined, option)); // false
```

isJudgmentNoneParameterは存在しないパラメーターを比較する場合に何を返すべきか指定します  
デフォルトはfalseが指定されています
```
var a = {};
var b = {test:1};
var option = {isJudgmentNoneParameter: true};
console.log(isEquivalent(a, b)); // false
console.log(isEquivalent(a, b, undefined, option)); // true
```
npm package: @ryo20/fizzbuzz
Description: A JavaScript implementation of FizzBuzz.
Author: test
Latest version: 1.0.2


# fizzbuzz

A JavaScript implementation of FizzBuzz.

## Installation

```sh
$ npm install @ryo20/fizzbuzz
```　

## Usage

### In JavaScript code

```js
const fizzbuzz = require('@ryo20/fizzbuzz')

fizzbuzz(1) // '1'
fizzbuzz(2) // '2'
fizzbuzz(3) // 'Fizz'
fizzbuzz(5) // 'Buzz'
fizzbuzz(15) // 'FizzBuzz'
```　

### From the command line

```sh
$ npx fizzbuzz 1
1
$ npx fizzbuzz 2
2
$ npx fizzbuzz 3
Fizz
$ npx fizzbuzz 5
Buzz
$ npx fizzbuzz 15
FizzBuzz
```
npm package: @ryo33/playback
Description: Control the iTunes transport and receive track change events
Author: Justin Walgran
Latest version: 0.2.0

# playback

Control the iTunes transport on OS X and Windows and receive track change events

# example

If you are in public, plug in some headphones or lower your volume, then:

    var itunes = require('playback');
    itunes.on('playing', function(data){ console.dir(data);} );
    itunes.on('paused', function(data){ console.log('paused');} );
    itunes.play();

Pause, play, and change tracks in iTunes and watch the Node console.

# methods

    var itunes = require('playback')

## itunes.play([callback])

Start playing the current track. If `callback` is not defined emits a `playing` event with an object argument representing the current track:

    {
        name: 'Dance Yrself Clean',
        artist: 'LCD Soundsystem',
        album: 'This Is Happening'
    }

If `callback` is defined it is called with the same object.

## itunes.pause([callback])

Pause playback. If `callback` is not defined emits a `paused` event with the following object:

    { ok: "true" }

If `callback` is defined it is called with the same object.

## itunes.stop([callback])

Stop playback. If `callback` is not defined  emits a `stopped` event with the following object:

    { ok: "true" }

If `callback` is defined it is called with the same object.

## itunes.currentTrack([callback])

Get information about the currently playing track. If `callback` is not defined emits a `playing` event with an object argument representing the current track:

    {
        name: 'Lizzy',
        artist: 'Melvins',
        album: 'Houdini'
    }

If `callback` is defined it is called with the same object.

## itunes.next([callback])

Skip to the next song in the current playlist. Start playing if iTunes is paused or stopped. If `callback` is not defined emits a `playing` event with an object argument representing the current track:

    {
        name: 'Going Blind',
        artist: 'Melvins',
        album: 'Houdini'
    }

If `callback` is defined it is called with the same object.

## itunes.previous([callback])

Skip to the previous song in the current playlist. Start playing if iTunes is paused or stopped. If `callback` is not defined emits a `playing` event with an object argument representing the current track:

    {
        name: 'Night Goat',
        artist: 'Melvins',
        album: 'Houdini'
    }

If `callback` is defined it is called with the same object.

## itunes.fadeOut([callback])

Slowly decrease the iTunes volume to zero, stop playback, then return the volume to the level at which it was set before the fade out began.

## itunes.fadeIn([callback])

Set the iTunes volume to zero, start playback, then slowly return the volume to the original level.

# install

With [npm](https://npmjs.org) do:

    npm install playback

# release notes

## 0.2.0

Add ``setVolume`` command (Windows only)

## 0.1.0

Windows support

## 0.0.1

Initial release
npm package: @ryo_suga/babel-preset-ryosuga
Description: A babel preset for transforming your JavaScript for me
Author: ryo_suga
Latest version: 0.0.1

# babel-preset-ryosuga

> A babel preset for transforming my Javascript.

## Install
```bash
npm i @ryo_suga/babel-preset-ryosuga -D
```

## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```
{
  "presets": ["ryosuga"]
}
```

### Via CLI
```
$ babel script.js --presets ryosuga
```

### Via Node API
```
require('babel-core').transform('code', {
  presets: ['ryosuga']
});
```
npm package: @ryo_suga/react-isomorphic-carousel
Description: Isomorphic React Carousel Component.
Latest version: 0.4.0

# react-isomorphic-carousel
Isomorphic React Carousel Component.

* Isomorphic
* Responsive
* Touch and Swipe (is not draggable yet)

WIP: It is still under development.

## Install
```sh
npm i @ryo_suga/react-isomorphic-carousel
```

## Usage

```tsx
import * as React from 'react';
import * as Carouse from '@ryo_suga/react-isomorphic-carousel';

React.render(
  <Carousel>
    <img src="//placehold.it/320x160?text=a" />
    <img src="//placehold.it/320x160?text=b" />
    <img src="//placehold.it/320x160?text=c" />
  </Carousel>,
  document.getElementById('app')
);
```

### Carousel

#### Props

| name              | type                | description                                                                       |
|-------------------|---------------------|-----------------------------------------------------------------------------------|
| useDots           | boolean             | use dots or not. (default false)                                                  |
| dotStyle          | React.CSSProperties | custom css properties for dot button. (default {})                                |
| activeDotStyle     | React.CSSProperties | custom css properties for the active dot button. (default {})                    |
| duration          | number              | miliseconds for animation speed. (default 500)                                    |
| autoSlideInterval | number              | miliseconds for auto slide. if 0 or less than 0, auto slide disabled. (default 0) |

#### Next/Prev Button

if you want to call next or prev to move slide position from script, use ref to get Carousel instance.

```tsx
class App extends React.Component {
  carousel: Carousel
  render() {
    <div>
      <Carousel
        ref={(instance) => { this.carousel = instance; }}
      >
        {/* some element */}
      </Carousel>
      <button
        onClick={() => {
          // call prev
          this.carousel && this.carousel.prev();
        }}
      >
        prev
      </button>
      <button
        onClick={() => {
          // call next
          this.carousel && this.carousel.next();
        }}
      >
        next
      </button>
    </div>
  }
}
```

## Develop
```sh
npm start
```

## Test
```sh
npm test
```
npm package: @ryoframework/atlas
Description: RYO Atlas UI
Latest version: 0.8.11
Deprecated: this package has been deprecated

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

### Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

### Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

### Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

### Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
npm package: @ryomak/suno-api
Description: TypeScript module for Suno AI API
Author: ryomak
Latest version: 1.0.0

# Suno AI TypeScript Module

SunoAIを利用するためのTypeScriptモジュールです。

## インストール

```bash
npm install
```

## 使用方法

```typescript
import { SunoClient } from './src';

const client = new SunoClient({
  sessionId: 'your_session_id',
  cookie: 'your_cookie'
});

// 曲一覧を取得
const songs = await client.getSongs();

// いいねした曲の一覧を取得
const likedSongs = await client.getLikedSongs();

// 曲を作成
const newSong = await client.createSong({
  prompt: 'A happy song about sunshine',
  make_instrumental: false,
  wait_audio: true
});

// 曲にいいね
await client.likeSong('song_id');

// いいねを取り消し
await client.unlikeSong('song_id');
```

## API機能

- `getSongs()`: 曲一覧取得
- `getLikedSongs()`: いいねした曲の一覧取得  
- `createSong()`: 曲作成
- `likeSong()`: いいね処理
- `unlikeSong()`: いいね取り消し
- `getSongById()`: ID指定で曲取得

## 設定

SunoClientのコンストラクタには以下の設定が必要です：

- `sessionId`: SunoのセッションID
- `cookie`: Sunoのクッキー
- `baseUrl`: APIのベースURL（省略可、デフォルト: https://studio-api.suno.ai）# suno-api
npm package: @ryomasao/hello-ui-package
Description: React + Typescriptのパッケージ作成記録
Author: Ryomasao
Latest version: 0.0.6

# Dead Simple React UI Package with typescript

React + Typescriptのパッケージ作成記録

## React設定

```
yarn init -y
```

パッケージ名について。

- パッケージ名は@組織名 or アカウント名/パッケージ名 とすることscoped packageにできる。
- scoped packageであれば、他のパッケージと名前衝突の問題が回避できる。


<b>package.json</b>

```json
  "name": "@ryomasao/hello-ui-package"
```

scoped packageを公開する場合、明示的にpublicにしていいよっていう設定をする必要がある。

<b>package.json</b>

```json
  "publishConfig": {
    "access": "public"
  },
```

reactをつっこむ。peerDependenciesで。

```
yarn add -P react react-dom 
```

ts環境準備。

```
yarn add -D typescript @types/react @types/react-dom
```

```
yarn tsc --init
```

<b>tsconfig.json</b>

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "declaration": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": [
    "src/**/*"
  ]
}
```

サンプルコンポーネント準備。

```
mkdir -p src/components
touch src/components/Button.tsx
```

<b>Button.tsx</b>

```tsx
type Props = {
  color:string
}

const Button = (props:Props) => {
  return (
    <button style={{ color:props.color }}>from pure-react-package</button>
  )
}

export default Button
```
## バンドル設定

```
yarn add -D rollup rollup-plugin-peer-deps-external rollup-plugin-typescript2 @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser
```

<b>rollup.config.js</b>

```js
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import typescript from 'rollup-plugin-typescript2'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'

const PACKAGE_ROOT_PATH = process.cwd()

export default [
  {
    input: `${PACKAGE_ROOT_PATH}/src/index.ts`,
    output: [
      {
        file: 'dist/bundle.cjs.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/bundle.esm.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript(),
      terser(),
    ],
  },
]

```

ビルドスクリプト追加

<b>package.json</b>

```json
  "scripts": {
    "build": "rollup -c rollup.config.js"
  },
```

```
yarn build
```

`dist`配下に出力される。

```
> tree
.
├── bundle.cjs.js
├── bundle.cjs.js.map
├── bundle.esm.js
├── bundle.esm.js.map
├── components
│   └── Button.d.ts
└── index.d.ts
```

`files`に配布するファイルを記載。省略したら、`dist/bundle.cjs.js`のみ配布されてた。

<b>package.json</b>

```json
  "files": [
    "dist"
  ],
```

型定義の名前が`index.d.ts`で、配布するディレクトリのrootにある場合、以下はいらないんだけど、一応書いとく。


<b>package.json</b>

```json
  "typings": "dist/index.d.ts",
```


## Publish

- npmjsのアカウントを作成。
- npm login でログインして、publish。

```
npm login
yarn publish
```
npm package: @ryome/qr-generator
Description: テキストファイルの内容からQRコードを生成するCLIツール
Author: ryome
Latest version: 1.0.1

# QR Code Generator

## 概要
テキストファイルの内容をQRコードに変換し、PNG形式で出力するコマンドラインツールです。
カスタムカラーでQRコードを生成することもできます。

## インストール方法

### グローバルインストール（推奨）
```bash
npm install -g @ryome/qr-generator
```

これにより、`qr-generator` コマンドがグローバルで使用可能になります。

### ローカルインストール
```bash
npm install @ryome/qr-generator
```

この場合は、`npx qr-generator` として実行する必要があります。

## 使用方法

### 基本的な使用方法
```bash
qr-generator [オプション] [ファイルパス]
```

ファイルパスを指定しない場合は、デフォルトで `./qr-text.txt` が読み込まれます。

### オプション
```bash
Options:
  -s, --size <number>      QRコードのサイズ（ピクセル）(デフォルト: 256)
  -e, --error <L|M|Q|H>    エラー訂正レベル (デフォルト: M)
  -m, --margin <number>    マージン（セル単位）(デフォルト: 4)
  -o, --output <path>      出力ファイル名 (デフォルト: qr-output.png)
  -d, --dark <color>       QRコードの暗い部分の色 (デフォルト: #000000)
  -l, --light <color>      QRコードの明るい部分の色 (デフォルト: #ffffff)
  -h, --help              ヘルプを表示
```

### 使用例
```bash
# 基本的な使用方法（デフォルトのファイルを使用）
qr-generator

# 特定のファイルを指定
qr-generator path/to/input.txt

# サイズとエラー訂正レベルを指定
qr-generator -s 400 -e H input.txt

# 出力ファイル名を指定
qr-generator -o custom-qr.png input.txt

# QRコードの色を指定（赤色のQRコード）
qr-generator -d "#FF0000" -l "#FFFFFF" input.txt

# すべてのオプションを指定
qr-generator -s 400 -e H -m 2 -d "#000080" -l "#FFFFCC" -o custom-qr.png input.txt

# npxを使用する場合（ローカルインストール時）
npx qr-generator -s 400 input.txt
```

## 必要要件
- Node.js 14.0.0以上

## トラブルシューティング

### エラーコードと対処方法

#### E0001: FILE_NOT_FOUND
入力ファイルが見つからない場合に発生します。
```
Error [E0001]: Input file not found: ./input.txt
詳細: 指定されたパスにファイルが存在しません
```
**対処方法:**
- ファイルパスが正しいか確認
- ファイルが存在するか確認
- 相対パスの場合、実行時のカレントディレクトリを確認

#### E0002: FILE_READ_ERROR
ファイルの読み込みに失敗した場合に発生します。
```
Error [E0002]: Failed to read file: ./input.txt
詳細: ファイルの読み込み権限がないか、ファイルがロックされています
```
**対処方法:**
- ファイルの権限設定を確認
- ファイルが他のプロセスによってロックされていないか確認
- ファイルが破損していないか確認

#### E0003: INVALID_OPTION
不正なオプション値が指定された場合に発生します。
```
Error [E0003]: Invalid error correction level: X (must be L, M, Q, or H)
詳細: エラー訂正レベルは L, M, Q, H のいずれかを指定してください
```
**対処方法:**
- サイズは128-1024の範囲内の正の整数を指定
- エラー訂正レベルは L, M, Q, H のいずれかを指定
- マージンは0-10の範囲内の正の整数を指定

#### E0004: WRITE_ERROR
出力ファイルの書き込みに失敗した場合に発生します。
```
Error [E0004]: Failed to write output file: ./qr-output.png
詳細: 出力先のディレクトリに書き込み権限がないか、ディスク容量が不足しています
```
**対処方法:**
- 出力先ディレクトリの書き込み権限を確認
- ディスク容量が十分か確認
- 出力ファイルが他のプロセスによってロックされていないか確認

#### E0005: INVALID_COLOR
不正な色指定の場合に発生します。
```
Error [E0005]: Invalid color format: invalid-color (must be #RRGGBB format)
詳細: カラーコードは #RRGGBB 形式で指定してください（例: #FF0000）
```
**対処方法:**
- カラーコードは#で始まる6桁の16進数で指定
- 大文字小文字は区別しない（#ff0000も#FF0000も有効）
- 3桁の短縮形式は使用不可（#FFFは無効）

## ライセンス
MIT License - 詳細は[LICENSE](LICENSE)ファイルを参照してください。

## 作者
ryome

## バグ報告
バグを見つけた場合は、[GitHub Issues](https://github.com/ryomeblog/qr-generator/issues)に報告してください。
npm package: @ryoppippi/eslint-config
Description: [![npm version](https://img.shields.io/npm/v/@ryoppippi/eslint-config?color=yellow)](https://npmjs.com/package/@ryoppippi/eslint-config)
Author: ryoppippi
Latest version: 0.4.0

# @ryoppippi/eslint-config

[![npm version](https://img.shields.io/npm/v/@ryoppippi/eslint-config?color=yellow)](https://npmjs.com/package/@ryoppippi/eslint-config)

## Installation

```sh
pnpm i -D eslint @ryoppippi/eslint-config
```

## Usage

```ts
// eslint.config.js

import { ryoppippi } from '@ryoppippi/eslint-config';

export default ryoppippi({ /* options */ });
```

## Rules

You can inspect available rules [here](https://eslint-config.ryoppippi.com)

## License

[MIT](./LICENSE)
npm package: @ryoppippi/unocss-preset
Description: [![npm version](https://img.shields.io/npm/v/@ryoppippi/unocss-preset?color=yellow)](https://npmjs.com/package/@ryoppippi/unocss-preset) [![npm downloads](https://img.shields.io/npm/dm/@ryoppippi/unocss-preset?color=yellow)](https://npmjs.com/package/@ryo
Author: ryoppippi
Latest version: 2.0.1

# @ryoppippi/unocss-preset

[![npm version](https://img.shields.io/npm/v/@ryoppippi/unocss-preset?color=yellow)](https://npmjs.com/package/@ryoppippi/unocss-preset)
[![npm downloads](https://img.shields.io/npm/dm/@ryoppippi/unocss-preset?color=yellow)](https://npmjs.com/package/@ryoppippi/unocss-preset)

[@ryoppippi](https://ryoppippi.com/gh)'s opinionated [Unocss](https://unocss.com) preset.

## Usage

```shell
pnpm i -D @ryoppippi/unocss-preset unocss
```

```ts
import { presetRyoppippi } from '@ryoppippi/unocss-preset';
// uno.config.ts
import { defineConfig } from 'unocss';

export default defineConfig({
	presets: [
		// ...
		presetRyoppippi(),
	],
});
```

## Acknowledgements

- [unocss-preset-useful](https://github.com/unpreset/unocss-preset-useful) for inspiration
- [UnoCSS](https://unocss.com) for the amazing tool

## License

[MIT](./LICENSE)
npm package: @ryoppippi/vite-plugin-cloudflare-redirect
Description: Vite plugin for Cloudflare redirects
Author: ryoppippi
Latest version: 1.1.3

# vite-plugin-cloudflare-redirect

Vite plugin to handle Cloudflare's \_redirects file following https://developers.cloudflare.com/pages/platform/redirects/.

[![npm version](https://img.shields.io/npm/v/@ryoppippi/vite-plugin-cloudflare-redirect)](https://www.npmjs.com/package/@ryoppippi/vite-plugin-cloudflare-redirect)
[![npm downloads](https://img.shields.io/npm/dm/@ryoppippi/vite-plugin-cloudflare-redirect)](https://www.npmjs.com/package/@ryoppippi/vite-plugin-cloudflare-redirect)
[![install size](https://packagephobia.com/badge?p=@ryoppippi/vite-plugin-cloudflare-redirect)](https://packagephobia.com/result?p=@ryoppippi/vite-plugin-cloudflare-redirect)
[![license](https://img.shields.io/npm/l/@ryoppippi/vite-plugin-cloudflare-redirect)](https://github.com/ryoppippi/vite-plugin-cloudflare-redirect/blob/main/LICENSE)

[![JSR](https://jsr.io/badges/@ryoppippi/vite-plugin-cloudflare-redirect)](https://jsr.io/@ryoppippi/vite-plugin-cloudflare-redirect)
[![JSR](https://jsr.io/badges/@ryoppippi/vite-plugin-cloudflare-redirect/score)](https://jsr.io/@ryoppippi/vite-plugin-cloudflare-redirect)

## Usage

### parse mode
Parse a `_redirects` file at `/public` (or following the `publicDir` config) like this:

```ini
# /public/_redirects
/foo https://example.com 302
```

```js
// vite.config.js
import { defineConfig } from 'vite'
import { cloudflareRedirect } from '@ryoppippi/vite-plugin-cloudflare-redirect'

export default defineConfig({
    plugins: [
        cloudflareRedirect({
            mode: "parse",
            redirectsFilePath: './custom/_redirects' // optional. If not specified, this plugin parses the default public or static directory from vite config.
        })
    ]
})
```

By default if no options are passed, the plugin would try to load from `/public/_redirects` (from `publicDir` config). If the file isn't found, no redirects will happen. Pass the `redirectsFile` option to specify a custom path.

### generate mode

Generate a `_redirects` file to `/public` (or following the `publicDir` config) from the `entries` option.

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { cloudflareRedirect } from '@ryoppippi/vite-plugin-cloudflare-redirect'

export default defineConfig({
    plugins: [
        cloudflareRedirect({
            mode: "generate",
            redirectsFilePath: './public/_redirects', // optional
            entries: [
                { from: '/foo', to: 'https://example.com', status: 302 },
                // ...
            ]
        })
    ],
})
```


## License
MIT
npm package: @ryotah/noop
Description: Does nothing
Author: ryotah
Latest version: 1.0.0

# noop

## Installation

```sh
$ npm install @ryotah/noop
```

## Usage

```js
const noop = require('@ryotah/noop');
noop();
```

```js
import noop from '@ryotah/noop';
noop();
```

## License

This project is an MIT-licensed open source project. See [LICENSE](./LICENSE) for more information.
npm package: @ryotarofr/lexical-solid
Description: SolidJS port of @lexical/react - A powerful rich text editor framework
Latest version: 0.39.0

# @ryotarofr/lexical-solid

SolidJS port of `@lexical/react` - A powerful rich text editor framework for SolidJS.

This is a fork of [lexical-solid](https://github.com/mosheduminer/lexical-solid) by Moshe David Uminer, with updates and improvements.

## Installation

```bash
npm install @ryotarofr/lexical-solid
```

or using your preferred package manager:

```bash
pnpm add @ryotarofr/lexical-solid
yarn add @ryotarofr/lexical-solid
```

## Lexical Dependencies

Currently using lexical packages version `0.39.0`, ported from [@lexical/react](https://www.npmjs.com/package/@lexical/react) of the same version.

This package pins `lexical` and the `@lexical/*` packages to specific minor versions.

## Basic Usage

```tsx
import { LexicalComposer } from "@ryotarofr/lexical-solid/LexicalComposer";
import { RichTextPlugin } from "@ryotarofr/lexical-solid/LexicalRichTextPlugin";
import { ContentEditable } from "@ryotarofr/lexical-solid/LexicalContentEditable";
import { HistoryPlugin } from "@ryotarofr/lexical-solid/LexicalHistoryPlugin";
import { LexicalErrorBoundary } from "@ryotarofr/lexical-solid/LexicalErrorBoundary";

const initialConfig = {
  namespace: "MyEditor",
  theme: {},
  onError: (error: Error) => console.error(error),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
        errorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}
```

## Available Plugins

- `LexicalComposer` - Core composer component
- `RichTextPlugin` / `PlainTextPlugin` - Text editing plugins
- `HistoryPlugin` - Undo/redo support
- `LinkPlugin` - Link handling
- `ListPlugin` - Ordered/unordered lists
- `CheckListPlugin` - Checkbox lists
- `TablePlugin` - Table support
- `MarkdownShortcutPlugin` - Markdown shortcuts
- `AutoFocusPlugin` - Auto focus on mount
- `OnChangePlugin` - Editor state change listener
- And more...

## License

MIT License - See [LICENSE](./LICENSE) for details.

This project is based on [@lexical/react](https://github.com/facebook/lexical) by Meta Platforms, Inc. (MIT License).
npm package: @ryotarohada/prr
Description: Pull Request Reminder - CLI tool for tracking PRs awaiting your review
Author: ryotarohada
Latest version: 0.2.6

# prr

Pull Request Reminder - CLI tool for tracking GitHub PRs awaiting your review.

## Features

- Watch mode: continuously monitors PRs and sends macOS notifications
- View pending review PRs in your terminal
- Desktop notifications for new PRs (click to open PR in browser)
- Reminder notifications for pending PRs
- Simple configuration management

## Installation

```bash
npm install -g @ryotarohada/prr
```

## Setup

```bash
# Interactive setup
prr config
```

You'll need a GitHub Personal Access Token:

- Required scopes: `repo`, `read:user`
- [Create token here](https://github.com/settings/tokens)

## Configuration

Config file: `~/.config/prr/config.yml`

```yaml
token: ghp_xxxxx
repositories:
  - owner/repo
  - org/another-repo
interval: 5
showRepository: true
reminder: true
reminderInterval: 30
```

## Usage

```bash
# Start watch mode (default)
prr

# List PRs once
prr list

# Show current configuration
prr status
```

## Commands

| Command                      | Description           |
| ---------------------------- | --------------------- |
| `prr`                        | Start watch mode      |
| `prr watch`                  | Start watch mode      |
| `prr list`                   | List pending PRs once |
| `prr status`                 | Show current config   |
| `prr config`                 | Interactive setup     |
| `prr config set-token`       | Set GitHub token      |
| `prr config add-repo <repo>` | Add repository        |
| `prr config rm-repo <repo>`  | Remove repository     |
| `prr config repos`           | List repositories     |
| `prr config interval <min>`  | Set check interval    |
| `prr config show-repo <on\|off>` | Toggle repo name display |
| `prr config reminder <on\|off>` | Toggle reminder notifications |
| `prr config reminder-interval <min>` | Set reminder interval |
| `prr config clear`           | Clear configuration   |
| `prr --help`                 | Show help             |

## Development

```bash
# Run in development mode
pnpm dev

# Build
pnpm build
```

## Tech Stack

- TypeScript
- Octokit (GitHub API)
- YAML (configuration)

## License

MIT
npm package: @ryova/parallax_component
Description: vue-component decorator for parallax effect
Author: Alexey Revo
Latest version: 0.0.17

# Parallax Component

Simple use vue-component decorator / container for parallax effect.

![](https://s8.gifyu.com/images/2020-08-29_22-21-00.gif)

## Install & Registration

```sh
  npm i @ryova/parallax_component -s
```
---

Local registration:
```js
  import Parallax from '@ryova/parallax_component'
```
---

Dynamic import:

```js
components: {
  Parallax: () => import('@ryova/parallax_component')
}
```
---

## Usage & Props

```html
<div class="container">
  <parallax :Options="{ OpacityFade: true, OpacityFadeOffset: 150 }">
    <span class="item"><span>
  </parallax>
  //or
  <parallax :OpacityFade="true" :OpacityFadeOffset="150">
    <span class="item"><span>
  </parallax>
</div>
```
---

## Props values

| Prop | Default value | Type |
| - | - | - |
| Options| null | Object |
| Multiplier| 0.25 | Number |
| Direction | down | String |
| OpacityFade | false | Boolean |
| OpacityFadeOffset | 0 | Number |

---
## Options Prop

Options object is just a simple props object. For comfortable use.
```js
  const S = this.Options?.Multiplier ?? this.Multiplier
```
npm package: @ryoyamiyamoto/npm-publish-hello-world
Description: Minimal hello world package for npm publish example.
Latest version: 1.0.0

# npm-publish-example

最小構成の npm publish 用サンプルです。`npm-publish-example` のままだと npmjs に公開済みの名前と競合する可能性があるので、実際に publish する場合は `package.json` の `name` を固有のものに変更してください。

## 使い方
```js
const { hello } = require('npm-publish-example');

console.log(hello()); // => "Hello, world!"
console.log(hello('npm')); // => "Hello, npm!"
```

## publish 手順（例）
1. npmjs の Access Token を作成（自動化トークン推奨）。
2. CLI にトークンを設定:
   ```sh
   npm config set //registry.npmjs.org/:_authToken=YOUR_TOKEN
   # または npm login --auth-type=legacy
   ```
3. `package.json` の `name`, `version`, `author` を適宜更新。
4. 公開スコープの場合は `npm publish --access public` を実行（スコープなしは `npm publish` だけでOK）。

## テスト
特にテストはありませんが、`npm test` は常に成功する設定です。