open-index/open-npm huggingface dataset:
npm package: @studiohyperdrive/ngx-inform
Description: A lightweight ARIA compliant customizable approach for common and complex inform flows in Angular.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: NgxInform (`@studiohyperdrive/ngx-inform`)

`ngx-inform` is a collection of Angular flows related to informing end-users.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-inform
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

`ngx-inform` is a package to help facilitate common user information use-cases such as tooltips, toasts and snackbars.

At its core, `ngx-inform` is build to be WCAG and ARIA compliant, and will throw errors whenever the necessary setup has not been provided to ensure said compliancy.

Currently the package provides a `ngxTooltip` directive which can be used to attach a customizable ARIA compliant tooltip to any component and the `ngxModalService` which allows for both custom and predefined global modals to be used throughout the application.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/inform/introduction).
npm package: @studiohyperdrive/ngx-layout
Description: A lightweight customizable approach for common and complex layouts in Angular.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: NgxLayout (`@studiohyperdrive/ngx-layout`)

`ngx-layout` is a collection of Angular components related to layout.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-layout
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

`ngx-layout` is a package to help facilitate common layout use-cases.

Currently the package provides a `configurable layout` component which can be used to render components in a grid based on provided templates. This approach is ideal for use-cases such as a custom configurable dashboard. We also provide a fully accessible `accordion` component and an accessible `displayContent` approach to handle loading, error and offline flows.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/inform/introduction).
npm package: @studiohyperdrive/ngx-store
Description: A set of utils and services to plug into a Redux/NGRX Angular workflow.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: NgxStore (`@studiohyperdrive/ngx-store`)

NGX-store aims to reduce the boilerplate that comes with `@ngrx`, `@ngrx/effects` and `@ngrx/entity`; whilst still including the benefits of said packages.

Each of the provided utils can be used individually, but we strongly advice to use all three utils as a coherent unit to get the best developers experience.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-store
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

As mentioned before, `ngx-store` works in tandem with `@ngrx`. The package aims to optimize the workflow for (complex) projects that currently already use this redux implementation.

With this in mind, our goal is to make this package as flexible as possible. We are aware that existing projects often already have their own approach to their store setup, and therefor we try to provide solutions that can be used when needed. Whilst we strongly suggest using the entire system for the optimal approach, several of our utils are entirely optional. The use of `handleEffect`, `dispatchDataToStore` and the `NgxStoreService` is never mandatory and all utils are opt-in at any stage.

Because of this approach, our implementation has to take into account these constraints and will therefore deviate from the standard redux implementation.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/store/introduction).
npm package: @studiohyperdrive/ngx-table
Description: An Angular based approach for customizable large scale datatables using Angular CDK.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: NgxTable (`@studiohyperdrive/ngx-table`)

This library provides a quick and easy template based table builder using the Angular CDK Table.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-table
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

The Angular CDK Table is a very useful tool to build tables with, but is known to have a rather complex syntax and does not feature a bunch of common use-cases out of the box.

Using the CDK Table the `ngx-table` provides an easy to use template based system to build tables with, including various common use-cases such as column based sorting, selecting rows, detail rows and more.

Whilst this package is opinionated, the `ngx-table` works primarily with a ng-template based system, which ensures that any default implementation the table provides can be overwritten.

You can find a StackBlitz example [here](https://stackblitz.com/edit/stackblitz-starters-am9x39).

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/table/introduction).
npm package: @studiohyperdrive/ngx-tour
Description: A lightweight and customizable Angular help tour approach using Angular CDK.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: NgxTours (`@studiohyperdrive/ngx-tours`)

`ngx-tour` is light-weight and heavily customizable package to create a help tour through an application using [the CDK overlay](https://material.angular.io/cdk/overlay/overview).

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-layout
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

With the tour approach of `ngx-tour`, we aim to create a very light-weight bare bones approach to the help tours. The package requires the user to provide their own styling and components for the steps shown during the tour, ensuring a maximized customizability.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/tour/introduction).
npm package: @studiohyperdrive/ngx-utils
Description: A series of abstracts, utils, pipes and services for Angular applications.
Author: Studio Hyperdrive
Latest version: 21.0.0

# Angular Tools: Utils (`@studiohyperdrive/ngx-utils`)

This library provides several independent utilities to facilitate common use-cases for users and developers.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/ngx-utils
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Follows the Angular major version
- `minor`: Introduces new features and (potential) breaking changes
- `patch`: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Concept

The `ngx-utils` package seeks to provide easy to use and to customize solutions to common use-cases. Each of these solutions can be used independently and are meant to enhance both the developer and the user experience of the application.

This package comes with a wide array of pipes, directives, services, types and abstracts. New implementations are added on a regular basis.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/utils/introduction).
npm package: @studiohyperdrive/strapi-plugin-media
Description: This is the description of the plugin.
Author: A Strapi developer
Latest version: 0.0.9
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Strapi plugin

Media manager plugin for the Strapi CMS.

## Installation

### 1. copy media plugin to plugins folder

```
strapi_cms
|_ plugins
   |_ media
```

### 2. set upload path (& base) in config

Add custom config in `custom.json`:

```
{
  "uploadPath": "/public/uploads",
  "uploadHost": "https://my-server-url/",
  "uploadPublicPath": "/uploads",
}
```

**uploadPath**: location to store files on the server (defaults to `/public/uploads`)
**uploadBase**: url prefix for uploaded files in case strapi is hosted on a custom url (defaults to strapi host)
**uploadPublicPath**: public path where uploaded files can be found (defaults to `uploads`)

### 3. adjust request data limit

Increase data limit in `environment/**/request.json` if you need to upload bigger images (default is 1mb). Make sure `enabled` and `multipart` are true:

```
{
  "parser": {
    "enabled": true,
    "multipart": true,
    "formLimit": "5mb"
  }
}
```
npm package: @studiohyperdrive/types-auth
Description: A package containing common authentication related types
Author: Studio Hyperdrive
Latest version: 2.0.0

# Javascript Tools: Authentication Types (`@studiohyperdrive/types-auth`)

`@studiohyperdrive/types-auth` is a set of base types used for the frontend-equivalent packages such as `@studiohyperdrive/ngx-auth`.

## Installation

Install the package first:

```shell
npm install @studiohyperdrive/types-auth
```

## Versioning and build information

This package will follow a semver-like format, `major.minor.patch`, in which:

- `major`: Introduces new features or breaking changes
- `minor`: Introduces minor non-breaking changes
- `patch`: Introduces bugfixes

For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.

## Documentation

To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/javascript/types/introduction).
npm package: @studiokad/kad-react-modal-component
Description: Un simple modal component pour mon projet de formation
Author: Bendahmane Kader
Latest version: 1.0.1

# React Modal Component

[![npm version](https://badge.fury.io/js/react-modal-component.svg)](https://www.npmjs.com/package/kad-react-modal-component)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![npm](https://img.shields.io/npm/v/@studiokad/kad-react-modal-component)

React Modal Component est une bibliothèque légère et simple pour intégrer des modales personnalisées dans vos projets React. Ce composant est entièrement configurable et facile à utiliser.

🔥 Fonctionnalités
💡 Simple à intégrer.
🎨 Personnalisable via des props ou des styles CSS.
🖱️ Gestion facile des événements d'ouverture et de fermeture.
♿ Accessible (support du clavier et ARIA-ready).

## 🚀 Installation

Installez le package via npm ou yarn :

```bash
npm install @studiokad/kad-react-modal-component
```

ou

```bash
yarn add @studiokad/kad-react-modal-component
```

## 🧪 Tests

```bash
npm test
```

## 🎨 Props

| Prop               | Type        | Description                                             | Default |
| ------------------ | ----------- | ------------------------------------------------------- | ------- |
| `isOpen`           | `boolean`   | Détermine si la modale est ouverte ou fermée.           | `false` |
| `onClose`          | `function`  | Fonction callback appelée lorsque la modale est fermée. | `null`  |
| `className`        | `string`    | Classe CSS personnalisée pour styliser la modale.       | `""`    |
| `overlayClassName` | `string`    | Classe CSS personnalisée pour styliser l'overlay.       | `""`    |
| `children`         | `ReactNode` | Contenu à afficher dans la modale.                      | `null`  |

### Exemple de base

Voici un exemple simple pour utiliser votre composant de modale :

```javascript
import React, { useState } from "react";
import Modal from "react-modal-component";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={toggleModal}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={toggleModal}>
        <h2>Hello, World!</h2>
        <p>This is a customizable modal component.</p>
        <button onClick={toggleModal}>Close</button>
      </Modal>
    </div>
  );
};

export default App;
```

## 📦 Développement

Si vous souhaitez contribuer ou modifier le package, clonez ce dépôt :

```bash
git clone https://github.com/studiokad/kad-react-modal-component.git
```

## 📄 Licence

Ce projet est sous licence MIT.

## 📧 Support

Si vous avez des questions ou des suggestions, n'hésitez pas à ouvrir une issue ou à me contacter via [Support](#GitHub).
npm package: @studiokaiji/nostr-rorubakku
Description: Nostr Rorubakku manages your Nostr Following list (`kind: 3`) in git. Each time you follow or unfollow another user, Nostr Rorubakku writes the Following list to a file and does an add & commit in git.
Latest version: 0.0.1

# 📼 Nostr Rorubakku
Nostr Rorubakku manages your Nostr Following list (`kind: 3`) in git.
Each time you follow or unfollow another user, Nostr Rorubakku writes the Following list to a file and does an add & commit in git.

## Installation
```sh
npm install -g @studiokaiji/@nostr-rorubakku
```

## Usage
1. Setup (initialize git repository.)
```sh
rorubakku setup
```
2. Run server
```sh
rorubakku run
```

## Settings
A settings file can be specified when executing the `setup` and `run` commands.

```sh
rorubakku -s <CUSTOM_SETTINGS_FILE_PATH>
```

The Settings file should be written as follows. If no Settings file is specified, the following settings are used by default.
```json
{
  "updateIntervalMs": 5000,
  "relays": [
    "wss://eden.nostr.land",
    "wss://relay.nostr.info",
    "wss://nos.lol",
    "wss://nostr.mom"
  ],
  "gitDirectoryPath": "./rorubakku",
  "authors": ["2d417bce8c10883803bc427703e3c4c024465c88e7063ed68f9dfeecf56911ac"]
}
```
npm package: @studiokeywi/banjo
Description: The fast and plucky game framework from studioKeywi 🪕 Zero dependencies 🪕 Tree shakeable exports 🪕 Built with ❤️, Bun, TypeDoc, and TypeScript.
Author: studioKeywi
Latest version: 0.0.1

[Bun]: https:bun.sh/
[Bun's auto importing]: https://bun.sh/docs/runtime/autoimport
[Electron]: https://www.electronjs.org/
[Tauri]: https://tauri.app/
[TypeDoc]: https://typedoc.org/
[TypeScript]: https://typescriptlang.org/
[API Documentation]: https://studiokeywi.github.io/banjo/api
[Examples]: https://studiokeywi.github.io/banjo/examples
[Guides]: https://studiokeywi.github.io/banjo/guides

# @studiokeywi/banjo

> The fast and plucky game framework from studioKeywi 🪕 Zero dependencies 🪕 Tree shakeable exports 🪕 Built with ❤️, [Bun], [TypeDoc], and [TypeScript].

`@studiokeywi/banjo` is a TypeScript game framework meant to be run in the browser or a similar web view (such as through [Electron] or [Tauri]) through the build process of your choice. While dependency free, `banjo` expects to have access to browser-provided functionality such as the `cancelAnimationFrame`/`requestAnimationFrame` functions, the `HTMLImageElement`/`Image` objects, and the `<canvas>` element. If you can provide these where your code will run, then `banjo` should run there as well!

- 🚫 Dependency Free  
  studioKeywi wants you to have confidence that the code we provide doesn't rely on outside vectors. We may not be the best choice, but we believe we are a transparent choice when it comes to understanding our functionality.
- 🌳 Tree Shakeable Exports  
  `banjo` exposes all of its functionality through its `exports` map, separated out by concern. That way, you can be sure that your games only contain the minimum code required for your final product.
- ⚡ Powered by Bun and TypeScript  
  Bun provides our development cycle with speed and built-in functionality that reduces our development load.  
  TypeScript provides our users with a better development experience and flexibility in their build patterns.

## Installation

`banjo` is published to the NPMJS registry and can be installed with any compatible package manager. Depending on your build process, you may be able to install as a development dependency instead.

### Bun

```shell
bun add @studiokeywi/banjo
# or
bun add -D @studiokeywi/banjo
```

Or simply use it in your projects and let [Bun's auto importing] take over

### Deno

```shell
deno add npm:@studiokeywi/banjo
# or
deno add -D npm:@studiokeywi/banjo
```

### Node

```shell
npm install @studiokeywi/banjo
# or
npm install -D @studiokeywi/banjo
```

## Additional Links

- [API Documentation]
- [Examples]
- [Guides]
npm package: @studiokeywi/phobos
Description: Svelte Component Testing assistance for Luna
Author: studioKeywi
Latest version: 0.0.1

<!-- links -->

[svelte]: https://svelte.dev
[luna]: https://github.com/ccampbell/luna-testing
[blog post]: https://itnext.io/introducing-luna-javascript-testing-done-right-437a738cc1ed
[esm]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[puppeteer]: https://github.com/puppeteer/puppeteer/
[components api]: ./docs/components.md
[dom api]: ./docs/dom.md
[time api]: ./docs/time.md

<!--  -->

# phobos

phobos is a set of helper functions meant to be used in conjunction with [Svelte] and [Luna].

## I've heard of Svelte, but Luna..?

Me either -- until I stumbled across their GitHub repo and their [blog post]. For my purposes, this is ticking all the boxes for a front-end/component testing framework -- it should support modern JS (in the form of [ESM]), it shouldn't have to shim/polyfill browser behavior on node (Luna utilizes [Puppeteer] for proper in-browser execution), and it should be low hassle to start using (in Luna's own words, it _"has no configuration options or plugins. ... it will not work for every use case, but it is designed to work very well in many cases"_)

I created phobos as a way to wrap up what I felt were commonly used behaviors when testing my own projects (and in the spirit of Luna, phobos is tested with Luna itself)

## Getting Started

Find your Svelte project of choice, and make sure you have Luna installed. Then you can add phobos to your dev dependencies:  
`npm i -D @studiokeywi/phobos`

Inside your test files, you can then import any phobos helper function as required. Then, you can use your components and helper function(s) inside your Luna tests:

**/lib/components/Dummy.svelte**

```svelte
<p>dummy</p>
```

**/test/test.js**

```js
import { runComponentTest, DOMTools } from '@studiokeywi/phobos';
import Dummy from '../lib/components/Dummy.svelte';

const component = { Component: Dummy };

export function testDummy(t) {
  const test = ({ target }) => {
    const DOM = DOMTools(target);
    t.assert(target.html() === '<p>dummy</p>');
  };
  runComponentTest(component, test);
}
```

## API

[Components API]

[DOM API]

[Time API]