open-index/open-npm huggingface dataset:
npm package: @modernfidelity/fabric
Description: UX/UI components for micro-apps
Latest version: 1.0.1



     ______   ______     ______     ______     __     ______
    /\  ___\ /\  __ \   /\  == \   /\  == \   /\ \   /\  ___\
    \ \  __\ \ \  __ \  \ \  __<   \ \  __<   \ \ \  \ \ \____
     \ \_\    \ \_\ \_\  \ \_____\  \ \_\ \_\  \ \_\  \ \_____\
      \/_/     \/_/\/_/   \/_____/   \/_/ /_/   \/_/   \/_____/



# Fabric

This is the home of Fabric, a UX/UI component library for micro apps built on top of Angular, Material Design and Bootstrap.


### Installation

To add to your project run :

    npm install @modernfidelity/fabric --save


### Getting started

See our starter kit to help with building your first project with Fabric

### Versions

Fabric uses SEMVER for its package versions.

When adding a new a component please update the MINOR verion number.
When updating an existing component or bugfix please update the PATCH verion number.

### Tools :

Build tools are based around gulp currently and are wrapped via npm run commands.

*To run a production build please run the following :*

    npm run build:release

This will create a folder '/dist' with the lib in it.

## The goal of Fabric
Our goal is to build a set of high-quality UI components built with Angular and TypeScript for use within
micro-apps and general web applications.

### What do we mean by "high-quality"?
* Internationalized and accessible so that all users can use them.
* Straightforward APIs that don't confuse developers.
* Behave as expected across a wide variety of use-cases without bugs.
* Behavior is well-tested with both unit and integration tests.
* Performance cost is minimized.


## Browser and screen reader support
Fabric supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge

We also aim for great user experience with the following screen readers:
* NVDA and JAWS with IE / FF / Chrome (on Windows).
* VoiceOver with Safari on iOS and Safari / Chrome on OSX.
* TalkBack with Chrome on Android.
npm package: @modernice/animate-height
Description: Animate the height of an element to 'auto' or '0px'.
Author: Saman Hosseini
Latest version: 0.0.15

# animate-height

> Animate the height of an element to 'auto' or '0px'.

## Install

**CDN**

```html
<script src="https://unpkg.com/animate-height"></script>
```

**Node**

```bash
npm install animate-height --save # or yarn add animate-height
```

## Usage

### Animate to auto

```js
import { autoHeight } from 'animate-height'

const el = document.querySelector('#example')

const height = await autoHeight(el, {
  duration: 250,
  timing: 'cubic-bezier(.91, .06, .08, .93)',
})

console.log(`Element has a height of ${height}px.`)
```

### Animate to 0px

```js
import { zeroHeight } from 'animate-height'

const el = document.querySelector('#example')

await zeroHeight(el, {
  duration: 500,
  timing: 'ease-out',
})
```

### Default options

```js
autoHeight(el, {
  duration: 300, // Transition duration
  timing: 'ease', // CSS transition timing function
})
```
npm package: @modernice/appeared
Description: Track DOM elements scrolling in and out of the view.
Author: Saman Hosseini
Latest version: 0.2.1

# appeared.js

Simple tracking of DOM elements scrolling in and out of the view.

## Install

### Package Manager

```sh
yarn add @modernice/appeared // npm install @modernice/appeared --save
```

### CDN

#### Modern version
```html
<script src="https://unpkg.com/@modernice/appeared"></script>
```

## Use

```ts
import appeared from '@modernice/appeared'

const stop = appeared('#trigger', {
  multiple: true,

  appear: (el: Element, count: number) => {
    console.log(`element appeared ${count} times.`)
  },

  disappear: (el: Element, count: number) => {
    console.log(`element disappeared ${count} times.`)
  }
})

// disconnect the underlying IntersectionObserver
stop()
```
npm package: @modernice/pdf-tool-server
Description: A collection of PDF tools packed in a Node.js webserver.
Author: Saman Hosseini
Latest version: 0.1.0

# PDF Tool Server

> A collection of PDF tools packed in a Node.js webserver.

## Setup

1. Copy environment file
```sh
cp .env.example .env
```

2. Install dependencies
```sh
yarn
```

3. Build
```sh
yarn build
```

4. Start server
```sh
yarn start
```

## Usage

### Create PDF from a webpage

Send a **POST** request to '/page-to-pdf' with the following options as JSON and save the returned data as a PDF file to your disk.

| Option | Required | Default | Type | Description |
| ------ | -------- | ------- | ---- | ----------- |
| `url` | yes | - | `string` | URL to the webpage |
| `selector` | no | - | `string` | DOM selector (only use contents of this element) |
| `waitUntil` | no | `'networkidle0'` | `'networkidle0'`<br>`'networkidle0'`<br>`'networkidle2'`<br>`'load'`<br>`'domcontentloaded'` | Page event that determines when the page has been loaded |
| `waitForSelector` | no | - | `string` | DOM selector (wait for the element to appear before capturing the page) |
| `delay` | no | - | `integer` | Delay caputure for given milliseconds after the page has loaded |
| `format` | no | `'A4'` | `'Letter'`<br>`'Legal'`<br>`'Tabloid'`<br>`'Ledger'`<br>`'A0'`<br>`'A1'`<br>`'A2'`<br>`'A3'`<br>`'A4'`<br>`'A5'` | The PDF size |
| `authToken` | no | - | `string` | Used as authorization header when requesting the URL |
| `viewport.width` | no | `1920` | `integer` | Set the viewport width of the browser window |
| `viewport.height` | no | `1080` | `integer` | Set the viewport height of the browser window |
npm package: @modernice/pdfire
Description: Node.js client for the PDFire.io API.
Author: modernice Ltd
Latest version: 2.0.0

<p align="center">
<img src="https://pdfire.io/img/logo.svg" width="100" alt="PDFire.io logo">
</p>

# PDFire Node

![GitHub](https://img.shields.io/github/license/modernice/pdfire-node?style=flat-square)

This package provides a client for the [PDFire.io](https://pdfire.io) API. Read the [Documentation](https://docs.pdfire.io) for a list of available options.

## Installation

```sh
npm install --save @modernice/pdfire
```

or

```sh
yarn add @modernice/pdfire
```

## Basic usage

```js
import pdfire, { ConversionParams } from 'pdfire'

const pdf = await pdfire('YOUR-API-KEY')
    .conversion()
    .url('https://google.com')
    .margin(0)
    .format('A4')
    .getResult()

await pdf.saveTo('/path/on/disk.pdf')
```

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @modernice/typed-response
Description: Automatic types for JSON APIs
Author: Saman Hosseini
Latest version: 0.4.8

# Typed Response

[![Test](https://github.com/modernice/typed-response/actions/workflows/test.yml/badge.svg)](https://github.com/modernice/typed-response/actions/workflows/test.yml)

This is a type-only library that can be used to automatically create an
API-compatible type of any given type.

```sh
npm i @modernice/typed-response
pnpm i @modernice/typed-response
yarn add @modernice/typed-response
```

## Examples

The library exposes a `ResponseOf` utility type that transforms a given type to
a type that can be returned by a (JSON) API. By default, this simply replaces
all occurrences of `Date` with `string`, because most APIs return dates in string
representation.

### Simple

```ts
import { ResponseOf } from '@modernice/typed-response'
import { parseISO } from 'date-fns'

interface User {
	name: string
	email: string
	createdAt: Date
	lastLogin: Date|null
}

type UserResponse = ResponseOf<User>

// UserResponse == {
// 	name: string
// 	email: string
// 	createdAt: string
// 	lastLogin: string|null
// }

function hydrateUser(data: UserResponse): User {
	return {
		...data,
		createdAt: parseISO(data.createdAt),
		lastLogin: data.createdAt ? parseISO(data.createdAt) : null,
	}
}
```

### Custom mapping

You can define a custom mapping for each (nested) property of your type.
For example, if your API returns dates as timestamps instead of strings, you can
do the following:

```ts
import { ResponseOf } from '@modernice/typed-response'

interface User {
	name: string
	email: string
	createdAt: Date
	lastLogin: Date|null
}

type UserResponse = ResponseOf<User, {
	createdAt: number
	lastLogin: number|null
}>

// UserResponse == {
// 	name: string
// 	email: string
// 	createdAt: number
// 	lastLogin: number|null
// }

function hydrateUser(data: UserResponse): User {
	return {
		...data,
		createdAt: new Date(data.createdAt),
		lastLogin: data.createdAt ? new Date(data.createdAt) : null,
	}
}
```

### Nested properties

```ts
import { ResponseOf } from '@modernice/typed-response'

interface User {
	name: string
	contact: {
		email: string
		phone?: string
	}
}

type UserResponse = ResponseOf<User, {
	name: [string, string]
	contact: {
		phone?: {
			prefix: string
			number: string
		}
	}
}>

// UserResponse == {
// 	name: [string, string]
// 	contact: {
// 		email: string
// 		phone?: {
// 			prefix: string
// 			number: string
// 		}
// 	}
// }

function hydrateUser(data: UserResponse): User {
	return {
		...data,
		name: data.name.join(' '),
		contact: {
			...data.contact,
			phone: data.phone ? `${data.phone.prefix} ${data.phone.number}` : undefined
		},
	}
}
```

## License

[MIT](./LICENSE)
npm package: @modernice/vue-fetch
Description: Multi-fetch setup for Vue apps
Author: Saman Hosseini
Latest version: 0.0.10

# vue-fetch

`vue-fetch` lets you define and reuse fetch composables seamlessly within your Vue apps. Built on top of [ofetch](unjs/ofetch).

## Installation

```bash
npm i @modernice/vue-fetch
```

```bash
pnpm i @modernice/vue-fetch
```

```bash
yarn add @modernice/vue-fetch
```

> Note: Make sure [ofetch](unjs/ofetch) is also installed in your project as it is a peer-dependency of `vue-fetch`.

## Example: Nuxt 3

1. Define your fetch composable:

```ts
// composables/useFetch.ts
import { defineFetch, bearerAuth } from '@modernice/vue-fetch'

// Obtain your authentication token, for example, from @nuxtjs/auth
const authToken = ref('...')

export const useApi = defineFetch({
	baseUrl: 'http://api.example.test',
	headers: {},  // Set default headers for every request here
	auth: bearerAuth(authToken),  // Automatically adds "Authorization" header to every request
})
```

2. Use in any part of your app

```vue
// pages/foo.vue
<script setup>
const { fetch } = useApi()
const data = await fetch('/foo')
</script>
```

## License

[MIT License](./LICENSE)
npm package: @modernik-ing/react-mlm-tree-view
Description: > **Bibliothèque React légère et extensible permettant de générer des arbres hiérarchiques de type marketing de réseau (MLM) avec un rendu HTML stylisé prêt à l'emploi.**
Author: Esaie Muhasa
Latest version: 1.0.0


# @modernik/react-mlm-tree-view

> **Bibliothèque React légère et extensible permettant de générer des arbres hiérarchiques de type marketing de réseau (MLM) avec un rendu HTML stylisé prêt à l'emploi.**

---

Ce projet est une **bibliothèque frontend** conçue pour compléter le projet backend [`modernik/mlm-tree-view`](https://github.com/Modernik-Ing/mlm-tree-view) écrit en PHP.  
Il permet d’intégrer facilement une **visualisation interactive** et **moderne** d’un arbre MLM dans toute application React.

---

## Objectif

- Offrir un **moteur d'affichage interactif** de structures MLM côté frontend.
- Rendre la visualisation **réutilisable**, **personnalisable** et **compatible** avec la structure JSON produite par des APIs tiers.
- Faciliter l'intégration dans des **applications web riches (SPA)** basées sur React.

---

## Installation

```bash
yarn add @modernik/react-mlm-tree-view
# ou
npm install @modernik/react-mlm-tree-view
````

---

## Utilisation de base

```tsx
import { TreeView } from '@modernik/react-mlm-tree-view';

const treeData = {
  id: 1,
  name: "Root",
  children: [
      { id: 2, name: "Left" },
      { id: 3, name: "Right" }
  ]
};

export function App() {
  return <TreeView data={treeData} />;
}
```

---

## Fonctionnalités prévues

* Personnalisation des couleurs, formes et styles des nœuds
* Zoom et déplacement (pan)
* Animations de transition
* Support responsive pour mobiles
* Composants internes réutilisables pour une intégration avancée

---

## Développement local

```bash
yarn install
yarn dev
```

Ouvre ensuite : [http://localhost:5173](http://localhost:5173)
![app.tsx](./screenshot.png)

---

## Structure du projet

```
react-mlm-tree-view/
├── src/                 # Code source de la bibliothèque
│   ├── component/       # Composants React internes
│   ├── hook/            # Hooks React internes
│   └── index.ts         # Point d’entrée de la lib
│   └── structure.ts     # Definitifion des types (structure des données)
│   └── app.tsx          # Exemple / tests manuels dans le navigateur
├── index.html           # point d'entré pour lencer l'exemple
├── tsconfig.json
├── vite.config.ts       # Pour le dev & test
├── tsup.config.ts       # Pour le build de la lib
```

---

## Licence

Ce projet est sous licence MIT — vous pouvez l’utiliser librement dans vos projets personnels ou commerciaux.

MIT © [Modernik-Ing](https://github.com/Modernik-Ing)