open-index/open-npm huggingface dataset:
npm package: @pandevim/barley
Description: Design System for thedarkale.com
Latest version: 0.0.1

# Barley

```bash
$ docker run --interactive --tty \
--name thedarkale \
--mount type=bind,source=`pwd`,target=/app \
--publish 3333:3333 \
pandevim/web
```

```bash
/app$ npm init stencil
/app$ # barley (component)
```

```bash
/app/barley$ yarn 
/app/barley$ yarn start
```

```bash
$ docker exec -it thedarkale bash
/app$ cd barley
/app/barley$ yarn generate
```
npm package: @pandevim/int333
Description: Stencil Component Starter
Latest version: 0.0.3

# int333
| VERSION | REPOSITORY
| - | - 
| 0.0.3 | https://github.com/pandevim/int333/

## Run

```bash
$ # Test
$ docker exec -it web-components bash
/app/int333 $ yarn test
```
```bash
$ # Start the local server
$ docker exec -it web-components bash
/app/int333 $ yarn start
```
```bash
$ # Build the component
$ docker exec -it web-components bash
/app/int333 $ yarn build
```


## Using this component

### Development
- Put a script tag similar to these in the head of your index.html 
```html
<script type="module" src="/build/int333.esm.js"></script>
<script nomodule="" src="/build/int333.js"></script>
```
- Then you can use the element anywhere in your template, JSX, html etc


### Node Modules
- Run `npm i @pandevim/int333`
- Put a script tag similar to these in the head of your index.html
```html
<script type="module" src="@pandevim/int333@VERSION/dist/index.mjs"></script>
<script nomodule="" src="@pandevim/int333@VERSION/dist/index.js"></script>
```
- Then you can use the element anywhere in your template, JSX, html etc

### Script Tag
- Put a script tag similar to these in the head of your index.html 
```html
<script type="module" src="https://unpkg.com/@pandevim/int333@VERSION/dist/index.mjs"></script>
<script nomodule="" src="https://unpkg.com/@pandevim/int333@VERSION/dist/index.js"></script>
```
- Then you can use the element anywhere in your template, JSX, html etc
npm package: @pandevmonium/schematics
Description: ramiroasl schematics collection.
Author: Ramiro Sanchez
Latest version: 1.0.0-alpha.3

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with
```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @pandicode/use-fetch-data
Description: Handle For Pandicode Fetch
Author: aliozkan
Latest version: 1.0.2

# @pandicode/use-fetch-data

> Handle For Pandicode Fetch

[![NPM](https://img.shields.io/npm/v/@pandicode/use-fetch-data.svg)](https://www.npmjs.com/package/@pandicode/use-fetch-data) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @pandicode/use-fetch-data
```

## Usage

```tsx
import * as React from 'react'

import { useMyHook } from '@pandicode/use-fetch-data'

const Example = () => {
  const example = useMyHook()
  return (
    <div>
      {example}
    </div>
  )
}
```

## License

MIT © [aliozkan](https://github.com/aliozkan)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @pandiyancool/angular-clipboard-auto
Description: ## Installation
Author: Pandiyan Murugan
Latest version: 0.1.0

# @pandiyancool/angular-clipboard-auto

## Installation

To install this library, run:

```bash
$ npm install @pandiyancool/angular-clipboard-auto --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install @pandiyancool/angular-clipboard-auto
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { ClipboardModule } from '@pandiyancool/angular-clipboard-auto';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>
```

## Development

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

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Pandiyan Murugan](mailto:pandiyanit7@gmail.com)
npm package: @pandolajs/animation
Description: A lightweight animation javascript libaray based on requestAnimationFrame
Author: sizhao
Latest version: 1.0.0

# Animation

A very small and simple but powerful animation javascript library.

## Usage

- ES6 and beyond

```javascript

// common use
import animation from '@pandolajs/animation'

const ele = document.querySelector('#test')

animation(400, (progress) => {
  ele.style.width = `${200 * progress}px`
}, () => {
  ele.style.width = '200px'
}, 'linear')

// with more options
import { Animation } from '@pandolajs/animation'

const ani = new Animation({
  duration: 400,
  delay: 0,
  easing: 'easeOutQuad',
  onStart () {
    // when animation is start
  },
  onStep (progress) {
    // progress is value between 0 and 1 computed by ease function
    // do something with progress
  },
  onComplete () {
    // do something when animation is finished.
  }
})
```

## APIs

### common usage

- `animation(duration, onStep, onComplete, easing)`

  - @param `duration` | Number | default: 400ms | Specifies the time of animation execution in milliseconds
  - @param `onStep` | Function | default: () => {} | the callback when animation is in process, and is executed with a value between 0 and 1 as the only parameter that indicate the progress of the animation.
  - @param `onComplete` | Function | default: () => {} | the callback when animation is completed.
  - @param `easing` | Function or String | default: 'easeOutQuad' | specify the ease method of animation. More available value can be found [here](../easing/README.md)

  - @return this method will return a `Animation` instance.

### Class Animation

- `constructor(options)`

  - @param options.duration
  - @param options.delay
  - @param options.easing
  - @param options.onStart
  - @param options.onStep
  - @param options.onComplete

- `stop()` force stop the animation.

- `pause()` pause the animation.

- `resume` resume the animation.
npm package: @pandolajs/animationframe
Description: A window.requestAnimationFrame and window.cancelAnimationFrame compatible libaray.
Author: sizhao
Latest version: 1.0.0

# animationFrame

A requestAnimationFrame and cancelAnimationFrame compatible javascript library which provide base support for the `animation`.

## Usage

### ES6 and beyond

```javascript
  import animationFrame from '@pandolajs/animationframe'

  const { raf, caf, highResTimestamp } = animationFrame

  // raf: requestAnimationFrame
  // caf: cancelAnimationFrame
  // highResTimestamp
```

### UMD

```html
  <script src="https://path.to.animationframe" />
  <script>
    window.animationFrame.raf()
    window.animationFrame.caf()
    window.animationFrame.highResTimestamp()
  </script>
```

### APIs

{
  raf: Function | window.requestAnimationFrame
  caf: Function | window.cancelAnimationFrame
  highResTimestamp: Function | window.performance.now()
}
npm package: @pandolajs/classnames
Description: A simple JavaScript utility for conditionally joining classNames together for CSS Modules.
Author: sizhao
Latest version: 1.0.0

# classnames

A simple JavaScript utility for conditionally joining classNames together for CSS Modules.

## Usage

### Step 1: install the package

```bash
  npm i @pandolajs/classnames
```

### Step 2: import

```js
  import classnames from '@pandolajs/classnames'
  import styles from 'path/to/style/file'

  const jsx = (<div className={styles, { foo: true, bar: condition }} />)
```

## API

### classnames(cssModules: ?CSSModules, props: ?{[string]: condition | boolean}, ...extra?: any[])

- cssModules: CSSModules, optional

This is an object of CSS Modules

- props: {[string]: condition | boolean}, required

- extra: string, optional
npm package: @pandolajs/pandora-boilerplate-boilerplate
Description: A boilerplate to create pandora boilerplate
Author: sizhao
Latest version: 1.0.0

# pandora-boilerplate-boilerplate

A boilerplate to create a empty pandora boilerplate.

## Usage

- 全局安装 pandora-cli

```
  npm i -g pandora-cli
```

- 初始化脚手架

```
  pa init pandora-boilerplate-react -b @pandolajs/pandora-boilerplate-boilerplate
```

> 结果是使用 `@pandolajs/pandora-boilerplate-boilerplate` 初始化一个空的项目脚手架 `pandora-boilerplate-react`
npm package: @pandolajs/pandora-boilerplate-react
Description: react spa project
Author: sizhao
Latest version: 1.2.2

# pandora-boilerplate-react

React SPA project boilerplate for pandolajs.

## Feature

- [x] viewport layout. found more details [here](https://www.w3cplus.com/css/vw-for-layout.html)
- [x] React 16.5 +
- [x] Redux
- [x] eslint
- [x] Less
- [x] local mock
- [x] universal router. found more details [here](https://github.com/pandolajs/generator-pandora-app/blob/master/docs/isomorphic-router.md)

## 初始化项目

### 全局安装 `pandora-cli` 构建工具

```bash
  npm i -g pandora-cli
```

### 安装项目依赖

```bash
  npm i
```

### 启动开发环境

```bash
  pa start
```

### 构建生产(prod) | 预发(pre) | 测试环境(test) 代码

```bash
  pa build --env prod
```

## 开发指南

### 目录结构介绍

```bash
  .
  ├── mock                    // mock 数据目录
  └── src
      ├── common              // 通用目录
      ├── components          // 组件目录
      ├── pages               // 页面目录
      ├── routes              // 前端路由目录
      └── services            // 接口封装目录
```

### 开发规范

- 视图组件位于 components 目录中，可复用，数据只能通过 props 进行传入，一般在 pages 中使用，不可在 routes 中直接引用这类型组件

- 容器组件位于 pages 目录中，通常在 routes 中使用, 禁止在容器组件中直接调用 services 接口

- serveices 后端接口封装层，所有与后端接口交互的逻辑均在此目录中进行封装，完成数据组装，格式化后，在 routes 层进行数据与组件的组装

- routes 用来定义页面路由，完成数据层与视图层的组装

- mock 用来定义后端接口 mock 数据

### routes 定义

每个路由都是一个如下格式的对象

```javascript
  {
    path: '/home/:name',
    action (context, params) {
      return {
        title: 'page title',
        component: (<Page someprops={...} />)
      }
    }
  }
```

> Note: more details read [here](https://www.kriasoft.com/universal-router/api)

### mock 定义

没有后端接口定义一个 mock 文件，格式如下：

```javascript
  {
    path: 'get::/backend/mock/api',
    action (context) {
      return {
        key: 'the data you want to define'
      }
    }
  }
```

定义好 mock 数据就可以在 services 中，通过 fetch('/backend/mock/api', { ...some params }) 方法来获取 mock 数据

如果同一个项目中的不同接口请求的域名不一样，需要可能直接使用线上 mock server 则可以在 config/app.yaml 中配置 host 和 proxy, 详见如下讲解。

### others

- 目前项目中存在一个全局变量 `_DEV_` 用来表示是否为开发环境，如果未开发环境 `_DEV_` 为 `true`, 否则为 `false`

- 如果项目在 config/app.yaml 中配置了 baseUrl 为 `open`， 则所有在 routes 中定义的路由均需加此前缀才能访问，有如下路由定义：

```javascript
  {
    path: '/',
    action () {
      // some code
    }
  }
```

在项目启动后，需要在浏览器中通过 `http://localhost:8080/open` 才能访问到, 同时，通过 history.push 或者 history.replace 进行路由跳转的时候，也不需要添加该前缀，直接 `history.push('/')` 即可跳转到 `/open` 下。

## config/app.yaml 配置详解

app.yaml 中可以添加任意自定义配置字段，内置字段如下：

- name: 项目名

- baseUrl: 项目启动后的 path 前缀，比如项目下的所有页面都位于 /test/ 此目录下，则可以配置 '/test', 否则直接配置 '' 即可

- development / test / preproduction / production: 该字段下的配置为对应环境下的配置，如配置如下字段：

```yaml
development:
  host: 'a'
test:
  host: 'b'
preproduction:
  host: 'c'
production:
  host: 'd'
```

当已开发环境启动时，将构建为如下结果：

```javascript
{
  host: 'a'
}
```

其他环境以此类推，所以在项目中使用时，直接应用 host 即可，不需要修改源码来适配环境的切换，bug 更少

- host: 可以是一个数组，也可以是一个字符串

当项目中的所有接口都在同一个域名下，直接提供一个字符串即可，如果接口请求的与页面的域名一致，则直接设置 '/' 或者 ''

如果当前项目下不同接口请求的域名不一样（跨域自行解决）, 则可以提供一个数组:

形式如下：

```yaml
  - <regStr>: <host>
```

其中 `<regStr>` 为对应接口的正则字符串，`<host>` 为对应的域名

- proxy: 仅需在 development 下配置，用来配置 dev-server 的代理，用来将对应的接口代理到其他服务器下，比如：我需要 a 接口请求某 mock 服务器而非本地 mock server
npm package: @pandolajs/pandora-boilerplate-wechat-plugin
Description: A boilerplate to create wechat miniprogram plugin project.
Author: sizhao
Latest version: 0.1.1

# pandora-boilerplate-wechat-plugin

初始化小程序插件开发项目。

## Usage

- 全局安装 `pandora-cli` (推荐)

```bash
  npm i -g pandora-cli
```

- 初始化项目，按照提示输入 AppId

```bash
  pa init wx-plugin-demo
```

- 启动项目

```bash
  pa start
```

> `pa start` 启动开发模式，进入监听状态

- 构建指定环境代码

```bash
  pa build --env prod
```

> `--env` 可选值 test, pre, prod

- 发布

```bash
  pa release <version-type> -m <comments>
```

> `<version-type>` 可选值 `patch`, `minor`, `major`
> `<comments>` 为本次发布描述，必填

### 项目结构介绍

```bash
  .
  ├── config
  │   └── app.yaml            // 多环境配置
  ├── icons                   // examples 中使用的 icons 图标位置
  ├── dist                    // 构建后的目录
  │   ├── examples            // 构建后的 examples
  │   └── plugin              // 构建后的 plugins
  ├── doc                     // 插件文档
  │   └── README.md
  ├── examples                // examples 源码，用来调试插件
  └── src                     // plugin 源码
  │   ├── components
  │   ├── pages
  │   ├── index.js
  │   └── plugin.json
  ├── scripts                 // 构建脚本
  ├── build.config.js         // 别名配置
  ├── project.config.json     // 小程序插件项目配置
  ├── package.json
  └── README.md
```
npm package: @pandres95/differ
Description: wraps objects and arrays and keeps track of global changes around wrapped objects
Author: Pablo Dorado
Latest version: 1.1.4
Deprecated: superseed by @bloque/differ

# Differ

[![Check](https://github.com/bloque-app/differ/actions/workflows/check.yml/badge.svg)](https://github.com/bloque-app/differ/actions/workflows/check.yml)

This library allows wrapping up objects to track whether they have changed or
not. It uses [`jsum`](github.com/fraunhoferfokus/JSum) to calculate the checksum
of an object.

## Installation

This library should be able to run under any Node.js version, but we strongly
encourage using the latest LTS version or a more recent one.

```sh
npm install @bloque/differ
```

## Usage

```js
import { differ, hasChanged } from "@bloque/differ";

const target = differ({
  a: 1,
  b: "orange",
});

console.log(hasChanged(target)); // false

a = 2;

console.log(hasChanged(target)); // true

a = 1;

console.log(hasChanged(target)); // false
```

### `differAll`

It also supports managing lists, using the `differAll` method, to determine
whether the items in the list are new.

```js
import { differAll, hasChanged, isNew } from "@bloque/differ";

const list = differAll([
  { a: 1 },
]);

list.push({ a: 2 });

console.log(isNew(list[0])); // false
console.log(isNew(list[1])); // true

list[1].a = 3;

console.log(hasChanged(list[1])); // true
```

### Serialization

If needed, it's possible to use the methods inside `Serializers` to save a
differ object so you can store it outside your program and then rebuild it to
match the state it was in before.

```ts
import { Serializers } from "@bloque/differ";

const target = differ({
  a: 1,
  b: 2,
});

target.b = 3;

const serialized = JSON.stringify(target, Serializers.replacer);
const reconstructed = JSON.stringify(target, Serializers.reviver);

console.log(hasChanged(reconstructed)); // true

target.b = 2;
console.log(hasChanged(reconstructed)); // true
reconstructed.b = 2;
console.log(hasChanged(reconstructed)); // false
```

## Development

### Local setup

To set it up on your local machine, you'll need the latest version of Node.js.

```sh
git clone https://github.com/bloque-app/differ.git
cd differ
npm install
npm run build
```

### Testing

To check tests, run:

```sh
npm test
```
npm package: @pandres95/pomodoro
Description: Get to work. Use this CLI tool to make your pomodoros work.
Author: Pablo Andrés Dorado Suárez
Latest version: 1.1.3

# Pomodoro via CLI

Get to work. Use this CLI tool to make your pomodoros work.

_Pomodoro_ lets you customize a set of reminders to appropiately use the technique your own style. Also (on MacOS) it enables the DND mode, so nothing disturbs you.

## Install

```
npm i -g @pandres95/pomodoro
```

## Usage

Get help using the following command.

```
pomodoro -h
```

You'll find something like this.

```
  Usage: pomodoro [options] [command]

  Get to work. Use this CLI tool to make your pomodoros work.

  Pomodoro lets you customize a set of reminders to appropiately use the technique your own style. Also (on MacOS) it enables the DND mode, so nothing disturbs you.

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    stop           stops the application
    start          starts the pomodoro process
    help [cmd]     display help for [cmd]
```

### Start

Starts the whole process. There are several options to configure your work mode.

```
  Usage: pomodoro-start [options]

  Options:

    -w --work-duration <value>        Set the duration a pomodoro slot should last. Defaults to 25 minutes (default: 25)
    -b --break-duration <value>       Set the duration to take on each break slot. Defaults to 5 minutes (default: 5)
    -B --long-break-duration <value>  Set the rest time to take every <i> pomodoros. Defaults to 15 minutes (default: 15)
    -i --iterations <value>           Set the number of pomodoros before a long break. Defaults to 4 (default: 4)
    -h, --help                        output usage information
```

### Stop

Ends an open pomodoro process. It takes no arguments.

```
  Usage: pomodoro-stop [options]

  Options:

    -h, --help  output usage information
```

## License

[MIT License](LICENSE)
npm package: @pandudud/react-native-geocoder
Description: react native geocoding and reverse geocoding
Author: devfd
Latest version: 0.5.9

# react-native-geocoder

[![CircleCI](https://circleci.com/gh/devfd/react-native-geocoder/tree/master.svg?style=shield)](https://circleci.com/gh/devfd/react-native-geocoder/tree/master)

geocoding services for react native

## Install

```
npm install @pandudud/react-native-geocoder
```

## Usage

```
import Geocoder from '@pandudud/react-native-geocoder';

// Position Geocoding
var NY = {
  lat: 40.7809261,
  lng: -73.9637594
};

Geocoder.geocodePosition(NY).then(res => {
    // res is an Array of geocoding object (see below)
})
.catch(err => console.log(err))

// Address Geocoding
Geocoder.geocodeAddress('New York').then(res => {
    // res is an Array of geocoding object (see below)
})
.catch(err => console.log(err))
```

## Fallback to google maps geocoding

Geocoding services might not be included in some Android devices (Kindle, some 4.1 devices, non-google devices). For those special cases the lib can fallback to the [online google maps geocoding service](https://developers.google.com/maps/documentation/geocoding/intro#Geocoding)

```js
import Geocoder from "@pandudud/react-native-geocoder";
// simply add your google key
Geocoder.fallbackToGoogle(MY_KEY);

// use the lib as usual
let ret = await Geocoder.geocodePosition({ lat, lng });
// you get the same results
```

## With async / await

```
try {

    const res = await Geocoder.geocodePosition(NY);
    ...

    const res = await Geocoder.geocodeAddress('London');
    ...
}
catch(err) {
    console.log(err);
}
```

## Geocoding object format

both iOS and Android will return the following object:

```js
{
    position: {lat, lng},
    formattedAddress: String, // the full address
    feature: String | null, // ex Yosemite Park, Eiffel Tower
    streetNumber: String | null,
    streetName: String | null,
    postalCode: String | null,
    locality: String | null, // city name
    country: String,
    countryCode: String
    adminArea: String | null
    subAdminArea: String | null,
    subLocality: String | null
}
```

## Notes

### iOS

iOS does not allow sending multiple geocoding requests simultaneously, hence if you send a second call, the first one will be cancelled.

### Android

geocoding may not work on older android devices (4.1) and will not work if Google play services are not available.
npm package: @pandurang-zure/zure-ui
Description: Reusable UI components
Author: Pandurang Zure
Latest version: 1.0.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
npm package: @panduwijayasaputra/next-shield
Description: The shield that every Next.js project needs.
Author: Jorge Acero
Latest version: 0.0.1

<p align="center">
  <img alt="Gatsby GastbyFire" src="./images/nextshield.png" width="300" />
</p>
<h1 align="center">
  NextShield
</h1>

😉 The shield that every Next.js app needs.

## Motivation

After creating a lot of apps with the same boilerplate code for authentication & authorization I realized that I hate dealing with it, so I create this package to never face the same frustrating situation again.

## Philosophy

- Never deal with auth code again.
- Never hardcode a redirect, let your state handle it for you.
- Easy To Use.

## Features

- No Flashy Content.
- RBAC.
- Completely Agnostic.

## Documentation

You can find the documentation at the [official website](https://imjulianeral.github.io/next-shield/).

<!-- ## Examples

[Firebase Example](https://github.com/imjulianeral/next-shield/tree/main/example/ts-fire-example) -->