open-index/open-npm huggingface dataset:
npm package: @guna81/react-ticker
Description: A simple and customizable react ticker (news scroller) component.
Author: Guna
Latest version: 3.4.1


# React Ticker

A simple and customizable react ticker (news scroller) component.


## Installation

Install with npm

```bash
  npm install @guna81/react-ticker
```


## Demo

Checkout the [Demo](https://codesandbox.io/s/react-new-ticker-9g6ndd?file=/src/App.js).


## Usage/Examples

```javascript
export default function App() {
  const data = [
    {
      id: 1,
      value:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    // more data ...
  ];

  const renderItem = (item) => {
    return (
      <p style={{ whiteSpace: "nowrap", color: "orange" }} >
        {item.value}
      </p>
    );
  };

  return (
    <div className="App">

      {/* using default ticker item component */}
      <ReactTicker
        data={data.map((item) => item.value)}
        speed={20}
        keyName="_id"
        tickerStyle={{
          position: "fixed",
          top: 0,
          left: "0",
          width: "100%",
          height: "40px",
          backgroundColor: "#fff",
          zIndex: 99,
          borderTop: "1px solid #e0e0e0"
        }}
        tickerClassName="news-ticker"
      />
      
      {/* using custom ticker item component */}
      <ReactTicker
        data={data}
        component={renderItem}
        speed={40}
        keyName="_id"
        tickerStyle={{
          position: "fixed",
          bottom: 0,
          left: "0",
          width: "100%",
          height: "40px",
          backgroundColor: "#fff",
          zIndex: 99,
          borderTop: "1px solid #e0e0e0"
        }}
        tickerClassName="news-ticker"
      />
    </div>
  );
}

```


## API Reference

#### Props

| Parameter | Type     | Description             | Default Value       |
| :-------- | :------- | :---------------------- | :------------------ |
| `data` | `array` | **Required**. List of *objects* or *strings*. | empty array |
| `component` | `react node` | Custom ticker item component. | null |
| `keyName` | `string` | Key of object (Required, if only the data is a list of objects.). | null |
| `speed` | `number` | Scroll speed (0 - 60).  | 30 |
| `delay` | `number` | Scroll delay. | 0 |
| `diretion` | `string` | Scroll direction. | normal |
| `tickerClassName` | `string` | Ticker container class name. | empty string |
| `itemClassName` | `string` | Ticker item class name. | empty string |
| `tickerTextClassName` | `string` | Ticker text class name (Required, if only the data is a list of strings). | empty string |
| `tickerStyle` | `object` | Ticker container style. | empty object |
| `itemStyle` | `object` | Ticker item styles. | empty object |
| `loop` | `boolean` | Infinite scroll. | true |


- Component and keyName props are required if data is a list of objects.
- If data is a list of strings, components, and keyName props are unnecessary.
npm package: @gunar/ts-with
Description: Enforce the presence of otherwise optional fields in TypeScript.
Author: Gunar Gessner
Latest version: 1.0.0

# Installation
```
npm install --save @gunar/ts-with
```

# Summary
This package contains type maps for enforcing the presence of otherwise optional fields.

See the [blog post](https://medium.com/@gunar/narrower-optional-fields-for-typescript-49fd68335601) for more context.

## Example

```ts
interface User {
  name: string
  location?: string
}

// This passes type check but shouldn't ---------------------
const getTrimmedLocation = (u: User) => {
  if (u.location) return u.location.trim()
  else throw Error('User doesnt have a `location` field')
}

getTrimmedLocation({ name: 'Gunar' }) 

// This DOESN'T pass type check, as expected! ---------------
import { With } from '@gunar/ts-with'

const getTrimmedLocationSafe: (u: With<User, 'location') =>
  u.location.trim()

getTrimmedLocationSafe({ user: 'Gunar' })
```
npm package: @gunar/unite
Description: Unite the output of multiple processes in a single screen.
Author: Gunar Gessner
Latest version: 1.2.3

# UNITE ✨

**Bare-bones Terminal Multiplexer for Node.js**

![example usage](example.gif)

### Installation

```
yarn add -D unite
```

### Usage

```
unite command1 command2 command3...
```

### Related

- [kimmobrnfeldt/concurrently](https://github.com/kimmobrnfeldt/concurrently) — Intertwines the output of each process, often becomes unreadable. (I was using this before)
- [rse/stmux](https://github.com/rse/stmux) — Proper terminal multiplexer. Allows input as well. Requires node-gyp. More powerful and hence more complex.
npm package: @gunarssimkuns/webpack-media-query-split-plugin
Description: Webpack 4 plugin for splitting output css by media query
Author: Gunars Simkuns
Latest version: 0.0.5

# webpack-media-query-split-plugin

Executed right before emitting assets to output dir.

Requires node.js^12.0.0, webpack 4


```javascript
// webpack.config.js
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const WebpackMediaQuerySplitPlugin = require( '@gunarssimkuns/webpack-media-query-split-plugin' )

module.exports = {
	module: {
		rules: [
			{
				test: /\.s?[ac]ss$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: WebpackMediaQuerySplitPlugin.loader },
					{ loader: 'postcss-loader' },
					{ loader: 'sass-loader' },
				]
			},
        ]
    },
    plugins: [
        new WebpackMediaQuerySplitPlugin({
            queries: {
                mobile: /\(max-width: 767px\)/,
                tablet: [ /\(min-width: 768px\)/ ]
            },
            filename: '[name]-[query].css'
        })
    ]
}
```
npm package: @gunawanedy/react-button-slider
Description: Wrap all your buttons or any component in react-button-slider and it will be horizontally scrollable without any scrollbar
Author: Edy Gunawan
Latest version: 1.3.1

### react-button-slider

Wrap all your buttons or any component in react-button-slider and it will be horizontally scrollable without any scrollbar

<a href="https://www.npmjs.com/package/@gunawanedy/react-button-slider" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/dt/@gunawanedy/react-button-slider" />
</a>

![Example](https://drive.google.com/uc?export=view&id=1CK85t9jzbater42QeO70LAGVhpZrUYa1)
![Example](https://drive.google.com/uc?export=view&id=16xkDfdRIc6Xrv2KYmXFsFc-AY15TrGnL)

### Installation

**npm**

```bash
npm i @gunawanedy/react-button-slider
```

**yarn**

```bash
yarn add @gunawanedy/react-button-slider
```

### Example

```js
import React from 'react';

import ReactButtonSlider from '@gunawanedy/react-button-slider';

const App = () => {
  return (
    <>
      <ReactButtonSlider>
        {/*you can add styling for your button*/}
        <button>Category 1</button>
        <button>Category 2</button>
        <button>Category 3</button>
        <button>Category 4</button>
      </ReactButtonSlider>
      <main className="content">
        <h1>Your Contents</h1>
      </main>
    </>
  );
};

export default App;
```

### Props

| Name                 | Type     | Default                                   | Description              |
| -------------------- | -------- | ----------------------------------------- | ------------------------ |
| Children             | `any`    |                                           | any component or element |
| overscrollTransition | `string` | `transform .3s cubic-bezier(.25,.8,.5,1)` | css transition property  |
| dragAcceleration     | `number` | `1`                                       | drag acceleration        |
npm package: @gunawanwijaya/utils
Description: Collection of native progressive (es6) utility library
Author: Gunawan Wijaya
Latest version: 1.1.0

# upils

Collection of native progressive (es6) utility library

## all-platform

- `is` - type checking (Boolean)
- `merge` - object deep merge
- `objectToQueryString` - QueryString builder
- `queryStringToObject` - QueryString parser
- `val` - get native value from string

## browser only

- DOM specific
  - `allDOM` - selector of many DOM (Array)
  - `oneDOM` - selector of only one DOM
  - `removeDOM` - remove only one DOM, can be joined with `eachDOM`
  - `eachDOM` - iterate many DOM with callback
  - `wrapDOM` - wrap only one DOM with a new DOM
  - `xmlToObject` - parse xml to Object, useful for reading xml like format, e.g. rss feed
    (modified from <https://github.com/metatribal/xmlToJSON>)
  - `stringToDOM` - make a DOM from string
- DOM class specific
  - `hasClass` - check if a DOM has a className, can be joined with `eachDOM`
  - `addClass` - add className to all of DOM within the query
  - `removeClass` - remove className to all of DOM within the query
  - `toggleClass` - toggle className to all of DOM within the query
- event specific
  - `on` - addEventListener with passive event as default, non passive add `false` after callback
  - `off` - removeEventListener
- injection
  - `insertScript` - script injection (JSONP like)
  - `insertStyle` - style injection
npm package: @gund/ng-annotations
Description: Extract metadata of Angular components, directives, service etc.
Author: Alex Malkevich
Latest version: 0.3.1

# ng-annotations

> Extract metadata of Angular components, directives, service etc.

[![Travis CI](https://img.shields.io/travis/gund/ng-annotations/master.svg?maxAge=2592000)](https://travis-ci.org/gund/ng-annotations)
[![Coverage](https://img.shields.io/codecov/c/github/gund/ng-annotations.svg?maxAge=2592000)](https://codecov.io/gh/gund/ng-annotations)
[![Npm](https://img.shields.io/npm/v/@gund/ng-annotations.svg?maxAge=2592000)](https://badge.fury.io/js/@gund/ng-annotations)
[![Npm Downloads](https://img.shields.io/npm/dt/@gund/ng-annotations.svg?maxAge=2592000)](https://www.npmjs.com/package/@gund/ng-annotations)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## Installation

```bash
$ npm install --save @gund/ng-annotations
```

## Usage

Import `Annotations` class first:
```ts
import { Annotations } from 'ng-annotations';
```

Then get annotations for you component:
```ts
@Component({selector: 'some-component'})
class MyComponent {
  constructor() {
    const annotations = Annotations.getFor(MyComponent);
    // annotations.selector here will be `some-component`
  }
}
```

## Documentation

**Annotations**
```ts
class Annotations {
  static getFor(type: Type<any>): AllDecorators;
  static getForDirective(type: Type<any>): Directive;
  static getForComponent(type: Type<any>): Component;
  static getForPipe(type: Type<any>): Pipe;
}
```

<sub>See [src/annotations.ts](./src/annotations.ts) for full reference</sub>

_Description_: Class with static methods to get annotations from type.

**getFor()**
```ts
static getFor(type: Type<any>): AllDecorators;
```

_Description_: Get annotations for the type.
It will return all annotations found. If you want more specific type use methods below.

**getForDirective()**
```ts
static getForDirective(type: Type<any>): Directive;
```

_Description_: Get annotations for directive.
Calls getFor() but returns type specific for Directive.

**getForComponent()**
```ts
static getForComponent(type: Type<any>): Component;
```

_Description_: Get annotations for component.
Calls getFor() but returns type specific for Component.

**getForPipe()**
```ts
static getForPipe(type: Type<any>): Pipe;
```

_Description_: Get annotations for pipe.
Calls getFor() but returns type specific for Pipe.

## Development

To generate all `*.js`, `*.js.map`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

To run unit tests:

```bash
$ npm test
```

## License

MIT © [Alex Malkevich](malkevich.alex@gmail.com)
npm package: @gune/storage-cloudinary
Description: Cloudinary storage strategy with transformations
Author: BUDDGUN92
Latest version: 0.1.0

# @gune/storage-cloudinary

Cloudinary storage strategy for the Gune Storage system.

## Installation

```bash
npm install @gune/storage-cloudinary cloudinary
```

## Usage

### Standalone

```typescript
import { CloudinaryStorageStrategy } from '@gune/storage-cloudinary';

const storage = new CloudinaryStorageStrategy({
  cloudName: process.env.CLOUDINARY_CLOUD_NAME,
  apiKey: process.env.CLOUDINARY_API_KEY,
  apiSecret: process.env.CLOUDINARY_API_SECRET,
  folder: 'uploads',
});

// Upload a file
const result = await storage.store(
  Buffer.from('image data'),
  'photo.jpg',
  { contentType: 'image/jpeg' }
);
```

### With NestJS

```typescript
import { StorageModule } from '@gune/storage-nestjs';
import { CloudinaryStorageStrategy } from '@gune/storage-cloudinary';

@Module({
  imports: [
    StorageModule.forRoot({
      strategy: new CloudinaryStorageStrategy({
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
        folder: 'uploads',
      }),
    }),
  ],
})
export class AppModule {}
```

## Configuration

### CloudinaryStorageStrategyConfig

- `cloudName`: Your Cloudinary cloud name
- `apiKey`: Your Cloudinary API key
- `apiSecret`: Your Cloudinary API secret
- `folder?`: Default folder for uploads
- `useFilename?`: Preserve original filename (default: true)
- `uniqueFilename?`: Add unique suffix to filenames (default: false)
- `resourceType?`: Resource type ('image', 'video', 'raw', 'auto')

## Features

- Image and video upload
- Automatic image optimization
- Transformation support
- Responsive image delivery
- CDN distribution
- File retrieval
- File deletion
- Metadata support

## Image Transformations

```typescript
// Get URL with transformations
const url = await storage.getUrl(key, {
  transformation: {
    width: 300,
    height: 300,
    crop: 'fill',
    quality: 'auto',
    fetch_format: 'auto',
  },
});
```

## Use Cases

- Image-heavy applications
- Media management systems
- User profile photos
- Product catalogs
- Video streaming

## License

MIT © BUDDGUN92
npm package: @gune/storage-s3
Description: AWS S3 and compatible storage strategy
Author: BUDDGUN92
Latest version: 0.1.0

# @gune/storage-s3

AWS S3 and S3-compatible storage strategy for the Gune Storage system.

## Installation

```bash
npm install @gune/storage-s3 @aws-sdk/client-s3 @aws-sdk/lib-storage @aws-sdk/s3-request-presigner
```

## Usage

### Standalone

```typescript
import { S3StorageStrategy } from '@gune/storage-s3';

const storage = new S3StorageStrategy({
  region: 'us-east-1',
  bucket: 'my-bucket',
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  },
});

// Upload a file
const result = await storage.store(
  Buffer.from('Hello World'),
  'hello.txt',
  { contentType: 'text/plain' }
);
```

### With NestJS

```typescript
import { StorageModule } from '@gune/storage-nestjs';
import { S3StorageStrategy } from '@gune/storage-s3';

@Module({
  imports: [
    StorageModule.forRoot({
      strategy: new S3StorageStrategy({
        region: process.env.AWS_REGION,
        bucket: process.env.S3_BUCKET,
        credentials: {
          accessKeyId: process.env.AWS_ACCESS_KEY_ID,
          secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
        },
      }),
    }),
  ],
})
export class AppModule {}
```

## Configuration

### S3StorageStrategyConfig

- `region`: AWS region (e.g., 'us-east-1')
- `bucket`: S3 bucket name
- `credentials`: AWS credentials
  - `accessKeyId`: AWS access key ID
  - `secretAccessKey`: AWS secret access key
- `endpoint?`: Custom endpoint for S3-compatible services (e.g., MinIO, DigitalOcean Spaces)
- `forcePathStyle?`: Use path-style URLs (required for some S3-compatible services)

### S3-Compatible Services

Works with MinIO, DigitalOcean Spaces, Wasabi, and other S3-compatible storage:

```typescript
new S3StorageStrategy({
  region: 'us-east-1',
  bucket: 'my-bucket',
  endpoint: 'https://nyc3.digitaloceanspaces.com',
  forcePathStyle: false,
  credentials: {
    accessKeyId: process.env.SPACES_KEY,
    secretAccessKey: process.env.SPACES_SECRET,
  },
});
```

## Features

- File upload to S3 & S3 compatible storage, i.e., Digital Ocean
- Stream support
- Pre-signed URL generation
- File retrieval
- File deletion
- Metadata support
- S3-compatible storage support

## License

MIT © BUDDGUN92
npm package: @gungi/mcp
Description: Gungi MCP Server - AI-DLC Platform integration for Claude Code
Latest version: 0.1.8

# @gungi/mcp

Gungi MCP Server — [Claude Code](https://claude.com/claude-code) から Gungi プラットフォームを操作するための MCP サーバー。

## v0.1.0 からのアップグレード

v0.1.5 で bin 名が `gungi-mcp` から `mcp` に変更されました。
Claude Code で登録済みの設定を以下の手順で更新してください:

```bash
# 旧設定を削除
claude mcp remove gungi

# 新設定を追加
claude mcp add gungi -- npx @gungi/mcp
```

## セットアップ

```bash
claude mcp add gungi -- npx @gungi/mcp
```

## 認証

初回利用時に Claude Code から `login` ツールを実行すると、GitHub Device Flow でブラウザ認証が開始されます。

1. Claude Code が表示するコードとURLを確認
2. ブラウザで GitHub にログインし、コードを入力
3. Claude Code で `login-confirm` を実行して認証完了

認証情報は `~/.gungi/credentials.json` に保存されます（ファイル権限: 0600）。

## 利用可能なツール

### 認証
| ツール | 説明 |
|--------|------|
| `login` | GitHub Device Flow で認証を開始 |
| `login-confirm` | 認証フローを完了 |

### エージェント管理
| ツール | 説明 |
|--------|------|
| `list-agents` | エージェント一覧を取得 |
| `get-agent` | エージェント詳細を取得 |
| `create-agent` | エージェントを作成 |
| `update-agent` | エージェントを更新 |
| `import-agent-from-md` | Markdown からエージェントをインポート |
| `export-agent-to-md` | エージェントを Markdown にエクスポート |

### チェーン管理
| ツール | 説明 |
|--------|------|
| `list-chains` | チェーン一覧を取得 |
| `get-chain` | チェーン詳細を取得 |
| `update-chain` | チェーンを更新 |
| `import-chain-from-yaml` | YAML からチェーンをインポート |
| `export-chain-to-yaml` | チェーンを YAML にエクスポート |

### フェーズ管理
| ツール | 説明 |
|--------|------|
| `list-phases` | フェーズ一覧を取得 |
| `get-phase` | フェーズ詳細を取得 |
| `update-phase` | フェーズを更新 |
| `add-phase-to-chain` | チェーンにフェーズを追加 |

### タスク管理
| ツール | 説明 |
|--------|------|
| `list-tasks` | タスク一覧を取得 |
| `get-task` | タスク詳細を取得 |

## 環境変数（オプション）

開発時やCI環境で使用できます。

| 変数 | 説明 | デフォルト |
|------|------|-----------|
| `GUNGI_API_URL` | API サーバーの URL | `https://api.gungi-ai.com` |
| `GUNGI_API_TOKEN` | Bearer トークン（`GUNGI_API_URL` と併用） | — |
| `GUNGI_GITHUB_CLIENT_ID` | GitHub OAuth App の Client ID | 本番値 |

```bash
# ローカル開発時の例
GUNGI_API_URL=http://localhost:3001 npx @gungi/mcp
```

## 要件

- Node.js >= 18.0.0
- Claude Code（MCP クライアント）

## ライセンス

MIT
npm package: @gungkrisna/react-native-ios-time-picker
Description: An iOS-style picker component without native implementation, inspired by Swift's UIDatePicker's countDownTimer mode.
Author: gk
Latest version: 0.1.1

# @gungkrisna/react-native-ios-time-picker

An iOS-style picker component inspired by Swift [UIDatePicker](https://developer.apple.com/documentation/uikit/uidatepicker)'s countDownTimer mode without the native side. Working cross-platform and compatible with Expo. It's a fork of [react-native-wheel-picker](https://github.com/quidone/react-native-wheel-picker).

![Preview](preview.gif)

## Installation

```sh
yarn add @gungkrisna/react-native-ios-time-picker
```

## Usage

If you want to see more examples and experiment, run the examples locally.

```git clone git@github.com:gungkrisna/react-native-ios-time-picker.git
cd react-native-ios-time-picker
yarn install
cd example && yarn install && yarn start
```
npm package: @gungunsaluja/ecom-design-system
Description: A comprehensive React design system for e-commerce applications with Storybook documentation
Author: Your Name
Latest version: 1.0.0

# E-commerce Design System

A comprehensive React design system for e-commerce applications with Storybook documentation.

## 🚀 Quick Start

### Installation

```bash
npm install ecomdesignsystem
```

### Basic Usage

```tsx
import { Button, HeadingBar, Footer } from 'ecomdesignsystem';

function App() {
  return (
    <div>
      <HeadingBar
        item1={{ text: "Contact", iconUrl: icons.envelope }}
        item2={{ text: "Phone", iconUrl: icons.phone }}
      />
      
      <Button variant="primary" size="medium">
        Click me
      </Button>
      
      <Footer />
    </div>
  );
}
```

## 📦 Components

### Button
```tsx
import { Button } from 'ecomdesignsystem';

<Button variant="primary" size="medium">
  Click me
</Button>
```

### HeadingBar
```tsx
import { HeadingBar, icons } from 'ecomdesignsystem';

<HeadingBar
  item1={{ text: "Email", iconUrl: icons.envelope }}
  item2={{ text: "Phone", iconUrl: icons.phone }}
/>
```

### Footer
```tsx
import { Footer } from 'ecomdesignsystem';

<Footer />
```

## 🎨 Design Tokens

```tsx
import { colors, typography } from 'ecomdesignsystem';

// Use design tokens
const style = {
  color: colors.pink,
  fontFamily: typography.heading.fontFamily
};
```

## 🛠️ Setup Requirements

### Tailwind CSS
This design system requires Tailwind CSS. Add to your `tailwind.config.js`:

```js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/ecomdesignsystem/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of config
}
```

### CSS Import
Add the design system CSS to your app:

```tsx
import 'ecomdesignsystem/dist/index.css';
```

## 📚 Storybook

View all components and examples:

```bash
npm run storybook
```

## 🔧 Development

```bash
# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

# Run tests
npm test
```

## 📄 License

MIT
npm package: @gunha/re-libs
Description: 패키지 설명
Latest version: 0.1.0

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @guni/cordova-plugin-crop
Description: Crop an image in a Cordova app with ratio
Latest version: 0.0.3

# cordova-plugin-crop-with-ratio

> Crop an image in a Cordova app


## Install

```
$ cordova plugin add --save https://github.com/obeza/cordova-plugin-crop-with-ratio
```


## Usage

```js

let options = {
          quality: 75,
          widthRatio:1,
          heightRatio:1,          
          targetWidth:600,
          targetHeight:600
};

plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)
```

or, if you are running on an environment that supports Promises
(Crosswalk, Android >= KitKat, iOS >= 8)

```js
plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})
```

## API

 * quality: Number

The resulting JPEG quality. default: 100

## Ionic / Typescript Example Angular 2 Service

<img src="screenshot-example.png" width="250" height="500">

This is an example service that uses ionic-native's built in camera and the cordova-plugin-crop to create a cropped version of the image and return the file path. 

```js
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Camera, Crop } from 'ionic-native';

@Injectable()
export class CameraService {

  public options: any = {
        allowEdit: true,
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        mediaType: Camera.MediaType.ALLMEDIA,
        destinationType: Camera.DestinationType.FILE_URI
  }
  
  constructor(public platform: Platform) {}

  // Return a promise to catch errors while loading image
  getMedia(): Promise<any> {
    // Get Image from ionic-native's built in camera plugin
    return Camera.getPicture(this.options)
      .then((fileUri) => {
        // Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
        // Only giving an android example as ionic-native camera has built in cropping ability
        if (this.platform.is('ios')) {
          return fileUri
        } else if (this.platform.is('android')) {
          // Modify fileUri format, may not always be necessary
          fileUri = 'file://' + fileUri;

          /* Using cordova-plugin-crop starts here */
          return Crop.crop(fileUri, { quality: 100 });
        }
      })
      .then((path) => {
        // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
        console.log('Cropped Image Path!: ' + path);
        return path;
      })
  }
  
}  
```



### Libraries used

 * iOS: [PEPhotoCropEditor](https://github.com/kishikawakatsumi/PEPhotoCropEditor)
 * Android: [android-crop](https://github.com/jdamcd/android-crop)

## License

MIT © [Jeduan Cornejo](https://github.com/jeduan)
npm package: @guni/ionic
Description: A powerful framework for building mobile and progressive web apps with JavaScript and Angular
Latest version: 3.9.2-201901310216

## Ionic Framework

The official npm package for [Ionic](https://ionicframework.com/), complete with pre-built ES5 bundles, TypeScript definitions, Sass files, CommonJS ES5 files, and more.

To get started with Ionic, please read the [Installation Guide](https://ionicframework.com/docs/intro/installation/).

[Ionic Documentation](https://ionicframework.com/docs/)

### Source files

In the root of the package are ES5 sources in the CommonJS module format, their associated Typescript type definition files, and the Ionic Sass entry files. The Javascript sources are meant to be used by a bundler such as Webpack, SystemJS Builder, or Browserify. The type definitions provide support to Typescript tooling for things like type checking and code completion.

Usually, the only import required by the user is `ionic-angular`, as everything from Ionic is exported by the package:

```
  import { App, NavController } from 'ionic-angular';
```

### Bundles

Minified and unminified CommonJS and System.register module format bundles, as well as compiled CSS stylesheets for both Ionic iOS and Material Design are located `bundles/`. The SystemJS bundle is  primarily meant to be included in a `<script>` tag for demos, tests and Javascript playgrounds like [Plunker](https://plnkr.co/).

### Installation and More

To use Ionic, we recommend installing and utilizing the [Ionic CLI](https://ionicframework.com/docs/intro/installation/) which will help you create pre-configured Ionic apps.

For full instructions on using Ionic, please visit the [Ionic Documentation](https://ionicframework.com/docs/)
npm package: @guni/ionic-angular
Description: A powerful framework for building mobile and progressive web apps with JavaScript and Angular
Latest version: 3.9.2

## Ionic Framework

The official npm package for [Ionic](https://ionicframework.com/), complete with pre-built ES5 bundles, TypeScript definitions, Sass files, CommonJS ES5 files, and more.

To get started with Ionic, please read the [Installation Guide](https://ionicframework.com/docs/intro/installation/).

[Ionic Documentation](https://ionicframework.com/docs/)

### Source files

In the root of the package are ES5 sources in the CommonJS module format, their associated Typescript type definition files, and the Ionic Sass entry files. The Javascript sources are meant to be used by a bundler such as Webpack, SystemJS Builder, or Browserify. The type definitions provide support to Typescript tooling for things like type checking and code completion.

Usually, the only import required by the user is `ionic-angular`, as everything from Ionic is exported by the package:

```
  import { App, NavController } from 'ionic-angular';
```

### Bundles

Minified and unminified CommonJS and System.register module format bundles, as well as compiled CSS stylesheets for both Ionic iOS and Material Design are located `bundles/`. The SystemJS bundle is  primarily meant to be included in a `<script>` tag for demos, tests and Javascript playgrounds like [Plunker](https://plnkr.co/).

### Installation and More

To use Ionic, we recommend installing and utilizing the [Ionic CLI](https://ionicframework.com/docs/intro/installation/) which will help you create pre-configured Ionic apps.

For full instructions on using Ionic, please visit the [Ionic Documentation](https://ionicframework.com/docs/)
npm package: @guni/ionic2
Description: A powerful framework for building mobile and progressive web apps with JavaScript and Angular
Author: Guni
Latest version: 3.9.2

[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
[![Circle CI](https://circleci.com/gh/ionic-team/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/ionic-team/ionic)
[![Open Source Helpers](https://www.codetriage.com/ionic-team/ionic/badges/users.svg)](https://www.codetriage.com/ionic-team/ionic)

# Ionic

[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
build top quality native and progressive web apps with web technologies.

Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and
feature improvements over the past versions.

See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick
overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
started using Ionic.

### Getting Started

Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
We would love to hear from you! If you have any feedback or run into issues using our framework, please file
an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.

### Contributing

Thanks for your interest in contributing! Read up on our guidelines for
[contributing](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md)
and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
label.

### Examples

The [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app) is a full featured Ionic app.
It is the perfect starting point for learning and building your own app.

### Ionic V1

The source code for Ionic V1 has been moved to [ionic-team/ionic-v1](https://github.com/ionic-team/ionic-v1).
Please open any issues and pull requests related to Ionic V1 on that repository.
npm package: @gunlayer/object-deep-copy
Description: create object deep copy
Author: https://www.linkedin.com/in/alexandru-turcan-45a780217/
Latest version: 1.1.0

# object-deep-clone

This package allows to create a deep copy of your object

## Installation

```sheel
$ npm install @gunlayer/object-deep-copy
```

## Example

```javascript
import deepCopy from '@gunlayer/object-deep-copy';

const obj1 = { a: { b: 'string' } }; // initial value of your object
const obj2 = deepCopy(obj1); // create a copy of obj1

obj1.a.b = 'changed value'; // update obj1

console.log(obj1);
console.log(obj2);
```

This will print:

```javascript
{
  a: {
    b: 'string';
  }
}
{
  a: {
    b: 'changed value';
  }
}
```

## API

### `deepCopy(object)`

- `object`: The object that you want to copy.
npm package: @gunnarlue/ng2-ace-editor
Description: Ace editor integration with typescript for Angular.
Author: François-Xavier Montigny
Latest version: 0.3.14

# ng2-ace-editor

[![npm version](https://badge.fury.io/js/ng2-ace-editor.svg)](https://www.npmjs.com/package/ng2-ace-editor) 
Ace editor integration with typescript for angular 5.  
**To use Angular 4 install version 0.3.1 (npm i -S ng2-ace-editor@0.3.1).**

# Install
`npm i -S ng2-ace-editor`

##### Load the module for your app:

```javascript
import { AceEditorModule } from 'ng2-ace-editor';

@NgModule({
  ...
  imports: [
    ...
    AceEditorModule
  ]
})
```

# Use directive

> Minimal

```js
//import { AceEditorModule } from 'ng2-ace-editor';

import { Component } from '@angular/core';

@Component({
  template: `
  <div ace-editor
       [(text)]="text" // possible two way binding (thx ChrisProlls)
       ></div>
  `
})
export class MyComponent {
    text:string = "";
}
```

> Complete

```js
import { Component } from '@angular/core';

//to use theme "eclipse"
//with angular-cli add "../node_modules/ace-builds/src-min/ace.js" 
//and "../node_modules/ace-builds/src-min/theme-eclipse.js" to "scripts" var into the file angular-cli.json

@Component({
  template: `
  <div ace-editor
       [(text)]="text" // possible two way binding (thx ChrisProlls)
       [mode]="'sql'" //string or object (thx ckiffel)
       [theme]="'eclipse'"
       [options]="options"
       [readOnly]="false"
       [autoUpdateContent]="true" //change content when [text] change
       [durationBeforeCallback]="1000" //wait 1s before callback 'textChanged' sends new value
       (textChanged)="onChange($event)"
       style="min-height: 200px; width:100%; overflow: auto;"></div>
  `
})
export class MyComponent {
    text:string = "";
    options:any = {maxLines: 1000, printMargin: false};
    
    onChange(code) {
        console.log("new code", code);
    }
}
```

# Use Component

```js
import {Component, ViewChild} from '@angular/core';

//to use theme eclipse
//with angular-cli add "../node_modules/ace-builds/src-min/ace.js" 
//and "../node_modules/ace-builds/src-min/theme-eclipse.js" to "scripts" var into the file angular-cli.json

@Component({
    template: `
  <ace-editor
       [(text)]="text" // possible two way binding (thx ChrisProlls)
        #editor style="height:150px;"></ace-editor>
  `
})
export class AceCmp {
    @ViewChild('editor') editor;
    text: string = "";

    ngAfterViewInit() {
        this.editor.setTheme("eclipse");

        this.editor.getEditor().setOptions({
            enableBasicAutocompletion: true
        });

        this.editor.getEditor().commands.addCommand({
            name: "showOtherCompletions",
            bindKey: "Ctrl-.",
            exec: function (editor) {

            }
        })
    }
}
```


# Power by
[Use Code](http://www.use-code.com)
npm package: @gunnarx2/eslint-config-eslint-react
Description: ESLint React configuration
Author: gunnarx2
Latest version: 4.0.3

# `@gunnarx2/eslint-react`

[![npm version](https://img.shields.io/npm/v/@gunnarx2/eslint-config-eslint-react.svg)](https://www.npmjs.com/package/@gunnarx2/eslint-config-eslint-react)
[![npm downloads](https://img.shields.io/npm/dm/@gunnarx2/eslint-config-eslint-react.svg)](https://www.npmjs.com/package/@gunnarx2/eslint-config-eslint-react)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@gunnarx2/eslint-config-eslint-react)](https://www.npmjs.com/package/@gunnarx2/eslint-config-eslint-react)
[![npm license](https://img.shields.io/npm/l/@gunnarx2/eslint-config-eslint-react)](https://www.npmjs.com/package/@gunnarx2/eslint-config-eslint-react)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

<!-- markdownlint-disable-next-line MD044 -->
Extendable [ESLint](https://eslint.org/) configuration built on top of [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app).

## Installation

```shell
yarn add @gunnarx2/eslint-config-eslint-react \
  @typescript-eslint/eslint-plugin@^4.0.0 \
  @typescript-eslint/parser@^4.0.0 \
  babel-eslint@^10.0.0 \
  eslint@^7.5.0 \
  eslint-config-airbnb@^18.2.0 \
  eslint-config-prettier@^6.14.0 \
  eslint-config-react-app@^6.0.0 \
  eslint-plugin-babel@^5.3.1 \
  eslint-plugin-cypress@^2.11.2 \
  eslint-plugin-flowtype@^5.2.0 \
  eslint-plugin-import@^2.22.0 \
  eslint-plugin-jsx-a11y@^6.3.1 \
  eslint-plugin-prettier@^3.1.4 \
  eslint-plugin-react@^7.21.5 \
  eslint-plugin-react-hooks@^4.2.0 -D
```

### With Create React App

```shell
yarn add @gunnarx2/eslint-config-eslint-react \
  eslint-config-airbnb@^18.2.0 \
  eslint-config-prettier@^6.14.0 \
  eslint-plugin-babel@^5.3.1 \
  eslint-plugin-cypress@^2.11.2 \
  eslint-plugin-prettier@^3.1.4 -D
```

## Usage

<!-- markdownlint-disable-next-line MD044 -->
Extend `@gunnarx2/eslint-react` in the ESLint config. [@gunnarx2/prettier](https://github.com/gunnarx2/gunnarx2-mono/tree/master/packages/prettier)
is included in the package, so make sure to setup the Prettier config and
install its peer dependencies.

```javascript
module.exports = {
  extends: ['@gunnarx2/eslint-react']
};
```
npm package: @gunnarx2/markdownlint
Description: Markdownlint configuration
Author: gunnarx2
Latest version: 4.0.2

# `@gunnarx2/markdownlint`

[![npm version](https://img.shields.io/npm/v/@gunnarx2/markdownlint.svg)](https://www.npmjs.com/package/@gunnarx2/markdownlint)
[![npm downloads](https://img.shields.io/npm/dm/@gunnarx2/markdownlint.svg)](https://www.npmjs.com/package/@gunnarx2/markdownlint)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@gunnarx2/markdownlint)](https://www.npmjs.com/package/@gunnarx2/markdownlint)
[![npm license](https://img.shields.io/npm/l/@gunnarx2/markdownlint)](https://www.npmjs.com/package/@gunnarx2/markdownlint)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

Configuration for [markdownlint-cli](https://github.com/igorshubovych/markdownlint-cli).

## Installation

```shell
yarn add @gunnarx2/markdownlint markdownlint-cli@^0.24.0 -D
```

## Usage

Require `@gunnarx2/markdownlint` in the Markdownlint config.

```javascript
module.exports = require('@gunnarx2/markdownlint');
```
npm package: @gunnarx2/prettier
Description: Prettier configuration
Author: gunnarx2
Latest version: 4.0.3

# `@gunnarx2/prettier`

[![npm version](https://img.shields.io/npm/v/@gunnarx2/prettier.svg)](https://www.npmjs.com/package/@gunnarx2/prettier)
[![npm downloads](https://img.shields.io/npm/dm/@gunnarx2/prettier.svg)](https://www.npmjs.com/package/@gunnarx2/prettier)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@gunnarx2/prettier)](https://www.npmjs.com/package/@gunnarx2/prettier)
[![npm license](https://img.shields.io/npm/l/@gunnarx2/prettier)](https://www.npmjs.com/package/@gunnarx2/prettier)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

Configuration for [Prettier](https://prettier.io/).

## Installation

```shell
yarn add @gunnarx2/prettier prettier@^2.1.2 -D
```

## Usage

Require `@gunnarx2/prettier` in the Prettier config.

```javascript
module.exports = require('@gunnarx2/prettier');
```
npm package: @gunnarx2/stylelint
Description: Stylelint configuration
Author: gunnarx2
Latest version: 4.1.1

# `@gunnarx2/stylelint`

[![npm version](https://img.shields.io/npm/v/@gunnarx2/stylelint.svg)](https://www.npmjs.com/package/@gunnarx2/stylelint)
[![npm downloads](https://img.shields.io/npm/dm/@gunnarx2/stylelint.svg)](https://www.npmjs.com/package/@gunnarx2/stylelint)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@gunnarx2/stylelint)](https://www.npmjs.com/package/@gunnarx2/stylelint)
[![npm license](https://img.shields.io/npm/l/@gunnarx2/stylelint)](https://www.npmjs.com/package/@gunnarx2/stylelint)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

Extendable [Stylelint](https://stylelint.io/) configuration.

## Installation

```shell
yarn add @gunnarx2/stylelint stylelint@^13.7.2 stylelint-config-sass-guidelines@^7.1.0 -D
```

## Usage

Extend `@gunnarx2/stylelint` in the Stylelint config.

```javascript
module.exports = {
  extends: '@gunnarx2/stylelint'
};
```
npm package: @gunnarx2/utils
Description: Collection of utilities
Author: gunnarx2
Latest version: 4.0.2

# `@gunnarx2/utils`

[![npm version](https://img.shields.io/npm/v/@gunnarx2/utils.svg)](https://www.npmjs.com/package/@gunnarx2/utils)
[![npm downloads](https://img.shields.io/npm/dm/@gunnarx2/utils.svg)](https://www.npmjs.com/package/@gunnarx2/utils)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@gunnarx2/utils)](https://www.npmjs.com/package/@gunnarx2/utils)
[![npm license](https://img.shields.io/npm/l/@gunnarx2/utils)](https://www.npmjs.com/package/@gunnarx2/utils)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

Collection of utilities. Every utility supports [TypeScript](https://www.typescriptlang.org/)
and Server-side rendering.

## Installation

```shell
yarn add @gunnarx2/utils
```

## Usage

- [isSSR](#server-side-rendering) - Server-side rendering
- [getRefElement()](#get-ref-element) - Get ref element

### Server-side rendering

#### Example - Server-side rendering

```ts
import { isSSR } from '@gunnarx2/utils';

if (isSSR) {
  console.log('SSR in action 🔥');
}
```

#### Reference - Server-side rendering

Will return a boolean that indicates if Server-side rendering is present.

```ts
const isSSR: boolean = {};
```

### Get ref element

#### Example - Get ref element

```tsx
import React, { useRef } from 'react';
import { getRefElement } from '@gunnarx2/utils';

const Component = () => {
  const ref = useRef(null);

  useEffect(() => {
    console.log(getRefElement(ref));
  }, []);

  return (
    <div ref={ref} />
  );
};

export default Component;
```

#### Reference - Get ref element

Will return element from ref. If it isn't wrapped in a ref it will return itself.

```ts
const getRefElement = <T>(
  element?: RefObject<Element> | T
): Element | T | undefined | null => {};
```
npm package: @gunnaway/uglify-css
Description: A tool to uglify CSS files by renaming variables and classes
Author: Steven Gunneweg
Latest version: 0.1.4

# Uglify CSS

When building your application, with most frameworks your JS will be minified and/or uglified to reduce the file size as much as possible.

Uglify-CSS is built to do the same but for your CSS.

## Install

```
npm install @gunnaway/uglify-css
```

## Implementation

Uglify-CSS scans all CSS files in the target folder and lists all classes and variables. The variables are then uglified and applied to all html, js and css files in the target folder.

### Command line usage

```
npx uglify-css [--help | -h] [--dry-run | -d] [--path | -p]
```

### Example

```css
:root {
	--color-primary: #ff0000;
}

#test {
	background: var(--color-primary);
}
```

Will turn in to

```css
:root {
	--a: #ff0000;
}

#test {
	background: var(--a);
}
```

In this case this reduces the CSS by 12 characters for every place this variable is used, quickly reducing the CSS file size without changing functionality.

### Caveats

Only classes/variables containing a dash can be replaced at this time. Since uglify-css does a regex replace the risk of replacing too much is too big.

## Tests

In the `tests` folder you will find an Angular, a Vue and a plain HTML application. The content of these apps are identical.
You can run tests yourself by running `npm run test` from one of the projects in the tests folder of this repository.

## Future Improvements

### Sourcemaps

For debugging perposes it would come in handy to have a sourcemap to know what the original name of a class/variable was.
Currently a `uglify-css.map.json` file is generated with key (old) - value (new) pairs.
npm package: @gunner6/ordit-sdk
Description: SDK for simplified interaction with wallet APIs and inscription service
Latest version: 0.0.33

# Ordit-SDK

A TypeScript SDK for Bitcoin and Ordinals.

[![NPM Version](https://img.shields.io/npm/v/@sadoprotocol/ordit-sdk?color=33cd56&logo=npm)](https://www.npmjs.com/package/@sadoprotocol/ordit-sdk)

## Installation

Ordit-SDK is available as a NPM package.

```text
npm install @sadoprotocol/ordit-sdk
```

## Usage

You can interact with Ordit-SDK using `ordit` object exposed from the package.

```text
import { ordit } from '@sadoprotocol/ordit-sdk'
```
npm package: @gunny/perf-test
Description: 性能测试
Author: wuzhitao
Latest version: 0.1.3

# @gunny/perf-test

## 简介

性能测试，控制台查看测试结果。

## 下载

```bash
npm install @gunny/perf-test -D
```

## 使用

```js
import perfTest from "@gunny/perf-test";

function test() {
  // 某些操作
}

// 测试10次
perfTest(10, () => {
  test();
});

// 异步测试
async function asyncTest(done) {
  // 某些异步操作

  done();
}

perfTest.async(10, (done) => {
  asyncTest(done);
});
```
npm package: @gunny/persist
Description: 使用本地存储实现数据持久化，并能设置过期时间和自定义命名空间
Author: wuzhitao
Latest version: 1.0.3

# persist

使用本地存储实现数据持久化，并能设置过期时间和自定义命名空间。

## 安装

```bash
npm install @gunny/persist
```

## 使用

```js
import Persist from "@gunny/persist";

// 创建 Persist 实例
const persist = new Persist("a name");

// 设置
persist.set("logged", true);

// 设置一分钟后过期
persist.set("logged", true, 60);

// 获取登录状态
const logged = persist.get("logged");

// 移除登录状态
persist.remove("logged");

// 清空所有数据
persist.clear();
```
npm package: @gunsch/cjs-to-esm
Description: A commonjs to esm converter.
Author: Chialab
Latest version: 0.19.0-beta.0

<p align="center">
    <strong>CommonJS to ESM</strong> • A commonjs to esm converter, inspired by <a href="https://github.com/preactjs/wmr">WMR</a>.
</p>

<p align="center">
    <a href="https://www.npmjs.com/package/@chialab/cjs-to-esm"><img alt="NPM" src="https://img.shields.io/npm/v/@chialab/cjs-to-esm.svg?style=flat-square"></a>
</p>

---

## Install

```sh
npm i @chialab/cjs-to-esm -D
```

```sh
yarn add @chialab/cjs-to-esm -D
```

## Usage

```js
import { transform } from '@chialab/cjs-to-esm';

const { code, map } = transform('require("tslib"); module.exports = function() {}');
```

---

## License

**CommonJS to ESM** is released under the [MIT](https://github.com/chialab/rna/blob/main/packages/cjs-to-esm/LICENSE) license.