open-index/open-npm huggingface dataset:
npm package: @strongvault/shared
Description: Use this library to reuse code in `admin`, `client`, `server` and `web`.
Latest version: 1.0.3

# StrongVault shared library

Use this library to reuse code in `admin`, `client`, `server` and `web`.

## Usage

After changes in `shared` folder, run

    yarn prepack

to export changes to `shared/lib`.

To import `shared` to project, check if `package.json` contains

    "dependencies": {
      ...
      "shared": "file:../shared/lib",
      ...
    }

In case it is missing add it and run

    yarn install

Otherwise run

    yarn upgrade shared

to update changes.

Import example:

    import {EVENT_ACTION} from 'shared'
    import type {Event} from 'shared'
npm package: @strothj/babel-preset-react-app
Description: Babel preset used by Create React App
Latest version: 3.1.1

# babel-preset-react-app

This package includes the Babel preset used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.

## Usage in Create React App Projects

The easiest way to use this configuration is with [Create React App](https://github.com/facebook/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**

## Usage Outside of Create React App

If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps.

First, [install Babel](https://babeljs.io/docs/setup/).

Then install babel-preset-react-app.

```sh
npm install babel-preset-react-app --save-dev
```

Then create a file named `.babelrc` with following contents in the root folder of your project:

```js
{
  "presets": ["react-app"]
}
```

This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.

## Usage with TypeScript

To use this package with [`@babel/preset-typescript`](https://www.npmjs.com/package/@babel/preset-typescript), you need to disable `@babel/preset-flow` first.

You can achieve this by doing:

```
{
  "presets": [
    ["react-app", {
        "flow": false
    }],
    "@babel/typescript"
  ]
}
```
npm package: @strothj/react-archer
Description: Draw arrows between DOM elements in React
Latest version: 0.2.1

# react-archer
[![CircleCI](https://circleci.com/gh/pierpo/react-archer.svg?style=svg)](https://circleci.com/gh/pierpo/react-archer)

🏹 Draw arrows between DOM elements in React 🖋

## Installation

`npm install react-archer --save` or `yarn add react-archer`

## Example

![Example](https://raw.githubusercontent.com/pierpo/react-archer/master/example.png)

```jsx
import { ArcherContainer, ArcherElement } from 'react-archer';

const rootStyle = { display: 'flex', justifyContent: 'center' };
const rowStyle = { margin: '200px 0', display: 'flex', justifyContent: 'space-between', }
const boxStyle = { padding: '10px', border: '1px solid black', };

const App = () => {
  return (
    <div>

      <ArcherContainer strokeColor='red' >
        <div style={rootStyle}>
          <ArcherElement
            id="root"
            relations={[{
              from: { anchor: 'bottom' },
              to: { anchor: 'top', id: 'element2' }
            }]}
          >
            <div style={boxStyle}>Root</div>
          </ArcherElement>
        </div>

        <div style={rowStyle}>
          <ArcherElement
            id="element2"
            relations={[{
              from: { anchor: 'right'},
              to: { anchor: 'left', id: 'element3' },
              label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
            }]}
          >
            <div style={boxStyle}>Element 2</div>
          </ArcherElement>

          <ArcherElement id="element3">
            <div style={boxStyle}>Element 3</div>
          </ArcherElement>

          <ArcherElement
            id="element4"
            relations={[{
              from: { anchor: 'left'},
              to: { anchor: 'right', id: 'root' },
              label: 'Arrow 3',
            }]}
          >
            <div style={boxStyle}>Element 4</div>
          </ArcherElement>
        </div>
      </ArcherContainer>

    </div>
  );
}

export default App;
```

## API

### `ArcherContainer`

#### `strokeColor`: PropTypes.string

A color string `'#ff0000'`

#### `strokeWidth`: PropTypes.number

A size in `px`

#### `arrowLength`: PropTypes.number

A size in `px`

#### `arrowThickness`: PropTypes.number

A size in `px`

#### `style`: PropTypes.object

#### `className`: PropTypes.string

#### `children`: PropTypes.node

### `ArcherElement`

#### `id`: PropTypes.string

#### `style`: PropTypes.object

#### `className`: PropTypes.string

#### `relations`: PropTypes.arrayOf(relation)

The `relation` object has the following shape:

```javascript
{
  from: {
    anchor: PropTypes.oneOf([ 'top', 'bottom', 'left', 'right' ])
  },
  to: {
    anchor: PropTypes.oneOf([ 'top', 'bottom', 'left', 'right' ])
    id: PropTypes.string
  },
  label: PropTypes.node
}
```

## TODO

- Automatic anchoring option
- Options to customize the path shape more (straight line, right angle line, smoothed right angle path)
- Individual customization of arrows (change color of a single arrow for example)
- Add a Code Sandbox
- Add flow
npm package: @strothj/react-error-overlay
Description: An overlay for displaying stack frames.
Author: Joe Haddad
Latest version: 4.0.0

# `react-error-overlay`

`react-error-overlay` is an overlay which displays when there is a runtime error.

## Development

When developing within this package, make sure you run `npm start` (or `yarn start`) so that the files are compiled as you work.
This is ran in watch mode by default.

If you would like to build this for production, run `npm run build:prod` (or `yarn build:prod`).<br>
If you would like to build this one-off for development, you can run `NODE_ENV=development npm run build` (or `NODE_ENV=development yarn build`).
npm package: @strothj/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.1.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @stroudy/framework.js
Description: Type definitions for HRRP Framework, based on esx.js by itschip & qbcore.js by Z3rio
Author: Liam Dormon
Latest version: 0.0.4

# QBCore.js

<div style="margin: auto 0; width: 100%">
  <div>
  <a href="https://www.npmjs.com/package/@stroudy/framework.js">
    <img src="https://img.shields.io/npm/v/@stroudy/framework.js?style=flat" alt="npm version">
  </a>
  <a href="https://www.npmjs.com/package/@stroudy/framework.js">
    <img src="https://img.shields.io/npm/dm/@stroudy/framework.js?style=flat">
  </a>
</div>

## About

This is a JavaScript/TypeScript wrapper for the HRRP framework privately used in in FiveM, based on esx.js by [itschip](https://github.com/itschip).

If you experience any issues, please post them in the `Issues`.

## Guide

### `Installation`

Run `npm i @stroudy/framework.js` to install the package. When this is done you are ready to use it.
npm package: @strovi/cli
Description: Strovi CLI
Author: William Naslund
Latest version: 1.0.0-alpha.3

cli
===

Strovi CLI

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/cli.svg)](https://npmjs.org/package/cli)
[![Downloads/week](https://img.shields.io/npm/dw/cli.svg)](https://npmjs.org/package/cli)
[![License](https://img.shields.io/npm/l/cli.svg)](https://github.com/12150w/cli/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @strovi/cli
$ strovi COMMAND
running command...
$ strovi (-v|--version|version)
@strovi/cli/1.0.0-alpha.2 darwin-x64 node-v10.15.3
$ strovi --help [COMMAND]
USAGE
  $ strovi COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`strovi autocomplete [SHELL]`](#strovi-autocomplete-shell)
* [`strovi help [COMMAND]`](#strovi-help-command)
* [`strovi new FOLDER`](#strovi-new-folder)

## `strovi autocomplete [SHELL]`

display autocomplete installation instructions

```
USAGE
  $ strovi autocomplete [SHELL]

ARGUMENTS
  SHELL  shell type

OPTIONS
  -r, --refresh-cache  Refresh cache (ignores displaying instructions)

EXAMPLES
  $ strovi autocomplete
  $ strovi autocomplete bash
  $ strovi autocomplete zsh
  $ strovi autocomplete --refresh-cache
```

_See code: [@oclif/plugin-autocomplete](https://github.com/oclif/plugin-autocomplete/blob/v0.1.3/src/commands/autocomplete/index.ts)_

## `strovi help [COMMAND]`

display help for strovi

```
USAGE
  $ strovi help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v2.2.1/src/commands/help.ts)_

## `strovi new FOLDER`

create a new Strovi Framework project

```
USAGE
  $ strovi new FOLDER

ARGUMENTS
  FOLDER  the folder to create setup the project in
```

_See code: [src/commands/new.ts](https://github.com/12150w/cli/blob/v1.0.0-alpha.2/src/commands/new.ts)_
<!-- commandsstop -->
npm package: @strowk/mcp-k8s
Description: MCP Kubernetes Server - Windows ARM64 build
Latest version: 0.6.1

# MCP K8S

This is a distribution of MCP server connecting to Kubernetes written in Golang and published to npm.

Currently available:

| 💬 prompt | 🗂️ resource | 🤖 tool |

- 🗂️🤖 List Kubernetes contexts
- 💬🤖 List Kubernetes namespaces
- 🤖 List, get, create and modify any Kubernetes resources
  - includes custom mappings for resources like pods, services, deployments
- 🤖 List Kubernetes nodes
- 💬 List Kubernetes pods
- 🤖 Get Kubernetes events
- 🤖 Get Kubernetes pod logs
- 🤖 Run command in Kubernetes pod

## Example usage with Claude Desktop

To use this MCP server with Claude Desktop you would firstly need to install it.

You have two options at the moment - use pre-built binaries or build it from source. Refer to [sources](https://github.com/strowk/mcp-k8s-go/) to know how to build from sources.

### Installing from npm

```bash
npm install -g @strowk/mcp-k8s
```

Then check version by running `mcp-k8s --version` and if this printed installed version, you can proceed to add configuration to `claude_desktop_config.json` file:

```json
{
    "mcpServers": {
        "mcp_k8s": {
            "command": "mcp-k8s",
            "args": []
        }
    }
}
```

### Using from Claude Desktop

Now you should be able to run Claude Desktop and:
- see K8S contexts available to attach to conversation as a resource
- ask Claude to list contexts
- ask Claude to list pods in a given context and namespace
- ask Claude to list events in a given context and namespace
- ask Claude to read logs of a given pod in a given context and namespace

### Demo usage with Claude Desktop

Following chat with Claude Desktop demonstrates how it looks when selected particular context as a resource and then asked to check pod logs for errors in kube-system namespace:

![Claude Desktop](docs/images/claude-desktop-logs.png)


### Environment Variables and Command-line Options

The following environment variables are used by the MCP server:

- `KUBECONFIG`: Path to your Kubernetes configuration file (optional, defaults to ~/.kube/config)

The following command-line options are supported:

- `--allowed-contexts=<ctx1,ctx2,...>`: Comma-separated list of allowed Kubernetes contexts that users can access. If not specified, all contexts are allowed.
- `--readonly`: Disables any tool which can write changes to the cluster
- `--help`: Display help information
- `--version`: Display version information

For example if you are configuring Claude Desktop, you can add the following configuration to `claude_desktop_config.json` file:

```json
{
    "mcpServers": {
        "mcp_k8s": {
            "command": "mcp-k8s",
            "args": [
                "--allowed-contexts=dev,prod",
                "--readonly"
            ]
        }
    }
}
```

, which would allow only `dev` and `prod` contexts to be used and would disable any tool which can write changes to the cluster.
npm package: @strowk/mcpmock
Description: mcpmock - Windows ARM64 build
Latest version: 0.0.2

# mcpmock

Install: `npm install -g @strowk/mcpmock`

mcpmock is a CLI tool that generates a mock [Model Context Protocol](https://modelcontextprotocol.io/) server from list of cases in a YAML file.

For example you define something like this in a YAML file:

```yaml
case: List tools

# requesting list of tools
in: {"jsonrpc": "2.0", "method": "tools/list", "id": 1}

# expect one tool in the list
out: {"jsonrpc": "2.0", "result":{ "tools": [{"description": "Lists files in the current directory", "inputSchema": {"type": "object"}, "name": "list-current-dir-files"}] }, "id": 1}

---

case: Call current dir files tool

# requesting list of files in the current directory
in: {"jsonrpc": "2.0", "method": "tools/call", "params": {"name": "list-current-dir-files", "arguments": {}}, "id": 1}

# expect list of files returned as text content without error
out: {
  "jsonrpc": "2.0", 
  "id": 1,
  "result": {
    "content": [
      {"type": "text", "text": ".gitignore"},
      {"type": "text", "text": "README.md"},
      {"type": "text", "text": "go.mod"},
      {"type": "text", "text": "go.sum"},
      {"type": "text", "text": "main.go"},
      {"type": "text", "text": "main_test.go"},
      {"type": "text", "text": "testdata"},
    ],
    "isError": false
  }, 
}
```

Then if you put it in the folder `testdata` and run mcpmock like this:

```bash
mcpmock testdata
```

It would start a mock MCP server with stdio transport that would serve the cases defined in the YAML file.

If you now copy and paste this into your terminal:

```json
{"jsonrpc": "2.0", "method": "tools/list", "id": 1}
```
, you should see list of tools as is defined in first MCP case.

And sending this:

```json
{"jsonrpc": "2.0", "method": "tools/call", "params": {"name": "list-current-dir-files", "arguments": {}}, "id": 1}
```

, you should get the output as defined in second case.
npm package: @strowk/mcptee
Description: mcptee - Windows ARM64 build
Latest version: 0.0.4-beta.1

# mcptee

A simple tool that proxies input from MCP client to MCP server and returns the output back to the client, while also logging both to the file line by line indicating the direction of the data with a prefixes "in:" and "out:", resulting in a file that is normally valid YAML.

Before every "in:", tool would print `---` and endline that would make file multi-document YAML, so normally every combination of request/respons would be a separate document.

This could be pretty handy for testing and troubleshooting MCP clients and servers.

## Usage

```bash
mcptee <out-file> <command> [args...]
```

Some examples:
```bash
mcptee ./server_log.yaml mcp-k8s-go

mcptee ./server_log.yaml npx @strowk/mcp-k8s
```
npm package: @strozw/github-actions-languageserver
Description: CLI for `@actions/languageserver`
Author: strozw
Latest version: 0.1.11

# `@strozw/github-actions-languageserver`

[![npm](https://img.shields.io/npm/v/%40strozw%2Fgithub-actions-languageserver)](https://badge.fury.io/js/@strozw%2Fgithub-actions-languageserver)

## About

This package makes [@actions/languageserver](https://github.com/actions/languageservices/tree/main/languageserver) executable in the CLI.

## Installing & Usages

- `npm`
  ```sh
  npm i -g @strozw/github-actions-languageserver
  ```
  ```sh
  github-actions-languageserver --stdio
  ```
- `npx`
  ```sh
  npx @strozw/github-actions-languageserver --stdio
  ```

## Credits

- [@actions/languageserver](https://github.com/actions/languageservices/tree/main/languageserver)
- [tsx](https://github.com/esbuild-kit/tsx)
npm package: @strozw/use-action-state-compat
Description: Next.js v14 and React.js v18 canary compatible `useActionState`
Author: strozw
Latest version: 0.1.10

[<img src="https://img.shields.io/npm/v/%40strozw%2Fuse-action-state-compat" />](https://www.npmjs.com/package/@strozw/use-action-state-compat)

# useActionStateCompat

Next.js v14 and React.js v18 canary compatible `useActionState`

## Installation

```
npm install @strozw/use-action-state-compat
```

## Usage

```tsx
import { useActionStateCompat } from "@strozw/use-action-state-compat";

type FormState = null | string;

const myAction = async (_state: FormState, data: FormData) => {
  return new Promise<null | string>((resolve) => {
    window.setTimeout(() => {
      if (!data.get("word")) {
        resolve("please input `word`");
      }
      resolve(null);
    }, 3000);
  });
};

export function MyFrom() {
  const [currentState, action, isPending] = useActionStateCompat(
    myAction,
    null,
  );

  return (
    <div>
      {currentState && <div>ERROR: {currentState}</div>}
      <form action={action}>
        <input type="text" name="word" />
        <button type="submit" disabled={isPending}>
          Submit
        </button>
      </form>
    </div>
  );
}
```
npm package: @strt/create-project
Description: > Create new project with only one command
Author: Alexander Nanberg
Latest version: 1.0.0

# strt-create-project
> Create new project with only one command

<img src="screenshot.png" width="1153">

## Install 
```
$ npm install -g @strt/create-project
```

## Usage 
```
$ create-project <project-name>
```
npm package: @strtehu/ayatori
Description: Embeddable flowchart editor — a single IIFE bundle with CSS inlined
Latest version: 0.1.1

# Ayatori

**Ayatori** (あやとり) — 糸で図形を作り、繋ぎ替えて新たな形を紡ぐ日本の遊びに着想を得た、業務フローチャートの双方向エディタ。
npm package: @struchenkov/ng2-select
Description: Angular2 select boxes
Author: Vyacheslav Chub
Latest version: 2.0.11

# Native UI Select Angular component
[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)

## Quick start

1. A recommended way to install ***ng2-select*** is through [npm](https://www.npmjs.com/search?q=@struchenkov/ng2-select) package manager using the following command:

  `npm i ng2-select --save`

2. Include `ng2-select.css` in your project

## API

### Properties

  - `items` - (`Array<any>`) - Array of items from which to select. Should be an array of objects with `id` and `text` properties.
  As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text.
  Items may be nested by adding a `children` property to any item, whose value should be another array of items. Items that have children may omit having an ID.
  If `items` are specified, all items are expected to be available locally and all selection operations operate on this local array only.
  If omitted, items are not available locally, and the `query` option should be provided to fetch data.
  - `active` (`?Array<any>`) - selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single',
  or an array of such objects otherwise. This option is mutually exclusive with value.
  - `allowClear` (`?boolean=false`) (*not yet supported*) - Set to `true` to allow the selection to be cleared. This option only applies to single-value inputs.
  - `placeholder` (`?string=''`) - Placeholder text to display when the element has no focus and selected items.
  - `disabled` (`?boolean=false`) - When `true`, it specifies that the component should be disabled.
  - `multiple` - (`?boolean=false`) - Mode of this component. If set `true` user can select more than one option.
  This option only applies to single-value inputs, as multiple-value inputs don't have the search input in the dropdown to begin with.

### Events

  - `data` - it fires during all events of this component; returns `Array<any>` - current selected data
  - `selected` - it fires after a new option selected; returns object with `id` and `text` properties that describes a new option.
  - `removed` - it fires after an option removed; returns object with `id` and `text` properties that describes a removed option.
  - `typed` - it fires after changing of search input; returns `string` with that value.