open-index/open-npm huggingface dataset:
npm package: @khijo/devportal
Description: Dashboard for managing your local dev repositories. Click Play to actually run them.
Author: Khijo
Latest version: 1.2.3

# DevPortal

Dashboard for managing your local dev repositories. Click Play to actually run them.

## What's New in 1.2.0

- **DEV & PROD URL links** - Add environment URLs to your projects with quick-access buttons
- **Smarter link management** - No more duplicate link types; form auto-filters available options

## Install

```bash
npm install -g @khijo/devportal
```

## Run

```bash
devportal
```

Opens at http://localhost:3100

Click **Scan** to auto-detect your local repositories.

### WSL Users

Add this to VS Code settings for "Open in VS Code" to work:

```json
"window.openFoldersInNewWindow": "on"
```

## Features

- **Real process control** - Play/Stop buttons actually spawn and kill processes
- **Auto port assignment** - No more port conflicts. First app gets 3000, next gets 3001, etc.
- **Monorepo support** - Detects NX/Turbo workspaces and their individual apps
- **AI analysis** - Drop a `package.json` to auto-fill project details

## How It Works

```
DevPortal (browser)  ←→  Backend Server (port 3100)  →  Your Apps (ports 3000+)
```

When you click Play:

1. Backend finds an available port
2. Spawns your app with that port
3. UI updates in real-time via WebSocket

## Environment

Set `GEMINI_API_KEY` in `.env.local` for AI-powered package.json analysis.
npm package: @khinenw/express-async-router
Description: An async router for express
Author: Khinenw
Latest version: 1.0.0

## express-async-router
An async router for express

### Features
 * automatically detects sync / async.
 * supports all methods (use, get, post, delete, ...)
 * supports param

### Usage
```js
const createAsyncRouter = require('express-async-router');

const router = createAsyncRouter();
router.get('/', myAsyncMiddleware, syncMiddleware, async (req, res, next) => {
	// whatever

	if(somethingErrornous)
		throw new Error("This does not become unhandled rejection");

	// otherwise call next like usual
	next();
});
```
npm package: @khinshankhan/emoji-helper-core
Description: The heart of emoji-helper
Author: Khinshan Khan
Latest version: 3.0.1

# emoji-helper-core

The heart of emoji-helper

This package allows you to define a strongly typed map of emoji data to use in your project. It should likely be used with other packages in [emoji-helper](https://github.com/khinshankhan/emoji-helper).

This package gives you the freedom to source your emoji from sources other than just a tweemoji pack. You're free to use your custom emoji from Discord or Slack, and even animated emoji! It's all just name <-> url (+ some meta info) at its core.

### Install

```sh
pnpm add @khinshankhan/emoji-helper-core
```

### Usage

You need to define an ["emoji pack"](#emoji-pack). Whether it's a single pack or multiple packs, you would just do

```js
export const emojiLookup = createEmojiLookup([pack1, pack2, packn], true, true);
```

to create the strongly typed lookup. It's also recommended to use the following type:

```ts
type MapKey<T> = T extends Map<infer K, any> ? K : never;
export type EmojiKey = MapKey<typeof emojiLookup>;
```

Afterwards you can use the lookup like `const emojiInfo = emojiLookup.get(name)` and proceed to use the emoji info. Note that the name will have to have colons surrounding it, eg `tada` would be `:tada:`.

#### Params

createEmojiLookup takes in

- `emojiPacks` of type `EmojiPack[]`
  - info about the emoji you'd like to use in the lookup, view ["emoji pack"](#emoji-pack)
- `overwrite` of type `boolean`
  - defaults to false
  - if a duplicate emoji name is encountered, should it overwrite previous info?
- `merge` of type `boolean`
  - default to false
  - if a duplicate emoji name is encountered, should it attempt to merge with previous info?
- `supressOverwriteWarnings` of type `boolean`
  - defaults to false
  - if a duplicate emoji name is encountered, should it throw an error? (useful for injections eg with emoji-helper-remark)

### Emoji Pack

An emoji pack is simply info about a collection of emoji. A single emoji's info should be

```
export interface EmojiInfoTemplate {
  names: readonly string[];
  url: string;

  char?: string;
  description?: string;
}
```

where only `names` and `url` are needed. `names` are the emoji name and any aliases associated with it. It's an array because aliases are apparently common enough, eg `:octagonal_sign:` and `:stop_sign:`.

`char` may come in handy if, for example, you create a component that needs an ascii character such as

```jsx
<img
  src={emojiInfo.url}
  alt={emojiInfo.char}
  aria-label={emojiInfo.alt}
  height="72px"
  width="72px"
/>
```

If you need custom info, rather than abusing char or description, let me know so I can add a new field to the type. Personally haven't needed it so I've just skimped out on it to make a package available immediately.

### TODO

- allow names to be a single string or multiple strings
- allow for optional surrounding colons
npm package: @khinshankhan/emoji-helper-pack-github
Description: Emoji pack using GitHub's assets
Author: Khinshan Khan
Latest version: 3.0.4

# emoji-helper-pack-github

Emoji pack using GitHub's assets

### Install

```sh
pnpm add @khinshankhan/emoji-helper-pack-github
```

### Usage

In unison with emoji-helper-core, you can use the pack as part of your lookup eg

```js
import githubEmoji from "@khinshankhan/emoji-helper-pack-github";

export const emojiLookup = createEmojiLookup(
  [githubEmoji, customEmoji],
  true,
  true
);
```

### TODO

- add in ascii char
- automate this away
- add in emoji descriptions
npm package: @khinshankhan/emoji-helper-remark
Description: Remark markdown transformer to replace :emoji: in text with jsx
Author: Khinshan Khan
Latest version: 3.1.1

# emoji-helper-remark

Remark markdown transformer to replace :emoji: in text with jsx

### Install

```sh
pnpm add @khinshankhan/emoji-helper-remark
```

### Usage

First, you need to define an emoji lookup and then in your remark plugins you can use it likeso

```js
[
  remarkSimpleEmoji,
  {
    validate: (name: string) => emojiLookup.get(name as EmojiKey),
    lookup: (name: string) => {
      const emoji = emojiLookup.get(name as EmojiKey)
      // NOTE: this should be guranteed due to validate
      return emoji!.alt
    },
  },
],
```

#### Params

The param (second argument in the array, the whole object) is

```ts
{
  jsx?: boolean,
  jsxElement?: string,
  jsxAttribute?: string,
  validate?: (string) => boolean,
  lookup?: (string) => string,
}
```

The `jsx` flag determines whether or not to inject an mdx node (true) or to use a text node (false), and it defaults to true.

The `jsxElement` key is the name of the injected mdx node. In whatever mdx library you use, you will have to provide a component with this name, and it defaults to `Emoji`.

The `jsxAttribute` key is the attribute to map the emoji name onto the jsxElement, it defaults to `name`. So, if the text is `Hello :wave`, this will essentially be `Emoji({ name: ":wave:" })` by default settings (which is equivalent to `<Emoji name=":wave:" />`).

The `validate` key helps cull down false positive matches. I'm no regex master so you may end up with some weird string activating the injection like `:weird:` (it won't match _that_, but it could match something not in your emoji lookup). When validate returns false, it'll just create a text node instead of trying to use an emoji.

The `lookup` key lets you use your lookup info in text nodes. The jsx flag should be false for this. Eg you may want to turn `Hello :wave:` into `Hello 👋` using the ascii value rather than an mdx component because you want to use it for SEO or something. Whatever lookup returns for the name is what gets used.

### TODO

- fix types
npm package: @khirayama/circuit
Description: Circuit is a simple flux store and dispatcher for JavaScipt apps.   Circuit provide `Store` with dispatch and subscription functions.
Author: khirayama
Latest version: 1.1.1

# <img src="logo/logo-title-dark.png" height="60"/>

Circuit is a simple flux store and dispatcher for JavaScipt apps.  
Circuit provide `Store` with dispatch and subscription functions.  

If you use React, You can use [React Circuit](https://github.com/khirayama/react-circuit) component for Circuit's store.

## Installation

```
npm install --save @khirayama/circuit
```

## API

This has 5 functions and store.  
Ref: [Documents](docs)

### Functions

This has 5 functions.

- createStore
- getStore
- clearStore
- getState
- dispatch

### Store

Store instance has 4 publich methods.

- store.getState
- store.dispatch
- store.addChangeListener
- store.removeChangeListener

## Documentation

[Documents](docs)

## Examples

Ref: [Examples](examples)

```javascript

import {createStore} from 'circuit';

const initialState = {
  total: 0,
};

function reducer(state, action) {
  switch (action.type) {
    case 'COUNT_UP':
      state.total += 1;
      break;
    case 'COUNT_DOWN':
      state.total -= 1;
      break;
  }
  return state;
}

const store = createStore(initialstate, reducer);

store.getState();
// same) getState();
// result) {total: 0}

store.dispatch({type: 'COUNT_UP'});
// same) dispatch({type: 'COUNT_UP'})

store.getState();
// same) getState();
// result) {total: 1}

store.dispatch({type: 'COUNT_DOWN'});
// same) dispatch({type: 'COUNT_DOWN'})

store.getState();
// same) getState();
// result) {total: 0}

```

## [Recommend] Rules

- Action creator can dispatch only one action.
- Action should have `type` property.
- Reducer should return new state.
- Readable state by `getState` anywhere.
npm package: @khirayama/handle-ui
Description: https://khirayama.github.io/handle-ui/
Latest version: 0.0.17

# Handle-UI

https://khirayama.github.io/handle-ui/

- Tabs
- List
- Swipeable View
- Icon

- - -

- Application Header
- Buttons
  - Flat Button
  - Floating Button
  - Icon Button
- Link
- Dialog
- Select Field
- Text Field
npm package: @khirayama/react-circuit
Description: Official React bindings for [Circuit](https://github.com/khirayama/circuit).
Author: khirayama
Latest version: 1.0.1

# React Circuit

Official React bindings for [Circuit](https://github.com/khirayama/circuit).

## Installation

```
npm install --save @khirayama/react-circuit
```

## Documentation

[Documents](docs)

## Examples

Ref: [Examples](https://github.com/khirayama/circuit/tree/master/examples/count-with-react-circuit)

```
createStore({total: 0}, (state, action) => {
  switch (action.type) {
    case 'COUNT_UP':
      state.total += 1;
      break;
    case 'COUNT_DOWN':
      state.total -= 1;
      break;
    default:
      break;
  }
  return state;
});

export default class CountContainer extends Container {
  render() {
    return (
      <section>
        <h1>Count: {this.state.total}</h1>
        <CountButton onCountButtonClick={countUp(this.dispatch)}>Count up +1</CountButton>
        <CountButton onCountButtonClick={countDown(this.dispatch)}>Count down -1</CountButton>
      </section>
    );
  }
}
```
npm package: @khirayama/storyteller
Description: A tool that declarative visualizing your application.
Author: khirayama
Latest version: 0.0.4

# <img src="./images/logo_text.png" height="60" alt="storyteller"></img>

A tool that declarative visualizing your application.

[DEMO: Twitter Storyboard](https://khirayama.github.io/storyteller/)

![screenshot](./images/screenshot.png)

## Installation

## Examples

## Documentation

- [Quick Start](./QUICK_START.md)
- [API Reference](./API_REFERENCE.md)
- [Contributing Guide](./CONTRIBUTING.md)