open-index/open-npm huggingface dataset:
npm package: @steveworkman/vue-cli-plugin-stylelint
Description: stylelint plugin for vue-cli
Author: Stephen Lam, Roland Schmitt, Steve Workman
Latest version: 2.2.1

# @samhammer/vue-cli-plugin-stylelint

> stylelint plugin for vue-cli

## Injected commands

- **`vue-cli-service lint:style`**

  ```
  Usage: vue-cli-service lint:style [options] [...files]

  Options:

    --no-fix           do not auto-fix errors
    --options          list additional stylelint cli options
  ```

  Lints and fixes files. If no specific files are given, it lints all vue files, html files, and stylesheets in `src`.

## Configuration (vue.config.js, "vue" in package.json)

Lint on (re)build with `stylelint-webpack-plugin` can be enabled with the `lintStyleOnBuild` option. You can also provide additional options to stylelint. See available options on the stylelint [website](https://stylelint.io/user-guide/node-api/#options).

``` js
module.exports = {
  // ...
  pluginOptions: {
    lintStyleOnBuild: true,
    stylelint: {
      fix: true, // boolean (default: true)
      files: '', // string | [string] (default: ['src/**/*.{vue,htm,html,css,sss,less,scss}'])
      // See https://stylelint.io/developer-guide/formatters/
      formatter: () => {} // function (default: require('stylelint-codeframe-formatter'))
      // etc...
    }
  }
}
```
## Installing via CLI preset

Add the following to your preset.json
```
"@steveworkman/vue-cli-plugin-stylelint": {
  "version": "^2.1.0",
  "config": {
    ...
  }
}
```


## Installing in an already created project

via vue-cli (recommended)
```
vue add @steveworkman/vue-cli-plugin-stylelint
```

via yarn
```
yarn add -D @steveworkman/vue-cli-plugin-stylelint
vue invoke @steveworkman/vue-cli-plugin-stylelint
```

via npm
```
npm install --save-dev @steveworkman/vue-cli-plugin-stylelint
vue invoke @steveworkman/vue-cli-plugin-stylelint
```

## webpack-chain Injections

- `config.plugin('stylelint')`
- `config.plugin('stylelint').use('stylelint-webpack-plugin')`
- `config.plugin('friendly-errors').tap(/* Adds additional transformer and formatter */)`
npm package: @steveylin/configure
Description: <p align="center">   <a href="#">     <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">   </a> </p>
Latest version: 0.0.1

<p align="center">
  <a href="#">
    <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">
  </a>
</p>

<h3 align="center">Steve Y Lin</h3>

<p align="center">
  Powerful full stack library for faster and easier development.
  <br>
  <strong>@steveylin/logger</strong>
  <br>
  <br>
  <a href="#">Report bug</a>
  ·
  <a href="#">Request feature</a>
</p>


## Table of contents

- [Usage](#usage)
- [Status](#status)
- [Copyright and license](#copyright-and-license)


## Usage

### Install package

```
npm i @steveylin/configure --save
```

### Add into module to preload configure file

**For example**

```File: app.module.ts```

```typescript
...
import { ConfigureModule, ConfigureLoader } from '@steveylin/configure';

/**
 * Confiure Load Factory
 *
 * @param confiureLoader Confiure files loader service
 * @return Loading done promise
 */
export function ConfigFactory(configureLoader: ConfigureLoader) {
  return () => {
    return configureLoader.load({
      key: 'datasources',
      path: './../assets/configs/datasources.json'
    });
  }
}

/**
 * Main App Module
 */
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Use 'forRoot' to preload configure file you want
    ConfigureModule.forRoot(
      {
        key: 'datasources',
        path: './../assets/configs/datasources.json'
      }
    ),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

```File: app.component.ts```

```typescript
...
import { ConfigureLoader } from '@steveylin-libs/configure';

/**
 * Main App Component
 */
@Component({
  selector: 'steveylin-libs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  /**
   * @param configureLoader Configure load files service
   */
  constructor(private configureLoader: ConfigureLoader) {}

  /**
   * Initilailize component
   *
   * @method public
   */
  public ngOnInit(): void {
    const config = this.configureLoader.get<AppConfig>('datasources');
    console.log(config.mqtt);
  }

}

```

### Preview

<img src="https://imgur.com/GUMNcqx.png">

## Status

[![npm version](https://img.shields.io/npm/v/@steveylin/configure)](https://www.npmjs.com/package/@steveylin/configure)
[![type](https://img.shields.io/npm/types/@steveylin/configure)](https://www.npmjs.com/package/@steveylin/configure)

## Copyright and license

Code and documentation copyright 2020 Steve Y Lin.
npm package: @steveylin/logger
Description: <p align="center">   <a href="#">     <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">   </a> </p>
Latest version: 0.0.10

<p align="center">
  <a href="#">
    <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">
  </a>
</p>

<h3 align="center">Steve Y Lin</h3>

<p align="center">
  Powerful full stack library for faster and easier development.
  <br>
  <strong>@steveylin/ng-logger</strong>
  <br>
  <br>
  <a href="#">Report bug</a>
  ·
  <a href="#">Request feature</a>
</p>


## Table of contents

- [Usage](#usage)
- [Status](#status)
- [Copyright and license](#copyright-and-license)


## Usage

### Install package

```
npm i @steveylin/logger --save
```

### Add into code you want to display log

**For example**

```File: app.component.ts```

```typescript
...
import { Logger } from '@steveylin/logger';

/**
 * Main App Component
 */
@Component({
  selector: 'steveylin-libs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  // Create Logger instaance and setup the name.
  private logger = new Logger(AppComponent.name);

  constructor() {}

  /**
   * Initilailize component
   *
   * @method public
   */
  public ngOnInit(): void {
    // Logger supply 'log', 'data', 'warn' and 'error'
    this.logger.log('This is a log');
    this.logger.data('This is a data');
    this.logger.warn('This is a warn');
    this.logger.error('This is a error');
  }

}

```

### Preview

<img src="https://imgur.com/gu0698M.png">

## Status

[![npm version](https://img.shields.io/npm/v/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)
[![type](https://img.shields.io/npm/types/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)

## Copyright and license

Code and documentation copyright 2020 Steve Y Lin.
npm package: @steveylin/ng-logger
Description: <p align="center">   <a href="#">     <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">   </a> </p>
Latest version: 0.0.10

<p align="center">
  <a href="#">
    <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">
  </a>
</p>

<h3 align="center">Steve Y Lin</h3>

<p align="center">
  Powerful full stack library for faster and easier development.
  <br>
  <strong>@steveylin/ng-logger</strong>
  <br>
  <br>
  <a href="#">Report bug</a>
  ·
  <a href="#">Request feature</a>
</p>


## Table of contents

- [Usage](#usage)
- [Status](#status)
- [Copyright and license](#copyright-and-license)


## Usage

### Install package

```
npm i @steveylin/logger --save
```

### Add into code you want to display log

**For example**

```File: app.component.ts```

```typescript
...
import { Logger } from '@steveylin/logger';

/**
 * Main App Component
 */
@Component({
  selector: 'steveylin-libs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  // Create Logger instaance and setup the name.
  private logger = new Logger(AppComponent.name);

  constructor() {}

  /**
   * Initilailize component
   *
   * @method public
   */
  public ngOnInit(): void {
    // Logger supply 'log', 'data', 'warn' and 'error'
    this.logger.log('This is a log');
    this.logger.data('This is a data');
    this.logger.warn('This is a warn');
    this.logger.error('This is a error');
  }

}

```

### Preview

<img src="https://imgur.com/gu0698M.png">

## Status

[![npm version](https://img.shields.io/npm/v/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)
[![type](https://img.shields.io/npm/types/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)

## Copyright and license

Code and documentation copyright 2020 Steve Y Lin.
npm package: @steveylin/ng2-configure
Description: <p align="center">   <a href="#">     <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">   </a> </p>
Latest version: 0.0.8

<p align="center">
  <a href="#">
    <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">
  </a>
</p>

<h3 align="center">Steve Y Lin</h3>

<p align="center">
  Powerful full stack library for faster and easier development.
  <br>
  <strong>@steveylin/ng2-configure</strong>
  <br>
  <br>
  <a href="#">Report bug</a>
  ·
  <a href="#">Request feature</a>
</p>


## Table of contents

- [Usage](#usage)
- [Status](#status)
- [Copyright and license](#copyright-and-license)


## Usage

### Install package

```
npm i @steveylin/ng2-configure --save
```

### Add into module to preload configure file

**For example**

```File: app.module.ts```

```typescript
...
import { ConfigureModule, ConfigureLoader } from '@steveylin/ng2-configure';

/**
 * Main App Module
 */
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Use 'forRoot' to preload configure file you want
    ConfigureModule.forRoot(
      {
        key: 'datasources',
        path: './../assets/configs/datasources.json'
      }
    ),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

```File: app.component.ts```

```typescript
...
import { ConfigureLoader } from '@steveylin-libs/configure';

/**
 * Main App Component
 */
@Component({
  selector: 'steveylin-libs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  /**
   * @param configureLoader Configure load files service
   */
  constructor(private configureLoader: ConfigureLoader) {}

  /**
   * Initilailize component
   *
   * @method public
   */
  public ngOnInit(): void {
    const config = this.configureLoader.get<AppConfig>('datasources');
    console.log(config.mqtt);
  }

}

```

### Preview

<img src="https://imgur.com/GUMNcqx.png">

## Status

[![npm version](https://img.shields.io/npm/v/@steveylin/ng2-configure)](https://www.npmjs.com/package/@steveylin/configure)
[![type](https://img.shields.io/npm/types/@steveylin/ng2-configure)](https://www.npmjs.com/package/@steveylin/configure)

## Copyright and license

Code and documentation copyright 2020 Steve Y Lin.
npm package: @steveylin/ng2-logger
Description: <p align="center">   <a href="#">     <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">   </a> </p>
Latest version: 0.0.9

<p align="center">
  <a href="#">
    <img src="https://i.imgur.com/1xlpNX1.png" alt="Steve Y Lin logo" width="72" height="72">
  </a>
</p>

<h3 align="center">Steve Y Lin</h3>

<p align="center">
  Powerful full stack library for faster and easier development.
  <br>
  <strong>@steveylin/ng2-logger</strong>
  <br>
  <br>
  <a href="#">Report bug</a>
  ·
  <a href="#">Request feature</a>
</p>


## Table of contents

- [Usage](#usage)
- [Status](#status)
- [Copyright and license](#copyright-and-license)


## Usage

### Install package

```
npm i @steveylin/logger --save
```

### Add into code you want to display log

**For example**

```File: app.component.ts```

```typescript
...
import { Logger } from '@steveylin/logger';

/**
 * Main App Component
 */
@Component({
  selector: 'steveylin-libs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  // Create Logger instaance and setup the name.
  private logger = new Logger(AppComponent.name);

  constructor() {}

  /**
   * Initilailize component
   *
   * @method public
   */
  public ngOnInit(): void {
    // Logger supply 'log', 'data', 'warn' and 'error'
    this.logger.log('This is a log');
    this.logger.data('This is a data');
    this.logger.warn('This is a warn');
    this.logger.error('This is a error');
  }

}

```

### Preview

<img src="https://imgur.com/gu0698M.png">

## Status

[![npm version](https://img.shields.io/npm/v/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)
[![type](https://img.shields.io/npm/types/@steveylin/logger)](https://www.npmjs.com/package/@steveylin/logger)

## Copyright and license

Code and documentation copyright 2020 Steve Y Lin.
npm package: @steveyout/adonis5-acl
Description: Role & Permission support for Adonisjs v5
Author: SteveYout
Latest version: 1.0.4

# AdonisJS ACL
![npm](https://img.shields.io/npm/dt/@steveyout/adonis5-acl?style=plastic)
![npm (scoped)](https://img.shields.io/npm/v/@steveyout/adonis5-acl)
![NPM](https://img.shields.io/npm/l/@steveyout/adonis5-acl)

Version [for **Adonis v5**]

This package allows you easily add role/permission based access to your [AdonisJS](https://adonisjs.com/) applications routes:

## Available Features
- Role based route authentication
- Permission based route authentication

## Requirements
- Adonisjs v5
- Node >=8
- Mysql >=5
- PostgreSQL >=10


## Dependencies
- Adonisjs5 [lucid(`@adonisjs/lucid`)](https://docs.adonisjs.com/guides/database/introduction)
- Adonisjs5 [auth(`@adonisjs/auth`)](https://docs.adonisjs.com/guides/auth/introduction)

## Installation

You can install the package via NPM:
``` bash
npm install @steveyout/adonis5-acl
```
Or with yarn
``` bash
yarn add @steveyout/adonis5-acl
```

## Setup
- Configure package with `node ace configure @steveyout/adonis5-acl`
- In `start/kernel.ts`, add the following to `Server.middleware.registerNamed`:
```
is: () => import('App/Middleware/Is'),
can: () => import('App/Middleware/Can'),
```
- Update `config/rolePermission.ts` to customize table names
- Run migration to create role and permission tables: `node ace migration:run`
## Usage
### Role Based Access
```
Route.get('/something-important', 'ImportantController.show').middleware('is:administrator')
```
#### Multiple Roles
```
Route.get('/something-important', 'ImportantController.show').middleware('is:administrator,superadmin')
```
### Permission Based Access
```
Route.get('/important', 'SomeController.show').middleware('can:view-important')
```
#### Multiple Roles
```
Route.get('/important', 'SomeController.show').middleware('can:view-important,read-important')
```
><span style="color:red">NB: User is granted access if they have one or more role/permission specified</span>

## Todo
- Add properties to models e.g `User.hasRole`, `User.hasPermission`, `role.hasPermission`, etc

## Contributing
If you have a feature you'd like to add, kindly send a Pull Request (PR)

## Security
If you discover any security related issues, please email [zacchaeus@shagital.com](mailto:zacchaeus@shagital.com) instead of using the issue tracker.

## Credits
- [Steve Yout](https://github.com/steveyout)
- [Zacchaeus Bolaji](https://github.com/djunehor)
- [All Contributors](../../contributors)

## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
npm package: @steviecs/kbar
Description: A command+k navigation bar for React with cross-domain support
Latest version: 1.0.0

# KBar

A command+k navigation bar for React with cross-domain support. This component allows you to access previously visited pages across your domains and pin important resources.

## Features

- Press Command+K (or Ctrl+K on Windows/Linux) to open the navigation bar
- Remembers pages you've visited across subdomains
- Pin important resources for quick access
- Search through your history and pinned items
- Cross-domain support with cookies
- Fully customizable appearance
- Lightweight and responsive

## Installation

```bash
npm install kbar

# You'll also need to install the peer dependencies if you don't have them already
npm install framer-motion
```

## Usage

```jsx
import { KBar } from "kbar";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <KBar
        initialPinnedResources={[
          { title: "Documentation", url: "https://docs.example.com" },
          { title: "Support", url: "https://support.example.com" },
        ]}
        cookieDomain=".example.com" // Allow sharing between subdomains
      />
    </div>
  );
}
```

## Cross-Domain Support

To enable cross-domain support between subdomains (e.g., app.example.com and docs.example.com), provide the common parent domain in the `cookieDomain` prop:

```jsx
<KBar cookieDomain=".example.com" />
```

The leading dot is important for cross-subdomain support.

## Props

| Prop                     | Type   | Default                  | Description                              |
| ------------------------ | ------ | ------------------------ | ---------------------------------------- |
| `className`              | string | `undefined`              | Custom class name for the KBar container |
| `maxHistoryItems`        | number | `10`                     | Maximum number of history items to show  |
| `historyStorageName`     | string | `'kbar-history'`         | Cookie name for storing history          |
| `pinnedStorageName`      | string | `'kbar-pinned'`          | Cookie name for storing pinned items     |
| `cookieDomain`           | string | `undefined`              | Cookie domain for cross-domain support   |
| `cookieExpiration`       | number | `30`                     | Cookie expiration in days                |
| `hotkey`                 | string | `'k'`                    | The hotkey to use with Command/Ctrl      |
| `searchPlaceholder`      | string | `'Search or jump to...'` | Custom placeholder for the search input  |
| `initialPinnedResources` | array  | `[]`                     | Initial pinned resources                 |

## Peer Dependencies

KBar has the following peer dependencies:

- react: >=16.8.0
- react-dom: >=16.8.0
- framer-motion: >=5.0.0

Make sure to install these in your project if you don't have them already.

## License

MIT
npm package: @steviecs/react-fallback
Description: A POC component library for rendering adaptive skeletons that adjust to the shape of your UI's layout while data is being fetched
Author: steviecs
Latest version: 1.0.4

<div align="center">
  <img src="https://i.imgur.com/3xjKPvz.png" alt="Logo" width="160" height="160" />
  <h1 align="center">react-fallback</h1>
</div>

[![Node.js CI](https://github.com/steviecs/react-fallback/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/steviecs/react-fallback/actions/workflows/node.js.yml)
[![Npm package version](https://badgen.net/npm/v/@steviecs/react-fallback)](https://npmjs.com/package/@steviecs/react-fallback)
[![Npm package monthly downloads](https://badgen.net/npm/dm/@steviecs/react-fallback)](https://npmjs.com/package/@steviecs/react-fallback)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/steviecs/react-fallback/graphs/commit-activity)
[![GitHub license](https://img.shields.io/github/license/steviecs/react-fallback.svg)](https://github.com/steviecs/react-fallback/blob/main/LICENSE)

A POC React component library for rendering skeleton states that automatically adapt to the shape of your UI layout while data is being fetched.


## Demo

Try it live by reloading the sandbox browser: https://codesandbox.io/s/react-fallback-demo-b36dft?file=/src/App.tsx

![Example](https://cdn.loom.com/sessions/thumbnails/77d6e8d9aa024064a026d405e773225b-1654016529399.gif)

## Installation

```
$ npm i @steviecs/react-fallback
```

## Motivation

Because

```
return (
  <Fallback isLoading={data}>
    <div>
      <h1>{props.heading}</h1>
      <h2>{props.subheading}</h2>
      <p>S{props.body}</p>
    </div>
  </Fallback>
);
```

dunks on

```
  return (
    <>
      {isLoading ? (
        <div>
          <h1><Skeleton {...styles}/></h1>
          <h2><Skeleton {...styles}/></h2>
          <p><Skeleton {...styles}/></p>
        </div>
      ) : (
        <div>
          <h1>{props.heading}</h1>
          <h2>{props.subheading}</h2>
          <p>S{props.body}</p>
        </div>
      )}
    </>
  );
```

## Props Reference

### `Fallback` only

<table>
    <thead>
        <tr>
            <th>Prop</th>
            <th>Description</th>
            <th>Default</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>isLoading: boolean</code></td>
            <td>A flag to determine if component-dependent data is being fetched</td>
            <td><code>false</code></td>
        </tr>
        <tr>
            <td><code>fallbackOnStaticContent?: boolean</code></td>
            <td>
                A flag to determine if static content should be skeleton-ized
            </td>
            <td><code>false</code></td>
        </tr>
    </tbody>
</table>

## Implementation

At this time, `react-fallback` works by:

- Consuming your JSX as a children inside of a `<Fallback/>` wrapper
- Cloning the component tree
- Iterating through child elements
- Replacing children with a skeleton element that inherits all original style properties (except for the explicitly enforced `background-color` & `animation`)
npm package: @stevokk/node-red-contrib-cache
Description: Node-RED nodes for memory cache
Author: Steven Kissack
Latest version: 2.0.10

Memory cache Node-RED nodes
===
Fork from: https://github.com/CANDY-LINE/node-red-contrib-cache

Don't use! I am hacking this to get a working prototype, all liability is yours

[![GitHub release](https://img.shields.io/github/release/CANDY-LINE/node-red-contrib-cache.svg)](https://github.com/CANDY-LINE/node-red-contrib-cache/releases/latest)
[![master Build Status](https://travis-ci.org/CANDY-LINE/node-red-contrib-cache.svg?branch=master)](https://travis-ci.org/CANDY-LINE/node-red-contrib-cache/)
[![License MIT](https://img.shields.io/github/license/CANDY-LINE/node-red-contrib-cache.svg)](http://opensource.org/licenses/MIT)

Memcached-like memory cache Node-RED nodes. You can set/get values and provide them TTL if necessary.

There are 3 nodes in this project.

1. `Cache` configuration node ... Memory cache instance. Each configuration node is isolated from other `Cache` nodes. Default TTL is undefined (never expired). Default check period is undefined (never checked).
1. `Cache in` node ... Used for retrieving a stored value
1. `Cache out` node ... Used for storing a key-value pair. You can set TTL (in seconds) as well as key-value pair by providing TTL property.

The cache behavior is fully depending on [node-cache](https://www.npmjs.com/package/node-cache) library. But the project doesn't support full features of the library for making the nodes simpler.

### Installation

```
cd ~/.node-red
npm install --production node-red-contrib-cache
```

### Example flow

You can import an example from the menu (`Import > Examples > cache > Cache Example`) on the editor.

# Revision History
* 2.0.2-2.0.3
    - Fix JSON format error
* 2.0.1
    - Revise Default TTL description on the node help content and README as the node immediately clears its cache content when Default TTL is 0
* 2.0.0
    - Add a new feature to route a message object to another port on a cache miss, disabled by default (#3)
    - Introduce a new property 'dump' to dump all entries in the cache (#4)
* 1.1.0
    - Fix #2
    - Move the example flow to Import menu
* 1.0.4
    - Fix labels
* 1.0.3
    - Emit `null` when the retrieved value is `null`, `undefined` or `''(empty string)`
* 1.0.2
    - Remove redundant dependency
* 1.0.1
    - Fix an issue where the wrong TTL value can be used on storing a value when there’s no valid TTL property in the msg object
* 1.0.0
    - Initial release
npm package: @stevokk/node-red-contrib-socketio
Description: Implementation for Node-RED of a SocketIO Sever
Author: Telemaco Gallimberti
Latest version: 1.1.1

# node-red-contrib-socketio
Implementation for [Node-RED](https://nodered.org/) of the popular [Socket.IO](http://socket.io/).

## Installation
To install node-red-contrib-socketio use this command

`npm i node-red-contrib-socketio`

## Composition
The Socket.IO implementation is made with
* 1 configuration Node that holds the server definitions and the user can decide to bind the SocketIO server on the Node-RED port or bind it to another port
* 1 input node where the user adds all the `topic`s in which they are interested
* 1 output node that sends the data received into `msg.payload`
* 1 node to join a Socket IO room
* 1 node to leave a Socket IO room

## Usage
* To see an example usage go to [Example Chat App](https://flows.nodered.org/flow/71f7da3a14951acb67f94bac1f71812a)
* To listen to all custom events you can add an asterisk as the rule, like so "*"

## License
MIT

## Thanks
Thank to: 
* @nexflo for translating the comments in English and for pre-sending control data 
* @bimalyn-IBM for implementig rooms
* @essuraj for implementig rooms listing node
* @cazellap for pushong adding compatibility to socketIO 3.0
npm package: @stevoland/babel-plugin-transform-react-remove-prop-types
Description: Remove unnecessary React propTypes from the production build
Author: Nikita Gusakov
Latest version: 0.2.7

# Babel Plugin for removing React propTypes
[![npm version](https://img.shields.io/npm/v/babel-plugin-transform-react-remove-prop-types.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types)
[![npm downloads](https://img.shields.io/npm/dm/babel-plugin-transform-react-remove-prop-types.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types)
[![Build Status](https://travis-ci.org/oliviertassinari/babel-plugin-transform-react-remove-prop-types.svg?branch=master)](https://travis-ci.org/oliviertassinari/babel-plugin-transform-react-remove-prop-types)

[![Dependencies](https://img.shields.io/david/oliviertassinari/babel-plugin-transform-react-remove-prop-types.svg?style=flat-square)](https://david-dm.org/oliviertassinari/babel-plugin-transform-react-remove-prop-types)
[![DevDependencies](https://img.shields.io/david/dev/oliviertassinari/babel-plugin-transform-react-remove-prop-types.svg?style=flat-square)](https://david-dm.org/oliviertassinari/babel-plugin-transform-react-remove-prop-types#info=devDependencies&view=list)

Remove unnecessary React `propTypes` from the production build.

## Example

**In**
```js
const Baz = () => (
  <div />
);

Baz.propTypes = {
  foo: React.PropTypes.string
};
```

**Out**
```js
const Baz = () => (
  <div />
);
```

## Installation

```sh
npm install --save-dev babel-plugin-transform-react-remove-prop-types
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}
```

### Via CLI

```sh
babel --plugins transform-react-remove-prop-types script.js
```

### Via Node API

```js
require("babel-core").transform("code", {
  plugins: ["transform-react-remove-prop-types"]
});
```

#License

MIT
npm package: @stevoland/draft-js-mention-plugin
Description: Mention Plugin for DraftJS
Author: Nik Graf
Latest version: 2.0.0-beta1

# DraftJS Mention Plugin

*This is a plugin for the `draft-js-plugins-editor`.*

This plugin allows you to add mentions to your editor!

Usage:

```js
import createMentionPlugin from 'draft-js-mention-plugin';

const mentionPlugin = createMentionPlugin({ mentions });
```

## Importing the default styles

The plugin ships with a default styling available at this location in the installed package:
`node_modules/draft-js-mention-plugin/lib/plugin.css`.

### Webpack Usage
Follow the steps below to import the css file by using Webpack's `style-loader` and `css-loader`.

1. Install Webpack loaders: `npm install style-loader css-loader --save-dev`
2. Add the below section to Webpack config (if your Webpack already has loaders array, simply add the below loader object(`{test:foo, loaders:bar[]}`) as an item in the array).

    ```js
    module: {
      loaders: [{
        test: /\.css$/,
        loaders: [
          'style', 'css'
        ]
      }]
    }
    ```

3. Add the below import line to your component to tell Webpack to inject style to your component.

    ```js
    import 'draft-js-mention-plugin/lib/plugin.css';
    ```
4. Restart Webpack.

### Browserify Usage

TODO: PR welcome
npm package: @stevora/sdk
Description: TypeScript SDK for Stevora — durable execution for AI agent workflows
Latest version: 0.1.0

# @stevora/sdk

TypeScript SDK for Stevora — durable execution for AI agent workflows.

## Install

```bash
npm install @stevora/sdk
```

## Quick Start

```typescript
import { AgentRuntime } from '@stevora/sdk';

const runtime = new AgentRuntime({
  apiKey: 'stv_your_api_key',
  baseUrl: 'http://localhost:3000', // or your deployed URL
});

// Create a workflow run
const run = await runtime.workflows.create({
  definitionId: 'your-definition-id',
  input: {
    prospectName: 'Sarah Chen',
    company: 'TechFlow AI',
    email: 'sarah@techflow.ai',
  },
});

console.log(`Run started: ${run.id} — status: ${run.status}`);

// Wait for completion (polls every 2s)
const completed = await runtime.workflows.waitForCompletion(run.id);
console.log(`Done! Status: ${completed.status}`);

// Check cost
const cost = await runtime.workflows.getCost(run.id);
console.log(`Total cost: ${cost.totalCostDollars}`);
```

## Resources

### `runtime.workflows`

| Method | Description |
|--------|-------------|
| `create(input)` | Start a new workflow run |
| `get(id)` | Get run by ID with step details |
| `list(params?)` | List runs with pagination and filters |
| `cancel(id)` | Cancel a running workflow |
| `resume(id, input)` | Resume with external signal |
| `retry(id)` | Retry a failed workflow |
| `getEvents(id)` | Get event timeline |
| `getCost(id)` | Get cost breakdown |
| `getTraces(id)` | Get LLM call + tool traces |
| `waitForCompletion(id, opts?)` | Poll until terminal state |

### `runtime.definitions`

| Method | Description |
|--------|-------------|
| `create(input)` | Create workflow definition |
| `get(id)` | Get definition by ID |
| `list()` | List all active definitions |

### `runtime.approvals`

| Method | Description |
|--------|-------------|
| `list(opts?)` | List approvals (filter by pending) |
| `decide(id, input)` | Submit a decision |
| `approve(id, by?)` | Shorthand for approve |
| `reject(id, by?)` | Shorthand for reject |

### `runtime.costs`

| Method | Description |
|--------|-------------|
| `summary(opts?)` | Workspace cost aggregation |

## Error Handling

```typescript
import { AgentRuntimeError } from '@stevora/sdk';

try {
  await runtime.workflows.get('nonexistent');
} catch (err) {
  if (err instanceof AgentRuntimeError) {
    console.log(err.code);       // 'NOT_FOUND'
    console.log(err.statusCode); // 404
    console.log(err.message);    // "WorkflowRun 'nonexistent' not found"
  }
}
```
npm package: @stevro/vue-timeline-component
Description: [![npm package](https://img.shields.io/npm/v/vue-timeline-component.svg)](https://www.npmjs.org/package/vue-timeline-component) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0xdv/vue-timeline-component/blob/mast
Author: 0xdv
Latest version: 0.1.1

# vue-timeline-component

[![npm package](https://img.shields.io/npm/v/vue-timeline-component.svg)](https://www.npmjs.org/package/vue-timeline-component)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0xdv/vue-timeline-component/blob/master/LICENSE)

## [Demo](https://0xdv.github.io/vue-timeline-component/index.html)

## Install

```js
npm install vue-timeline-component
```
or
```html
<script src="https://unpkg.com/vue-timeline-component"></script>
```

## Usage

```html
<template>
  <div id="app">
    <vue-timeline :data="events"></vue-timeline>
  </div>
</template>
```

```js
<script>
import VueTimeline from "vue-timeline-component"

export default {
  name: 'App',
  components: {
    VueTimeline
  },
  data() {
    return {
      events: [{
          name: "event 1",
          start: new Date(2020, 1,1),
          end: new Date(2020, 1,4),
      },{
          name: "event 2",
          start: new Date(2020, 1,2),
          end: new Date(2020, 1,5),
      },{
          name: "event 3",
          start: new Date(2020, 1,3),
          end: new Date(2020, 1,10),
      }]
    }
  },
}
</script>
```
npm package: @stevvvns/device-accounts
Description: ## What?
Latest version: 0.0.4

# @stevvvns/device-accounts

## What?

This library just saves some `tweetnacl` signing keys in `localStorage`, which you can use as mostly-persistent identifiers for the user's device. It doesn't have anything to do with device fingerprinting, and is mostly only usable in combination with `@stevvvns/incomponent` since the API is mostly contained in `stores/accounts`, which requires it.

## Why?

I like making services you don't have to log in to. You do end up having to implement device connecting/recovery codes/give up and make an account anyway at some point to get around `localStorage` being somewhat volatile, but I'll probably add that here when I get around to it.

## How?

`$ npm i --save @stevvvns/device-accounts`

[`src/example-app.js`](./src/example-app.js) shows how to use with incomponent.

![example app](./screenshot.png)
npm package: @stevvvns/inc-library
Description: This is a collection of some generally reusable components made with [@stevvvns/incomponent](https://github.com/stevvvns/incomponent) and usable as native webcomponents in any framework
Latest version: 0.0.5

# What?
This is a collection of some generally reusable components made with [@stevvvns/incomponent](https://github.com/stevvvns/incomponent) and usable as native webcomponents in any framework

![screenshot showing some simple and boring webcomponents](screenshot.png "waou")

# How?
```
npm i
npm run build
npm run serve
```

Visit `http://localhost:3000/example.html` to see what is available.

To use components in your own app, install and import from `@stevvvns/inc-library/dist/component-name.js'
npm package: @stevvvns/inc-router
Description: ## What?
Latest version: 0.0.2

# inc-router

## What?

This is a router for apps that use [@stevvvns/incomponent](https://github.com/stevvvns/incomponent) based on [router5](https://github.com/router5/router5).

## Why?

If you don't have complex needs for your router (eg., server-side usage) and you want to use incomponent (lol), this will save you a marginal amount of effort.

## How?

`$ npm i @stevvvns/inc-router`

```javascript
import { setRoutes } from '@stevvvns/inc-router';
import { comp, ref, html } from '@stevvvns/incomponent';

setRoutes(
  // routes defined as in router5 doc, but include template and title (optional) keys
  [
    { name: 'home', path: '/', title: 'Example', template: html`<p>home</p>` },
    { name: 'readme', path: '/readme', title: 'Read me', template: html`<p>readme</p>`, children: [
      { name: 'nested', path: '/nested', title: 'Nested Route', template: html`<p>nested</p>` }
    ]},
    { name: 'about', path: '/about', title: 'About', template: html`<p>about</p>` },
  ],
  // router5 createRouter options + { browser: router5-plugin-browser options }
  { defaultRoute: 'readme', browser: { useHash: true } }
);

// <inc-link also has .replace={bool} and .params={obj}
comp('App').template(html`
  <nav>
    <ul>
      <li><inc-link to="home">home</inc-link></li>
      <li><inc-link to="readme">readme</inc-link></li>
      <li><inc-link to="about">about</inc-link></li>
      <li><inc-link to="readme.nested">nested</inc-link></li>
    </ul>
  </nav>
  <inc-router></inc-router>
`).style(`
  inc-link {
    &::part(current) { font-weight: bold; }
    &::part(link) {
      color: red;
    }
    &::part(link):visited {
      color: blue;
    }
  }
`);

```

In other components, you can:
```javascript
import { route, navigate } from '@stevvvns/inc-router';
import { comp, html, ref, derive } from '@stevvvns/incomponent';

comp(function Foo() {
    const title = ref('');
    // route is a ref, you can do stuff based on the router state if necessary
    derive(() => {
        if (route.value) {
            title.value = route.value.title;
        }
    });
    function go() {
        // you can programmatically navigate. see router5 docs
        navigate('about');
    }
    return { go, title };
}).template(el => html`<h1>${el.title}</h1><button @click=${el.go}>go</button>`);

```

(See [example.html](./example.html))
npm package: @stevvvns/pixel-avatar
Description: ![example](./screenshot.png)
Latest version: 0.0.1

# @stevvvns/pixel-avatar

![example](./screenshot.png)

## What?

This is a fork of [randpix](https://github.com/LIMPIX31/randpix) with some added opinionated conventions you didn't ask for.

## Why?

I think randpix makes cool-looking avatars, but it doesn't build on modern version of node, and I wanted to emphasize distinguishability between avatars (and the string they represent), so by default I center the color palette around a color derived from a hash of the string, and similarly pick a consistent symmetry.

## How

`$ npm i --save @stevvns/pixel-avatar`

Check out [src/index.html](./src/index.html) for an example of how to generate avatars.

If you don't care for my conventions, the second parameter to `getAvatar` corresponds to the `RandpixOptions` from [randpix](https://github.com/LIMPIX31/randpix).

```typescript
interface RandpixOptions {
  size?: number;
  scale?: number;
  color?: Color; // [r: number, g: number, b: number, a?: number]
  colorScheme: ColorScheme; // see https://github.com/LIMPIX31/randpix/blob/master/themes.ts, array of 3-4 Colors
  fillFactor?: number;
  symmetry?: 'horizontal' | 'vertical' | 'quad';
  seed: string;
  colorBias?: number;
  grayscaleBias?: boolean;
};

```

This returns `{ iamgeUrl, color }` with the avatar data, and the base color derived from the supplied string as `[hue, saturation%, lightness%]`.
npm package: @stevygee/master-builder
Description: A reusable builder to compile es6 and scss from a source directory into a destination directory
Author: Stefan Grassberger
Latest version: 0.8.0

# Master Builder
A reusable SCSS / JS builder, now based on esbuild!

<img src="https://media.giphy.com/media/3ZALZoBtI1KJa/200w_d.gif" alt="Lego timelapse" width="256" height="144">

### Requirements
- Node 20

### Features
- Super fast!
- JSX
- Sass / SCSS
- PostCSS
- Autoprefixer
- Browserslist support
- Copy additional files
- Compress all files into a ZIP
- etc.

### Getting started
1. Add scripts to your project's package.json:
```
	"scripts": {
		"start": "master-builder",
		"build": "master-builder build",
		"deploy": "master-builder deploy"
	},
```
2. ```npm install @stevygee/master-builder --save-dev```
3. ```npm start```

Optional: Copy `.master-builder`, `.browserslistrc` config files to your project and configure to your needs!

### Building for production
1. ```npm run build```

### Building for production and create a zip file
1. ```npm run deploy```
2. Upload the zip file in dist/packages for use in WordPress (install theme/plugin).

### Development
1. Checkout this repo
3. ```npm install```
4. Instead of `npm start`, use `node bin/index.js` or `node bin/index.js deploy` to build the example files

### Development using your project
How to add as a local dependency:
1. Checkout this repository in a sibling directory next to your project
2. Change the dependency path in your project's package.json:
```
	"devDependencies": {
		...
		"@stevygee/master-builder": "../master-builder"
	}
```
3. Use ```npm install``` to continously update the package after you've made a change.

<img src="https://media.giphy.com/media/JJhiRdcYfcokU/giphy.gif" alt="Lego Batman" width="256" height="167">
npm package: @stevyhacker/sdk-core
Description: ⚒️ An SDK for building applications on top of Uniswap V3
Latest version: 4.0.13

# Uniswap SDK Core

[![Unit Tests](https://github.com/Uniswap/uniswap-sdk-core/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-sdk-core/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-sdk-core/actions?query=workflow%3ALint)
[![npm version](https://img.shields.io/npm/v/@uniswap/sdk-core/latest.svg)](https://www.npmjs.com/package/@uniswap/sdk-core/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/sdk-core/latest.svg)](https://bundlephobia.com/result?p=@uniswap/sdk-core@latest)

This code is shared across Uniswap TypeScript SDKs.
npm package: @stewartjingga/forman
Description: Forman is a Javascript library for client-side validation with React app.
Latest version: 0.4.1

# Forman

Forman is a Javascript library for client-side validation with React app.

## Installation

```bash
npm install @stewartjingga/forman
```

## Usage

```jsx
import React from 'react';
import Forman, { RULES } from '@stewartjingga/forman';

const FORM_RULES = {
    email: [RULES.required],
    password: [RULES.required],
};

export class LoginForm extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
        };
    }
    
    render() {
        const { email, password } = this.state;

        return (
            <Forman
                value={this.state}
                rules={FORM_RULES}
                render={(fields, form) => (
                    <form>
                        <div>
                            <label>Email</label>
                            <input
                                type="string"
                                value={email}
                                onChange={({ target }) => this.setState({ email: target.value })}
                            />
                            <br />
                            {
                                fields.email.dirty && fields.email.errors && (
                                    <span>{fields.email.errors[0]}</span>
                                )
                            }
                        </div>
                        <div>
                            <label>Password</label>
                            <input
                                type="password"
                                value={password}
                                onChange={({ target }) => this.setState({ password: target.value })}
                            />
                            <br />
                            {
                                fields.password.dirty && fields.password.errors && (
                                    <span>{fields.password.errors[0]}</span>
                                )
                            }
                        </div>
                        <button disabled={!form.valid}>Login</button>
                    </form>
                )}
            />
        );
    }
}

export default LoginForm;
```

## Custom Rules
```jsx
import { RULES, createRule } from '@stewartjingga/forman';

const startsWithExcalamationMark = createRule(
    value => value[0] === '!', // Return true if value is valid
    'Field has to start with exclamation mark', // Error message
)

const FORM_RULES = {
    email: [RULES.required],
    password: [RULES.required, startsWithExcalamationMark],
};
```


## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @stewie-js/adapter-bun
Description: Bun HTTP adapter for the Stewie framework
Latest version: 0.5.0

# @stewie-js/adapter-bun

>❗ **Work in progress.**
>
>Stewie is under active development and not yet stable. APIs may change between releases. Not recommended for production use yet.

Bun HTTP adapter for Stewie. Since Bun's `Bun.serve()` natively speaks `Request` / `Response`, this adapter is a thin wrapper that connects your Stewie app handler to `Bun.serve()`.

Part of the [Stewie](https://github.com/cwins/stewie-js) framework.

## Install

```bash
pnpm add @stewie-js/adapter-bun
```

The example above also uses `@stewie-js/server` and `@stewie-js/core`, which are a common pairing but not required by the adapter itself — it works with any handler that accepts a `Request` and returns a `Response`.

## Usage

```ts
import { createBunHandler } from '@stewie-js/adapter-bun'
import { renderToString } from '@stewie-js/server'
import { jsx } from '@stewie-js/core'
import App from './App.js'

const template = Bun.file('dist/client/index.html').text()

Bun.serve(createBunHandler(async (req) => {
  const { html, stateScript } = await renderToString(jsx(App, {}))
  const page = (await template)
    .replace('<!--ssr-outlet-->', html)
    .replace('</body>', `  ${stateScript}\n</body>`)
  return new Response(page, {
    headers: { 'content-type': 'text/html; charset=utf-8' },
  })
}, { port: 3000 }))
console.log('Listening on http://localhost:3000')
```

## API

| Export | Description |
|---|---|
| `createBunHandler(app, options?)` | Returns a `BunServeOptions` object (including the `fetch` handler) ready to pass directly to `Bun.serve()` |
| `StewieApp` | Type: `(request: Request) => Response \| Promise<Response>` |
| `BunServeOptions` | Type: the serve-options object returned by `createBunHandler` |

Unhandled errors thrown by the app handler are caught, logged to `console.error`, and converted to a `500` response automatically.
npm package: @stewie-js/adapter-node
Description: Node.js HTTP adapter for the Stewie framework
Latest version: 0.5.0

# @stewie-js/adapter-node

>❗ **Work in progress.**
>
>Stewie is under active development and not yet stable. APIs may change between releases. Not recommended for production use yet.

Node.js HTTP adapter for Stewie. Bridges Node's `http.IncomingMessage` / `ServerResponse` to the standard Web `Request` / `Response` API that `@stewie-js/server` uses, so the same app handler works across Node, Bun, and other WinterCG runtimes.

Requires Node 18+.

Part of the [Stewie](https://github.com/cwins/stewie-js) framework.

## Install

```bash
pnpm add @stewie-js/adapter-node
```

The example below also uses `@stewie-js/server` and `@stewie-js/core`, which are a common pairing but not required by the adapter itself — it bridges any handler that accepts a `Request` and returns a `Response`.

## Usage

```ts
import { createNodeHandler } from '@stewie-js/adapter-node'
import { renderToString } from '@stewie-js/server'
import { createServer } from 'node:http'
import { readFileSync } from 'node:fs'
import { jsx } from '@stewie-js/core'
import App from './App.js'

const template = readFileSync('dist/client/index.html', 'utf-8')

const handler = createNodeHandler(async (req) => {
  const { html, stateScript } = await renderToString(jsx(App, {}))
  const page = template
    .replace('<!--ssr-outlet-->', html)
    .replace('</body>', `  ${stateScript}\n</body>`)
  return new Response(page, {
    headers: { 'content-type': 'text/html; charset=utf-8' },
  })
})

createServer(handler).listen(3000)
console.log('Listening on http://localhost:3000')
```

## API

| Export | Description |
|---|---|
| `createNodeHandler(app)` | Wraps a `(Request) => Response \| Promise<Response>` function into a `http.RequestListener` |
| `StewieApp` | Type: `(request: Request) => Response \| Promise<Response>` |

Response bodies are streamed through to Node rather than buffered first, so streaming SSR responses from `renderToStream` work correctly. Unhandled errors thrown by the app handler are caught, logged to `console.error`, and converted to a `500` response automatically.