open-index/open-npm huggingface dataset:
npm package: @mizmoz/react-forms
Description: React forms handler
Author: Mizmoz
Latest version: 0.5.5

# react-forms
ReactJS forms library for handling element creation, validation and history

This is in the very early stages of development so wouldn't recommend using unless you like the
pain of large, frequent changes to the API.

// Look at this implementation for the form handling
http://redux-form.com/6.1.0/examples/syncValidation/


### ColorPicker
```js
<ColorPicker
    value="#ffeeee"
    onChange={this.onChange}
    disableAlpha
/>
```

### Select

Select drop down
```js
<Select 
  name="food"
  onChange={onChange}
  options={options}
/>
```

Options 
```js
// Label only
const options = OrderedMap([
  ['Cheese'],
]);

// Label & value
const options = OrderedMap([
  ['Cheese', 'cheese'],
]);

// Groups
const options = OrderedMap([
  [
    'Dark Colours', OrderedMap([
      ['Black'],
      ['Navy Blue'],
    ]),
  ],
]);
npm package: @mizmoz/react-material-design-icons
Description: React Material Design Icons
Latest version: 2.0.1

# react-material-design-icons

A not totally insane way to use Google's Material Design icons in your React projects.

Unlike other projects this doesn't pull in every single icon into your bundle, just the ones you use.

Probably best to use Google to search for the icon you want and then use the name they give you. https://fonts.google.com/icons?icon.platform=web

```tsx
import Action3DRotationOutlineIcon from "@mizmoz/react-material-design-icons/action/abcOutlineIcon";

// all props are optional
const App = () => (
  <ActionAbcOutlineIcon
    size={96}
    color="red"
    className="my-custom-class"
    style={{ margin: '1rem' }}
  />
);
```
npm package: @mizu-mizu/abstract-inputs
Description: キーボードからのユーザー入力を管理する
Author: mizu-mizu
Latest version: 1.0.0

キーボード入力を一度バッファし、特定のフレーム処理時に正規化して解決します。
また、各キーの押下状態を記録し、任意のタイミングで確認したり、直近の入力履歴を確認します。

ゲームのように特定のメッセージループ内で入力を正規化して処理したい場合に活用できます。

## 使い方
(npm を利用する場合)
```cmd
npm install --save @mizu-mizu/abstract-inputs
```
```js
import { InputManager } from '@mizu-mizu/abstract-inputs'
const FPS = 1000 / 60
const inputManager = new InputManager()

document.addEventListener('DOMContentLoaded', () => {
  inputManager.mount(document.body)
  let frameCount = 0
  setInterval(() => {
    const keyState = inputManager.consume(frameCount++)
    console.log(keyState)
  }, FPS)
  window.addEventListener('blur', () => {
    inputManager.addResetInputs()
  })
})
```

InputManager を利用する上で大事なことは、 `mount()` で要素に紐づけることと、
一定終期で `consume()` を呼び出し続けることです。

これにより、InputManager インスタンスは入力イベントの監視を開始し、`consume()` 呼び出しのタイミングで
整理します。

## API ドキュメント

### InputManager#mount()
指定した要素にキーボードリスナを登録し、キーボード入力の受付を開始します。

```js
const inputManager = new InputManager()
inputManager.mount(document.getElementById('targetEl'))
```

### InputManager#unmount()
`#mount()` で監視を開始済みの対象要素に登録されたキーボードリスナを削除し、
キー入力受付を終了します。
```js
inputManager.unmount(document.getElementById('targetEl'))
```

### InputManager#consume()
呼び出し毎に、前回呼び出し（初回の場合は `mount()`）以降に蓄積された入力をその呼び出し時点の
フレーム内入力として整理します。

常にこのメソッドを一定間隔で呼び出すようにしてください。
```js
const inputManager = new InputManager()
inputManager.mount(document.getElementById('targetEl'))
setInterval(() => {
  const keyState = inputManager.consume(frameCount++)
}, 1)
```

### InputManager#reserve()
キー入力を指定フレーム番号で解決される入力として予約します。

キーを押し下げた入力を `type: 'down'` とし、キーを離す入力を `type: 'up'` として予約する必要があります。

```js
const inputManager = new InputManager()
inputManager.reserve(1000, [{
  type: 'down',
  code: 'KeyA',
}])
inputManager.reserve(1001, [{
  type: 'up',
  code: 'KeyA',
}])
```

### tokenize(), parseTokens()
指定されたフォーマットのコマンド文字列をトークン列に展開/トークン列からコマンドデータを作成します。

いずれの関数も、async iterable なオブジェクトを返します。

parseTokens() は、引数に配列と async iterable なオブジェクトのいずれも受け取ることができます。
```js
import { tokenize, parseTokens } from '@mizu-mizu/abstract-inputs'
const text = '1000:dKeyA 1001:uKeyA'
for await (const { frameCount, inputEvents } of parseTokens(tokenize(value))) {
  inputManager.reserve(frameCount, inputEvents)
}
```

### tokenizeSync()
この関数は、tokenize() の同期版です。コマンド文字列を引数に受け取り、トークンオブジェクトの配列を返します。

第二引数を省略した場合、与えられた入力は line:0, column:0 から始まるものとして処理されますが、
第二引数の指定によりこの値を変更することが出来ます。

```js
import { tokenizeSync } from '@mizu-mizu/abstract-inputs'
const text = '1000:dKeyA'
console.log(tokenizeSync(text, { lineNoFrom: 2, columnNoFrom: 3 }))
  // -> [
  //   { lineNo: 2, column: 3, text: '1000' },
  //   { lineNo: 2, column: 7, text: ':' },
  //   { lineNo: 2, column: 8, text: 'dKeyA' }
  // ]
```
npm package: @mizufinancial/emails
Description: Email templates and email sending utilities for Mizu Financial
Author: Mizu Financial
Latest version: 0.3.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Mizu Email

Mizu Email has all our email templates we needed. And will handle all email
sending features in the future.


## Installation

Install Mizu Email

```bash
pnpm i @mizufinancial/emails
```


## Usage

### Send email

```ts
import { MizuEmail } from '@mizufinancial/emails';

const emailClient = new MizuEmail(RESEND_API_KEY); 
await emailClient.send(
  'team:invitation',
  'user@example.com',
  {
    company: 'Acme Inc',
    link: 'https://example.com/invite/123',
    name: 'John Doe',
  },
);
```

### Render email HTML (for preview or testing)

```ts
import { MizuEmail } from '@mizufinancial/emails';

const emailClient = new MizuEmail(RESEND_API_KEY);
const html = await emailClient.render(
  'team:invitation',
  {
    company: 'Acme Inc',
    link: 'https://example.com/invite/123',
    name: 'John Doe',
  },
);
```


## Email Types

### Application Emails
- `application:bill:success` - Bill application approved
- `application:bill:failed` - Bill application rejected
- `application:received` - Application received confirmation
- `application:reimbursement:success` - Reimbursement application approved
- `application:reimbursement:failed` - Reimbursement application rejected

### Team Emails
- `team:invitation` - Team invitation email

### Transaction Emails
- `transaction:bill:received` - Bill received notification
- `transaction:bill:paid` - Bill payment confirmation
- `transaction:bill:paid-multiple` - Multiple bills payment confirmation
- `transaction:payment:received` - Payment received notification
- `transaction:payment:sent` - Payment sent confirmation
- `transaction:payroll:admin` - Payroll summary for admin
- `transaction:payroll:employee` - Payroll notification for employee
- `transaction:reimbursement` - Reimbursement request notification
- `transaction:reimbursement:paid` - Reimbursement payment confirmation

### Expense Emails
- `expense:rejected` - Expense report rejected

For detailed type definitions and options for each email type, check the exported TypeScript types or view [types.ts](./src/types.ts).


## Modify current email templates or more email templates

1. Clone this repo
2. Run `pnpm i` to install dependencies
3. Start dev server `pnpm dev`
4. Open `http://localhost:3000` to see the email templates
5. Modify the email templates in `emails`
6. Or add more email templates in `emails`
7. Make sure email templates works well
8. The email HTML is different from the preview, please follow [instructions](./INSTRUCTIONS.md)
9. Run `pnpm build` to build the package
10. Publish the package to npm
npm package: @mizuka-wu/web-digital-watermarking
Description: ## features
Author: mizuka.wu
Latest version: 1.0.0

# web-digital-watermarking

## features

* pure web app
* support typescript
* support wasm

## how to use

```bash
# Install
# npm i web-digital-watermarking

import { CHANNEL, load, status, encode as addWatermark, decode as getWatermark } from '@mizuka/web-digital-watermarking'

```

## use online

place visit to  [在线网址](https://www.mizuka.top/web-digital-watermarking/index.html)

## reference

very much thanks to

* [node-digital-watermarking](https://github.com/zy445566/node-digital-watermarking)

## About OpenCV

I will try to build own minimal opencv wasm by [doc](https://docs.opencv.org/4.x/d4/da1/tutorial_js_setup.html)

but now, just use opencv.js

## License

MIT

---

> [mizuka-wu](https://www.mizuka.top) &nbsp;&middot;&nbsp;