open-index/open-npm huggingface dataset:
npm package: @mlabs.io/ui
Description: Merchant Labs React component library.
Latest version: 0.0.8
Deprecated: This package has been moved to @merchantlabs/ui

# mlabs-ui

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

React component library of components we use a lot at Merchant Labs.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @mlagie/logger
Description: Logger permet d'afficher des messages colorés en console et d'écrire les logs dans des fichiers, selon l'environnement.
Author: lagie-marin
Latest version: 1.0.1

# logger

Logger permet d'afficher des messages colorés en console et d'écrire les logs dans des fichiers, selon l'environnement.

## Installation

```bash
npm install logger
```

## Dépendances
- chalk
- dayjs
- dotenv

## Configuration
Crée un fichier `.env` à la racine de ton projet :

```
DEBUG=true
LOGS=./logs
```
- `DEBUG=true` : active la sauvegarde dans les fichiers
- `LOGS` : dossier où seront stockés les logs

## Utilisation

```js
const { error, serveur, logs, client, sql } = require('logger');

error('Une erreur grave !');
serveur('Serveur démarré');
logs('Message générique');
client('Connexion client');
sql('users', 'SELECT * FROM users;');
```

## API

### error(content: string): Promise<void>
Log une erreur avec un tag rouge et écrit dans le fichier si DEBUG=true.

### serveur(content: string): Promise<void>
Log un message serveur avec un tag bleu et écrit dans le fichier si DEBUG=true.

### logs(content: string): Promise<void>
Log un message générique avec un tag blanc et écrit dans le fichier si DEBUG=true.

### client(content: string): Promise<void>
Log un message client avec un tag vert et écrit dans le fichier si DEBUG=true.

### sql(table_name: string, content: string): void
Ajoute une ligne dans un fichier SQL spécifique.

## Licence
MIT
npm package: @mlambert125/virtualized-scroll-box
Description: Virtual scroll web component
Latest version: 0.0.2-development

# &lt;virtualized-scroll-box&gt; element

A web component for displaying long lists of items performantly by only loading what's in view.

## Installation

```
$ npm install --save @mlambert125/virtualized-scroll-box
```

## Usage

### Script

Import as a module:

```js
import '@mlambert125/virtualized-scroll-box'
```

With a script tag:

```html
<script type="module" src="./node_modules/@mlambert125/virtualized-scroll-box/virtualized-scroll-box.js">
```
### Markup
```html
<virtualized-scroll-box 
    id="mylist"             
    item-height="30" 
    item-overrun="3" 
    style="display: block; height: 20vh; width: 300px; overflow-y: auto; border: 1px solid gray;">
</virtualized-scroll-box>    

<template id="listItemTemplate">
    <div style="height: 30px; margin-left: 10px; overflow-y: hidden;">
        <span id="listText" style="color:green; font-family: Arial, Helvetica, sans-serif"></span>
    </div>
</template>
```
## Events
```js
document.getElementById("mylist").addEventListener("getItems", (e) => {
    for(let i = e.detail.start; i < Math.min(e.detail.start + e.detail.count, 100000); i++) { 
        const template = document.getElementById('listItemTemplate');
        const node = template.content.cloneNode(true);
        node.getElementById('listText').innerText = `item ${i}`;
        e.detail.items.push(node);
    }
    e.detail.totalItems = 100000;
});

```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.
npm package: @mlaopane/react-hooks
Description: >
Latest version: 0.2.1

# react-hooks

> 

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

## Install

```bash
npm install --save react-hooks
```

## Usage

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

import MyComponent from 'react-hooks'

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

## License

MIT © [](https://github.com/)
npm package: @mlaopane/react-view-model
Description: A library to abstract the creation of a React context provider and its matching React hook
Author: mlaopane
Latest version: 0.4.0

# React View Model

## Purpose

Abstract the creation of a `Context.Provider` and its `useContext` hook.
It helps centralizing state logic which is shared across children.

## Installation

With PNPM 👇

```shell
pnpm i @mlaopane/react-view-model
```

Or with NPM 👇

```shell
npm i @mlaopane/react-view-model
```

## Usage

You can find an interactive example here : https://codesandbox.io/s/react-view-model-bundle-z6zv34
npm package: @mlarah/spec-md
Description: Renders Markdown with some additions into an HTML format commonly used for writing technical specification documents. Markdown additions include code syntax highlighting, edit annotations, and the definition of algorithms and grammar productions.
Author: Lee Byron
Latest version: 3.1.0

# Spec Markdown

Renders Markdown with some additions into an HTML format commonly used for
writing technical specification documents. Markdown additions include code
syntax highlighting, edit annotations, and the definition of algorithms and
grammar productions.

**Philosophy**

Spec Markdown is first and foremost Markdown. As such, it follows Markdown's
philosophy of intending to be as easy to read and easy to write as is feasible.

In order to interoperate with other tools which use Markdown, Spec Markdown
tries to add as little additional syntax as possible, instead preferring
conventions. This means any documents written with Spec Markdown in mind should
render adequately by other Markdown renderers.

To support the rendering additions of Spec Markdown, some features of Markdown
may be limited or removed. As an example, Spec Markdown is strict about the
order and locations of headers in a document.

Note: This is not a normative spec for Spec Markdown, but just documentation of
this tool. Of course, written in Spec Markdown!


# Getting Started

To use Spec Markdown, just write Markdown files. There are some conventions used
by Spec Markdown which you can read about in [Spec additions](./spec/Spec%20Additions.md#Spec-Additions).

To convert your Markdown files into an HTML spec document, use the `spec-md`
utility.

```sh
npm install -g spec-md
spec-md ./path/to/markdown.md > ./path/to/output.html
```

You can also require `spec-md` as a node module.

```sh
npm install --save-dev spec-md
```

```js
const fs = require('fs');
const specMarkdown = require('spec-md');
specMarkdown.html('./path/to/markdown.md').then(html => {
  fs.writeFile('./path/to/output.html', html);
});
```

Spec Markdown also provides utilities for generating and operating on an
intermediate representation of the markdown, which you can explore in
[Using Spec Markdown](./spec/Usage.md#Using-Spec-Markdown).


# [Markdown](./spec/Markdown.md)

# [Spec additions](./spec/Spec%20Additions.md)

# [Using Spec Markdown](./spec/Usage.md)

# [Contributing](./CONTRIBUTING.md)
npm package: @mlarbi/reactive
Description: A lightweight JavaScript framework for building reactive web applications.
Author: mlarbi
Latest version: 1.0.2

# 🚀 mini-framework

A lightweight JavaScript framework for building reactive web applications.

## ✨ Features

-   **DOM Abstraction**: Create and manipulate the DOM with a simple and intuitive API.
-   **Reactive State Management**: Build reactive UIs with signals and effects.
-   **Conditional Rendering**: Easily render components based on application state with the `Show` component.
-   **Routing**: Simple routing for single-page applications.

## 🏁 Getting Started

To learn how to use the framework, check out our documentation:

-   **[Learn the framework](./docs/learn.md)**: A comprehensive guide to the framework's core concepts.
-   **[State Management](./docs/state.md)**: Detailed documentation on signals, effects, and the `Show` component.

##  örnek TodoMVC

A small example application built with `mini-framework` to demonstrate its usage and capabilities. You can find the code in the `mvc` directory.
npm package: @mlaroy/observe-entry
Description: A tiny library to observe elements entering the viewport using Intersection Observer.
Author: Michael LaRoy
Latest version: 1.0.10

# observe-entry
A tiny library to observe elements entering the viewport using Intersection Observer. When the selected elements enter the viewport, a class is applied to the element for styling.


## Demo
[Observe Entry Demo](https://observe-entry.netlify.app)

## Installation

```console
$ npm install @mlaroy/observe-entry
```


## API


```js
import observeEntry from '@mlaroy/observe-entry';

// call the function directly
observeEntry( '.my-element' );

// assign to variable to get the object
const observer = observeEntry( '.my-element' );
console.log( observer );
```

## Config

Rather than passing a string, you can pass a config object, using the options available in the Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer

Optionally, choose the class you want applied to the element when it is visible,

#### Default Options:
* `root: null`
* `rootMargin: '0px'`
* `threshold: 1.0`
* `intersectingClass: 'is-intersected'`


```js
const options = {
  intersectingClass: 'visible-class',
  selector: '.my-element',
  threshold: [ 0.25, 0.5, 0.75, 1.0 ]
}

observeEntry( options );
```

## Example CSS

```css
.my-element {
    opacity: 0;
    transition: opacity 1s ease;
}

.my-element.is-intersected {
    opacity: 1;
}
```
npm package: @mlatham/cyber
Description: Cross-platform UI bridge for mobile-embedded next.js apps.
Author: Matt Latham
Latest version: 0.4.4

# Cyber.js
Bundle next.js into your native mobile apps.

### Getting Started
`npx create-next-app my-app --example https://github.com/mlatham/cyber.js --example-path packages/next-cyber-starter`

### Documentation
TODO:

### Roadmap
1. Create example project.
- iOS Project + WKWebView
- Android Project + WebView
1. Create tool which replicates example project, substituting certain values (app name, etc).

### Notes
Testing locally:
- npx create-react-app my-app --template file:/Users/matt/Documents/workspace/cyber/packages/cra-template-cyber-app
- npx create-next-app next-cyber-starter --typescript --tailwind --eslint --src-dir --app --use-npm --import-alias "@/*"

- npx create-next-app my-app --example https://github.com/mlatham/cyber --example-path packages/next-cyber-starter

Custom integration:
- npm install cyber (<- add the Javascript bridge interface)
- spm install cyber-ios (<- add the iOS bridge interface)
    - Adds custom build step to copy cyber-ios.js as a resource
- gradle install cyber-android (<- add the android bridge interface)
    - Adds custom build step to copy in cyber-android.js as a resource

- npx create-react-app my-app --template cyber-react-app
    - esbuild 
- npx create-react-app my-app --template cyber-mobile-app
    - cyber-react-app + ios 

- https://createapp.dev/webpack
- main library
    - react vs svelte vs vue? react consistently most popular
- UI library (NONE)
    - bootstrap vs tailwind vs material UI? tailwind + bootstrap similar popularity. Suggestion is to learn raw CSS first
- Test framework (NONE)
- Transpiler
    - typescript (ES6 modules)
- Styling
    - CSS (vs CSS modules, PostCSS, Sass, Less, stylus)
- Image
    - SVG (vs PNG)
- Utilities (NONE)
- Linting
    - Prettier
- Optimization (NONE)
    - Code split vendors (?)
- Webpack plugins
    - HTML webpack plugin
- React
    - React hot loader

- https://createapp.dev/webpack/react--babel--css--html-webpack-plugin--prettier--svg--typescript--style-loader--css-loader

Added:
- npm install webpack-dev-server style-loader css-loader --save-dev
- webpack.config.*.js

- tsconfig.json:
    - allowSyntheticDefaultImports: true

Modified:
    "build-dev": "webpack --mode development --config webpack.config.development.js",
    "build-prod": "webpack --mode production --config webpack.config.js"

-       {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        type: 'asset/resource'
      }
- index.tsx ("root" -> "app", to align with HtmlWebPackPlugin)

- Use template file:
    new HtmlWebpackPlugin({
      template: './src/index.html',
    })

### iOS Notes
- Let Safari inspect webview within iOS Simulator via Develop->Simulator in Safari (Also Safari->Settings->Advanced->Show Develop menu in menu bar)

if #available(iOS 16.4, *) {
    self.webView.isInspectable = true
}

- Faster-tap (ios) and disable zooming:
<meta name="viewport" content="width=device-width, user-scalable=no">
npm package: @mlaursen/changelog-preset
Description: This is a custom standard-changelog preset that is based off of the angular preset that logs a bit more in the changelog.
Author: Mikkel Laursen
Latest version: 1.1.0

# @mlaursen/changelog-preset

This is a custom standard-changelog preset that is based off of the [angular preset](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) that logs a bit more in the changelog.

The default behavior of this template will:

- convert each commit type of:
  - `feat` -> `Features`
  - `fix` -> `Bug Fixes`
  - `perf` -> `Performance Improvements`
  - `docs` -> `Documentation`
  - `revert` -> `Reverts` (or if commit message has `revert`)
  - everything else -> `Other Internal Changes`
- sort the commit types by:
  1. `Bug Fixes`
  2. `Features`
  3. `Documentation`
  4. `Reverts`
  5. `Performance Improvements`
  6. `Other Internal Changes`
  7. If none match, alpha-numeric sort by title.

## Examples

- this repo
  - [CHANGELOG.md](./CHANGELOG.md)
- [react-md](https://github.com/mlaursen/react-md)
  - https://github.com/mlaursen/react-md/tree/main/CHANGELOG.md
  - https://github.com/mlaursen/react-md/tree/main/changelog.config.js
- [@mlaursen/eslint-config](https://github.com/mlaursen/eslint-config)
  - https://github.com/mlaursen/eslint-config/tree/main/CHANGELOG.md
  - https://github.com/mlaursen/eslint-config/tree/main/changelog.config.js

## Configuration

The behavior can be configured by creating a `changelog.config.js` at the root of your git repo.

Check out the [configuration interface](./types.ts) for documentation about how the config works.

## Simple Configuration Example

```js
const {
  createConfig,
  defaultCommitGroupsSort,
  defaultGetCommitType,
  defaultGetCommitScope,
} = require("@mlaursen/changelog-preset/createConfig");

// the `createConfig` is just used to add intellisense for the config
module.exports = createConfig({
  // these are _basically_ the defaults
  // tokens: [],
  // tokenizer: (subject) => subject,
  // ignoreDeps: true,
  // getCommitType: defaultGetCommitType,
  // getCommitScope: defaultGetCommitScope,
  // commitGroupsSort: defaultCommitGroupsSort,
});
```