open-index/open-npm huggingface dataset:
npm package: @kratosvn/payment-web-component
Description: SBase Payment Web Component
Author: SBase
Latest version: 1.0.0

# SBase Payment Web Component

A Vue-based web component for handling payments in SBase applications.

## Installation

```bash
npm install @sbase/payment-web-component
```

## Usage

### In HTML
```html
<!-- Import Vue first -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Import the web component -->
<script type="module" src="path/to/vue-payment-app.js"></script>

<!-- Use the component -->
<vue-payment-app
  type="list"
  locale='{"key": "value"}'
  country="US"
  currency="USD"
  cdn-assets="https://cdn.example.com"
  checkout='{"id": "123"}'
  shop='{"id": "456"}'
  init-params='{"product_id": 789}'
></vue-payment-app>
```

### In Vue
```vue
<template>
  <vue-payment-app
    :type="'list'"
    :locale="localeData"
    :country="'US'"
    :currency="'USD'"
    :cdn-assets="cdnUrl"
    :checkout="checkoutData"
    :shop="shopData"
    :init-params="initParams"
  />
</template>

<script setup>
import '@sbase/payment-web-component'

// Your component data
const localeData = {key: 'value'}
const cdnUrl = 'https://cdn.example.com'
const checkoutData = {id: '123'}
const shopData = {id: '456'}
const initParams = {product_id: 789}
</script>
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| type | 'list' \| 'express' \| 'express-cache' | Yes | Payment display type |
| locale | Object | Yes | Localization data |
| country | string | Yes | Country code |
| currency | string | Yes | Currency code |
| cdnAssets | string | Yes | CDN base URL |
| checkout | Object | Yes | Checkout data |
| shop | Object | Yes | Shop data |
| initParams | Object | Yes | Initialization parameters |

## License

MIT
npm package: @krautzource/sre-to-tree
Description: Rewritig speech-rule-engine enriched DOM nodes to a labeled WAI ARIA tree
Author: krautzource
Latest version: 4.0.3

# sre-to-tree

Rewriting [speech-rule-engine](https://github.com/zorkow/speech-rule-engine/)-enriched DOM nodes to a labeled [WAI ARIA tree](https://www.w3.org/TR/wai-aria-1.2/#tree).
npm package: @krayfaus/essentials
Description: A collection of TypeScript utilities.
Author: Italo Cadeu
Latest version: 0.0.2

# Krayfaus' Typescript Essentials

This package is a collection of utilities I find useful when coding in TypeScript.

| Function                | Description                                                 |
| ----------------------- | ----------------------------------------------------------- |
| String.prototype.format | Equivalent* alternative to String literals.                 |
| String.format           | Equivalent* alternative to String literals.                 |
| String.value            | Avoid (string \| undefined) types.                          |
| resolve                 | Resolves a promise (try...catch) and returns [data, error]. |
| wait                    | Sleep worker thread for ``n`` milliseconds.                 |

> \* Slightly faster according to a [performance test](test/string.spec.ts).

## 👨‍🏫 Usage

### ``wait()`` and ``String.format``

```typescript
import '@krayfaus/essentials/extend/string';
import { wait } from '@krayfaus/essentials';

async function withEssentials() {
    const delay = await wait(5000); // Sleep for 5 seconds.
    console.info('Waited for {0}ms.'.format(delay));
}

async function withoutEssentials() {
    const delay = setTimeout(function () {
        /* do something after the timeout */
    }, 5000); // Sleep for 5 seconds.
    console.info(`Waited for ${delay}ms.`);
}
```

### ``resolve()`` and ``String.value()``

```typescript
import axios from 'axios';
import { resolve } from '@krayfaus/essentials';

async function withEssentials() {
    const [response, error] = await resolve(axios.get('/user?ID=12345'));
    if (error) { return handleError(error); }
    const data = String.value(response.data);
    console.log(data);
}

async function withoutEssentials() {
    try {
        const response = await axios.get('/user?ID=12345');
        const data = response.data?.toString() || '';
        console.log(data);
    } catch (error) {
        /* error handling */
    }
}
```

## ⚠️ Disclaimer

The code provided here is opinionated, you may like to write code differently and that's okay.

Feel free to take stuff you find useful from here.

Good luck on your projects!

## 📝 License

This repository is available under the [MIT](https://opensource.org/licenses/MIT) license.
npm package: @krazyphish/earth
Description: A simpler module for GIS based on [cesium](https://www.npmjs.com/package/cesium), [turf](https://www.npmjs.com/package/@turf/turf).
Author: KrazyPhish
Latest version: 1.0.4

## @krazyphish/earth

A simpler module for GIS based on [cesium](https://www.npmjs.com/package/cesium), [turf](https://www.npmjs.com/package/@turf/turf).

### Before start

Before start using this module, install packages blow manually: [cesium](https://www.npmjs.com/package/cesium).

Then install this module:

```shell
npm install @krazyphish/earth
```

### Get started

```html
<div id="GisContainer" class="relative w-full h-full"></div>
```

```ts
// in your main.ts or main.tsx
// import the style sheet
import "@krazyphish/earth/style.css"
```

```ts
// in your map module, when initializing the cesium viewer
import { type Earth, createEarth } from "@krazyphish/earth"

const earth: Earth = createEarth()
```
npm package: @krazyphish/earth-plugins
Description: Plugins for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).
Author: KrazyPhish
Latest version: 1.0.2

## @krazyphish/earth-plugins

Plugins for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

### Before start

Before start using this module, install packages blow manually: [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

Then install this module:

```shell
npm install @krazyphish/earth-plugins
```

### Get started

To use plugin echarts overlay:

```ts
// in your map module, when initializing the cesium viewer
import { type Earth, createEarth } from "@krazyphish/earth"
import { registerEChartsOverlay, EChartsOverlay } from "@krazyphish/earth-plugins"

const earth: Earth = createEarth()

// register echarts overlay, to syncronize the coordinate with cesium viewer
registerEChartsOverlay(earth)

// then create the echarts overlay
const overlay = new EChartsOverlay(earth, {
  option: {
    /** your echarts option */
  },
})
```
npm package: @krazyphish/earth-react
Description: React hooks for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).
Author: KrazyPhish
Latest version: 1.0.2

## @krazyphish/earth-react

React hooks for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

### Before start

Before start using this module, install packages blow manually: [cesium](https://www.npmjs.com/package/cesium), [react](https://www.npmjs.com/package/react), [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

Then install this module:

```shell
npm install @krazyphish/earth-react
```

### Get started

```tsx
// in your map module, when initializing the cesium viewer
import { useEffect, useRef, type FC, type RefObject } from "react"
import { type Earth } from "@krazyphish/earth"
import { useEarth } from "@krazyphish/earth-react"

export default (): FC => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const earthRef: RefObject<Earth | null> = useEarth(containerRef)

  useEffect(() => {
    if (!earthRef.current) return
    //doing some job
    return () => {
      //do not try to recycle the earth or destroy any other components
      //useEarth hook or other components hooks will do it for you
    }
  }, [])

  return (
    <>
      <div ref={containerRef}></div>
    </>
  )
}
```
npm package: @krazyphish/earth-vue
Description: Vue3 hooks for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).
Author: KrazyPhish
Latest version: 1.0.2

## @krazyphish/earth-vue

Vue3 hooks for module [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

### Before start

Before start using this module, install packages blow manually: [cesium](https://www.npmjs.com/package/cesium), [vue](https://www.npmjs.com/package/vue), [@krazyphish/earth](https://www.npmjs.com/package/@krazyphish/earth).

Then install this module:

```shell
npm install @krazyphish/earth-vue
```

### Get started

```html
<template>
  <div ref="container" class="w-full h-full"></div>
</template>

<script lang="ts" setup>
  // in your map module, when initializing the cesium viewer
  import { type Earth } from "@krazyphish/earth"
  import { useEarth } from "@krazyphish/earth-vue"
  import { onMounted, onUnmounted, useTemplateRef, type ShallowRef } from "vue"

  const containerRef = useTemplateRef("container")
  const earthRef: ShallowRef<Earth | null> = useEarth(containerRef)

  onMounted(() => {
    if (!earthRef.value) return
    //doing some job
  })

  onUnmounted(() => {
    //do not try to recycle the earth or destroy any other components
    //useEarth hook or other components hooks will do it for you
  })
</script>
```