open-index/open-npm huggingface dataset:
npm package: @shsf1382/angular-dropzone
Description: _Note: Previous versions of this package were published within a different [NPM registry](https://www.npmjs.com/package/@shsf1382/file-input). The current version is the most up-to-date and actively maintained._
Latest version: 1.4.4

# Angular DropZone

_Note: Previous versions of this package were published within a different [NPM registry](https://www.npmjs.com/package/@shsf1382/file-input). The current version is the most up-to-date and actively maintained._

## _Version 1.4.4_

Click [here](https://github.com/shsf1382hAcKeR/Angular-dropzone/blob/Main/projects/angular-dropzone/.changeset/CHANGELOG.md) to see the Changelog.

## Getting Started

### Installation

Install the package using NPM.

```bash
npm i @shsf1382/angular-dropzone
```

## Usage / Examples

### Adding the module

Import the Module in your `app.module.ts` file:

```javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AngularDropzoneModule } from "@shsf1382/angular-dropzone";
// Import the module

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],

  imports: [BrowserModule, AngularDropzoneModule],
  // Import the module in "imports" as well

  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### Adding the component

Add the Component in your `app.component.html` file:

```html
<angular-dropzone [config]="myFileInputConfig"><angular-dropzone></angular-dropzone></angular-dropzone>
```

_Note: You can add the attribute binding of `[config]` to configure the component's behavior through the `myFileInputConfig` object. You can name this object as you wish._

### Configuring the options of the component

Configure the options in your `app.component.ts`:

```javascript
import { Component } from "@angular/core";
import { FileProcessingConfig } from "@shsf1382/angular-dropzone";
// Import the config interface

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  myFileInputConfig: FileProcessingConfig = {
    maxFiles: 5,
    // Max files to be uploaded | Set to '10' by default

    allowedFileTypes: ["pdf", "docx", "xlsx"],
    // Allowed file types | Set to ['jpg', 'jpeg', 'png'] by default

    maxSize: 2,
    // Max size for upload in MB | Set to '2' by default

    defaultImage: "https://example-url.com/example.png",
    // Image to be dispalyed for non-image file types | Set to a default image

    display: "inline",
    // Controls file display method in the dropzone | Set to 'grid' by default
  };
}
```

_Note: You can set the value of `maxFiles`, `allowedFileTypes` & `maxSize` to `'noRule'`. This will remove the default rulesets of the component._
npm package: @shsf1382/file-input
Description: Click [here](/projects/file-input/CHANGELOG.md) to see the Changelog.
Latest version: 1.4.1

# Angular DropZone

## _Version 1.4.0_
Click [here](/projects/file-input/CHANGELOG.md) to see the Changelog.

## Getting Started

### Installation
Install the package using NPM.
```bash
npm install @shsf1382/file-input
```

## Usage / Examples
### Adding the module
Import the Module in your `app.module.ts` file:
```javascript 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AngularDropzoneModule } from '@shsf1382/file-input';
// Import the module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  
  imports: [BrowserModule, AngularDropzoneModule],
  // Import the module in "imports" as well
  
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```
### Adding the component
Add the Component in your `app.component.html` file:
```html 
<angular-dropzone [config]="myFileInputConfig"><angular-dropzone>
```
_Note: You can add the attribute binding of `[config]` to configure the component's behavior through the `myFileInputConfig` object. You can name this object as you wish._

### Configuring the options of the component
Configure the options in your `app.component.ts`:
```javascript
import { Component } from '@angular/core';
import { FileProcessingConfig } from 'file-input';
// Import the config interface

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  myFileInputConfig: FileProcessingConfig = {
    maxFiles: 5,
    // Max files to be uploaded | Set to '10' by default

    allowedFileTypes: ['pdf', 'docx', 'xlsx'],
    // Allowed file types | Set to ['jpg', 'jpeg', 'png'] by default

    maxSize: 2,
    // Max size for upload in MB | Set to '2' by default
    
    defaultImage: 'https://example-url.com/example.png',
    // Image to be dispalyed for non-image file types | Set to a default image
  };
}
```
_Note: You can set the value of `maxFiles`, `allowedFileTypes` & `maxSize` to `'noRule'`. This will remove the default rulesets of the component._

### More Detailed Document Coming Soon...
npm package: @shshekhar/tsfst
Description: Template for full stack application using typescript
Author: Shashi Shekhar
Latest version: 0.0.5

A fullstack Typescript application using ExpressJS for server and ReactJS for frontend. 

Its mostly been developed for my personal use, and consiquently includes opinionated decisions w.r.t. libraries being included in the bootstrap. Feel free to use it as is, if the same works for you. Or, fork it and update it with your favourite libraries and frameworks to have a quick and easy way for setting up your customized template.


# What works
- [x] Setup the fullstack application based on template from repo main branch.
- [x] Update the name description etc in package.json based on user input.

# To be impletemented
- [ ] Include parameters to accept template zip and configuration so that it can used with updated forks without the need to re-publish the executable package.
- [ ] Configuration to select branch from which to download the template.
- [ ] Multiple versions (to include db in bootatrap etc)
- [ ] Partial template to add a functionality (eg db) in existing projects.
npm package: @shsk002/nano-type-jp
Description: ## 概要
Latest version: 0.6.0

# NanoType-Jp - 日本語タイピングライブラリ

## 概要

NanoType-Jp は、日本語タイピングゲーム作成のための JavaScript ライブラリです。ひらがなをローマ字入力に変換し、タイピングの正誤判定を行うことができます。

## 特徴

- ひらがなの文章をローマ字入力パターンに変換
- 複数の入力パターンに対応（例：「し」→ "si"/"shi"/"ci"）
- 記号入力に対応
- タイピング成功・失敗のカウント機能
- ノーミスで文章を入力完了した場合のカウント機能

## インストール方法

npm に公開しているため、npm install でインストールできます。

```bash
npm i @shsk002/nano-type-jp
```

umd 形式でも公開しているため、HTML から直接ライブラリを読み込むことも可能です。

https://www.jsdelivr.com/package/npm/@shsk002/nano-type-jp

```html
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@shsk002/nano-type-jp/dist/nano-type-jp.umd.js"
></script>
```

## 基本的な使い方

```typescript
import NanoTypeJp from "nano-type-jp";
// インスタンスの作成
// メモ：umd形式のscriptを読み込んだ場合はwindowにNanoTypeJpクラスが挿入されています
const game = new NanoTypeJp();
// ひらがなの登録
const result = game.registerNewHiragana("こんにちは");
// タイピング判定
const answer = game.answerAlphabet("k");
if (answer.result === "correct") {
  console.log("正解！");
} else if (answer.result === "fail") {
  console.log("不正解...");
} else if (answer.result === "complete") {
  console.log("入力完了！");
}
```

## 入力結果の型定義

answerAlphabet メソッドを実行した際、下記データが返却されます。
データに合わせてゲーム画面を更新してください。

```typescript
type AnswerResult = {
  result: "correct" | "fail" | "complete";
  failCount: number; // 失敗回数
  correctCount: number; // 成功回数
  completedCount: number; // 完了した回数
  perfectStreakCount: number; // ノーミスで文章を入力完了した回数
  inputAlphabet: {
    completedInputAlphabet: string; // 入力済みアルファベット
    remainedAlphabet: string; // 残りの入力アルファベット
  };
};
```

## 対応している入力パターン

### 基本的なひらがな

- 清音（あ、い、う、え、お...）
- 濁音（が、ぎ、ぐ、げ、ご...）
- 半濁音（ぱ、ぴ、ぷ、ぺ、ぽ）
- 促音（っ）

### 拗音

- きゃ、しゅ、ちょ など
- ゔぁ、ゔぃ、ゔぇ、ゔぉ

### 記号

- 句読点
- かっこ
- スペース
- その他の一般的な記号

## 開発者向け情報

### プロジェクト構造

- `/src/typing/` - メインのタイピング機能
- `/src/japaneseSounds/` - 日本語音声クラス（Other、Youon、Sokuon）
- `/src/romaji/` - ローマ字変換関連
- `/src/parseHiragana/` - ひらがな解析

![class diagram](./docs/class.png)

## ライセンス

MIT

## バグ報告・機能要望

GitHub の Issue にて受け付けています。
npm package: @shsystem/elms
Description: elements-ui by Elms
Author: shsystem
Latest version: 1.0.0

# 使用说明
* * *
在 `package.json` 中添加

```jsx
"dependencies": {
  "@shsystem/elms": "version"
}
```

# API
* * *

```jsx
import {  TimeFromNow } from '@shsystem/elms';

const oldTime = new Date();

<TimeFromNow date={oldTime} />
```

具体的参数说明，请在 ```components``` 文件夹内 ```index.zh-CN.md``` 查阅
npm package: @shsystem/react-leaflet-elms
Description: shs map component
Author: shsystem
Latest version: 1.0.1

## 如何使用

* * *
该目录包含一些基于 **React leaflet** 的组件。


## Prepare

在 `package.json` 中添加

```json
{
  "@shsystem/react-leaflet-elms": "version"
}
```

随后即可以直接在页面中引用并使用地图了：
```jsx
import React from 'react';
import { Marker } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { Map } from '@shsystem/react-leaflet-elms';

export default function() {
  return (
    <div style={{ height: '100vh', width: '100vw' }} >
      <Map
        center={[30, 104]}
        zoom={10}
        style={{ height: '100%' }}
      >
        <Marker position={[0, 0]} />
      </Map>
    </div>
  );
}
```

## Map

地图组件是基于 `react-leaflet` 库中的 `Map` 封装而来，增加了百度、谷歌、wikimedia三种地图图层。
可以通过指定 `type="baidu"` 来选择使用哪种图层，默认百度。







## 参数说明



| 参数名      | 描述                                                     | 类型    | 默认值                     |
| ----------- | -------------------------------------------------------- | ------- | -------------------------- |
| center      | 地图中心                                                 | array   |                            |
| theme       | 主题(light \| dark)                                      | string  | Light                      |
| type        | 地图图层( ‘baidu’ \| ‘amap’ \| ‘google’ \| ‘wikimedia' ) | string  | baidu                      |
| maxZoom     | 最大缩放级别                                             | number  | type === 'baidu' ? 19 : 18 |
| minZoom     | 最小缩放级别                                             | number  | 3                          |
| zoom        | 默认地图缩放级别                                         | number  | 4                          |
| zoomControl | 是否现实缩放控件                                         | boolean | False                      |
| layerProps  | 地图图层其他属性                                         | object  |                            |

## layerProps具体参数如下



### type === ‘google’

基于 [react-leaflet-google ](https://github.com/Charmatzis/react-leaflet-google) 扩展

| 参数名    | 描述            | 类型   | 默认值   |
| --------- | --------------- | ------ | -------- |
| googlekey | google地图的key | string | 企业默认 |
| maptype   | 地图类型        | string | ROADMAP  |

更多使用参考 [react-leaflet-google ](https://github.com/Charmatzis/react-leaflet-google)；



### type === ‘amap’

| 参数名      | 描述                       | 类型    | 默认值               |
| ----------- | -------------------------- | ------- | -------------------- |
| v           | 高德地图版本               | string  | 1.4.15               |
| hostAndPath | 服务器地址                 | string  | webapi.amap.com/maps |
| key         | 高德地图key                | string  | 企业默认             |
| callback    | 高德地图回调函数名称       | string  | __amap_init_callback |
| useAMapUI   | 是否使用高德地图图层UI渲染 | boolean | false                |

更多参数参考[高德地图官方文档](https://lbs.amap.com/api/javascript-api/summary)



### type === ‘baidu’

参考[百度地图](http://lbs.baidu.com/index.php?title=jspopular3.0)