open-index/open-npm huggingface dataset:
npm package: @simplystack/ui
Description: ## Documentation Our documentation site lives at http://ui.hubgridcloud.com. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
Author: SimplyStack Dev Team
Latest version: 3.2.14

# @simplystack/ui

## Documentation
Our documentation site lives at http://ui.hubgridcloud.com. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

```sh
npm install --save @simplystack/ui
```

## Usage

### main.js
```js
import Vue from 'vue';
import ui from '@simplystack/ui';
import '@simplystack/ui/main.css';

Vue.use(ui);
```

### tailwind.config.js
```js
module.exports = {
  presets: [require('@simplystack/ui/preset')],
};
```
npm package: @simplystack/vue
Description: ## Documentation Our documentation site lives at http://ui.hubgridcloud.com. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
Author: SimplyStack Dev Team
Latest version: 1.2.1

# @simplystack/ui

## Documentation
Our documentation site lives at http://ui.hubgridcloud.com. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

```sh
npm install --save @simplystack/ui
```

## Usage

### main.js
```js
import Vue from 'vue';
import ui from '@simplystack/ui';
import '@simplystack/ui/main.css';

Vue.use(ui);
```

### tailwind.config.js
```js
const theme = require('@simplystack/ui/theme');

module.exports = {
  theme: {
    extend: {
      ...theme,
    },
  },
};
```
npm package: @simpoobusiness/sdk
Description: Simpoo SDK for embedding simpooBusiness inventory widgets into any web app
Latest version: 2.0.91

# Simpoo SDK

Simpoo SDK allows you to embed inventory widgets into **any website** (HTML, PHP, Next.js, WordPress, etc.) with **just a script**.  
No npm installation is required.

---

## 🚀 Quick Start

### Include SDK in Your Website

Add these tags inside your `<head>` or before `</body>`:

```html
<script src="https://unpkg.com/@simpoobusiness/sdk/dist/simpoo-sdk.js"></script>
```

Add a container where you want the inventory widget to appear:

```html
<div id="inventory-widget"></div>
```

Then initialize and render the widget:
Preferrably before the the closing tag `</body> of the page`

```html
<script>
  SimpooSDK.init({ 
    apiKey: "YOUR_API_KEY",
    env: "prod" // optional: 'dev' or 'prod' (defaults to 'dev')
  });
  SimpooSDK.renderWidget("inventory", "#inventory-widget");
</script>
```

✅ **That's it!** The widget will load with full styling.

---

## 📦 CDN Files

- `simpoo-sdk.js` → Main SDK script (React included).
- `simpoo-sdk.css` → Styles for inventory components.

---

## ⚙️ API Reference

### **SimpooSDK.init(config)**

Initialize the SDK with your configuration.

**Parameters:**

- `config.apiKey` (string) – Your API key.
- `config.env` (string, optional) – The environment to use. Can be `'dev'` or `'prod'`. Defaults to `'dev'`.

**Example:**

```js
SimpooSDK.init({ 
  apiKey: "12345", 
  env: "prod" 
});
```

---

### **SimpooSDK.renderWidget(widget_name, target, [props])**

Renders a specific widget into a target container.

**Parameters:**

- `widget_name` (string) – Name of the widget to render. Options: `"inventory"`, `"sales_report"`.
- `target` (string | Element) – CSS selector for the container OR a direct DOM Element.
- `props` (object, optional) – Additional props to pass to the widget.

**Returns:**
An object containing lifecycle methods:
- `unmount()` – Properly destroys the React root and removes the widget from the DOM.

**Example: Render Inventory Widget**

```js
const widget = await SimpooSDK.renderWidget("inventory", "#inventory-widget");

// Later, if you need to remove it:
widget.unmount();
```

**Example: Render Sales Report Widget**

```js
SimpooSDK.renderWidget("sales_report", "#sales-report-widget");
```

---

### **SimpooSDK.version**

Returns the current version of the SDK.

```js
console.log(SimpooSDK.version); // e.g., "2.0.88"
```


---

## 🔍 Troubleshooting

- **Widget not rendering?**  
  Ensure the container `<div>` exists and the selector matches.

---

## 📄 License

MIT
npm package: @simpplejs/logger
Description: Simple logger
Author: Stanislav Tarasenko
Latest version: 0.0.1

# Logger

### Description
A tiny Node.js logger that is based on `debug` module.

### Usage
If you have ever used `debug` module, it will be easy for you.
Like `debug` module, this module exposes a function. Just pass a name of your module into this function and it will return an accustomed logger interface.

- error()
- warn()
- info()
- debug()

The first benefit is different suffixes which added to the namespace. Let's see.

```js

const logger = require('debug')('test');

logger.error('something happened wrong') // **test.error** error happened +0ms
logger.warn('something happened wrong') // **test.warn** something happened wrong +0ms
logger.info('just some neutral information') // **test.info** just some neutral information +0ms
logger.debug('some boring data', {a: 1, b: 2}) // **test.debug** some boring data { a: 1, b: 2 } +0ms
```

So, you will be able to recognize different levels of messages.

As a common logger this one works with `LOG_LEVEL`. Just set the one of the following ['error', 'warn', 'info', 'debug'] level to env `LOG_LEVEL` . After that manipulation, the set level will be highest. It means `LOG_LEVEL=warn` will show you messages with suffix `error` and `warn`.

The second benefit is using of wildcard. All is you need is set env `DEBUG`
Let's see on common patterns:
- `*` - show all the logs
- `*.level` - show logs from all the modules with specific level
- `module.*` - show all level logs of some specific module
- `module.level` - show specific level logs of specific module

### Benchmark
logger.info*10000 ~ 328ms
npm package: @simprl/dynamic-reducer
Description: dynamicReducer - reducer for Redux in which you can add or remove child reducers
Author: simprl
Latest version: 1.0.3

# Redux dynamic reducer
Add reducer to the store when component mount
and remove reducer from the store when component unmount

For more information read this article:
**[Put a Soul into a React-Redux Project](https://dev.to/simprl/adding-a-soul-into-a-react-redux-project-524b)**

## Usage
Example with **hook** **useReducer** :
```jsx
const Container = () => {
    const { dispatch, useReducer } = useStore()

    useReducer('books', booksReducer)

    return <button onClick={() => dispatch({ space: 'book', type: 'ADD_BOOK' })} >
        add book
    </button>
}
```
## Install
Modules 'react' and 'redux' should be installed.

Run NPM command:

npm i @simprl/dynamic-reducer

Or yarn:

yarn add @simprl/dynamic-reducer

## Setup
### 1.a. Create store with dynamic reducer:
```js
import { createStore } from 'redux';
import { reducer as dynamicReducer } from '@simprl/dynamic-reducer';

const { reducer, addReducer } = dynamicReducer()
const store = createStore(reducer)

const exStore = {
    ...store,
    useReducer: (name, reducer) => {
        useEffect(
            () => addReducer(name, reducer, store.dispatch),
            [ name, reducer ]
        );
    },
}
```
### 1.b. Attach to the static reducers:
If your project has static reducers, you can keep they
and add the dynamic reducer to the store with static reducers:
```js
import { createStore, combineReducers } from 'redux';
import { reducer as createDynamicReducer } from '@simprl/dynamic-reducer';
import reducer1 from './ducks/reducer1';
import reducer2 from './ducks/reducer2';

const { reducer: dynamic, addReducer } = createDynamicReducer()
const store = createStore(combineReducers({
    reducer1,
    reducer2,
    dynamic,
}))

const exStore = {
    ...store,
    useReducer: (name, reducer) => {
        useEffect(
            () => addReducer(name, reducer, store.dispatch),
            [ name, reducer ]
        );
    },
}
```

### 2. Set exStore to context provider
You can use Provider from 'react-redux' or create your own context
#### Use provider from 'react-redux'
```jsx
const App = () => {
    return <Provider store={exStore} >
        <Container />
    </Provider>
}
```
### 3. Take hook useReducer from hook useStore
```jsx
const { dispatch, useReducer } = useStore()
useReducer('books', booksReducer)
```
npm package: @simprl/react-hot-keys
Description: react hook and component for subscribe to hot keys
Author: simprl
Latest version: 1.0.11

# @simprl/react-hot-keys

[![](https://img.shields.io/npm/l/@simprl/react-hot-keys.svg?style=flat)](https://github.com/simprl/react-hot-key/blob/main/LICENSE)
[![](https://img.shields.io/npm/v/@simprl/react-hot-keys.svg?style=flat)](https://www.npmjs.com/package/@simprl/react-hot-keys)

React **hook** and react **component** for subscribe to **hotkeys**

Support React Context API.

### [HotKeys examples Demo](https://simprl.github.io/react-hot-key/)

# Usage

### Component HotKey
```tsx
import { HotKey, Keys, KeySelector } from "@simprl/react-hot-keys";

// with typescript:
// const customSelector: KeySelector = (e) => e.key === 'Delete';

const customSelector = (e) => e.key === 'Delete';

const Component = ({onExit, onEvent}) => {
    return <>
        <HotKey selector={Keys.ESC} onKey={onExit} />
        <HotKey selector={customSelector} onKey={onEvent} />
        <div>component with hot keys</div>
    </>
}
```

### Hook useHotKey
```tsx
import { useHotKey, Keys, KeySelector } from "@simprl/react-hot-keys";

// with typescript:
// const customSelector: KeySelector = (e) => e.key === 'Delete';

const customSelector = (e) => e.key === 'Delete';

const Component = ({onExit, onEvent}) => {
    useHotKey(Keys.ESC, onExit);
    useHotKey(customSelector, onEvent);
    return <div>component with hot keys</div>
}
```

### Component HotKeysContainer
```jsx
import { HotKey, HotKeysContainer, Keys } from "@simprl/react-hot-keys";

...

<HotKeysContainer >
    <HotKey selector={Keys.ESC} onKey={() => setV((state)=> state + 1)} />
        ....
    <HotKeysContainer >
        inner hot key container
        <HotKey selector={Keys.ESC} onKey={() => setV((state)=> state + 1)} />
    </HotKeysContainer>
       ....
</HotKeysContainer>
```

By default HotKeysContainer is a div element with style = `{ width: 100%; height: 100%; }`
You can set your own styles:
```jsx
<HotKeysContainer className = "myClassName" >
  ...
</HotKeysContainer>
```
# How it work

1. HotKeysContainer render a div and subscribe to keyboard events. Also it make React Context.
2. HotKeysContainer receive event only if it or children DOM elements has focus.
3. If keyboard event happen then check all HotKey components and useHotKey hooks inside react context.
4. If selector return true then onKey handler call.
5. If none handler call and property propagate is true, then process parent HotKeysContainer.
npm package: @sims2001/flarejs
Description: A JavaScript background Flare Animation Library
Author: Simon Rutschka
Latest version: 1.1.0

# FlareJS

<img src="https://raw.githubusercontent.com/sims2001/flarejs/master/FlareJS.png" width="900px" title="FlareJS" />

### [View Demos](https://sims2001.github.io/flarejs/) | [View Full Docs](https://sims2001.github.io/flarejs/docs) | [rutschka.at](https://www.rutschka.at)

FlareJS is small JavaScript Library that allows the user to add a radiant background flare to selected Elements that moves with the mouse.

---

## Installation

### CDN

```html
<script src="https://unpkg.com/@sims2001/flarejs@1.1.0/dist/flarejs.umd.js"></script>
```

For use directly in the browser via `<script>` tag:

```html
  <!-- Element to contain animated typing -->
  <div class="background"></div>

  <!-- Load library from the CDN -->
  <script src="https://unpkg.com/@sims2001/flarejs@1.1.0/dist/flarejs.umd.js"></script>

  <!-- Setup and start animation! -->
  <script>
      const flare = new FlareJS('.background', {
          glowRadius: 75,
          flareColor: '#ffaa0075',
      });
  </script>
</body>
```

### As an ESModule

For use with a build tool like [Vite](https://vitejs.dev/), and/or in a React application, install with NPM or Yarn.

#### NPM

```
npm install flarejs
```

#### Yarn

```
yarn add flarejs
```

#### General ESM Usage

```js
import FlareJS from '@sims2001/flarejs';

const flare = new FlareJS('.background', {
    glowRadius: 75,
    flareColor: '#ffaa0075',
});
```

## Customization

```javascript
const flare = new FlareJs('.background', {
    /**
     * @property {number} glowRadius Radius of the FlareEffect in px
     */
    glowRadius: 50,
    /**
     * @property {string|null} bgColor CSS Color used as elements background color
     * (if null current background color is used)
     */
    bgColor: null,
    /**
     * @property {string} flareColor CSS Color for the FlareEffect
     */
    flareColor: 'rgba(254, 1, 154, 0.5)',
    /**
     * Experimental!
     * @property {boolean} fluentFlares smooth Flares between all Elements of selector
     */
    fluentFlares: false,
    /**
     * After destroy
     * @param {FlareJs} self
     */
    onDestroy: (self) => {},
    /**
     * After reset
     * @param {FlareJs} self
     */
    onReset: (self) => {},
    /**
     * After stop
     * @param {FlareJs} self
     */
    onStop: (self) => {},
    /**
     * After start
     * @param {FlareJs} self
     */
    onStart: (self) => {},
});
```

## Contributing

### [View Contribution Guidelines](./.github/CONTRIBUTING.md)

## end

Thanks for checking this out.

If you're using this, let me know! I'd love to see it.

It would also be great if you mentioned me or my website somewhere. [www.rutschka.at](https://www.rutschka.at)