open-index/open-npm huggingface dataset:
npm package: @readyio/design
Description: A flexible and scalable design system used for Ready
Author: Ready.io
Latest version: 1.0.29

# Ready Design System

[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://design.ready.io)

## ✨ Features

- 🌈 Enterprise-class UI designed for web applications.
- 📦 A set of high-quality React components out of the box.
- 🛡 Written in TypeScript with predictable static types.
- ⚙️ Whole package of design resources and development tools.
- 🌍 Internationalization support for dozens of languages.
- 🎨 Powerful theme customization in every detail.

## 📦 Install

```bash
npm install @readyio/design
```

```bash
yarn add @readyio/design
```

## 🔨 Usage

```jsx
import React from 'react';
import { Button, DatePicker } from 'ready-design';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);
```

### TypeScript

`ready-design` is written in TypeScript with complete definitions, check [Use in TypeScript](https://design.ready.io/docs/react/use-in-typescript) to get started.
npm package: @readymade/core
Description: JavaScript microlibrary for developing Web Components with TypeScript and Decorators
Author: Stephen Belovarich
Latest version: 3.1.4

# readymade

JavaScript microlibrary for developing Web Components with Decorators that uses only native spec to provide robust features.

- 🎰 Declare metadata for CSS and HTML ShadowDOM template
- ☕️ Single interface for 'autonomous custom elements' and 'customized built-in elements'
- 🏋️‍ Weighing in ~1.2Kb for 'Hello World' (gzipped)
- 🎤 Event Emitter pattern
- 1️⃣ One-way data binding
- 🖥 Server side renderable
- 🌲 Treeshakable

Chat with us on [Dischord](https://discord.gg/8GDKfv).

For more information, read the [Readymade documentation](https://readymade-ui.github.io).

### Getting Started

Install Readymade:

```
npm install @readymade/core
```

If you want to develop with customized built-in elements or Readymade's Repeater components:

```
npm install @readymade/dom
```

If you want to use the client-side router:

```
npm install @readymade/router
```

### Development

This repo includes a development server built with Parcel.

Fork and clone the repo. Install dependencies with yarn.

```
yarn install
```

To develop, run `yarn dev`. This will spin up a local Parcel development server at http://localhost:4444.

Available routes are specified in src/client/app/router.ts.

For unit and e2e tests, run `yarn build` then `yarn test`.

Use `yarn test:open` to open a GUI and run tests interactively.

### Production

To build the library for production, i.e. to use as a local dependency in another project run `yarn build:lib`.
npm package: @readymade/dom
Description: JavaScript microlibrary for developing Web Components with TypeScript and Decorators
Author: Stephen Belovarich
Latest version: 3.1.4

# @readymade/dom

Collection of readymade components that extend from native HTML elements.

```
npm install @readymade/dom
```

For more information, read the [Readymade documentation](https://readymade-ui.github.io).
npm package: @readymade/router
Description: JavaScript microlibrary for developing Web Components with TypeScript and Decorators
Author: Stephen Belovarich
Latest version: 3.1.4

# @readymade/router

Client side router compatible with Web Components and Readymade.

```
npm install @readymade/router
```

For more information, read the [Readymade documentation](https://readymade-ui.github.io).
npm package: @readymade/ui
Description: UI library of standard elements built with Readymade
Author: Stephen Belovarich
Latest version: 3.1.4

# @readymade/ui

UI library of standard elements built with Readymade.

```
npm install @readymade/ui
```

For more information, read the [Readymade documentation](https://readymade-ui.github.io).
npm package: @readyplayerme/visage
Description: Easily display Ready Player Me avatars and 3D on the web.
Author: Ready Player Me
Latest version: 6.16.0

# [Visage](https://readyplayerme.github.io/visage/) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/readyplayerme/visage/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@readyplayerme/visage)](https://www.npmjs.com/package/@readyplayerme/visage)
Visage is a collection of components for showcasing Ready Player Me avatars and 3D on the web!

Built with [`three.js`](https://github.com/mrdoob/three.js), [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber), [`drei`](https://github.com/pmndrs/drei), [`three-stdlib`](https://github.com/pmndrs/three-stdlib) and [`react`](https://github.com/facebook/react/).

# Installation

Visage is available as an [npm package](https://www.npmjs.com/package/@readyplayerme/visage).
```sh
npm install @readyplayerme/visage
```

# Documentation & examples

You can find all **code examples** of the components and their **documentation** on [our GitHub page](https://readyplayerme.github.io/visage/).

Here is the first one to get you started:
```typescript jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@readyplayerme/visage';

const modelSrc = 'https://readyplayerme.github.io/visage/male.glb';

function App() {
  return (
    <Avatar modelSrc={modelSrc} />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

### Validation
Props such as `modelSrc`, `animationSrc`, `poseSrc` and `onLoadedAnimation.src` are **validated** before rendering on the scene.
Animation source props support both `.glb` and `.fbx` formats. All other props mentioned before only support `.glb`.

Examples on supported resource formats:
* URL resources
  * relative `/headwear.glb`
  * absolute `https://readyplayerme.github.io/visage/male.glb?queryParams=allowed`
* Base64 strings
  * `data:application/octet-stream;base64`
  * `data:model/gltf-binary;base64`
* Binary input such as `model/gltf-binary`

## License

Visage is [MIT licensed](./LICENSE).
npm package: @readyplayerme/web-3d-viewer
Description: Easily display Player_Zero avatars and 3D on the web.
Author: Player_Zero
Latest version: 1.1.7

# [web-3d-viewer](https://readyplayerme.github.io/web-3d-viewer/) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/readyplayerme/web-3d-viewer/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@readyplayerme/web-3d-viewer)](https://www.npmjs.com/package/@readyplayerme/web-3d-viewer)
web-3d-viewer is a collection of components for showcasing Ready Player Me avatars and 3D on the web!

Built with [`three.js`](https://github.com/mrdoob/three.js), [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber), [`drei`](https://github.com/pmndrs/drei), [`three-stdlib`](https://github.com/pmndrs/three-stdlib) and [`react`](https://github.com/facebook/react/).

# Installation

web-3d-viewer is available as an [npm package](https://www.npmjs.com/package/@readyplayerme/web-3d-viewer).
```sh
npm install @readyplayerme/web-3d-viewer
```

# Documentation & examples

You can find all **code examples** of the components and their **documentation** on [our GitHub page](https://readyplayerme.github.io/web-3d-viewer/).

Here is the first one to get you started:
```typescript jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@readyplayerme/web-3d-viewer';

const modelSrc = 'https://readyplayerme.github.io/web-3d-viewer/male.glb';

function App() {
  return (
    <Avatar modelSrc={modelSrc} />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

### Validation
Props such as `modelSrc`, `animationSrc`, `poseSrc` and `onLoadedAnimation.src` are **validated** before rendering on the scene.
Animation source props support both `.glb` and `.fbx` formats. All other props mentioned before only support `.glb`.

Examples on supported resource formats:
* URL resources
  * relative `/headwear.glb`
  * absolute `https://readyplayerme.github.io/web-3d-viewer/male.glb?queryParams=allowed`
* Base64 strings
  * `data:application/octet-stream;base64`
  * `data:model/gltf-binary;base64`
* Binary input such as `model/gltf-binary`

## License

web-3d-viewer is [MIT licensed](./LICENSE).
npm package: @readystore/core
Description: ReadyStore Core helps you build Stores based on pure Angular Signals or pure RxJs. A Store can work independently or be dependency-aware, relying on other Stores or facades if needed. It enables you to design clean data architectures on the UI layer, whic
Author: Andrii Svorak
Latest version: 0.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @readystore/core

**ReadyStore Core** — dependency-aware state на базі Angular Signals:
обчислює значення лише тоді, коли всі потрібні дані **готові** (ready).
Якщо даних бракує — обчислення не виконується.

- ✅ Signals-first API
- ✅ Dependency tracking
- ✅ Guarded / lazy evaluation (no compute until ready)
- ✅ TypeScript typings

## Install
```bash
npm i @readystore/core
npm package: @readytogo/module
Description: Create module package
Author: Yash Patel
Latest version: 1.0.0

# readytogo-module
Create module package

## Usage

```sh
npx @readytogo/module
```

## Note
The command creates a template for the module package in the current working directory. Any existing files will stay the same. To ensure the command creates the full template, run it in an empty directory.
npm package: @readytogo/npx
Description: Create npx package
Author: Yash Patel
Latest version: 1.0.1

# readytogo-npx
Create npx package

## Usage

```sh
npx @readytogo/npx
```

## Note
The command creates a template for the npx package in the current working directory. Any existing files will stay the same. To ensure the command creates the full template, run it in an empty directory.
npm package: @reaf-toolkit/changelog
Description: reaf changelog tools
Author: sunshine
Latest version: 0.0.17

# @reaf-toolkit/changelog

> reaf项目生成changelog

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/changelog
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/changelog
```

## Usage

todo
npm package: @reaf-toolkit/cli
Description: reaf cammand
Author: sunshine
Latest version: 0.0.44

# @reaf-toolkit/cli

> reaf cli工具

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/cli
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/cli
```

## Usage

todo


## todos

- new
- create 创建标准reaf项目
- doc 整个组件库运行
- parser 解析react组件
- locale 翻译 */
- docz生成doc文档
npm package: @reaf-toolkit/cmd
Description: some CMD useful tools
Author: sunshine
Latest version: 0.0.17

# @reaf-toolkit/cmd

> nodejs cmd命令常用函数

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/cmd
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/cmd
```

## Usage

todo
npm package: @reaf-toolkit/code-view
Description: > code view
Author: sunshine
Latest version: 0.0.15

# @reaf-toolkit/code-view

> code view

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/code-view
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/code-view
```

## Usage

```jsx
import CodeView from '@reaf-toolkit/code-view'
import '@reaf-toolkit/code-view/dist/index.css'

const App = () => {
  return (
    <div className="container">
      <CodeView
        showCode
        theme="dark"
        dependencies={{
          Button,
        }}
        source={require('./article.md')}
      />
    </div>
  )
}

export default App
```
npm package: @reaf-toolkit/eventemiter
Description: > 事件发布订阅，类似eventbus
Author: sunshine
Latest version: 0.0.2

# @reaf-toolkit/eventemiter

> 事件发布订阅，类似eventbus

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/eventemiter
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/eventemiter
```

## Usage

```ts
import eventemiter from '@reaf-toolkit/eventemiter'

eventemiter.on('a',() => {
  console.log('a');
}).emit('a').emit('a');

eventemiter.once('a',() => {
  console.log('a');
}).emit('a').emit('a');
```
npm package: @reaf-toolkit/hooks
Description: > 一些常用的工具库
Author: sunshine
Latest version: 0.0.5

# @reaf-toolkit/hooks

> 一些常用的工具库

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/hooks
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/hooks
```

## Usage

todo
npm package: @reaf-toolkit/i18n
Description: reaf i18n tools
Author: sunshine
Latest version: 0.0.13

# @reaf-toolkit/i18n

> reaf自动翻译

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/i18n
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/i18n
```

## Usage

todo
npm package: @reaf-toolkit/md-loader
Description: > webpack markdown loader
Author: sunshine
Latest version: 0.0.6

# @reaf-toolkit/md-loader

> webpack markdown loader

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/md-loader
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/md-loader
```

## Usage

```js
module: {
  rules: [
    ...
    {
      test: /\.md$/,
      use: [
        'html-loader',
        '@reaf-toolkit/md-loader'
      ]
    }
  ]
}
```
npm package: @reaf-toolkit/new
Description: > 一些常用的工具库
Author: sunshine
Latest version: 0.0.18

# @reaf-toolkit/new

> 一些常用的工具库

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/new
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/new
```

## Usage

todo
npm package: @reaf-toolkit/object-differ
Description: > 对象differ
Author: sunshine
Latest version: 0.0.5

# @reaf-toolkit/object-differ

> 对象differ

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/object-differ
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/object-differ
```

## Usage

todo
npm package: @reaf-toolkit/react-markdown-loader
Description: > 一些常用的工具库
Author: sunshine
Latest version: 0.0.12

# @reaf-toolkit/react-markdown-loader

> 一些常用的工具库

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/react-markdown-loader
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/react-markdown-loader
```

## Usage

todo
npm package: @reaf-toolkit/sdk
Description: > reaf项目的sdk
Author: sunshine
Latest version: 0.0.15

# @reaf-toolkit/sdk

> reaf项目的sdk

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/sdk
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/sdk
```

## Usage

todo
npm package: @reaf-toolkit/serve
Description: > 一些常用的工具库
Author: sunshine
Latest version: 0.0.39

# @reaf-toolkit/serve

> 一些常用的工具库

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/serve
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/serve
```

## Usage

todo
npm package: @reaf-toolkit/types
Description: > reaf component types package
Author: sunshine
Latest version: 0.0.11

# @reaf-toolkit/types

> reaf component types package

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/types
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/types
```

## Usage

import { Widget } from '@reaf-toolkit/types'
npm package: @reaf-toolkit/utils
Description: reaf useful utils
Author: sunshine
Latest version: 0.0.11

# @reaf-toolkit/utils

> reaf项目一些常见的工具函数

# Installation

## Using npm:

```zsh
$ npm i -g npm
$ npm i --save @reaf-toolkit/utils
```

## Using yarn:

```zsh
$ yarn add @reaf-toolkit/utils
```

## Usage

todo
npm package: @reagent/jira
Description: Manage Jira tickets from the commandline
Latest version: 0.3.0

# Jira Commandline Helper

This is just a little CLI tool to help manage my Jira workflow while avoiding
the UI as much as possible.

## Installation

```
yarn global add @reagent/jira
```

## Usage

Before you can interact with the API, you'll need to create an API token from
your [token management page][]. Once you have a token, you can initialize your
local configuration:

```
jira init
```

Enter details about your Jira instance (including yoru access stoken) at the
prompt and these will be written to the global configuration file
(`~/.config/jira/config.json`). You can now try out some commands to test your
credentials:

```
# See all tickets assigned to you
jira tickets --all

# See tickets that you're watching
jira tickets:watching
```

To see only active tickets, configure what you consider "active" statuses:

```
jira statuses:add "In Progress"
jira statuses:add "Accepted"
```

Now your list of tickets will be filtered on these active statuses by default:

```
jira tickets
```

For additional commands, see `jira --help`.

[token management page]: https://id.atlassian.com/manage-profile/security/api-tokens
npm package: @reagent/logging
Description: Standardized application logging with winston
Author: Patrick Reagan
Latest version: 0.1.0

# Logging

A [winston][]-based logger with standardized JSON and plaintext formatting.

## Installation

Install from NPM:

```
$ yarn add @reagent/logging
```

## Usage

The logger supports all the common [syslog levels][]. To create your logger use
the `createLogger()` helper function and make sure you emit to either `stdout`
or a `filePath` (or both):

```typescript
import path from 'path';
import { createLogger } from '@reagent/logger';

const stdoutLogger = createLogger({ stdout: true });
stdoutLogger.info('Message to stdout'); // Will emit a message at `info` level to your console

const fileLogger = createLogger({
  filePath: path.resolve(__dirname, 'log', 'messages.log'),
});
fileLogger.info('Message to file'); // Will emit a message at `info` level to the target file
```

The logger is configured to emit logs at `'info'` level, but this can be
modified as needed:

```typescript
const { NODE_ENV } = process.env;

const logger = createLogger({
  stdout: true,
  level: NODE_ENV === 'production' ? 'warning' : 'info',
});

logger.info('Informational message'); // Not emitted in 'production'
logger.warning('Warning message');
```

By default, logs are formatted as plaintext, but you can format as `json` as well:

```typescript
const plainLogger = createLogger({ stdout: true });
plainLogger.info('Message in Plain');
// [2023-02-11T17:12:06.459Z] (info): Message in Plain

const jsonLogger = createLogger({ stdout: true, format: 'json' });
jsonLogger.info('Message in JSON');
// {"level":"info","message":"Message in JSON","timestamp":"2023-02-11T17:12:06.461Z"}
```

You can also provide a source and any additional information to the log
messages. The use of generics supports constraints and type inference for the
`source` attribute:

```typescript
const logger = createLogger<'app' | 'db'>({ stdout: true });
logger.info('Message from application', { source: 'app' });
// [2023-02-11T17:15:37.260Z] (info): Message from application source=app

logger.info('Message from database', { source: 'db' });
// [2023-02-11T17:16:33.715Z] (info): Message from database source=db

logger.info('Message from application with extra', {
  source: 'app',
  request: { path: '/user' },
});
// [2023-02-11T17:15:37.262Z] (info): Message from application with extra source=app request={"path":"/user"}
```

As in previous examples, emitting the logs as `json` is also possible.

[winston]: https://github.com/winstonjs/winston
[token]: https://github.com/settings/tokens
[syslog levels]: https://en.wikipedia.org/wiki/Syslog#Severity_level
npm package: @reagent/migrator
Description: Simple PostgreSQL migrator using Slonik
Author: Patrick Reagan
Latest version: 0.2.0

# Slonik Migrator

Run sequential migration files against a PostgreSQL database.

## Installation

Install from NPM:

```
$ yarn add @reagent/migrator
```

## Usage

Migration files need to start with 3 digits and end with a `.sql` suffix:

```
001_create_users.sql
```

Place your migrations in a directory and then build a runner that executes them:

```typescript
//
// src/db/migrator.ts
//
import path from 'path';
import { createPool } from 'slonik';
import { Migrator } from '@reagent/migrator';

const { DATABASE_URL } = process.env;

(async () => {
  const migrationsPath = path.resolve(__dirname, 'migrations');
  const pool = await createPool(DATABASE_URL);

  const migrator = new Migrator({ migrationsPath, pool });
  await migrator.migrate();
})();
```

You can run them with `ts-node` or tie them into your build process:

```
$ yarn ts-node src/db/migrator.ts
```

The migrator also supports logging with [`@reagent/logging`][@reagent/logging]
or a compatible logging interface:

```typescript
import { createLogger } from '@reagent/logging';

(async () => {
  // ...
  const logger = createLogger({ stdout: true });

  const migrator = new Migrator({ migrationsPath, pool, logger });
  await migrator.migrate();
})();
```

[@reagent/logging]: https://github.com/reagent/logging