open-index/open-npm huggingface dataset:
npm package: @hg-ui/big-data-design
Description: A Component Library for Vue.js.
Latest version: 1.1.4

## 快速上手

如何在项目中使用 big-data-design

### 引入 big-data-design

你可以引入整个 big-data-design，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 big-data-design。

#### 完整引入

在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import SnDesign from '@hg-ui/big-data-design';
import '@hg-ui/big-data-design/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(SnDesign);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

以上代码便完成了 big-data-design 的引入。需要注意的是，样式文件需要单独引入。

#### 按需引入

借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

```bash
npm install babel-plugin-component -D
```

然后，将 .babelrc 修改为：

```json
{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "@hg-ui/big-data-design",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```

接下来，如果你只希望引入部分组件，比如 Button 和 Input，那么需要在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import { Button, Input } from '@hg-ui/big-data-design';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Input.name, Input);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Input)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
```

### 全局配置

在引入 SnUIElement 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 SnUIElement 的方式，具体操作如下：

完整引入 SnUIElement：

```js
import Vue from 'vue';
import SnDesign from '@hg-ui/big-data-design';
Vue.use(SnDesign, { size: 'small', zIndex: 3000 });
```

按需引入 Element：

```js
import Vue from 'vue';
import { Button } from '@hg-ui/big-data-design';

Vue.prototype.$SNDESIGN = { size: 'small', zIndex: 3000 };
Vue.use(Button);
```

按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

### 开始使用

至此，一个基于 Vue 和 big-data-design 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
npm package: @hg8496/gridvis-client
Description: A library to access all GridVis data
Author: hg8496@cstolz.de
Latest version: 1.3.7

# gridvis-client
[![NPM version](https://img.shields.io/npm/v/@hg8496/gridvis-client.svg)](https://www.npmjs.com/package/@hg8496/gridvis-client)
[![Build Status](https://travis-ci.org/hg8496/gridvis-client.svg?branch=master)](https://travis-ci.org/hg8496/gridvis-client)
[![Coverage Status](https://coveralls.io/repos/github/hg8496/gridvis-client/badge.svg?branch=master)](https://coveralls.io/github/hg8496/gridvis-client?branch=master)

A node js library to access the Janitza GridVis REST interface.

```typescript
import { GridVisClient } from '@hg8496/gridvis-client';

async function main() {
    const client = new GridVisClient({url: ""});
    return await client.fetchGridVisVersion();
}

main().then((version) => {
    console.log(version)
});
```

## CLI
A cli is also included. To obtain some information or statistics.
To see statistic of last months events for a given device call:
```bash
$ gridvis-client events https://gridvis-energy.com DemoProject 92 -s NAMED_LastYear -e NAMED_LastYear
VoltageUnder: 7

```
npm package: @hg8496/umgfinder
Description: A tool to find all Janitza UMGs in the specified network
Author: hg8496@cstolz.de
Latest version: 2.1.2

# umgfinder
[![NPM version](https://img.shields.io/npm/v/@hg8496/umgfinder.svg)](https://www.npmjs.com/package/@hg8496/umgfinder)
[![Build Status](https://travis-ci.org/hg8496/umgfinder.svg?branch=master)](https://travis-ci.org/hg8496/umgfinder)
[![Coverage Status](https://coveralls.io/repos/github/hg8496/umgfinder/badge.svg?branch=master)](https://coveralls.io/github/hg8496/umgfinder?branch=master)

A node js library to find all ethernet based Janitza UMGs in the specified network.

```typescript
import { scanNetwork } from '@hg8496/umgfinder';

async function main() {
    return await scanNetwork(process.argv[2]);
}

main().then((devices) => {
    devices.forEach((device) => {
        console.log(device.deviceType, device.ip, device.serialNumber, device.firmwareVersion)
    })
});
```
npm package: @hgargg-0710/one
Description: A tiny npm library purposed for providing beautiful solutions to frequent miniature (one-line/one-expression) tasks for various JS datatypes.
Author: hgargg-0710
Latest version: 0.5.0

# one

'one' is a JavaScript library purposed for serving as an alias space for tiny and frequently recurring tasks.

## Installation

```
npm install @hgargg-0710/one
```

## Documentation

The documentation is presently located at the [GitHub Wiki](https://github.com/HGARgG-0710/one/wiki). 

Current library version is v0.5

## TypeScript support

Library has full TypeScript and in-editor type support.
npm package: @hgargg-0710/parsers.js
Description: A JavaScript library for simplification the process of organization/creation of parsers/validators/code-generators of arbitrary complexity.
Author: hgargg-0710
Latest version: 0.2.1

# parsers.js

This is a library providing simple, yet general and powerful, interfaces for easing the process of
parser/tokenizer/code-generator-building, input-validation and manual regular-expression-construction.

It allows one to easily define reusable functions for parsing/code-generation/validation of various data formats,
as well as containing useful datatype definitions and general interfaces.

The library allows parsers (and similar structures) to be rewritten entirely in terms of maps of functions and
string-based typesystems, on which these maps are based.

## Installation

Via npm:

```
npm install @hgargg-0710/parsers.js
```

## Documentation

Documentations for various versions:

[v0.1](https://github.com/HGARgG-0710/parsers.js/tree/698d42c1319acdfb1275f00f7575cb616252ad9d?tab=readme-ov-file#parsersjs)

[v0.1.1](https://github.com/HGARgG-0710/parsers.js/tree/ed42fb9c47543e750571a4d37153d7f0c28edf30?tab=readme-ov-file#parsersjs)

[v0.1.2](https://github.com/HGARgG-0710/parsers.js/tree/5ce1375304b2a090998e3083161cbaf15596bd78?tab=readme-ov-file#parsersjs)

[v0.1.3](https://github.com/HGARgG-0710/parsers.js/tree/df97a48f25d6b310951ebf0a0d3a973cbdb3727f?tab=readme-ov-file#parsersjs)

[Wiki](https://github.com/HGARgG-0710/parsers.js/wiki) (>=v0.2)

The latest versions' wiki is available online, while for earlier versions, one can
`git clone` it and `git checkout` to an appropriate tag/commit.

## Examples

For usage examples, see the 'tests' directory.

## Versioning

When using library caution is advised when choosing the version,
as (occasionally) due to growth, refactoring, new releases will
contain breaking changes - thus, a precise version-choice is recommended.

As the library is (largely) independent and
its growth does not get to be motivated by outside sources,
nor any reasons beyond those of purely bettering nature,
it is fairly unlikely that code written using it will
require change without requiring first the change of the underlying
formats themselves. Thus, the process of automatic update
(in this case) would do rather more harm than good.
npm package: @hgargg-0710/summat.ts
Description: A tiny package providing a name for the construction to make TypeScript less agressive when encountering unknown properties on objects.
Author: hgargg-0710
Latest version: 0.0.1

# summat

What is this?

Ofttimes, during the process of the usage of TypeScript, one may encounter the following
behaviour:

```ts
interface A {
	a?: X
}

const a: A = {}
a.b = 33 // TypeError: Property 'b' does not exist on type 'A'
```

The solution to this is well known and documented:

```ts
interface A {
	a?: X
	[x: string | number | symbol]: any
}

const a: A = {}
a.b = 33 // ok
```

However, repeating the exact same line, over and over, and over again
(particularly so, in larger applications) may be quite daunting indeed!

This is precisely what the `Summat` interface is for:

```ts
interface Summat {
	[x: string | number | symbol]: any
}

interface A extends Summat {
	a?: X
}

const a: A = {}
a.b = 33 // ok
```

## Installation

```
npm install @hgargg-0710/summat.ts
```

## Documentation

The module provides the following exports (types):

1. `Summat<Type>`
2. `SummatFunction<This, In, Out>`
3. `SummatIterable<Type>`

```ts
interface Summat<Type = any> {
	[x: string | symbol | number]: Type
}
```

Note: useful for adding optional objects to interfaces/object-types;

<br>

```ts
type SummatFunction<This = any, In = any, Out = any> = Summat &
	((this: This, ...args: In[]) => Out)
```

Note: useful for creation of types for functions with properties

<br>

```ts
type SummatIterable<Type = any> = Iterable<Type> & Summat
```
npm package: @hgateam/chat-widget
Description: Widget de chat embebible con WebSocket para eventos de Ticktur
Author: Ticktur
Latest version: 1.0.0

# @ticktur/chat-widget

Widget de chat embebible con WebSocket en tiempo real para eventos de Ticktur.

## Instalación

### Opción 1: Desde GitHub (Desarrollo)

```bash
npm install git+https://github.com/ticktur/events-front.git#dev-adrian:packages/chat-widget
```

### Opción 2: Uso Directo (CDN)

No requiere instalación. Solo incluye el script en tu HTML:

```html
<!-- Widget Integration: Solo configurar el data-event-id y data-widget-hash -->
<script
    src="http://localhost:5173/widget.js"
    data-event-id="1"
    data-widget-hash="f51c8b6939c6a86adf4df6f847e78ec1">
</script>
```

**Producción:**
```html
<script
    src="https://cdn.ticktur.com/widget.js"
    data-event-id="TU_EVENT_ID"
    data-widget-hash="TU_HASH_WIDGET">
</script>
```

## Uso con NPM

Si instalaste desde npm, necesitas servir el archivo `widget.js`:

```javascript
// En tu proyecto Node.js/Express
app.use('/widget', express.static('node_modules/@ticktur/chat-widget/public'));
```

Luego en tu HTML:
```html
<script
    src="/widget/widget.js"
    data-event-id="1"
    data-widget-hash="tu-hash-aqui">
</script>
```

## Características

- Widget flotante en esquina inferior derecha
- Chat en tiempo real con WebSocket (Laravel Reverb)
- Totalmente aislado del CSS/JS del sitio host
- Responsive (móvil y desktop)
- Framework-agnostic (funciona en cualquier web)

## Configuración

El widget requiere 2 atributos:

- `data-event-id`: ID del evento en Ticktur
- `data-widget-hash`: Hash de autorización del widget (obtenido desde el dashboard)

## API Backend

El widget se conecta a:
- API de validación: `GET /api/widgets/validate/{hash}`
- WebSocket: Laravel Reverb en puerto 8080
- Canal público: `widget.{hash}`

## Eventos WebSocket

El widget escucha:
- `WidgetStatusChanged`: Cuando se activa/desactiva el widget
- `WidgetMessageReceived`: Nuevos mensajes del soporte

## Soporte

Para más información: https://github.com/ticktur/events-front