open-index/open-npm huggingface dataset:
npm package: @leesangb/jotai-accessor
Description: A lightweight wrapper around Jotai that provides a simplified API for state management in both Vanilla JavaScript and React applications. Makes Jotai's atom-based state management more accessible and easier to use.
Author: Sangbin Lee
Latest version: 0.0.1

# jotai-accessor

`jotai-accessor` is a utility to use [`jotai`](https://jotai.org) atoms easily in projects that use both Vanilla and React.

## Why?

When using [`jotai`](https://jotai.org) in a project that uses both Vanilla and React, you have to use `getDefaultStore().get(someAtom)` or `getDefaultStore().set(someAtom, value)` to read/write to an atom.
Altough this is not a problem, it can be a bit verbose when you have to manage a lot of atoms in vanilla code.

This utility is a simple wrapper that lets you use `jotai` atoms conveniently in both Vanilla and React.

## Usage

### Create an accessor

```ts
import { atom } from 'jotai';
import { accessor } from '@leesangb/jotai-accessor';

const counter = accessor(atom(0));
```

### Use the accessor in your component with jotai's API

```tsx
function Counter() {
  const [count, setCount] = useAtom(counter.atom);

  return (
    <h1>
      {count}
      <button onClick={() => setCount((c) => c + 1)}>one up</button>
    </h1>
  );
}
```

### Use it in Vanilla code and React

```tsx
class State {
  counter = accessor(atom(0));
}

const state = new State();

setInterval(() => {
  state.counter.set(prev => prev + 1);
}, 1000);

function Counter() {
  const count = useAtomValue(state.counter.atom);

  return (
    <h1>
      {count}
    </h1>
  );
}
```

### Create derived atoms with computed values
A new read-only atom can be created from existing atoms by passing a read function as the first argument. get allows you to fetch the contextual value of any atom.

```tsx
const doubleCounter = accessor(atom(get => get(counter.atom) * 2));

function DoubleCounter() {
  const [doubledCount] = useAtom(doubleCounter.atom);
  return <h2>{doubledCount}</h2>;
}
```

## License

MIT
npm package: @leesei/imgmini
Description: CLI Image Minifier with Gulp
Latest version: 3.0.1

# imgmini

Image Minify with Gulp Image.

Fork of [Asikur22/npm-imgmini](https://github.com/Asikur22/npm-imgmini), update dependencies and command line.

Gulp 4 generates warning on usage of Chokidar v2, but we're not using this app for watch so it can be ignored.

[imagemin/imagemin-cli](https://github.com/imagemin/imagemin-cli) is a modern incarnation, but:

- it does not keep source's directory structure
- the default invocation is not optimized
- `Promise.all()` causes resource issue on low end machines (this app has concurrency limit)

Use `mapLimit()` to control concurrency?
[async - Documentation](https://caolan.github.io/async/v3/docs.html#mapLimit)

## Install

```sh
$ npm install -g @leesei/imgmini
```

## Usage

```sh
$ imgmini image.jpg image2.png
# keep original files
$ imgmini -k image.jpg image2.png

# before globbing is suppported:
find $FOLDER -type f | xargs -P$(nproc) -- imgmini
```

### Show System Notification

```sh
$ imgmini -n image.jpg image2.png
```
npm package: @leesf/rhf-devtool-react
Description: My custom react-hook-form devtool
Author: LeeSF
Latest version: 0.2.1

<div align="center">
    <p align="center">
        <a href="https://react-hook-form.com" title="React Hook Form - Simple React forms validation">
            <img src="https://raw.githubusercontent.com/bluebill1049/react-hook-form/master/docs/logo.png" alt="React Hook Form Logo - React hook custom hook for form validation" />
        </a>
    </p>
</div>

<p align="center">My custom react-hook-form devtool for debuggins</p>

## Goal

This is my custom React Component will help you to debug forms when working React Hook Form, and give you more insight about your form's detail.

## Install

`$ npm i -d @leesf/rhf-devtool-react`

## Quickstart

```typescript jsx
import React from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { DevTool } from '@leesf/rhf-devtool-react';
import './App.css';

// using useForm
const App = () => {
  const { register, control, handleSubmit } = useForm({
    mode: 'onChange',
  });

  return (
    <>
      <DevTool control={control} />

      <form onSubmit={handleSubmit((d) => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input name="test" ref={register} />

        <input type="submit" />
      </form>
    </>
  );
};

// or using FormProvider
const App = () => {
  const methods = useForm({
    mode: 'onChange',
  });
  const { register, control, handleSubmit } = methods

  return (
    <FormProvider {...methods}>
      <DevTool />
      <form onSubmit={handleSubmit((d) => console.log(d))}>
        <h1>React Hook Form DevTools</h1>

        <label>Test</label>
        <input name="test" ref={register} />

        <input type="submit" />
      </form>
    <FormProvider>
  );
};

```

## Todo:

### Development

- [ ] Add unit, integrated and e2e tests
- [ ] Add CI/CD automation workflow for publishing

### Doc

- [ ] Add acknowledgements (react-hook-form, tsdown)

### Feature

- [ ] Add devtool for react native rozenite plugin
- [ ] Add position method
- [ ] Add toggle to expand all field section
- [ ] Export custom hooks for other customizability
npm package: @leesiongchan/botstream
Description: Facebook Messenger + RxJS + xstate = botstream
Author: Lee Siong Chan
Latest version: 0.0.10

# botstream

Facebook Messenger + RxJS + xstate = botstream (POC)

## Motivation

WIP

## Usage

```javascript
import botstream, { messageEvent$ } from '@leesiongchan/botstream';

const bot = botstream({
    facebookAccessToken: '1234',
    facebookApiVersion: 'v4', // Optional, default = 'v4'
    facebookVerifyToken: '2345',
    port: 3000,
});

const echoConvo$ = messageEvent$.pipe(say(ev => `Echo: ${ev.message.text}`));
const helloConvo$ = event$.pipe(
    hears(['hello'], 'message'),
    say('Ok, hello! How can I help you?'),
);

bot.loadSkills(echoConvo$, helloConvo$);
```

## APIs

### botstream

-   `botstream(config: BotstreamConfig)`
-   `loadSkills(skills: Observable[]): void`
-   `server`
    A Fastify server.

### Observables

-   `event$`
-   `eventReplay$`
-   `messageEvent$`
-   `postbackEvent$`

### Operators

-   `ask`
-   `hears`
-   `say`
-   `sendButtonTemplate`
-   `sendGenericTemplate`
-   `sendQuickReplies`
-   `showSenderAction`

## TODO

-   [ ] xstate Integration
-   [ ] Support multiple channels?
npm package: @leesiongchan/brawdkaster
Description: A simple broadcaster to broadcast your message to multiple social channels simultaneously.
Author: Lee Siong Chan
Latest version: 0.2.0

# Brawdkaster

A simple broadcaster to broadcast your message to multiple social channels simultaneously.

## Usage

```javascript
const facebookPageConnector = new FacebookPageConnector({
  accessToken: 'a1b2',
  id: 'my-fb-page', // `id` is an identifier so you can have multiple same type of connectors
  pageId: '1234',
});
const instagramBusinessConnector = new InstagramBusinessConnector({
  accessToken: 'a1b2',
  id: 'my-ig-page',
  userId: '1234',
});
const linkedInConnector = new LinkedInConnector({
  accessToken: 'a1b2',
  id: 'my-linkedin',
});
const twitterConnector = new LinkedInConnector({
  accessToken: '1234',
  accessTokenSecret: '5678',
  consumerKey: 'abcd',
  consumerSecret: 'efgh',
  id: 'my-twitter',
});
const brawdkaster = new Brawdkaster({
  connectors: [
    facebookPageConnector,
    instagramBusinessConnector, // Not tested
    linkedInConnector,
    twitterConnector, // Not tested
  ],
});

brawdkaster.broadcast(
  {
    message: 'Hello World',
  },
  {
    // TODO: This is just a concept, not implemented yet.
    only: ['my-fb-page'],
  },
);
```

## Build your own connector

WIP

## TODO

- [ ] Facebook Connector
- [x] Facebook Page Connector
- [x] Twitter Connector
- [x] Instagram Business Connector
- [x] LinkedIn Connector
- [ ] LinkedIn Page Connector
- [ ] WhatsApp Connector
- [ ] Tumblr Connector
- [ ] Better Documentation
- [ ] Add debug logs
- [ ] Test Cases