open-index/open-npm huggingface dataset:
npm package: @selectra-it/selectra-ui
Description: ## Features
Latest version: 3.6.0

# ⚛️⚡ Vite + React + Typescript Component Library Template

## Features

- ⚛️ [React 18](https://reactjs.org/)
- 📚 [Storybook 6](https://storybook.js.org/) - Components preview
- 🖌️ [Tailwind CSS 3](https://tailwindcss.com/)
- ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
- ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
- 📐 [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) - Formatting and Linting
- 🌟 [Typescript](https://www.typescriptlang.org/)
- 🐶 [Husky](https://typicode.github.io/husky) & [Lint Staged](https://www.npmjs.com/package/lint-staged) - Pre-commit Hooks
- ⏰ [Release Please](https://github.com/googleapis/release-please) — Generate the changelog with the release-please workflow
- 👷 [Github Actions](https://github.com/features/actions) — Releasing versions to NPM
- Initial components setup using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)

### Main Scripts

Always prepending yarn:

- `dev`: Bootstrap the Storybook preview with Hot Reload.
- `build`: Builds the static storybook project.
- `build:lib`: Builds the component library into the **dist** folder.
- `lint:fix`: Applies linting based on the rules defined in **.eslintrc.js**.
- `format:prettier`: Formats files using the prettier rules defined in **.prettierrc**.
- `test`: Runs testing using watch mode.
- `test:cov`: Runs testing displaying a coverage report.

## License

[MIT](LICENSE)
npm package: @selego/clarity-decode
Description: An analytics library that uses web page interactions to generate aggregated insights
Author: Microsoft Corp.
Latest version: 0.6.23-2

# Clarity
Clarity is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance. 

It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.

This package takes the input payload from [clarity-js](https://github.com/microsoft/clarity/tree/master/packages/clarity-js) and decodes it back into its original format. 

We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance. 

## Examples
Here are some example sessions on popular websites visualized to demonstrate the telemetry captured:
1. CNN (Web)
</br><a href="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif"><img src="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif" title="Clarity - CNN Example"/></a>

2. Cook with Manali (Mobile)
</br><a href="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif"><img src="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif" title="Clarity - Cook With Manali Example"/></a> 

## Privacy Notice
Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server.

## Improving Clarity
If you haven't already done so, start contributing by following instructions **[here](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

Happy coding!
npm package: @selego/clarity-js
Description: An analytics library that uses web page interactions to generate aggregated insights
Author: Microsoft Corp.
Latest version: 0.6.23-2

# Clarity
Clarity is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance. 

It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.

It's the same code that powers Microsoft's hosted behavioral analytics solution: <a href="https://clarity.microsoft.com">https://clarity.microsoft.com</a>. If you would like to see a demo of how it works, checkout <a href="https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/impressions?date=Last%203%20days">live demo</a>. 

We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance. 

## Examples
Here are some example sessions on popular websites visualized to demonstrate the telemetry captured:
1. CNN (Web)
</br><a href="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif"><img src="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif" title="Clarity - CNN Example"/></a>

2. Cook with Manali (Mobile)
</br><a href="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif"><img src="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif" title="Clarity - Cook With Manali Example"/></a> 

## Privacy Notice
Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server.

## Improving Clarity
If you haven't already done so, start contributing by following instructions **[here](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

Happy coding!
npm package: @selego/clarity-visualize
Description: An analytics library that uses web page interactions to generate aggregated insights
Author: Microsoft Corp.
Latest version: 0.6.23-2

# Clarity
Clarity is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance. 

It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.

This package takes the decoded data from [clarity-decode](https://github.com/microsoft/clarity/tree/master/packages/clarity-decode) and turns it into pixel-perfect session replay, exactly how the user saw it.

We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance. 

## Examples
Here are some example sessions on popular websites visualized to demonstrate the telemetry captured:
1. CNN (Web)
</br><a href="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif"><img src="https://thumbs.gfycat.com/AggressiveLankyAbyssiniangroundhornbill-size_restricted.gif" title="Clarity - CNN Example"/></a>

2. Cook with Manali (Mobile)
</br><a href="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif"><img src="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif" title="Clarity - Cook With Manali Example"/></a> 

## Privacy Notice
Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server.

## Improving Clarity
If you haven't already done so, start contributing by following instructions **[here](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

Happy coding!
npm package: @selego/mongoose-elastic
Description: Mongoose Elastic is a [mongoose](http://mongoosejs.com/) plugin that can automatically index your models into [elasticsearch](https://www.elastic.co/).
Author: rap2hpoutre
Latest version: 1.7.5

# Mongoose Elastic

Mongoose Elastic is a [mongoose](http://mongoosejs.com/) plugin that can automatically index your models into [elasticsearch](https://www.elastic.co/).

[![Version](https://img.shields.io/npm/v/@selego/mongoose-elastic.svg)](https://www.npmjs.com/package/@selego/mongoose-elastic)
[![Downloads/week](https://img.shields.io/npm/dw/@selego/mongoose-elastic.svg)](https://www.npmjs.com/package/@selego/mongoose-elastic)
[![License](https://img.shields.io/npm/l/@selego/mongoose-elastic.svg)](https://github.com/selego/mongoose-elastic/blob/master/package.json)

## Usage

Install the package.

```bash
npm i @selego/mongoose-elastic
```

Setup your mongoose model to use the plugin.

```javascript
const { Client } = require("@elastic/elasticsearch");
const mongoose = require("mongoose");
const mongooseElastic = require("@selego/mongoose-elastic");

const client = new Client({ node: "http://localhost:9200" });

const User = new mongoose.Schema({
  name: String,
  email: String,
  city: String,
});

User.plugin(mongooseElastic(client), "user");

module.exports = mongoose.model("user", User);
```

Then, use your mongoose model as usual:

```js
const user = new User({ name: "Raph" });
user.save().then(() => {
  console.log("user saved on mongo, elastic sync is on its way");
});
```

## Why

There are some competitors, still, most of them are abandonned or suffering from their legacy.

- [mongoosastic](https://github.com/mongoosastic/mongoosastic) is [looking for maintainers](https://github.com/mongoosastic/mongoosastic/issues/457) since 2018 and has to deal with legacy.
- [mongoose-elasticsearch](https://www.npmjs.com/package/mongoose-elasticsearch) has been abandonned in 2014.
- [mongoose-elastic](https://www.npmjs.com/package/mongoose-elastic) has been discontinued in 2014 and repo is deleted.
npm package: @selektor/selektor
Description: Customizable HTML select boxes.
Author: Benjamin Georgeault
Latest version: 1.5.4

Selektor
========

Selektor is a lite-weight `<select>` UI alternative. It is based on native HTMLSelectElement. You can:
- Use your owns templates or one based on your favorite UI framework.
- Search/filter over select's options.
- Navigate by keyboard (arrows, paragraphs, escape, enter, etc...)
- Programmatically disable options.
- Load options from remote source (API, Ajax, etc...).
- Usable in your JavaScript and TypeScript projects!

## Install

### Packages managers
```shell
npm install @selektor/selektor
# or
yarn add @selektor/selektor
```

## Basic usages

```js
import {Selektor} from '@selektor/selektor';

// If you want to init existing selektor by data attribute.
Selektor.scanHTMLSection();

// Same as previous but limit on a part of the document.
Selektor.scanHTMLSection('#your-section-id');
Selektor.scanHTMLSection(document.querySelector('#your-section-id'));

// Manually init Selektor.
const select = new Selektor('select#your-select-id');
const select = new Selektor(document.querySelector('select#your-select-id'));

// With config.
const select = new Selektor('select#your-select-id', {
    // Put your config here
});

```

## Configuration

See [configuration](src/scripts/configuration/configuration.d.ts) source code.

## Advanced Usages

### Custom templates

There are 5 templates customizable. Take a look at [default templates directory](src/scripts/templating/templates) to see what you can do.
Here an example with the default template for virtual option in the dropdown.
```ts
const select = new Selektor('select#your-select-id', {
    templates: {
        option: (option: Option<object>): string => {
            return `
<li class="selektor-option" data-selektor-option="${option.value}"${option.selected ? ' data-selektor-selected' : ''}${option.disabled ? ' data-selektor-disabled' : ''}>
    ${option.label}
</li>
    `;
        },
        // main: ...,
        // optgroup: ...,
        // item: ...,
        // nooption: ...,
    },
});
```

### Remote options

#### Basic exemple

```js
// Using default remote loader.
const select = new Selektor('select#your-select-id', {
    remote: 'https://url.to.your.domain/path/to/resource',
});
```

The data returned by your remote must be an array of string or an array of object like this:
```js
const obj = {
    value: 'string',
    label: 'string',
};

```

#### Custom search

This example is the default config.
```ts
const select = new Selektor('select#your-select-id', {
    remote: {
        url: 'https://url.to.your.domain/path/to/resource',
        queryBuilder: (search: string, page: number): string => {
            return `page=${page}&search=${encodeURI(search)}`;
        },
    },
});
```

#### Custom value and label field for default remote loader.

```js
const select = new Selektor('select#your-select-id', {
    remote: {
        url: 'https://url.to.your.domain/path/to/resource',
        valueField: 'id',
        labelField: 'title',
    },
});
```

## License

This bundle is under the MIT license. See the complete [LICENSE](LICENSE).
npm package: @selemene/sdk
Description: TypeScript SDK for Selemene Engine
Latest version: 3.0.0

# @selemene/sdk

TypeScript SDK for Selemene Engine.

## Install

```bash
npm i @selemene/sdk
```

## Quickstart

```ts
import { NoesisClient } from "@selemene/sdk";

const client = new NoesisClient("https://selemene-engine-production.up.railway.app");

const health = await client.health();
console.log(health.version);
```

## API

- `health()`
- `calculate(engineId, input)`
- `workflow(workflowId, input)`
npm package: @selemondev/create-eslint-config
Description: An Eslint CLI to rapidly setup ESLint in React.js projects.
Author: Selemondev
Latest version: 1.3.0

# `@selemondev/create-react-eslint-config`

Currently undergoing heavy development 🚧

A minimal Eslint CLI to rapidly setup ESLint in React.js projects.

## Usage

Run the following command in your project root:

With npm:

```sh
npm create @selemondev/eslint-config
```

With pnpm:

```sh
pnpm create @selemondev/eslint-config
```

With Yarn:

```sh
yarn create @selemondev/eslint-config
```
npm package: @selemondev/create-react-next
Description: The Next Generation React Scaffolding Tool ✨
Author: Selemondev
Latest version: 1.0.4

<p align="center">
 <img align="center" src="https://raw.githubusercontent.com/selemondev/create-react-next/master/image/create-react-next.png" height="400" />
 <h1 align="center">
 Create React Next
 </h1>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@selemondev/create-react-next">
    <img alt="npm-version-src" src="https://img.shields.io/npm/v/@selemondev/create-react-next/latest.svg?style=flat&colorA=020420&colorB=00DC82" />
  </a>
  <a href="https://npmjs.com/package/@selemondev/create-react-next">
    <img alt="npm-downloads-src" src="https://img.shields.io/npm/dm/@selemondev/create-react-next.svg?style=flat&colorA=020420&colorB=00DC82" />
  </a>
  <a href="https://pkg-size.dev/@selemondev/create-react-next@latest">
  <img src="https://pkg-size.dev/badge/bundle/842194" title="Bundle size for @selemondev/create-react-next">
  </a>
</p>

The Next Generation React Scaffolding Tool powered by Vite 🛠️

## Usage 

### npx

```bash
npx @selemondev/create-react-next@latest

# OR

npx @selemondev/create-react-next <project-name> --ts --eslint --tailwind --use-pnpm
```

### yarn

```bash
yarn create @selemondev/create-react-next

# OR

yarn create @selemondev/create-react-next <project-name> --ts --eslint --tailwind --use-pnpm
```

### pnpm

```bash
pnpm create @selemondev/create-react-next@latest

# OR

pnpm create @selemondev/create-react-next@latest <project-name> --ts --eslint --tailwind --use-pnpm
```

## Options

You can also pass command line arguments to set up a new project non-interactively. Run `@selemondev/create-react-next --help` to see the available command line arguments:

```bash
Usage: @selemondev/create-react-next@latest <project-name> [options]

Options:
  -V, --version   output the version number
  --ts, --typescript

    Initialize as a TypeScript project.

  --tailwind

    Initialize with Tailwind CSS config.

  --eslint

    Initialize with ESLint config.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  --use-yarn

    Explicitly tell the CLI to bootstrap the app using Yarn

  --use-bun

    Explicitly tell the CLI to bootstrap the app using Bun
```

### How to contribute?

Contributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository. 

Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).


Happy hacking ⚡
npm package: @selemondev/svelte-marquee
Description: A Beautiful Marquee component for Svelte ✨
Author: Selemondev
Latest version: 0.1.1

<div align="center">

# Marquee <br> 🌬️

> A beautiful marquee component for Svelte ✨.

</div>


<!-- automd:badges color="green" license name="@selemondev/svelte-marquee" codecov bundlephobia packagephobia -->

[![npm version](https://img.shields.io/npm/v/@selemondev/svelte-marquee?color=green)](https://npmjs.com/package/@selemondev/svelte-marquee)
[![npm downloads](https://img.shields.io/npm/dm/@selemondev/svelte-marquee?color=green)](https://npm.chart.dev/@selemondev/svelte-marquee)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@selemondev/svelte-marquee?color=green)](https://bundlephobia.com/package/@selemondev/svelte-marquee)
[![install size](https://badgen.net/packagephobia/install/@selemondev/svelte-marquee?color=green)](https://packagephobia.com/result?p=@selemondev/svelte-marquee)
[![codecov](https://img.shields.io/codecov/c/gh/selemondev/svelte-marquee?color=green)](https://codecov.io/gh/selemondev/svelte-marquee)
[![license](https://img.shields.io/github/license/selemondev/svelte-marquee?color=green)](https://github.com/selemondev/svelte-marquee/blob/main/LICENSE)

<!-- /automd -->

## Installation

<!-- automd:pm-install name="@selemondev/svelte-marquee" -->

```sh
# ✨ Auto-detect
npx nypm install @selemondev/svelte-marquee

# npm
npm install @selemondev/svelte-marquee

# yarn
yarn add @selemondev/svelte-marquee

# pnpm
pnpm install @selemondev/svelte-marquee

# bun
bun install @selemondev/svelte-marquee

# deno
deno install @selemondev/svelte-marquee
```

<!-- /automd -->

or you can skip the npm install, and just copy and paste the source code into your component like Shadcn Svelte (don't forget to also copy the tailwind config if you do this).


## Register it as a local component

```js
import { Marquee } from "@selemondev/svelte-marquee";
```

## Usage

The library has a few props that are self-explanatory; you can get it running in no time. See the web examples for more details. Check out the [documentation](https://svelte-marquee.vercel.app) for more information.

```js
<Marquee
direction="left"
fade={true}
reverse={false}
pauseOnHover={false}
innerClassName="" // pass class to change gap or speed
>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>
```

This library is made specifically for Tailwind users, however you can also use vanilla CSS classes to override the gap.

## Credits

- Inspired by [@devnomic's](https://github.com/devnomic) React Marquee component.

- Inspired by [@selemondev's](https://github.com/selemondev) Vue Marquee component.

## License

Released under [MIT](/LICENSE) by [@selemondev](https://github.com/selemondev).
npm package: @selemondev/svgl-svelte
Description: An optimized package with SVG logos to be used as Svelte components ✨
Author: Selemondev
Latest version: 2.1.2

<p align="center">
 <img align="center" src="https://svgl.app/library/svgl.svg" height="96" />
 <h1 align="center">
  Svgl Svelte ✨
 </h1>
</p>

<!-- automd:badges color="green" license name="@selemondev/svgl-svelte" codecov packagephobia -->

[![CI](https://github.com/selemondev/svgl-svelte/actions/workflows/ci.yml/badge.svg)](https://github.com/selemondev/svgl-svelte/actions/workflows/ci.yml)
[![npm version](https://img.shields.io/npm/v/@selemondev/svgl-svelte?color=green)](https://npmjs.com/package/@selemondev/svgl-svelte)
[![npm downloads](https://img.shields.io/npm/dm/@selemondev/svgl-svelte?color=green)](https://npm.chart.dev/@selemondev/svgl-svelte)
[![install size](https://badgen.net/packagephobia/install/@selemondev/svgl-svelte?color=green)](https://packagephobia.com/result?p=@selemondev/svgl-svelte)

<!-- /automd -->

**Svgl Svelte** is an open-source npm package that offers a collection of high-quality brand SVG logos as reusable **Svelte components** with complete TypeScript support.

This package is powered by the official [`pheralb/svgl`](https://github.com/pheralb/svgl) repository.

## ✨ Features

- 💪 Fully typed Svelte components.
- 🍃 Tree-shakable — only what you use will be bundled.

## 📦 Installation

```bash
npm install @selemondev/svgl-svelte
# or
yarn add @selemondev/svgl-svelte
# or
pnpm add @selemondev/svgl-svelte
# or
bun add @selemondev/svgl-svelte
```

## 🚀 Usage

Visit the [Svgl logos](https://svgl.app/) page to explore the available Svgl logos.

```html
<script lang="ts">
	import { SvelteLogo } from '@selemondev/svgl-svelte';
</script>

<SvelteLogo height="{200}" width="{200}" />
```

## ©️ Eco-system

- [svgl-react](https://github.com/ridemountainpig/svgl-react) for the React eco-system.

- [svgl-vue](https://github.com/selemondev/svgl-vue) for the Vue eco-system.