open-index/open-npm huggingface dataset:
npm package: @mhoumann87/start_scss
Description: Starter files for creating a webpack project with dart-sass and postCSS
Author: Michael Houmann
Latest version: 0.1.0

# Webpack Start SCSS

Webpack starter files for a project with SCSS, PostCss and basic Javascript.
This setup works with dart-sass, and @use and @forward, and will generate a separate CSS file.

Delete the content of the scss files and index.js. That is just for demonstration.

To start the dev server use

```
npm start
yarn start
```

To make a production build use

```
npm run build
yarn run build
```
npm package: @mhsajjadhossain/tailwindcss-tailstrap-grid-system
Description: Tailstrap grid system allows you to use the same 12 column grid system, containers and rows into your tailwind css projects.
Author: M.h Sajjad Hossain Ripon
Latest version: 1.0.1

# Welcome to StackEdit!

![enter image description here](https://i.ibb.co/202NCkF/tailstarp-logo.jpg)

**Tailstrap Grid System**- is a plugin that provides a set of utility classess that allows you to use the same 12 column grid system, containers and rows into your tailwind css projects.The installetion guide and use guides are down below.

## Installation

For getting started with **tailstrap-grid-system** you just need to run the command below.

    npm install tailwindcss-tailstrap-grid-system

## Configaring

Then add the plugin to your `tailwind.config.js` file:

    // tailwind.config.js
    module.exports = {
      // ...
      plugins: [
        // ...
        require('tailwindcss-tailstrap-grid-system'),
        // ...
      ],
    };

## License

**tailwindcss-tailstrap-grid-system** is licensed under the MIT License.
npm package: @mhsalves/svg-spriter
Description: A low-level tools to creates a SVG Sprite based into SVG collection.
Author: Matheus Alves
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# svg-spriter
This is a tools to join svg in sprites

# Commands 

## Folder files

This command read a folder path for svg files and output a single svg file with compilation.

```
svg-spriter -f /test/folder -o /public/sprite.svg
```
npm package: @mhshifat/mhs-ui
Description: An archive of my react components
Author: mhshifat
Latest version: 1.0.7

# @mhshifat/mhs-ui

> An archive of my react components

[![NPM](https://img.shields.io/npm/v/@mhshifat/mhs-ui.svg)](https://www.npmjs.com/package/@mhshifat/mhs-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @mhshifat/mhs-ui
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@mhshifat/mhs-ui'
import '@mhshifat/mhs-ui/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [mhshifat](https://github.com/mhshifat)
npm package: @mhsteffensen/use-ajax
Description: A hook for running an async function in React.
Latest version: 2.0.4

# useAJAX React hook
A hook for running an async function in React.

You can install the package from NPM by running one of the following shell commands in your project directory:
```shell
npm i @mhsteffensen/use-ajax
yarn add @mhsteffensen/use-ajax
pnpm add @mhsteffensen/use-ajax
```

And import it in yout React components like so:
```typescript
import useAJAX from "@mhsteffensen/use-ajax"
```

The primary use case is for running network requests, but it can be used for any asynchronous operation passed as the first argument as described below.

For more complex use cases a hook like [useSWR](https://github.com/vercel/swr) is recommended.

## REQUIRED Arguments

Name | Description
--- | ---
ajaxFunction | asynchronous function to run, MUST return a Promise
args | an array of arguments to be passed to the asynchronous function

## OPTIONS Object

Name/Key | Description
--- | ---
timeOut | number of ms to wait before running the function - defaults to 0
runOnce | boolean indication whether the request should run once or watch for changes to the function arguments and run on change - defaults to false

## RETURNS
This hook returns an object with 3 keys indicating different states of the asynchronous operation

Name/Key | Description
--- | ---
loading | boolean, indicating whether the asynchronous function is still pending
data | is either undefined or the data returned from the asynchronous function
error | is undefined unless an error occurred


## EXAMPLE
This is an example from a weather app that runs an async function to fetch the weather from an API, it is written in TypeScript, so if you're using JavaScript you can ignore the type annotations.

the AJAX function looks as follows:
```typescript
export const getWeather = async (lat: number, lon: number): Promise<WeatherData> => {
    const response = await fetch(`${baseURI}weather?latitude=${lat}&longitude=${lon}`)
    return await response.json()
}
```

It takes 2 arguments and returns a Promise.

Then in your React function component

```typescript
    const { data, error, loading }: { data: WeatherData, error: undefined | any, loading: boolean } = useAJAX(getWeather, [55, 12])

    if (error) {
        return <h1>
            An error occurred
        </h1>
    }
    
    if (loading && !data) {
        return <h1>
            Loading...
        </h1>
    }
    
    if (data) {
        return <h1>
            Temperature is { data.main.temp }
        </h1>
    }
```
npm package: @mhsystems/mhjs
Description: A high-level React notification library. Zero hooks. One line of code.
Latest version: 1.0.1

# MHJS

> **Zero-hook React notification library. One line of code.**

MHJS wraps React Context and Framer Motion into a single `MH` object.  
No hooks. No prop drilling. No wiring. Just call `MH.Notif()` anywhere.

---

## Installation

```bash
npm install @mhsystems/mhjs framer-motion
```

> `react` and `react-dom` are peer dependencies — you almost certainly already have them.

---

## Setup

Wrap your app **once** with `<MHProvider>`:

```tsx
// main.tsx
import { MHProvider } from '@mhsystems/mhjs';

createRoot(document.getElementById('root')!).render(
  <MHProvider>
    <App />
  </MHProvider>
);
```

That's it. Now you can call `MH.Notif()` from **anywhere** in your app.

---

## Usage

```tsx
import { MH } from '@mhsystems/mhjs';

// Immediate
MH.Notif({
  text:      'File saved ✓',
  position:  'top-right',
  bgColor:   '#052e16',
  textColor: '#bbf7d0',
});

// Delayed (ms)
MH.Notif({
  text:    'Session expiring soon.',
  trigger: 3000,
  position: 'bottom-left',
});

// Sticky — stays until dismissed
const id = MH.Notif({
  text:     'You have 3 unread messages.',
  duration: 0,
});
MH.dismiss(id);
```

---

## API

### `MH.Notif(options)`

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | — | The message to display |
| `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Corner of the viewport |
| `trigger` | `'immediate' \| 'manual' \| number` | `'immediate'` | When to show. Pass ms for a delay |
| `bgColor` | `string` | `'#262626'` | CSS background colour |
| `textColor` | `string` | `'#ffffff'` | CSS text colour |
| `width` | `string` | `'320px'` | CSS width of the card |
| `length` | `string` | — | CSS min-height of the card |
| `duration` | `number` | `4000` | Auto-dismiss after N ms. `0` = sticky |

Returns the notification `id` string.

### `MH.dismiss(id)`

Programmatically dismiss a notification by its `id`.

---

## Stacking

Multiple notifications at the same position automatically stack vertically with smooth Framer Motion layout animations.

---

## License

MIT
npm package: @mhu-fdm/tiny
Description: Removes all spaces from a string
Latest version: 2.0.1

# Just a tiny npm package to test things out

Source:
[Thanks to Jonathan Wood](https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/)


Use it like this:  
```const tiny = require("@bamblehorse/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @mhub/web-redux-utilities
Description: MHub Web Redux Utilities
Author: Jon Saw
Latest version: 0.0.4

# MHub Web Redux Utilities

## Getting Started
1. Install package.
	```
	yarn add redux @mhub/web-redux-utilities
	```

1. Setup reducer.
	```javascript
	import { createReducer } from '@mhub/web-redux-utilities';

	const INCREMENT = 'INCREMENT';
	const DECREMENT = 'DECREMENT';
	const initialState = {
	  count: 0,
	};
	export default createReducer(initialState, {
	  [INCREMENT]: state => (
	    Object.assign({}, state, {
	      count: state.count + 1,
	    })
	  ),
	  [DECREMENT]: state => (
	    Object.assign({}, state, {
	      count: state.count - 1,
	    })
	  ),
	});
	```

1. Combine reducers.
	```javascript
	import { combineReducers } from 'redux';

	import counter from './counter/reducers';

	export default combineReducers({
	  counter,
	});
	```

1. Setup React App.
	```javascript
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { configureStore } from '@mhub/web-redux-utilities';
	import thunk from 'redux-thunk';
	import { connectRouter, routerMiddleware } from 'connected-react-router';
	import { createBrowserHistory } from 'history';

	import Root from './Root';

	import rootReducer from './redux/reducers';

	const history = createBrowserHistory();
	const store = configureStore(
	  connectRouter(history)(rootReducer),
	  {},
	  thunk,
	  routerMiddleware(history),
	);

	ReactDOM.render(
	  <Root store={store} history={history} />,
	  document.getElementById('root'),
	);
	```
npm package: @mhuebert/lezer-clojure
Description: lezer-based Clojure(Script) grammar
Author: Martin Kavalar
Latest version: 0.1.6

# lezer-clojure

This is a Clojure grammar for the
[lezer](https://lezer.codemirror.net/) parser system.

The code is licensed under an MIT license.

# Dev

To watch & test, with [entr](http://eradman.com/entrproject/) installed run `npm run watch`
npm package: @mhuebert/tmp-lezer-clojure
Description: lezer-based Clojure(Script) grammar
Author: Martin Kavalar
Latest version: 0.1.0

# lezer-clojure

This is a Clojure grammar for the
[lezer](https://lezer.codemirror.net/) parser system.

The code is licensed under an MIT license.

# Dev

To watch & test, with [entr](http://eradman.com/entrproject/) installed run `npm run watch`
npm package: @mhuffnagle/eslint-config
Description: eslint config for a basic JavaScript project
Author: Marc Huffnagle
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mhuffnagle/eslint-config

[eslint](https://eslint.org/) config for a basic JavaScript project

## Install

```sh
npm install --save-dev @mhuffnagle/eslint-config
yarn add --dev @mhuffnagle/eslint-config
```

## Configuration

Create an `.eslintrc.js` file which contains:

```js
/** @type {import('eslint').Linter.Config} */
const config = { extends: '@mhuffnagle' };

module.exports = config;
```
npm package: @mhuffnagle/eslint-config-jest
Description: eslint config for a project using Jest
Author: Marc Huffnagle
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mhuffnagle/eslint-config-jest

[eslint](https://eslint.org/) eslint config for a project using [Jest](https://jestjs.io/)

## Install

```sh
npm install --save-dev @mhuffnagle/eslint-config-jest
yarn add --dev @mhuffnagle/eslint-config-jest
```

## Configuration

Create an `.eslintrc.js` file which contains:

```js
/** @type {import('eslint').Linter.Config} */
const config = { extends: '@mhuffnagle/eslint-config-jest' };

module.exports = config;
```
npm package: @mhuffnagle/eslint-config-node
Description: eslint config for a Node.js project
Author: Marc Huffnagle
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mhuffnagle/eslint-config-node

[eslint](https://eslint.org/) config for a Node.js project

## Install

```sh
npm install --save-dev @mhuffnagle/eslint-config-node
yarn add --dev @mhuffnagle/eslint-config-node
```

## Configuration

Create an `.eslintrc.js` file which contains:

```js
/** @type {import('eslint').Linter.Config} */
const config = { extends: '@mhuffnagle/eslint-config-node' };

module.exports = config;
```
npm package: @mhuffnagle/eslint-config-node-ts
Description: eslint config for a TypeScript-based Node.js project
Author: Marc Huffnagle
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mhuffnagle/eslint-config-node-ts

[eslint](https://eslint.org/) config for a TypeScript-based Node.js project

## Install

```sh
npm install --save-dev @mhuffnagle/eslint-config-node-ts
yarn add --dev @mhuffnagle/eslint-config-node-ts
```

## Configuration

Create an `.eslintrc.js` file which contains:

```js
/** @type {import('eslint').Linter.Config} */
const config = { extends: '@mhuffnagle/eslint-config-node-ts' };

module.exports = config;
```
npm package: @mhuffnagle/tsconfig-bases
Description: Base TypeScript configs to extend in a TypeScript app
Author: Marc Huffnagle
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# tsconfig-bases

Base TypeScript configs to extend in a TypeScript app.

Based on [tsconfig/bases](https://github.com/tsconfig/bases)

## Install

```sh
npm install --save-dev @mhuffnagle/tsconfig-bases
yarn add --dev @mhuffnagle/tsconfig-bases
```

## Available TypeScript Configs

### Node 14

[tsconfig-node14.json](tsconfig-node14.json)

Add to your `tsconfig.json`:

```json
"extends": "@mhuffnagle/tsconfig-bases/tsconfig-node14.json"
```

### Node 16

[tsconfig-node16.json](tsconfig-node16.json)

Add to your `tsconfig.json`:

```json
"extends": "@mhuffnagle/tsconfig-bases/tsconfig-node16.json"
```
npm package: @mhumam/edts-chart
Description: EDTS Chart
Author: Muhamad Humam
Latest version: 1.2.0

# EDTS Chart

React components for <a href="https://edts-chart-research.vercel.app/">EDTS Chart</a>, the most popular charting library.

<br />
<a href="#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://edts-chart-research.vercel.app/" target="blank">Demo</a>
<br />
<hr />

## Quickstart

Install this library with peer dependencies:

```bash
npm i @mhumam/edts-chart
```

## Chart Types

Then, import and use individual components:

- Area Chart
```jsx
import { AreaChart } from '@mhumam/edts-chart';

const data = [
    {
        name: 'Data 1',
        data: [
            { label: 'Feb', value: 1 },
            { label: 'Mar', value: 2 },
            { label: 'Apr', value: 3 },
            { label: 'May', value: 4 },
            { label: 'Jun', value: 3 },
            { label: 'Jul', value: 6 },
            { label: 'Aug', value: 9 },
            { label: 'Sep', value: 8 },
            { label: 'Oct', value: 9 }
        ]
    }
];

<AreaChart data={data} />
```
<br />

- Bar Chart
```jsx
import { BarChart } from '@mhumam/edts-chart';

const data = [
    {
        name: 'Data 1',
        data: [
            { label: 'Feb', value: 1 },
            { label: 'Mar', value: 2 },
            { label: 'Apr', value: 3 },
            { label: 'May', value: 4 },
            { label: 'Jun', value: 5 },
            { label: 'Jul', value: 6 },
            { label: 'Aug', value: 7 },
            { label: 'Sep', value: 8 },
            { label: 'Oct', value: 9 }
        ]
    }
];

<BarChart data={data} />
```
<br />

- Geo Chart (<a href='https://en.wikipedia.org/wiki/ISO_3166-2' target='blank'>View Region Code</a>)
```jsx
import { GeoChart } from '@mhumam/edts-chart';

const data = {
    label: "Popularity",
    value: [
        { code: 'ID', label: 'Indonesia', value: 450 },
        { code: 'GE', label: 'Germany', value: 1000 },
        { code: 'DK', label: 'Denmark', value: 400 },
        { code: 'FR', label: 'France', value: 750 },
        { code: 'BR', label: 'Brazil', value: 1000 }
    ]
};

<GeoChart data={...} />
```
<br />

- Line Chart
```jsx
import { LineChart } from '@mhumam/edts-chart';

const data = [
    {
        name: 'Data 1',
        data: [
            { label: 'Feb', value: 1 },
            { label: 'Mar', value: 2 },
            { label: 'Apr', value: 3 },
            { label: 'May', value: 4 },
            { label: 'Jun', value: 3 },
            { label: 'Jul', value: 6 },
            { label: 'Aug', value: 9 },
            { label: 'Sep', value: 8 },
            { label: 'Oct', value: 9 }
        ]
    }
];

<LineChart data={data} />
```
<br />

- Pie Chart
```jsx
import { PieChart } from '@mhumam/edts-chart';

const data = [
    { label: "Team A", value: 44 },
    { label: "Team B", value: 55 },
    { label: "Team C", value: 13 },
    { label: "Team D", value: 43 },
    { label: "Team E", value: 22 }
];

<PieChart data={data} />
```