open-index/open-npm huggingface dataset:
npm package: @nisje/eslint-plugin
Description: Nisje's ESLint plugin, following our styleguide
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @nisje/eslint-plugin
Nisje's ESLint plugin, following our styleguide.

## Installation
You'll first need to install [ESLint](http://eslint.org):

```
$ npm i eslint --save-dev
```

Next, install [`@nisje/eslint-plugin`](https://github.com/nisje/styleguide-javascript/tree/master/packages/eslint-plugin):

```
$ npm install @nisje/eslint-plugin --save-dev
```

## Usage
This plugin exports a [`base` config](index.js) that enforces best practices.

Create your own `.eslintrc.js` configuration file:

```js
{
	"extends": "plugin:@nisje/base",
	"plugins": [
		"@nisje"
	]
}
```

Or see the [ESLint docs](http://eslint.org/docs/user-guide/configuring.html#configuration-file-formats) for more information about configuration file formats.

You can also stack any of the extra shared configs on top of the "base" config by extending an array of linting configs. For example, this package provides a React linting config, which can be added to the base config with the following configuration file:

```js
{
	"extends": [
		"plugin:@nisje/base",
		"plugin:@nisje/react"
	]
}
```

## Available rulesets
The following rulesets are available:

*   **base**: Enforces best practices and possible errors
*   **flowtype**: Enforces best Flow practices
*   **react**: Enforces best React.js practices
npm package: @nisli/core
Description: A reactive web component framework. Signals, templates, dependency injection — no build step, no virtual DOM, no dependencies.
Latest version: 0.46.0

# nisli

A reactive web component framework. Signals, templates, dependency injection — no build step, no virtual DOM, no dependencies.

## Install

```bash
npm install @nisli/core
```

## Quick Start

```typescript
import { signal, component, html } from '@nisli/core';

const Counter = component('x-counter', () => {
  const count = signal(0);
  return html`
    <button @click=${() => count.set(count() + 1)}>
      Count: ${count}
    </button>
  `;
});
```

## Features

- **Signals** — Fine-grained reactivity with `signal`, `computed`, `effect`
- **Components** — Web Components with a composition-style setup function
- **Templates** — Tagged template literals with automatic signal binding
- **Dependency Injection** — `inject` any class as a singleton, `provide` overrides for testing
- **Queries** — Declarative async data loading with caching and auto-refetch
- **Event Emitters** — Typed event bus with auto-disposal in component context
- **Lifecycle** — `onMount`, `onCleanup`, `useHostEvent`
- **Refs** — Direct element access via `ref()`
- **Control Flow** — `when()` for toggles, `each()` for keyed list rendering

## API

```typescript
// Reactivity
signal(value)           // Reactive signal
computed(() => expr)    // Derived signal (lazy, cached)
effect(() => { ... })   // Side effect that tracks dependencies

// Components
component('tag-name', (props, host) => html`...`)
component<Props>('tag-name', { props: [...] }, (props, host) => html`...`)

// Templates — signals are implicit, no .value needed
html`<div>${count}</div>`
html`<button @click=${handler}>Go</button>`
html`<div class:active=${isActive}>...</div>`

// Control flow
when(condition, () => html`...`)
each(items, item => item.id, (item) => html`...`)

// Dependency injection — class IS the token
inject(MyService)                    // Auto-creates singleton
provide(MyService, () => mock)       // Override (testing)

// Queries
const { data, loading, error } = query(
  () => ['tasks', id.value],         // Cache key (tracked)
  () => api.getTasks(id.value),      // Fetcher
)

// Lifecycle
onMount(() => { ... })
onCleanup(() => { ... })
useHostEvent('click', handler)

// Refs
const el = ref<HTMLDivElement>()
html`<div ${el}>...</div>`

// Events
class Nav extends Emitter<{ select: { id: string } }> {}
inject(Nav).emit('select', { id })
inject(Nav).on('select', ({ id }) => { ... })
```

## Size

~2,600 lines of TypeScript. Zero dependencies.

## Inspiration

nisli stands on the shoulders of giants:

- [React](https://react.dev) — Component model, declarative UI
- [Solid](https://www.solidjs.com) — Signals, fine-grained reactivity, no virtual DOM
- [Lit](https://lit.dev) — Web Components, tagged template literals
- [Angular](https://angular.dev) — Dependency injection, typed tokens
- [Vue](https://vuejs.org) — Composition-style setup functions, reactive system design

## License

MIT
npm package: @nisqy/validfile
Description: Assist developers to verify file size, file type, image size
Author: nisqy
Latest version: 1.0.5

# validfile
[![NPM version][npm-image]][npm-url]

Assist developers to verify file size, file type, image size

## Instructions
- There are three functions
fileTypeCheck, 
fileSizeCheck, 
imageSizeCheck

### in fileTypeCheck
- receive 
file(type: file)  
allowTypes(type: array)
- return 
true/false

### in fileSizeCheck
- receive 
file - type: file
allowTypes - type: array
units - type: string ('GB'|'MB'|'KB')
- return 
true/false

### in imageSizeCheck
- receive 
file - type: file
width - type: number
height - type: number ('GB'|'MB'|'KB')
- return 
true/false

- imageSizeCheck is an asynchronous function
## Use example
```
import React, { useState } from "react";
import "./App.css";
import { fileTypeCheck, fileSizeCheck, iamgeSizeCheck } from "@nisqy/validfile";
import { Button, Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";

function App() {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();

  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  const beforeUpload = async (file) => {
    const typeCheck = fileTypeCheck(file, [".PNG"]);
    if (typeCheck) {
      console.log("文件类型 校验通过", "typeCheck ============", typeCheck);
    } else {
      console.log("文件类型 校验不通过", "typeCheck ============", typeCheck);
    }

    const sizeCheck = fileSizeCheck(file, 200, "KB");
    if (sizeCheck) {
      console.log("文件大小 校验通过", "sizeCheck ============", sizeCheck);
    } else {
      console.log("文件大小 校验不通过", "sizeCheck ============", sizeCheck);
    }

    iamgeSizeCheck(file, 1120, 760).then((valid) => {
      if (valid) {
        console.log("图片尺寸 校验通过", "valid ============", valid);
      } else {
        console.log("图片尺寸 校验不通过", "valid ============", valid);
      }
    });
  };

  const handleChange = (info) => {
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  return (
    <div className="App">
      <Button type="primary">Primary Button</Button>

      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={handleChange}>
        {imageUrl ? (
          <img src={imageUrl} alt="avatar" style={{ width: "100%" }} />
        ) : (
          uploadButton
        )}
      </Upload>
    </div>
  );
}

export default App;
```
npm package: @nissy-dev/swc-plugin-react-native-web
Description: A SWC plugin that will alias react-native to react-native-web
Author: Daiki Nishikawa
Latest version: 0.3.1

# swc-plugin-react-native-web

[![npm version](https://badge.fury.io/js/@nissy-dev%2Fswc-plugin-react-native-web.svg)](https://badge.fury.io/js/@nissy-dev%2Fswc-plugin-react-native-web)

A SWC plugin that will alias react-native to react-native-web.  
Inspired from [babel-plugin-react-native-web](https://github.com/necolas/react-native-web/tree/master/packages/babel-plugin-react-native-web).


## Caution

I think the babel-plugin-react-native-web (also, this plugin) is not necessary in many cases in the term of tree shaking or minimizing bundle size. (See https://github.com/necolas/react-native-web/discussions/2217)

Before using this plugin, please consider about [the package aliasing](https://necolas.github.io/react-native-web/docs/setup/#package-aliasing).

## Installation

```sh
npm install --save-dev @nissy-dev/swc-plugin-react-native-web
```

## Usage

```json
{
  "jsc": {
    "experimental": {
      "plugins": [["@nissy-dev/swc-plugin-react-native-web", { "commonjs": false }]]
    }
  }
}
```

## Compatibility

Below is a table showing compatibility of the plugin. 
The swc_core version refers to the version of the swc_core crate that the plugin has been compiled against.
The Next.js version refers to the version I confirmed to work properly with this plugin.

| Plugin version | swc_core version | Next.js version |
| :---: | :---: | :---: |
| 0.3.1 | 0.48.12 | ~13.1.0 |
| 0.3.0 | 0.40.16 | ~13.0.0 |
| 0.2.6 | 0.23.24 | ~12.3.1 |
| 0.2.4 | - | 12.2.4 |
npm package: @nist-berlin/rent-slider
Description: A NIST rent slider, which calculates maximum property price based on rent value.
Latest version: 1.0.8

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Rent Slider

## How to use on a page

### Script tag
- Put a script tag `<script src='https://unpkg.com/@nist-berlin/rent-slider@latest/dist/rent-slider/rent-slider.js'></script>` in the head of your index.html. The version corresponds to the latest package version in `npmjs`.
- Then you can use `<rent-slider></rent-slider>` anywhere in your template, JSX, html etc. Keep in mind the hyphen notation.

### Node Modules
- Run `npm i nist-rent-slider --save`
- Put a script tag `<script src='node_modules/@nist-berlin/rent-slider/dist/rent-slider.js'></script>` in the head of your index.html
- Then you can use the element `<rent-slider></rent-slider>` anywhere in your template, JSX, html etc

### Component attributes
  **heading:** Header text displayed directly above slider.

  **firstcontentline:** Rent slider text - first line.

  **secondcontentline:** Rent slider text - second line.

  **maxrent:** Maximum possible value of monthly rent.

  **minrent:** Minimum possible value of monthly rent.

  **rentstep:** A step value for rent range control.

  **ctatext:** CTA text.

  **ctaurl:** Location where the CTA should lead after click.

  **ctashow:** A value that indicates whether CTA should be displayed or not.
npm package: @nitaiapiiro/rand_emoji
Description: A simple package that displays different emojis for numbers 1-10
Author: Your Name
Latest version: 0.0.1-security

# rand_emoji

A simple and fun Node.js package that displays different emojis for numbers 1-10.

## Installation

```bash
npm install -g rand_emoji
```

Or use it locally in your project:

```bash
npm install rand_emoji
```

## Usage

### As a CLI tool

After global installation, run:

```bash
rand_emoji
```

The program will prompt you to enter a number between 1 and 10, and it will display a corresponding emoji.

### As a module

```javascript
const { getEmoji, printEmojiForNumber } = require('rand_emoji');

// Get emoji for a number
const emoji = getEmoji(5);
console.log(emoji); // 🎵

// Print number with emoji
printEmojiForNumber(7); // 7: ⚡
```

## Emoji Map

- 1: 🎯
- 2: 🌟
- 3: 🚀
- 4: 🎨
- 5: 🎵
- 6: 🌈
- 7: ⚡
- 8: 🔥
- 9: 💎
- 10: 🏆

## License

MIT
npm package: @nitatemic/reactmodal
Description: React Modal
Author: Nitatemic
Latest version: 1.0.12

# @nitatemic/reactmodal

[![npm version](https://img.shields.io/npm/v/@nitatemic/reactmodal.svg)](https://www.npmjs.com/package/@nitatemic/reactmodal)

A simple modal component for React.

## Installation

You can install the package using npm or yarn:

```
npm install @nitatemic/reactmodal
```
or
```
yarn add @nitatemic/reactmodal
```

## Usage

```jsx
import React, { useState } from 'react';
import Modal from '@nitatemic/reactmodal';

const App = () => {
    const [modalOpen, setModalOpen] = useState(false);

    const openModal = () => {
        setModalOpen(true);
    };

    const closeModal = () => {
        setModalOpen(false);
    };
    /* If you want to close the modal when the user clicks outside of it, you can use the following code: */
    useEffect(() => {
        const handleOutsideClick = (event) => {
            if (event.target.classList.contains('modal-overlay')) {
                closeModal();
            }
        };

        if (modalOpen) {
            document.addEventListener('click', handleOutsideClick);
        }

        return () => {
            document.removeEventListener('click', handleOutsideClick);
        };
    }, [modalOpen]);

    /* End of code to close the modal when the user clicks outside of it */
    
    return (
        <div>
            <button onClick={openModal}>Open Modal</button>
            {modalOpen && (
                <Modal isOpen={modalOpen} onClose={closeModal} displayCross={true}>
                    <h2 className="title-modal">Modal content</h2>
                    <p className="content-modal">This is the content of the modal.</p>
                </Modal>
            )}
        </div>
    );
};

export default App;

```

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/nitatemicreactmodal?file=src%2FApp.jsx)

## Styling

The Modal component provides a default styling, but you can customize it to fit your application's design. Here is the
default CSS that you can override:

```css
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-background {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-cross {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
```

## Props

The Modal component accepts the following props:

 - **isOpen** (boolean): Determines whether the modal is open or closed.
 - **onClose** (function): Callback function to be executed when the modal is closed.
 - **displayCross** (boolean): Determines whether to display the cross icon to close the modal. (If you prefer to use your own close button, set this to false.

## License

This project is licensed under the MIT License - see the LICENSE file for details.
npm package: @nite1984/nite-autocomplete
Description: Vanilla JS universal Autocomplete
Author: Marco Scattina
Latest version: 1.1.0

# nite-autocomplete

## Install

```
npm i @nite1984/nite-autocomplete
```

```
import NiteAutocomplete from '@nite1984/nite-autocomplete';

window.NiteAutocomplete = NiteAutocomplete;
```

## Example Usage

##### Initialization
```
const autocomplete = new NiteAutocomplete({
    inputSelector: '#input-autocomplete',
    ajaxSourceUrl: (term) => {
        return 'my/autocomplete/route?term=' + term;
    },
    renderDropdownElement: (el) => {
        return el.name + ' ' + el.surname;
    },
    renderSelectedElement: (el) => {
        return el.name + ' ' + el.surname;
    },
    selectCallback: (el) => {
        window.location.href = '/profile/' + el.id;
    }
});
```

##### Return the current selected item (null if selection is empty)
```
autocomplete.getSelectedElement();
```

##### Manually set the current selected element (Note that the provided object can have any field, this is just an example)
```
autocomplete.setSelectedElement({
    id: 1,
    name: 'John',
    surname: 'Doe'
});
```

##### Reset selection
```
autocomplete.reset();
```

##### Disable the reset icon functionality
```
autocomplete.disableResetIcon();
```

##### Re-enable the reset icon functionality
```
autocomplete.enableResetIcon();
```

## Available Options

```
//Default settings
const defaults = {
    inputSelector: '',
    ajaxSourceUrl: (term) => {
        return term;
    },
    renderDropdownElement: (el) => {
        return el;
    },
    renderSelectedElement: (el) => {
        return el;
    },
    minLength: 3,
    disableOnSelect: true,
    disableResetIcon: false,
    selectCallback: null,
    deselectCallback: null,
    searchInputIconClass: 'bi-person-fill',
    noResultsText: 'No results',
    ajaxErrorCallback: (e) => {
        console.log(e);
    }
};
```
npm package: @nite1984/nite-bs-toast
Description: Vanilla JS Bootstrap Toasts Generator
Author: Nite
Latest version: 1.0.4

# nite-bs-toasts

# Install

```
npm i @nite1984/nite-bs-toast
```

```
import niteBsToast from '@nite1984/nite-bs-toast';

window.niteBsToast = niteBsToast;
```

# Usage

```
//Define a container for the toasts in your html template
<div class="toast-container"></div>

niteBsToast.successToast('ok', 'msg');
niteBsToast.errorToast('ok', 'msg');
niteBsToast.laravelErrorToast('error', laravelResponseErrorsObj);

niteBsToast.showLoadingToast('ok', 'msg');
niteBsToast.hideLoadingToast();

//In case you want to customize the selector for the toast container
niteBsToast.settings({
    toastContainerSelector: '.toast-container',
    toastHtmlTemplate: `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header p-0">
            <div style="border-left: 15px solid {{iconColor}};">
                <div class="p-2 d-flex align-items-center">
                    <strong>{{title}}</strong>
                    <button type="button" class="btn-close mx-0" aria-label="Close" data-bs-dismiss="toast"></button>
                </div>
            </div>    
        </div>
        <div class="toast-body bg-white">{{text}}</div>
        </div>`
});
```
npm package: @nite1984/nite-pagination
Description: Vanilla JS Pagination
Author: Nite
Latest version: 1.0.1

# nite-pagination

# Install

```
npm i @nite1984/nite-pagination
```

```
import NitePagination from '@nite1984/nite-pagination';

window.NitePagination = NitePagination;
```

# Usage

```
const pagination = new NitePagination({
    containerSelector: '#pagination',
    pageSelectCallback: (page) => {
        console.log(page);
    },
    maxPages: 10,
});
```

```
const pagination = new NitePagination({
    containerSelector: '#pagination',
    pageSelectCallback: (page) => {
        console.log(page);
    },
});

pagination.setMaxPages(10);
```
npm package: @nitedani/vite
Description: Native-ESM powered web dev build tool
Author: Evan You
Latest version: 5.1.4-commit-42fd11c

# vite ⚡

> Next Generation Frontend Tooling

- 💡 Instant Server Start
- ⚡️ Lightning Fast HMR
- 🛠️ Rich Features
- 📦 Optimized Build
- 🔩 Universal Plugin Interface
- 🔑 Fully Typed APIs

Vite (French word for "fast", pronounced `/vit/`) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

- A dev server that serves your source files over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), with [rich built-in features](https://vitejs.dev/guide/features.html) and astonishingly fast [Hot Module Replacement (HMR)](https://vitejs.dev/guide/features.html#hot-module-replacement).

- A [build command](https://vitejs.dev/guide/build.html) that bundles your code with [Rollup](https://rollupjs.org), pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/guide/api-plugin.html) and [JavaScript API](https://vitejs.dev/guide/api-javascript.html) with full typing support.

[Read the Docs to Learn More](https://vitejs.dev).
npm package: @nitedani/vite-plugin-compiled-react
Description: Vite plugin for https://github.com/atlassian-labs/compiled
Latest version: 0.0.9

# vite-plugin-compiled-react

Vite plugin for https://github.com/atlassian-labs/compiled


The compiled.css files are temporarily created in the source directory, then removed after build. This way, the Vite css processing pipeline, postcss is applied to the extracted styles. For example, using Mantine:
```css
input
css={{ color: "light-dark(green,red)"}}

output
._syaz1602{color:green}[data-mantine-color-scheme=dark]
._syaz1602{color:red}
```

Usage:
```ts
import { compiled } from "@nitedani/vite-plugin-compiled-react";

export default defineConfig({
  plugins: [react(), compiled({ extract: true })],
});
```

```tsx
const Component = () => (
  <div
    css={{
      color: "red",
      ":hover": {
        color: "blue",
      },
    }}
  >
   Hello
  </div>
);
```
Typescript:
```ts
// types.d.ts
import { CssFunction } from "@compiled/react";
export { };
declare module "react" {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    css?: CssFunction | CssFunction[]
  }
}
```
npm package: @nitesh-1092/staple-api
Description: Staple API - GraphQL API for Knowledge Graphs
Author: Epistemik
Latest version: 1.0.1

![logo](https://raw.githubusercontent.com/epistemik-co/staple-api/gh-pages/staple-api-black-text.png)

**Staple API** is a lightweight GraphQL-based API for a uniform management and federation of knowledge graphs (virtualized as linked data) on top of different data storage back-ends.

# Documentation
Full documentation is available at [http://staple-api.org](http://staple-api.org).

# Playground
A live playground is available at: [http://playground.staple-api.org](http://playground.staple-api.org).

# Contact

For open technical issues and inquiries you can create a GitHub issue in this repository. 

All questions can also be sent to [staple-api@epistemik.co](staple-api@epistemik.co).