open-index/open-npm huggingface dataset:
npm package: @kurtharriger/wdio-repl
Description: Webdriver.io REPL
Author: Kurt Harriger
Latest version: 0.1.2

# Webdriver REPL

This enables starting a javascript repl in a running webdriver test.
## Demo Video
[![](https://i.ytimg.com/vi/kdM05ChhLQE/hqdefault.jpg)](https://www.youtube.com/watch?v=kdM05ChhLQE)

npm install @kurtharriger/wdio-repl

## Create and start a WdioRepl server from your test

See docs/example.js


## Configuring atom


```
apm install Hydrogen

```


`npm install -g @kurtharriger/wdio-repl`

    If you do not want to install globally use a full path to wdio-kernel in
    the kernel spec below. If you want to run from source `npm link` will add
    wdio-kenel to path.

Open Atom Preferences:  
Select Packages  
Search for Hydrogen  
Click Settings  
Paste the following into the `Kernel Specs` setting:  

```
{
  "kernelspecs": {
    "wdio-repl": {
      "spec": {
        "language": "javascript",
        "display_name": "Connect to a javascript server",
        "env": {},
        "argv": [
          "wdio-kernel",
          "--server=http://localhost:6001"
          "{connection_file}",
          "--protocol=5.0"
        ]
      }
    }
  }
}
```
npm package: @kurtliao/vue-infinite-scroll
Description: A minimal infinite scroll directive for vue/vue3
Author: kurt-liao
Latest version: 0.0.6

<img src="./assets/logo.svg" />

<div align="center">
  <img src="https://img.shields.io/npm/v/@kurtliao/vue-infinite-scroll?style=for-the-badge"/>
  <img src="https://img.shields.io/npm/l/@kurtliao/vue-infinite-scroll?style=for-the-badge"/>
  <img src="https://img.shields.io/bundlephobia/min/@kurtliao/vue-infinite-scroll?style=for-the-badge" />
</div>

## Installation

```
npm install @kurtliao/vue-infinite-scroll

or

yarn add @kurtliao/vue-infinite-scroll
```

## Usage

### Import globally
```js

import InfiniteScroll from "@kurtliao/vue-infinite-scroll";

const app = createApp(App);

app.directive("InfiniteScroll", InfiniteScroll);
```

### Simple

```vue

<template>
  <ul class="list" v-infinite-scroll="loadMore">
    <li class="row" v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const loadMore = () => {
  // call your api here to load more data
}

</script>

<style>
.list {
  height: 300px;
  overflow: auto; // make sure the element has overflow style
}

.row {
  height: 200px;
}

</style>

```

### Optional

`infinite-scroll-disabled`

```vue
<template>
  <ul class="list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="hasNoMore">
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const hasNoMore = ref(false)

const loadMore = () => {
  // call your api here to load more data
  ...
  
  // if no more data
  hasNoMore.value = true
}

</script>
```

`infinite-scroll-delay`

```vue
<template>
  <!-- set delay for throttle milliseconds, default is 300ms -->
  <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-delay="1000">
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const loadMore = () => {
  // call your api here to load more data
  ...
}

</script>
```
npm package: @kuru-studio/design
Description: Our very own design system.
Author: Kuru Studio
Latest version: 1.0.7

# Kuru Studio Design

Our very own design system. Inspired by [Ant Design](https://ant.design/)!

# Install to your projects
```
# Open your default terminal and run the following
➜ yarn install kuru-studio-design                         # Install using yarn
```

# Install locally for development
```
# Open your default terminal and run the following
➜ cd ~/kuru-studio-design                                 # Change directory to kuru-studio-design
➜ yarn link                                               # Setup for symlink

➜ cd ~/kuru-studio-social-web                             # Change directory to kuru-studio-social-web
➜ yarn link kuru-studio-design                            # Link kuru-studio-design

➜ cd ~/kuru-studio-social-web/node_modules/react          # Change directory to react
➜ yarn link                                               # Setup for symlink

➜ cd ~/kuru-studio-social-web/node_modules/react-dom      # Change directory to react-dom
➜ yarn link                                               # Setup for symlink

➜ cd ~/kuru-studio-design                                 # Change directory to kuru-studio-design
➜ yarn link react                                         # Link react
➜ yarn link react-dom                                     # Link react-dom
```

## License

MIT © [Kuru Studio](https://github.com/kuru-studio)
npm package: @kurukururuu/ramen-adonis-pagination-component
Description: Vue.js Pagination Component for ordentid/ramen-adonis backend service.
Author: kurukururuu
Latest version: 0.1.12

# ramen-pagination-template
Vue.js Pagination Component for [ordentid/ramen-adonis](https://github.com/ordentid/ramen-adonis) backend service.

## Installation
```
npm install @kurukururuu/ramen-adonis-pagination-component
```

## Usage
* Import directly on your template
```javascript
import PaginationComponent from '@kurukururuu/ramen-adonis-pagination-component'
export default {
	// ...
	components: {
		PaginationComponent
	}
	// ...
}
```
* Use Nuxt.js plugin
```javascript
// '/plugin/RamenPaginationTemplate.js'
import Vue from 'vue'
import PaginationComponent from '@kurukururuu/ramen-adonis-pagination-component';
Vue.use(PaginationComponent)
```

## Example Usage
```html
<!-- 'YourPage.vue' -->
<template>
	<PaginationComponent
		:data="list"
		text-nav
		@pagechanged="paginationChanged"
		/>
</template>
```

## Options
| Property Name 	|  Type  	|                        Description                       	|  Default 	|
|:-------------:	|:------:	|:--------------------------------------------------------:	|:--------:	|
| data        		| Object 	| required; {data: Object, pagination: Object} from ramen-rest response	    	| none  |
| textNav     		| Boolean | navigation label. true for text-based, or false for symbol				  	| false |
| firstText     	| String 	| custom label for first page		                            | First Page 	|
| lastText  			| String 	| custom label for last page	                         			| Last Page 	|
| prevText    		| String 	| custom label for previous button                          | Previous   	|
| nextText    		| String 	| custom label for next button            									| Next	     	|
| emptyText 			| String 	| custom text when data is empty									         	| No Data Available	|

## Listeners
| Listener Name 	|  Type  	|                        Description                       	|  Default 	|
|:-------------:	|:------:	|:--------------------------------------------------------:	|:--------:	|
| pageChanged  		| function 	| handler function after page is changed. No default handler. Object passed to the listener are {action:'previous / next / page-changed',page_destination:Number(page)}	|   |

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @kurzalle/rn-date-range-picker
Description: Date range picker for React Native applications
Author: Andrew Shortall
Latest version: 0.1.0

# @kurzalle/rn-date-range-picker

Date range picker for React Native applications

<img src="example/assets/screenshot.png" alt="React Native date range picker IOS" height="400px" />

## Installation

```sh
npm install @kurzalle/rn-date-range-picker
```

## Usage

```js
import DateRangePicker, {
  type DateChangeEvent,
  type DateRange,
  type SupportedLocale,
} from '@kurzalle/rn-date-range-picker';

const startDate = new Date();
startDate.setDate(startDate.getDate() - 5);
const endDate = new Date();
const dates = { startDate, endDate };

export default function App() {
  const [dateFilter, setDateFilter] = useState<DateRange>(dates);

  const setRange = (value: DateChangeEvent) => {
    const event = value as DateRange;
    if (event.startDate && event.endDate) {
      return setDateFilter({
        startDate: event.startDate,
        endDate: event.endDate,
      });
    }
    if (event.startDate) {
      return setDateFilter({
        startDate: event.startDate,
        endDate: null,
      });
    }
    if (event.endDate) {
      return setDateFilter({
        startDate: dateFilter.startDate,
        endDate: event.endDate,
      });
    }
  };

  return (
    <View style={styles.container}>
      <DateRangePicker
        value={{ startDate, endDate }}
        range={true}
        onChange={setRange}
      />
    </View>
  );
}
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @kusainovv/react-clippy
Description: A modern React TypeScript rewrite of Clippy.js – bring nostalgia to your UI with animated agents like Clippy, running with zero dependencies and React 18+ support.
Author: kusainovv
Latest version: 1.1.27

# 🧞 react-clippy

A modern React TypeScript rewrite of Clippy.js – bring nostalgia to your UI with animated agents like Clippy, running with zero dependencies and React 18+ support.

> ✨ Built with performance in mind. Lightweight, fast, and plug-n-play.

<img width="235" alt="image" src="https://github.com/user-attachments/assets/b8e9bd0e-994c-4f85-b20e-0e2884b0ea1a" />

---

## 📦 Installation

```bash
npm install @kusainovv/react-clippy
```

<br />

## ⚙️ Usage
```typescript
import { useEffect } from 'react'
import { Load } from '@kusainovv/react-clippy'

function App() {
  useEffect(() => {
    new Load('Clippy', (agent) => {
      agent.show()
      agent.speak("Hey there! I'm Clippy in React.")
    })
  }, [])

  return <></> // or your existing UI
}
```

<br />

## 🙏 Credits

This project includes media assets (agent animations, sounds, and sprites) originally created by the amazing [ClippyJS project by @pi0](https://github.com/pi0/clippyjs).  
All visual and sound assets used in `@kusainovv/react-clippy` were sourced from [clippyjs](https://github.com/pi0/clippyjs), which brought the iconic Clippy agent to life on the web.

**Huge thanks to [@pi0](https://github.com/pi0)** for preserving this nostalgic gem and making it publicly available.

> If you use this package, please consider starring the original repo as well 💖