open-index/open-npm huggingface dataset:
npm package: @mooeypoo/cssjanus-webpack
Description: A webpack plugin wrapper for CSSJanus; a library that flips LTR/RTL directionalities in CSS.
Author: Moriel Schottlender
Latest version: 1.0.1

# cssjanus-webpack
A webpack plugin wrapper for CSSJanus library, flipping RTL/LTR direcitonality rules in CSS assets

The plugin takes all `.css` assets, runs [CSSJanus](https://github.com/cssjanus/cssjanus) on them and produces a pair asset `rtl.[originalname].css` that is flipped directionalities to RTL.

# Install

To use this in your project, install dependency:
```
npm install mooeypoo/cssjsnus-webpack --save-dev
```
In webpack config, require the plugin module
```
const CSSJanusWebpackPlugin = require( 'mooeypoo/cssjsnus-webpack' );
```
Add the plugin to webpack
```
	plugins: [
		new CSSJanusWebpackPlugin()
	]
```

Or if you're using Encore:

```
Encore
	.addPlugin( new CSSJanusWebpackPlugin() );
```

## Specifying entry points

You can also specify the specific entries you'd like to create RTL versions for, by passing them into the constructor:
```
Encore
	.addPlugin( new CSSJanusWebpackPlugin( [ 'app' ] ) );
```

# To use this in templates

In your templates, you can use the RTL stylesheet conditionally when attaching to the twig template.
For example, if you're using Intuition (or Wikimedia's ToolforgeBundle, which includes Intuition) you can utilize the is_rtl() method to attach an RTL css conditionally:

```
<link rel="stylesheet" type="text/css" href="{% if is_rtl() %}{{ asset('assets/rtl.app.css') }}{% else %}{{ asset('assets/app.css') }}{% endif %}" />
```


# Development

Please report any bugs or improvement requests in [the github issues](https://github.com/mooeypoo/cssjanus-webpack/issues).

Report any bugs or improvement requests to CSSJanus [directly in its repo](https://github.com/cssjanus/cssjanus/issues).
npm package: @moogieon/modalform
Description: ModalForm은 모달 형태의 폼을 관리하는데 도움을 주는 커스텀 훅입니다. 이를 사용하여 React 애플리케이션에서 간편하게 모달 폼을 구현할 수 있습니다.
Author: moogieon
Latest version: 1.0.4

# 개요
ModalForm은 모달 형태의 폼을 관리하는데 도움을 주는 커스텀 훅입니다. 이를 사용하여 React 애플리케이션에서 간편하게 모달 폼을 구현할 수 있습니다.


## 설치
먼저 npm 또는 yarn을 사용하여 ModalForm 패키지를 설치합니다.

```plaintext
npm install @moogieon/modal-form
```
## 또는
```plaintext
yarn add @moogieon/modal-form
```

### 사용법
ModalForm 불러오기
ModalForm을 React 컴포넌트에서 불러옵니다.

```plaintext
import ModalForm from "@moogieon/modal-form";
```

### 초기값 설정
ModalForm을 사용하기 위해 초기값을 설정합니다. initialValues 객체에는 모달 폼의 각 입력 필드의 초기값을 지정합니다.

```javascript
const initialValues = { id: "", name: "" };
```

onSubmit 함수 정의
폼이 제출될 때 실행될 함수를 정의합니다. 이 함수는 ModalForm으로부터 전달되는 값을 받아서 처리합니다.

```javascript
const handleSubmit = (values) => {
  // 폼 제출 처리 로직
  console.log("제출된 값:", values);
};
```

### validate 함수 정의
폼 입력값의 유효성을 검사하기 위한 validate 함수를 정의합니다. 이 함수는 폼 입력값을 받아서 유효성 검사를 수행하고, 유효하지 않은 경우 오류 객체를 반환합니다.

```javascript
const validate = (values) => {
  const errors = {};
  if (!values.id) {
    errors.id = "아이디를 입력하세요.";
  }
  if (!values.name) {
    errors.name = "이름을 입력하세요.";
  }
  return errors;
};
```

### ModalForm 사용
위에서 정의한 초기값, 제출 함수, 유효성 검사 함수를 ModalForm에 전달하여 사용합니다.

```javascript
const [isModal, setIsModal] = useState < boolean > (false);
const { values, errors, submitting, handleChange, handleSubmit } = ModalForm({
  initialValues: { name: "", id: "" },
  onSubmit: handleSubmit,
  validate: validate,
  errorModal: setIsModal,
});
```

### 폼 컴포넌트 작성
ModalForm으로부터 받은 값과 함수를 사용하여 폼 컴포넌트를 작성합니다.

```javascript
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="id" value={values.id} onChange={handleChange} />
    {errors.id && <span>{errors.id}</span>}
    <input
      type="text"
      name="name"
      value={values.name}
      onChange={handleChange}
    />
    {errors.name && <span>{errors.name}</span>}
    <button type="submit" disabled={submitting}>
      제출
    </button>
  </form>
);
```

이제 ModalForm을 사용하여 모달 폼을 구현할 수 있습니다. 각 폼 입력 필드의 값과 오류 상태, 제출 상태 등을 ModalForm으로부터 전달받아 사용하여 필요한 로직을 구현할 수 있습니다.

### Modal 사용법

```js
import Modal from "@moogieon/modal-form";

const MyComponent = () => {
  const [isModal, setIsModal] = useState < boolean > (false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <button onClick={handleOpenModal}>모달 열기</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <div>
          <h2>모달 내용</h2>
          <p>모달 내용을 여기에 추가하세요.</p>
          <button onClick={handleCloseModal}>닫기</button>
        </div>
      </Modal>
    </>
  );
};
```


#### ModalForm

- `initialValues`: 폼의 초기값을 설정합니다.
- `onSubmit`: 폼 제출 시 실행될 함수를 설정합니다.
- `validate`: 폼 유효성 검사를 수행할 함수를 설정합니다.
- `errorModal`: 모달을 열거나 닫을 때 사용할 함수를 설정합니다.

#### Modal

- `isOpen`: 모달의 열림/닫힘 상태를 설정합니다.
- `onClose`: 모달을 닫을 때 실행될 함수를 설정합니다.
npm package: @moogs/core
Description: Base query package
Author: doug-martin
Latest version: 0.22.3

<p align="center">
  <a href="https://doug-martin.github.io/nestjs-query" target="blank"><img src="https://doug-martin.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@moogs/core.svg)](https://www.npmjs.org/package/@moogs/core)
[![Test](https://github.com/doug-martin/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/doug-martin/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://coveralls.io/repos/github/doug-martin/nestjs-query/badge.svg?branch=master)](https://coveralls.io/github/doug-martin/nestjs-query?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/doug-martin/nestjs-query/badge.svg?targetFile=packages/core/package.json)](https://snyk.io/test/github/doug-martin/nestjs-query?targetFile=packages/core/package.json)

# `@moogs/core`

Core package that contains interfaces for types used by [`@moogs/query-graphql`](../query-graphql) and [`@moogs/query-typeorm`](../query-typeorm)

## Installation

[Install Guide](https://doug-martin.github.io/nestjs-query/docs/introduction/install)

## Docs

* [Nestjs-query Docs](https://doug-martin.github.io/nestjs-query/docs/introduction/getting-started)
npm package: @moogs/query-graphql
Description: Nestjs graphql query adapter
Author: doug-martin
Latest version: 0.22.3

<p align="center">
  <a href="https://doug-martin.github.io/nestjs-query" target="blank"><img src="https://doug-martin.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@moogs/query-graphql.svg)](https://www.npmjs.org/package/@moogs/query-graphql)
[![Test](https://github.com/doug-martin/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/doug-martin/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://coveralls.io/repos/github/doug-martin/nestjs-query/badge.svg?branch=master)](https://coveralls.io/github/doug-martin/nestjs-query?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/doug-martin/nestjs-query/badge.svg?targetFile=packages/query-graphql/package.json)](https://snyk.io/test/github/doug-martin/nestjs-query?targetFile=packages/query-graphql/package.json)

# `@moogs/query-graphql`

This package provides a code first implementation of graphql CRUD endpoints. It is built on top of of [nestjs](https://nestjs.com/). 

## Installation

[Install Guide](https://doug-martin.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@moogs/query-graphql` package checkout the [Getting Started](https://doug-martin.github.io/nestjs-query/docs/graphql/getting-started) docs.
npm package: @moogs/query-mongoose
Description: Mongoose adapter for @moogs/core -> added subdocument queries
Author: doug-martin
Latest version: 0.22.3

<p align="center">
  <a href="https://doug-martin.github.io/nestjs-query" target="blank"><img src="https://doug-martin.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@moogs/query-typeorm.svg)](https://www.npmjs.org/package/@moogs/query-typeorm)
[![Test](https://github.com/doug-martin/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/doug-martin/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://coveralls.io/repos/github/doug-martin/nestjs-query/badge.svg?branch=master)](https://coveralls.io/github/doug-martin/nestjs-query?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/doug-martin/nestjs-query/badge.svg?targetFile=packages/query-typeorm/package.json)](https://snyk.io/test/github/doug-martin/nestjs-query?targetFile=packages/query-typeorm/package.json)

# `@moogs/query-typeorm`

The `query-typeorm` package that provides an implementation of `@moogs/core` `QueryService`, built on top of of [nestjs](https://nestjs.com/) and [typeorm](https://typeorm.io/). 

## Installation

[Install Guide](https://doug-martin.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@moogs/query-typeorm` package checkout the [Getting Started](https://doug-martin.github.io/nestjs-query/docs/persistence/typeorm/getting-started) docs.
npm package: @moogs/query-sequelize
Description: Sequelize adapter for @moogs/core
Author: doug-martin
Latest version: 0.22.3

<p align="center">
  <a href="https://doug-martin.github.io/nestjs-query" target="blank"><img src="https://doug-martin.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@moogs/query-sequelize.svg)](https://www.npmjs.org/package/@moogs/query-sequelize)
[![Test](https://github.com/doug-martin/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/doug-martin/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://coveralls.io/repos/github/doug-martin/nestjs-query/badge.svg?branch=master)](https://coveralls.io/github/doug-martin/nestjs-query?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/doug-martin/nestjs-query/badge.svg?targetFile=packages/query-sequelize/package.json)](https://snyk.io/test/github/doug-martin/nestjs-query?targetFile=packages/query-sequelize/package.json)

# `@moogs/query-sequelize`

The `query-sequelize` package that provides an implementation of `@moogs/core` `QueryService`, built on top of of [nestjs](https://nestjs.com/) and [sequelize](https://sequelize.org/). 

## Installation

[Install Guide](https://doug-martin.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@moogs/query-sequelize` package checkout the [Getting Started](https://doug-martin.github.io/nestjs-query/docs/sequelize/getting-started) docs.
npm package: @moogs/query-typeorm
Description: Typeorm adapter for @moogs/core
Author: doug-martin
Latest version: 0.22.3

<p align="center">
  <a href="https://doug-martin.github.io/nestjs-query" target="blank"><img src="https://doug-martin.github.io/nestjs-query/img/logo.svg" width="120" alt="Nestjs-query Logo" /></a>
</p>

[![npm version](https://img.shields.io/npm/v/@moogs/query-typeorm.svg)](https://www.npmjs.org/package/@moogs/query-typeorm)
[![Test](https://github.com/doug-martin/nestjs-query/workflows/Test/badge.svg?branch=master)](https://github.com/doug-martin/nestjs-query/actions?query=workflow%3ATest+and+branch%3Amaster+)
[![Coverage Status](https://coveralls.io/repos/github/doug-martin/nestjs-query/badge.svg?branch=master)](https://coveralls.io/github/doug-martin/nestjs-query?branch=master)
[![Known Vulnerabilities](https://snyk.io/test/github/doug-martin/nestjs-query/badge.svg?targetFile=packages/query-typeorm/package.json)](https://snyk.io/test/github/doug-martin/nestjs-query?targetFile=packages/query-typeorm/package.json)

# `@moogs/query-typeorm`

The `query-typeorm` package that provides an implementation of `@moogs/core` `QueryService`, built on top of of [nestjs](https://nestjs.com/) and [typeorm](https://typeorm.io/). 

## Installation

[Install Guide](https://doug-martin.github.io/nestjs-query/docs/introduction/install)

## Getting Started

The get started with the `@moogs/query-typeorm` package checkout the [Getting Started](https://doug-martin.github.io/nestjs-query/docs/persistence/typeorm/getting-started) docs.
npm package: @moohng/dan
Description: js工具库
Author: Kevin
Latest version: 2.1.1

<h1 align="center">dan.js</h1>

<p align="center">
  <img alt="Node.js CI" src="https://github.com/moohng/dan/workflows/Node.js%20CI/badge.svg">
  <img alt="Node.js Package" src="https://github.com/moohng/dan/workflows/Node.js%20Package/badge.svg">
</p>

<p align="center">
  <!-- <img alt="Travis (.org)" src="https://img.shields.io/travis/moohng/dan"> -->
  <!-- <img alt="Codecov" src="https://img.shields.io/codecov/c/github/moohng/dan?token=123"> -->
  <img alt="npm" src="https://img.shields.io/npm/dw/@moohng/dan">
  <!-- <img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/moohng/dan"> -->
  <img alt="npm" src="https://img.shields.io/npm/v/@moohng/dan">
  <img alt="GitHub" src="https://img.shields.io/github/license/moohng/dan">
</p>

实用工具函数库，最新版已全面支持 typescript：

- ~~[acc](src/acc) 浮点数精确计算~~，推荐使用 [big.js](https://github.com/MikeMcl/big.js/)
- [validator](src/validator) 字段校验
- [copy](src/copy.ts) 复制文本
- [cut](src/cut.ts) 截取小数位数
- [decimalPadEnd](src/decimalPadEnd.ts) 小数末尾补0
- [es6tpl](src/es6tpl.ts) es6字符串模板
- [splitFormat](src/splitFormat.ts) 字符串分割
- [moneyFormat](src/moneyFormat.ts) 金额格式化（千分位逗号隔开）
- [random](src/random.ts) 生成随机数/字符串
- [round](src/round.ts) 近似小数位数
- [merge](src/merge.ts) 对象深合并
- [decode](src/decode.ts) URI解码
- [encode](src/encode.ts) URI编码
- [querystring](src/querystring.ts) 解析query字符串到对象
- [querystringify](src/querystringify.ts) query对象字符串化
- [dateFormat](src/dateFormat.ts) 日期格式化
- [timeFormat](src/timeFormat.ts) 时间戳转时分秒
- [unique](src/unique.ts) 数组去重
- [sleep](src/sleep.ts) 等待

## 安装

```bash
# npm
$ npm i -S @moohng/dan
# or yarn
$ yarn add @moohng/dan
```

## 使用

### ES Module

```js
// 全部引入
import * as dan from '@moohng/dan'
// 单个引入
import { validator } from '@moohng/dan'
import validator from '@moohng/dan/lib/validator'
```

### 浏览器

```html
<!-- 锁定版本号 -->
<script src=//cdn.jsdelivr.net/npm/@moohng/dan@1.3.18/dist/dan.min.js></script>
<!-- 使用最新版本 -->
<script src=//cdn.jsdelivr.net/npm/@moohng/dan/dist/dan.min.js></script>
```

## 开发

### 打包

```bash
# commonjs
$ yarn build
# browser
$ yarn build:dist
```

### 发布

~~该项目通过 `Travis` 自动编译和发布到 `npm` 平台~~

- ~~通过 `npm version patch` 增加版本号~~
- ~~`git push` 到 GitHub 仓库~~
- ~~通过 GitHub 的 release 发版，会触发 Travis 平台执行编译和测试指令，通过之后会自动 publish 到 npm 平台~~

项目使用 github workflows 自动编译检查和发布到 npm 平台
npm package: @moohng/dui
Description: 基于 Vue 3 的轻量级组件库
Author: Kevin
Latest version: 2.1.0

# dui

<p>
  <img alt="build" src="https://github.com/moohng/dui/workflows/build/badge.svg">
  <img alt="npm" src="https://github.com/moohng/dui/workflows/npm/badge.svg">
</p>


dui 是移动端轻量级 Vue 3 组件库，主要特性是可以**单个导入**常用的组件，减小包体积；尤其在简单的h5页面开发时，可以快速集成常用组件，减少重复劳动，提高生产力。

dui 以 css 样式布局为主，尽可能的让用户自由的组织dom结构。一般组件是很难做到通用性的，尤其是在样式上，而在保证功能完整性的同时又很难控制代码体积。dui 不是在重复造轮子，它的主要使用场景是**小项目、单纯的HTML页面**。

> ~~注意：dui 是基于 [postcss-px2vw](https://github.com/moohng/postcss-px2vw) 的移动端适配解决方案实现的，当然你也可以任意覆盖 dui 的样式。~~

## 导入

dui 包括一套样式布局方案和一套组件库，样式分为基础样式（dui.base）和组件样式，引入组件的时候，必须手动同时引入基础样式和对应的组件样式。

- css关系：dui.css = dui.base.css + (actionsheet.css + dialog.css + ...)
- js关系：dui.js = actionsheet.js + dialog.js + ...

### Script 导入



```html
<!-- 全部导入（不推荐） -->
<link type="stylesheet" href="//cdn.jsdelivr.net/npm/@moohng/dui/dist/dui.min.css" />
<script src="//cdn.jsdelivr.net/npm/@moohng/dui/dist/dui.min.js"></script>

<!-- 单个引用（`dui.base.min.css` 必须导入，它是页面的基础布局） -->
<!-- 必须导入 -->
<link type="stylesheet" href="//cdn.jsdelivr.net/npm/@moohng/dui/dist/dui.base.min.css" />
<link type="stylesheet" href="//cdn.jsdelivr.net/npm/@moohng/dui/dist/dialog.min.css" />
<script src="//cdn.jsdelivr.net/npm/@moohng/dui/dist/dialog.min.js"></script>
```

`dui.base.min.css` 是 dui 的最基本布局，其类名没有 `dui-` 前缀（参考 `Color UI` 命名方案），你可以不使用任何 Vue 组件，使用 dui 布局方案快速进行页面布局。

### ES Module 导入

```js
// 1. 全部导入
// main.js
import Vue from 'vue';
import Dui from '@moohng/dui';
// 样式
import '@moohng/dui/lib/dui/dui.css';

// 全局注册
Vue.use(Dui);

// 2. 单个导入
import Vue from 'vue';
// import { Dialog } from '@moohng/dui';
import Dialog from '@moohng/dui/lib/dialog';

import '@moohng/dui/lib/dui/dui.base.css';
import '@moohng/dui/lib/dialog/dialog.css';

Vue.use(Dialog);
```

## 使用

在模板中使用（可自由定义弹窗主题内容），如果是通过`script`标签导入，组件会自动注册，直接使用：

```html
<template>
  <div>
    <!-- content -->
    <dui-dialog ref="dialog">
      <!-- 自定义内容 -->
    </dui-dialog>
  </div>
</template>
```

api 快速使用（样式不能自由定义），组件注册时，自动注入 `$dialog` 方法

```html
<script>
export default {
  // ...
  methond: {
    onClick() {
      this.$dialog({
        title: '标题',
        content: '这里是内容',
        buttons: ['取消', '确定'],
      }, (index) => {
        console.log('你点击了', index)
      })
    }
  },
}
</script>
```

具体使用方法请参考该项目源码

## 样式组件

- [x] `Button`：按钮
- [x] ~~`NacBar`：顶部导航~~
- [x] `List`：列表
- [x] `Icon`：常用图标

## Vue组件

- [x] `this.$dialog(...)`：弹窗
- [x] `this.$actionsheet(...)`：底部弹出
- [x] `this.$loading(...)`：全屏loading
- [x] `this.$toast(...)`：轻提示
- [x] `this.$preview(...)`：图片预览

## 其他Vue插件

Vue 插件从 DUI 中独立了出来，需要单独引入再使用

- ~~`v-src`：懒加载~~
- `v-pulldown`：下拉刷新
- `v-pullup`：加载更多
npm package: @moohng/postcss-px2vw
Description: A CSS post-processor that converts px to vw and fallback rem.
Author: Kevin
Latest version: 1.2.0

<h1 align="center">postcss-px2vw</h1>

<p align="center">
  <img alt="npm" src="https://github.com/moohng/postcss-px2vw/actions/workflows/npmpublish.yml/badge.svg">
  <img alt="npm" src="https://img.shields.io/npm/dw/@moohng/postcss-px2vw">
  <img alt="npm" src="https://img.shields.io/npm/v/@moohng/postcss-px2vw">
  <img alt="GitHub" src="https://img.shields.io/github/license/moohng/postcss-px2vw">
</p>


一款 [PostCSS](https://github.com/ai/postcss) 插件，将 `px` 转换成 `vw` 和 `rem`。

该插件主要结合了 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 和 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 的功能，精简了不常用的配置。默认将 `vw` 作为优先单位使用，以 `rem` 作为回退模式。考虑到 `vw` 在移动设备的支持度不如 `rem`，这款插件很好的解决了该问题。

## 安装

```bash
$ npm i @moohng/postcss-px2vw -D
```

## 使用

```js
// .postcssrc.js
module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}
```

举例：

```scss
// input
.class {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}
// output
.class {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}
```

## 配置

- `viewportWidth`：对应设计图的宽度，用于计算 `vw`。默认 `750`，指定 `0` 或 `false` 时禁用
- `rootValue`：根字体大小，用于计算 `rem`。默认 `75`，指定 `0` 或 `false` 时禁用
- `unitPrecision`：计算结果的精度，默认 `5`
- `minPixelValue`：小于等于该值的 `px` 单位不作处理，默认 `1`

> 注意：该插件只会转换 `px` 单位。`rootValue` 一般建议设置成 `viewportWidth / 10` 的大小，将设计图分成10等分。由于浏览器有最小字体限制，如果设置得过小，页面可能跟预期不一致

如果要使用 `rem` 单位，需要自己通过 `js` 来动态计算根字体的大小。如果将设计图分成 10 等分计算，那么根字体的大小应该是 `window.innerWidth / 10`。

## 最后

如果你觉得对你有帮助，欢迎 star 和 issue
npm package: @moohng/tui
Description: tiny ui
Author: Kevin
Latest version: 1.2.1

# tui

<p>
  <img alt="build" src="https://github.com/moohng/tui/workflows/build/badge.svg">
  <img alt="npm" src="https://github.com/moohng/tui/workflows/npm/badge.svg">
</p>

tui 是移动端轻量级 ui 库，满足日常开发所需，主要包括了一套 css 布局和一些常用组件，不依赖于任何开发框架。

- 一套实用的 css 基本布局样式库；
- Dialog 弹窗组件；
- Toast 轻提示组件；
- Loading 加载中组件；
- Swiper 组件；
- Preview 图片预览组件；
- 更多功能敬请期待...
  
### Script 导入

```html
<!-- 样式导入 -->
<link type="stylesheet" href="//cdn.jsdelivr.net/npm/@moohng/tui/dist/tui.min.css" />
<!-- 基本布局样式 -->
<link type="stylesheet" href="//cdn.jsdelivr.net/npm/@moohng/tui/dist/base.min.css" />
<!-- js 文件导入 -->
<script src="//cdn.jsdelivr.net/npm/@moohng/tui/dist/tui.min.js"></script>
```

### ES Module 导入

```js
import { Dialog, Toast, Preview, Swiper } from '@moohng/tui';

// 引入组件样式文件
import '@moohng/tui/lib/style/index.css';
// 引入基本布局样式文件
import '@moohng/tui/lib/style/base.css';
// 或单独引入
import '@moohng/tui/lib/Dialog/style/index.css';
```
npm package: @moojing/dappeteer
Description: E2E testing for dApps using Puppeteer + MetaMask
Latest version: 5.3.1

# dAppeteer

E2E testing for dApps using Puppeteer + MetaMask

## Installation

```
$ npm install -s @chainsafe/dappeteer
```
or
```
$ yarn add @chainsafe/dappeteer
```

## Usage

```js
import dappeteer from '@chainsafe/dappeteer';

async function main() {
  const { metaMask, browser } = await dappeteer.bootstrap();

  // create a new page and visit your dapp
  const dappPage = await browser.newPage();
  await dappPage.goto('http://my-dapp.com');

  // you can change the network if you want
  await metaMask.switchNetwork('goerli');

  // do something in your dapp that prompts MetaMask to add a Token
  const addTokenButton = await dappPage.$('#add-token');
  await addTokenButton.click();
  // instruct MetaMask to accept this request
  await metaMask.acceptAddToken();

  // do something that prompts MetaMask to confirm a transaction
  const payButton = await dappPage.$('#pay-with-eth');
  await payButton.click();

  // 🏌
  await metaMask.confirmTransaction();
}

main();
```

## Usage with Snaps

```js
import dappeteer from '@chainsafe/dappeteer';
import { exec } from "child_process";

async function buildSnap(): Promise<string> {
  console.log(`Building my-snap...`);
  await new Promise((resolve, reject) => {
    exec(`cd ./my-snap && npx mm-snap build`, (error, stdout) => {
      if (error) {
        reject(error);
        return;
      }
      resolve(stdout);
    });
  });

  return "./my-snap";
}

async function main() {
  // build your local snap
  const builtSnapDir = await buildSnap()

  // setup dappateer and install your snap
  const { metaMask, snapId, browser } = await dappeteer.initSnapEnv({
    snapIdOrLocation: builtSnapDir,
  });

  // you need to have a webpage open to interact with MetaMask, you can also visit a dApp page
  const dappPage = await browser.newPage();
  await dappPage.goto('http://example.org/');

  // invoke a method from your snap that prompts users with approve/reject dialog
  await metaMask.snaps.invokeSnap(dappPage, snapId, "my-method")

  // instruct MetaMask to accept this request
  await metaMask.snaps.dialog.positive();

  // get the notification emitter and the promise that will receive the notifications
  const emitter = await metaMask.snaps.getNotificationEmitter();
  const notificationPromise = emitter.waitForNotification();

  // do something that prompts your snap to emit notifications
  await metaMask.snaps.invokeSnap(dappPage, snapId, "notify");

  // Make sure the notification promise has resolved
  await notificationPromise;

  // You can now read the snap notifications and run tests against them
  const notifications = await metaMask.snaps.getAllNotifications();
}

main();
```

- All methods can be found on [API page](docs/API.md)  
- Instructions to setup [dAppeteer with Jest](docs/JEST.md)  
- Mocha example can be found [inside test folder](./test)
npm package: @moojor224/railroad-diagrams
Description: A small JS+SVG library for drawing railroad syntax diagrams.
Author: Tab Atkins Jr.
Latest version: 1.1.1

## Railroad-diagram Generator
==========================

## Original Source code: [https://github.com/tabatkins/railroad-diagrams](https://github.com/tabatkins/railroad-diagrams)

<a href="https://github.com/moojor224/railroad-diagrams/blob/gh-pages/images/rr-title.svg"><img src="https://github.com/moojor224/railroad-diagrams/raw/gh-pages/images/rr-title.svg?sanitize=true" alt="Diagram(Stack('Generate', 'some'), OneOrMore(NonTerminal('railroad diagrams'), Comment('and more')))" title="Diagram(Stack('Generate', 'some'), OneOrMore(NonTerminal('railroad diagrams'), Comment('and more')))" width=10000></a>

This is a small library for generating railroad diagrams
(like what [JSON.org](http://json.org) uses)
using SVG.

Railroad diagrams are a way of visually representing a grammar
in a form that is more readable than using regular expressions or BNF.
They can easily represent any context-free grammar, and some more powerful grammars.
There are several railroad-diagram generators out there, but none of them had the visual appeal I wanted, so I wrote my own.

[Here's an online dingus for you to play with and get SVG code from!](https://tabatkins.github.io/railroad-diagrams/generator.html)

Versions
--------

This library is supported as a JS module.

* [JS-specific README](README-js.md)


Caveats
-------

SVG can't actually respond to the sizes of content; in particular, there's no way to make SVG adjust sizing/positioning based on the length of some text.  Instead, I guess at some font metrics, which mostly work as long as you're using a fairly standard monospace font.  This works pretty well, but long text inside of a construct might eventually overflow the construct.


License
-------

Standard MIT license; see [LICENSE](LICENSE).

Don't ask me for permission to use any part of this project, **just use it**.
I would appreciate attribution, but that is not required by the license.
If you're doing something cool with it, again I'd appreciate it if you let me know, but that's not required either.
npm package: @mookiejones/serato
Description: This doesnt work yet, but while am working it out, i am also learning other devops functions
Author: Charles Heath Berman
Latest version: 1.0.10

# Serato

# DONT USE THIS !!!
This doesnt work yet, but while am working it out, i am also learning other devops functions

A Typescript library designed to read Database, Song, and Crate info from Serato

## Summary

## Getting Started


## Api

### Crate

| Option | Type | Description |



{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |


term
: definition


### My Great Heading {#custom-id}

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.