open-index/open-npm huggingface dataset:
npm package: @iit/precision-ui
Description: Yet another React Component Library
Author: wowxoxo
Latest version: 0.11.2

# Precision UI

Just a repo with React UI components.

[![](https://img.shields.io/npm/v/@iit/precision-ui.svg)](https://www.npmjs.com/package/@iit/precision-ui) [![Generic badge](https://img.shields.io/badge/version-0.1.0-<COLOR>.svg)](https://github.com/wowxoxo/precision-ui)

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
npm package: @iit/vue-sequential-entrance-transpiled
Description: Forked transpiled version of vuejs plugin for creating sequential animation entrances of a group of elements
Author: wowxoxo @wowxoxo
Latest version: 1.2.1

# vue-sequential-entrance (transpiled version)
## Attention!
This is forked project. Original is [here](https://github.com/wowxoxo/vue-sequential-entrance) by [Alvarez Garcia](https://github.com/deivthings). I made this version cause original isn't working correctly in IE11 for me when i build it with Vue CLI.

## Repository description from original project:
Vuejs Plugin for creating epic sequential animation entrances with a list of elements.
Zero effort.
Really lightweight

![](demo.gif)

[Basic demo - codesandbox](https://codesandbox.io/s/r4yov1w80n)

## Installation
In order to use into your vue project
```
npm install vue-sequential-entrance
```

## How to use ( Global Usage )
Add to your main.js file
```javascript
import SequentialEntrance from 'vue-sequential-entrance'
import 'vue-sequential-entrance/vue-sequential-entrance.css'
Vue.use(SequentialEntrance);
```

And now, in your component file, wrap a list of elements with sequential-entrance tag
```html
<template>
  <sequential-entrance>
    <div class="box" v-for="app in apps" :key="app">{{ app }}</div>
  </sequential-entrance>
</template>
```

Sequential Entrance comes with four 'flavors': animation entrance from Top, from right, from left and from bottom. By default, it uses from right, but you can select what you want this way:
```html
  <sequential-entrance fromTop> [...] </sequential-entrance>

  <sequential-entrance fromRight> [...] </sequential-entrance>

  <sequential-entrance fromBottom> [...] </sequential-entrance>

  <sequential-entrance fromLeft> [...] </sequential-entrance>
```


## Customize with the following Props

### delay
By default, the sequence animation have an interval of 250 milliseconds. If you need a faster or slower entrance animation, you can specify the time in milliseconds.
```html
  <sequential-entrance delay="1000"> [...] </sequential-entrance>
```

### animation
If you prefer don't use the built in animations (fromTop,fromRight,fromLeft,fromBottom) and use your custom css animation, you can easily using 'animation' props. Simply, put the class name of your animation and that's it.
```html
  <sequential-entrance animation="myCustomAnimationClassName"> [...] </sequential-entrance>
```

Even you can use css animation libraries like animate.css ( https://daneden.github.io/animate.css/ ). Import the entire css library or only the ones that you are going to use and type the class name in animation prop.

```html
  <sequential-entrance animation="bounceIn"> [...] </sequential-entrance>
```

### tag
By default, sequential-entrance render a 'span' tag wrapping its children, but you can customize the wrapper tag through 'tag' prop
```html
  <sequential-entrance tag="section"> [...] </sequential-entrance>
```
npm package: @iitxicz/gamecord-rrc
Description: Discord Gamecord is a powerful npm package with a collection of minigames for your discord bot
Author: jackasu
Latest version: 1.0.1

# **GAMECORD**

<p align="center">
  <img src="https://cdn.discordapp.com/attachments/818900078077018162/1042159279597166682/banner.png" alt="gamecord" />
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/discord-gamecord">
    <img src="https://img.shields.io/npm/dt/discord-gamecord?style=for-the-badge" alt="npm" />
  </a>

  <a href="https://discord.gg/invite/GaczkwfgV9">
    <img src="https://img.shields.io/discord/800631529351938089?color=5865F2&label=Aniket&style=for-the-badge" alt="Discord Server" />
  </a>
</p>

> **Discord Gamecord is a powerful npm package with a collection of minigames for your discord bot :)**


## **⚙️ Installation** 
**For discord.js v13 use `npm i discord-gamecord@v3-lts`**
```
npm i discord-gamecord@latest
```


## **✨ Features**

- Easy to use.
- Beginner friendly.
- Slash Commands Games.
- Supports Discord.js v13 & v14.


## **📚 Usage**
```js
const { Snake } = require('discord-gamecord');

const Game = new Snake({
  message: message,
  isSlashGame: false,
  embed: {
    title: 'Snake Game',
    overTitle: 'Game Over',
    color: '#5865F2'
  },
  emojis: {
    board: '⬛',
    food: '🍎',
    up: '⬆️', 
    down: '⬇️',
    left: '⬅️',
    right: '➡️',
  },
  stopButton: 'Stop',
  timeoutTime: 60000,
  snake: { head: '🟢', body: '🟩', tail: '🟢', over: '💀' },
  foods: ['🍎', '🍇', '🍊', '🫐', '🥕', '🥝', '🌽'],
  playerOnlyMessage: 'Only {player} can use these buttons.'
});

Game.startGame();
Game.on('gameOver', result => {
  console.log(result);  // =>  { result... }
});
```


## **📷 Preview**
<img src="https://cdn.discordapp.com/attachments/818900078077018162/1042159356780757072/Preview.png">

## **❔ Support**
<a href="https://discord.gg/invite/GaczkwfgV9"><img src="https://invidget.switchblade.xyz/GaczkwfgV9" alt="Discord"></a>
npm package: @iivu/up
Description: up is a command-line tool, which can upload your files to sftp with simple commands.
Author: Leo Cheung
Latest version: 1.0.0-beta.4

# up
`up` is a command-line tool, which can upload your files to sftp with simple commands.

# Usage

## Install
```bash
npm install -g up
```
use `yarn`/`pnpm` whatever you like.

## Setup configuration file
`up` will read configuration file from `up.config.json` in your working directory.<br> 
You can use `up --init` to create a configuration file.<br>
Below is a complete example of `up.config.json`:
```json
{
  "host": "your-sftp-host",
  "port": 22,
  "username": "your-username",
  "password": "your-password",
  "remotePath": "/your/remote/path",
  "localPath": "/your/local/path",
  "exclude": []
}
```

## Configuration fields
- `host`(required): the sftp host
- `port`: the sftp port, default is `22`
- `username`(required): the sftp username
- `password`(required): the sftp password
- `remotePath`(required): the remote dir path you want to upload to, should be an absolute path.
- `localPath`(required): the local file path you want to upload, can be relative or absolute, finally this path will be resolved to an absolute path
- `exclude`: the files you want to exclude, should be an array of string, the string should be a glob pattern, like `['**/*.log', 'node_modules']`
<br>

**if `localPath` is a directory, `up` will upload all files in the directory, for example:**
<br>
**`/your/local/path` is a directory, and it contains files like: `/your/local/path/example.txt`, `remotePath` is `/var/www/project`, when upload finished, the remote file url will be `/var/www/project/example.txt`**
<br>

**if `localPath` is a file, `up` will directly upload the file to the `remotePath`, for example**
<br>
**`/your/local/example.txt` is a file, `remotePath` is `/var/www/project`, when upload finished, the remote file url will be `/var/www/project/example.txt`**

## Commands and options
- `up`: upload files to sftp, use the working directory's `up.config.json` as configuration file.
  - `-h, --help`: output usage information
  - `-v, --version`: output the version number
  - `-i, --init`: create a template of configuration file in the working directory

## License
MIT
npm package: @iizotikov/editor-js-tg-spoiler
Description: Inline tool for adding spoilers to text fragments, supporting export to telegram
Author: Igor Izotikov
Latest version: 1.0.6

![npm](https://img.shields.io/badge/npm-v1.0.1-blue?style=plastic)

# editor-js-tg-spoiler

Inline tool for adding spoilers to text fragments for [Editor.js](https://github.com/codex-team/editor.js), 
supporting export to telegram.

# Installation

## Install via NPM
Get the package

```bash
npm install --save @iizotikov/editor-js-tg-spoiler

// or Yarn

yarn add @iizotikov/editor-js-tg-spoiler
```

## Include module in your application 

```ts
import Spoiler from '@iizotikov/editor-js-tg-spoiler';
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```ts
import EditorJs from '@editorjs/editorjs';
import Spoiler from '@iizotikov/editor-js-tg-spoiler';

const editor = new EditorJS({
  // ...
  tools: {
    // ...
    spoiler: Spoiler
  },
});
```

Right now it highlights spoilered text with black background (at Telegram it's looks like default Telegram spoiler). 

If you want to add custom background, just override class `.tg-spoiler` anywhere in your code with `!important` keyword for `background-color`.

I recommend to add spoiler the same color as your text, to create an illusion of hiding.

For example:
```css
/*index.css*/

.tg-spoiler {
  background-color: white !important;
}
```

![image](https://github.com/user-attachments/assets/db6b1888-10d6-4a0f-a6c0-96b066759998)

![image](https://github.com/user-attachments/assets/dce855c2-bacc-4fd3-bcfb-68d8305a6373)


## Output data

Final output looks like this:

```json
{
    "type" : "paragraph",
    "data" : {
        "text" : "<span class=\"tg-spoiler\">Hidden text</span>"
    }
}
```

Also supports spoiler of `bold`, `italic`, `underline` and `strikethrough` texts.

At Telegram it's looks like default Telegram spoiler.
npm package: @iizukak/codemirror-lang-wgsl
Description: WGSL language support for CodeMirror
Author: Kentaro Iizuka
Latest version: 0.3.0

# CodeMirror 6 WGSL language package

![](https://github.com/iizukak/codemirror-lang-wgsl/actions/workflows/test.yaml/badge.svg)

This is a WGSL ([WebGPU Shading Language](https://www.w3.org/TR/WGSL/))
language package for [CodeMirror](https://codemirror.net/6/) editor.

## Demo

You can try it [online](https://iizukak.github.io/codemirror-lang-wgsl/).

## Build and Test

```
$ git clone git@github.com:iizukak/codemirror-lang-wgsl.git
$ cd codemirror-lang-wgsl.git
$ npm install
$ npm run prepare
$ npm test
```

## API

- `wgslLanguage:` [`LRLanguage`](https://codemirror.net/docs/ref/#language.LRLanguage)
- `wgsl()->` [`LanguageSupport`](https://codemirror.net/docs/ref/#language.LanguageSupport)

## Usage

You can use like below code.

```typescript
import { EditorView, basicSetup } from "codemirror";

import { wgsl } from "@iizukak/codemirror-lang-wgsl";

let editor = new EditorView({
  extensions: [basicSetup, wgsl()],
  parent: document.body,
});
```



## License Notification

This repository is based on some other libraries.

- Basic design of this repo is from [codemirror/lang-example](https://github.com/codemirror/lang-example)
- `src/syntax.grammar` is based on [use.gpu](https://gitlab.com/unconed/use.gpu/-/tree/master/packages/shader/src/wgsl/grammar).
- `src/index.ts` is based on [arsiliath/codemirror-lang-wgsl](https://github.com/arsiliath/codemirror-lang-wgsl/).
npm package: @ijavad805/react-datepicker
Description: cool datepicker and calendar for English and Persian
Author: Javad kazemzadeh
Latest version: 2.2.24

![React Datepicker](./poster.jpg)
# React Datepicker

A customizable datepicker and calendar component library with English and Persian support for React applications.

## Documentation

Full documentation for the Datepicker and Calendar components is available on the Docusaurus site:

- [Datepicker Guide](https://ijavad805.github.io/react-datepicker/docs/datepicker)
- [Calendar Guide](https://ijavad805.github.io/react-datepicker/docs/calendar)

For local development, navigate to the `documents` directory and run the Docusaurus commands listed there.
npm package: @ijiabao/vue-any
Description: Vue开发时经常用的小轮子
Author: iJiabao
Latest version: 1.0.1

# Vue any

Vue开发时经常用的小轮子



安装

```
npm i -S @ijiabao/vue-any
```

全局使用

```js
import VueAny from "@ijiabao/vue-any"
Vue.use(VueAny);
```

组件使用

```js
import {Plugin1, Plugin2, ...} from "@ijiabao/vue-any"
export default{
    components:{Plugin1},
    directives: {name: Plugin2}
}
```



### 扩展： v-toggle

直接切换上下文的值(true|false), 相当于`@click=this.foo.bar=!this.foo.bar`

可以指定 `<v-toggle.hover="someVal">`, 则`mouseenter时置为true, mouseleave时置为false`

```vue
<template>
<div>
  <button v-toggle="opt.state1">点我直接修改$this.opt.state1</button>  
    状态： {{opt.state1}}
</div>
</template>

<script>
    export default{
        data(){
            opt:{
                state1: false
            }
        }
    }
</script>
```

简单实现原理,参考`v-model`的双向绑定方法，当input有变时，直接修改上下文引用的值 (并不是通过$emit)

```js
Vue.directive('toggle', {
  bind(el, binding, vnode){
    let attr = binding.expression, $vm = vnode.context;
    el.addEventListener("click", ()=>{
      $vm[attr] = !$vm[attr];
    })
  }
})
// 如果表达式是多级子域对象，使用evel("$vm."+attr+"="+val);
```



### Router view自动加载

例如，动态匹配 `/demo/foo-bar` 将自动加载 `@/views/{子目录/}FooBar.vue`

仅用于`router-view`

```js
import ViewPromise from "@ijiagao/vue-any/src/lib/view-promise";

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/demo/abc", // 非匹配的放在前面，优先    
    },
    {
      path: "/demo/:view",	// 匹配参数必须是:view, 会把 :view 的蛇形名称 解析为首字母大写形式的文件名
      component: ViewPromise,
      props:{dir: "demos"}	// 可指定子目录
    }
  ]
});
```

实现原理

* 使用渲染函数实现 `<component :is=()=>import(dir+someVal) />` (vue version : 2.6)

* createElement 中的 `tag` 参数, 在官方文档里没有说明
* 无论是否使用此组件
  * 在使用`() => import(目录 + 名称)`时， 目录须写死，告诉编译器在哪个目录， 且目录下的所有文件都会预编译成`chunk`, 在实际需要的时候动态加载到页面里去
  * render 函数里不可出现`()=>import(someVal)` 的形式，否则`Promise`死循环

```js
export default {
  computed: {
    viewPromise() {
      let viewName = this.$route.params["view"] + ".vue";	// 需进行大小写转换
      return () => import("@/views/" + viewName);
    }
  },
  render(createElement) {
    // viewPromise 必须是本地变量，不能直接写在此函数里，否则死循环
    return createElement(this.viewPromise, { tag: "component" });
  }
};
```