open-index/open-npm huggingface dataset:
npm package: @jocabola/utils
Description: Web Utils Package written in TypeScript
Author: Edu Prats
Latest version: 0.1.89-1

# @jocabola/utils
This package is discontinued. It has moved here: [https://www.npmjs.com/package/@fils/utils](https://www.npmjs.com/package/@fils/utils)

Web Utils Package written in TypeScript. Lightweight Wrapper of useful functions for web dev.

This is part of a series of packages that I use in my studio for personal and commercial web & [THREEjs](https://threejs.org) based work. It might remain undocumented for a long while but feel free to try it out!

### License
© Copyright 2021, Eduard Prats Molner

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
npm package: @jocelo/tiny
Description: Removes all spaces from a string
Latest version: 2.0.1

# tiny
Removes all spaces from a string.

## Install
```
$ npm install @bamblehorse/tiny
```

## Usage
```
const tiny = require("@bamblehorse/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @jocelyneboun/word-counter
Description: Evaneos test-js ==
Latest version: 1.0.0

Evaneos test-js
==

## Concevez un paquet npm qui répond à ce problème.
On cherche à calculer le nombre d'occurences de chaque mots dans un texte.  
Les mots de moins de deux lettres seront ignorés.

1. Enrichissez la suite de tests en essayant de gérer plus de cas.
2. Sachez qu'il est moins dangereux de sélectionner les mots que les caractères indésirables.
3. Limitez, le plus possible, le nombre de branches logiques.
npm package: @jochenlinnemann/markdown-it-imsize
Description: Markdown-it plugin to specify image size
Author: tatsy, Jochen Linnemann
Latest version: 2.0.1-style2

# markdown-it-imsize

> A markdown-it plugin for size-specified image markups. This plugin overloads original image renderer of markdown-it.

Original by tatsy: https://github.com/tatsy/markdown-it-imsize

This version adds width and height to the style attribute, too.

## Build & Test

Install `npm install make -g`.

Run `npm run build`.

Run `npm run test`.

## Usage

#### Enable plugin

```js
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-imsize')); // <-- this use(package_name) is required
```

#### Example

```md
![test](image.png =100x200)
```

is interpreted as

```html
<p><img src="image.png" alt="test" width="100" height="200"></p>
```

## Options

#### Auto fill

```js
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typography: true
}).use(require('markdown-it-imsize'), { autofill: true });
```

will fill the width and height fields automatically if the specified image path is valid.

Therefore,

```md
![test](image.png)
```

is interpreted as

```html
<p><img src="image.png" alt="test" width="200" height="200"></p>
```

where ```image.png``` is a valid path and its size is 200 x 200.

## Use with RequireJS

```markdown-it-imsize``` is available with bower and RequireJS. First, you can install the package with,

```shell
bower install markdown-it-imsize
```

Script for using ```markdown-it-imsize``` with RequireJS is like,

```js
require(['require', 'MarkdownIt', 'MarkdownItImsize'], function(require) {
  var md = require('MarkdownIt')({
    html: true,
    linkify: true,
    typography: true
  }).use(require('MarkdownItImsize'));

  var rendered = md.render("![test](test.jpg =100x)");
  document.getElementById('image-box').innerHTML = rendered;
});
```
npm package: @jochlain/babel-plugin-yaml
Description: Babel plugin to transform YAML require to JSON
Author: Jocelyn Faihy
Latest version: 1.0.0

# @jochlain/babel-plugin-yaml

Babel plugin to transform YAML require to JSON  
Inspired from NPM package [babel-plugin-convert-to-json](https://www.npmjs.com/package/babel-plugin-convert-to-json)

## Installation

`npm i @jochlain/babel-plugin-yaml`

## Configuration

### Via `.babelrc.js` _(recommended)_

```js
module.exports = {
  // ...
  "plugins": [
    // ...
    "@jochlain/babel-plugin-yaml"
  ]
}
```

### Via cli

`babel --plugins @jochlain/babel-plugin-yaml index.js`

### Via Node

```js
require('@babel/core').transform('some code', {
    plugins: ['@jochlain/babel-plugin-yaml'],
});
```

## Usage

```yaml
# ./example.yaml
hello: "world"
```

```js
// ./index.js
import yaml from "./example.yaml";
// or
const yaml = require('./example.yaml');

console.log(yaml.hello); // => "world"
```
npm package: @jochlain/react-partial
Description: ## Installation
Author: Jocelyn Faihy
Latest version: 1.0.2

# @jochlain/react-partial

## Installation

`npm install --save react @jochlain/react-partial`

## Usage

```javascript
// ./components/layout/base.js
import { usePartials } from "@jochlain/react-partial";

export default function BaseLayout(props) {
    const [children, partials] = usePartials(props.children, ['nav', 'breadcrumb']);

    return <article className="layout">
        <nav className="navbar">
            <h1 className="navbar-brand">
                Partial usage example
            </h1>
            <ul className="navbar-nav">
                <li className="nav-item">
                    <a href="/" className="nav-link">
                        Home
                    </a>
                </li>
                {partials.nav}
            </ul>
        </nav>
        <main className="content">
            {partials.breadcrumb && (
                <ul className="breadcrumb">
                    {partials.breadcrumb}
                </ul>
            )}
            {children}
        </main>
    </article>;
}
```

```javascript
// ./components/layout/index.js
import Partial from "@jochlain/react-partial";
import BaseLayout from "components/layout/base";

export default function Layout(props) {
    return <BaseLayout>
        <Partial type="nav">
            <li className="nav-item">
                <a href="/blog" className="nav-link">
                    Blog
                </a>
            </li>
            <li className="nav-item">
                <a href="/game" className="nav-link">
                    Game
                </a>
            </li>
        </Partial>
        {props.children}
    </BaseLayout>;
}
```

```javascript
// ./components/index.js
import Partial from "@jochlain/react-partial";
import Layout from "components/layout";

export default function Index() {
    return <Layout>
        <Partial type="nav">
            <li className="nav-item">
                <a href="#" className="nav-link">
                    My menu only in home
                </a>
            </li>
        </Partial>
        <blockquote>
            <p>Hello World</p>
            <cite>— Brian Kernighan & Dennis Ritchie</cite>
        </blockquote>
    </Layout>;
}
```
npm package: @jochristianto/eslint-config
Description: Jonathan's Base ESLint Config
Latest version: 1.0.5

# eslint-config
![License](https://img.shields.io/npm/l/@jochristianto/eslint-config?color=blue&label=License)
[![NPM](https://img.shields.io/npm/v/@jochristianto/eslint-config?color=blue&label=NPM%20Package)](https://www.npmjs.com/package/@jochristianto/eslint-config)
![Downloads](https://img.shields.io/npm/dw/@jochristianto/eslint-config?color=blue&label=Downloads)


ESLint configuration for Jonathan's JS projects. This includes Vue, Nuxt, and Import eslint-plugin.
## Usage

1. Install

   ```sh
   # If you are using Yarn
   $ yarn add @jochristianto/eslint-config --dev

   # If you are using NPM
   $ npm install @jochristianto/eslint-config --save-dev
   ```

2. Add to the project's eslint config
   ```sh
   {
       "extends": [ "@jochristianto" ]
   }
   ```

## Version History
| Version | Release Date | Description |
|---------|--------------|--------------------------------------------------------------------|
| 1.0.0 | 2020-04-15 | - |
| 1.0.1 | 2020-04-15 | Minor documentation update |
| 1.0.2 | 2020-04-15 | Minor documentation update, and convert everything to single quote |
| 1.0.3 | 2020-04-16 | Disable alphabetical order for `vue/attributes-order` |
| 1.0.5 | 2020-11-23 | Update `import/extensions` to only be applied to .vue files, added `import/order`, and `vue/html-closing-bracket-spacing` |

## Log Generator
https://www.tablesgenerator.com/markdown_tables
npm package: @jocoos-web/eslint-config
Description: 요쿠스 웹 프론트엔드 JS, TS Eslint 규칙
Latest version: 1.0.0

# `@jocoos-web/eslint-config`

> 1. eslint 의 수정은 최대한 피한다.
> 2. 누구나 eslint 를 수정할 수 있으나 협의 후 수정한다.

## 사용방법

### 의존성 설치

기본적으로 아래와 같이 의존성이 설치되어야 한다.

`package.json`

```json
{
  "devDependencies": {
    "@jocoos-web/eslint-config": "*",
    "eslint": "8.22.0",
    "prettier": "^2.7.1"
  }
}
```

### ⚠️ 주의사항

`packages/eslint-config/package.json` 의 dependencies 를 참고해서, 기존에 설치되어있는 devDependencies 중 겹치는 의존성을 삭제해야 한다.

### @jocoos-web/eslint-config/base

airbnb/base 를 기반으로한 eslint 규칙을 적용합니다.

사용하려면 아래와 같이 `.eslintrc.js` 에 추가하세요.

`extends: ['@jocoos-web/eslint-config/base']`

### @jocoos-web/eslint-config

`@jocoos-web/eslint-config/base` 와 함께 react, react hooks 에 대한 규칙이 적용되어 있습니다.

사용하려면 아래와 같이 `.eslintrc.js` 에 추가하세요.

`extends: ['@jocoos-web/eslint-config']`

### @jocoos-web/eslint-config/next

`@jocoos-web/eslint-config` 에 추가로 next js 의 eslint 규칙이 적용돼있습니다.

사용하려면 아래와 같이 `.eslintrc.js` 에 추가하세요.

`extends: ['@jocoos-web/eslint-config/next']`
npm package: @jodacame/node-logger
Description: A simple logger for Node.js
Author: Jose Canchila
Latest version: 1.0.0

![node-logger](./image.png)

# node-logger
A lightweight and flexible logger for Node.js applications. Designed to simplify logging with support for different log levels, including `info`, `error`, `warn`, and `debug`. With `node-logger`, you can log directly to stdout, track progress with a progress bar, and include additional context as needed. Whether you're building a small project or a larger application, `node-logger` provides the essential tools for effective logging.




## Installation
```bash
npm install @jodacame/node-logger
```

## Basic Usage
```javascript
const logger = require('@jodacame/node-logger');
or 
import logger from '@jodacame/node-logger';

logger.info('Hello world');
logger.error('Hello world');
logger.warn('Hello world');
logger.debug('Hello world');

logger.info('Hello world', { key: 'value' });
logger.error('Hello world', { key: 'value' });
logger.warn('Hello world', { key: 'value' });
logger.debug('Hello world', { key: 'value' });

```

## Stdout Usage
Allow to log to stdout

```javascript
const logger = require('@jodacame/node-logger');
or
import logger from '@jodacame/node-logger';

logger.stdout.info('Hello world');
logger.stdout.error('Hello world');
logger.stdout.warn('Hello world');
logger.stdout.debug('Hello world');

logger.stdout.info('Hello world', { key: 'value' });
logger.stdout.error('Hello world', { key: 'value' });
logger.stdout.warn('Hello world', { key: 'value' });
logger.stdout.debug('Hello world', { key: 'value' });

```

## Progress Usage
Display progress bar

```javascript
const logger = require('@jodacame/node-logger');
or
import logger from '@jodacame/node-logger';

logger.progress(value, [total], [barLength], [message]);

// Example:
logger.progress(50, 100, 100, 'Progress bar');
logger.progress(70);

```

## Types of log
- info
- error
- warn
- debug
- progress
- stdout[info, error, warn, debug, progress]
npm package: @jodacame/raejs
Description: Tiny library to access the well-known spanish RAE dictionary programatically.
Author: jodacame
Latest version: 1.0.6


## Description
Tiny library to access the well-known spanish RAE dictionary programmatically.

### Unofficial Library

### Installation
```bash
npm i @jodacame/raejs
```

### Usage
```js
const raejs = require('@jodacame/raejs');
const query = 'elefante';
const response = await raejs.search(query);
if(!response.error){
    console.log(response.results);
}
```
### Add custom RAE Host
This library skip cloudflare protection sending direct request to RAE server. If you need change host RAE server IP maybe you need use this method.
```js
const raejs = require('@jodacame/raejs');
raejs.addHost('XXX.XXX.XXX.XXX');
...
```
#### List Hosts
```js
const raejs = require('@jodacame/raejs');
const hosts = raejs.listHosts();
console.log(hosts);
...
```
#### Change host index
```js
const raejs = require('@jodacame/raejs');
raejs.setHost(1);
...
```
npm package: @jodacame/vue-logger
Description: Extremely minimalistic logger
Author: Jodacame
Latest version: 1.0.1

## Features

- Memory usage
- File path 
- Colorized 
- Time execution 
- Very light 3kb

## Installation 
```bash
npm i @jodacame/vue-logger
```

## Nuxt Usage

Create file into plugins folder  ***plugins/logger.js*** and put the next code:

```js
import Vue from 'vue'
import logger from '@jodacame/vue-logger'
Vue.prototype.$log = logger
```

Edit your ***nuxt.config.js*** file and load the plugin like this:

```
plugins: [
    { src: '~/plugins/logger' }
]
```
## Usage

Only available in client mode

```js
// Debug
this.$log.debug(`Hi I'am a Debug`)
// Error
this.$log.error(`Hi I'am a Error`)
// Warning
this.$log.warning(`Hi I'am a Warning`)
// Info
this.$log.info(`Hi I'am a Info`)
// Success
this.$log.success(`Hi I'am a Success`)
```

![PREVIEW](https://raw.githubusercontent.com/jodacame/vue-logger/master/assets/preview.png)
npm package: @jodaka/agm-core
Description: Angular components for Google Maps
Author: Sebastian Holstein
Latest version: 3.0.4

Angular Google Maps (AGM) Core - Angular 2+ Google Maps components
=========

@agm/core contains solutions for the Google Maps JavaScript Core API.

The sources for this package are in the [angular-google-maps](https://github.com/SebastianM/angular-google-maps) repository. Please file issues and pull requests against that repo.
npm package: @jodaka/agm-markerclusterer
Description: Angular Google Maps (AGM) extension for markerclusterer support
Author: Jens Fahnenbruck
Latest version: 3.0.4

# Marker Clusterer for AGM

-----

this package levereges the [@google/markerclustererplus][markerclustererplus] to add clustering support to
[AGM][agm].

## Installation

@agm/markerclusterer has a peer depedency on [markerclustererplus][markerclustererplus]

```shell
npm install @google/markerclustererplus @agm/markerclusterer --save
# or
yarn add @google/markerclustererplus @agm/markerclusterer
```

## Usage
1. Add assets command to your angular.json
    In your `angular.json` file, go to `projects/<yourproject>/architect/build/options/assets` and add the following line:
    ```json
    {"input": "./node_modules/@google/markerclustererplus/images", "glob": "*", "output": "/images"}
    ```

2. Import the module

    ```typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';

    // add these imports
    import { AgmCoreModule } from '@agm/core';
    import { AgmMarkerClustererModule } from '@agm/markerclusterer';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AgmCoreModule.forRoot({
          apiKey: ['YOUR_API_KEY_HERE']
        }),
        AgmMarkerClustererModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ```
3. use it in your template

    ```html
    <agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
      <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker [latitude]="51.673858" [longitude]="7.815982">
        </agm-marker><!-- multiple markers -->
      </agm-marker-cluster>
    </agm-map>
    ```


[markerclustererplus]: https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
[agm]: https://angular-maps.com/
npm package: @jodaz_/data-provider
Description: A laravel/objectionjs focused json api dataprovider for react-admin
Author: Jesus Ordosgoitty
Latest version: 1.1.5

# data-provider

A laravel/objectionjs-focused JSONAPI dataprovider for [react-admin](https://github.com/marmelab/react-admin). Currently supports all dataproviders methods:

- `getList`
- `getMany`
- `getManyReference`
- `getOne`
- `create`
- `update`
- `delete`

This packages also exposes an axios client for custom endpoints.

## Usage

1. Install the package `npm i -D @jodaz_/data-provider`.
2. Import and set the base url, retrieve the endpoint object and pass it as the dataprovider for react-admin.


``` javascript
//in app.js
import React from "react";
import { Admin, Resource } from "react-admin";
import dataProvider from '@jodaz_/data-provider';

const { endpoints, client } = dataProvider('http://your.api.endpoint', {
  offsetPageNum: -1,
  // Other axios configs
}, 'Your token name used in localstorage');

const App = () => (
  <Admin dashboard={Dashboard} dataProvider={endpoints}>
    ...
  </Admin>
);

export default App;
```

## API
```
  dataProvider(api, customConfigs, tokenName);
```

- `api`: a valid API route **REQUIRED**.
- `customConfigs`: an object of custom axios configs.
- `tokenName`: a valid token name used when retrieving a Bearer token from localStorage.

- `endpoints`: exports all the required resources for react-admin.
- `client`: exports an axios client for custom api endpoint calls.

## Other custom configs

- `"offsetPageNum": number` an offset for page counter

## Credits

I must give a huge thanks to [@henvo](https://github.com/henvo/ra-jsonapi-client). I literally copy-pasted his original repo and adapted to my own codebase.
npm package: @jodev/svelte-toast
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Author: Joseph
Latest version: 1.0.0

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @jodevahp/icons-ahp-library
Description: Une bibliothèque d'icônes SVG moderne et optimisée pour le web
Author: Iconic CDN Team
Latest version: 1.0.16

# Iconic CDN

Une bibliothèque d'icônes SVG moderne et optimisée pour le web.

## Installation

### Via CDN

Ajoutez Iconic CDN à votre projet en incluant notre script dans votre HTML :

```html
<script src="https://cdn.jsdelivr.net/npm/@jodevahp/icons-ahp-library@1.0.16/dist/iconic.js" type="module"></script>
```

**Important:** Assurez-vous de remplacer `1.0.16` par la version la plus récente de la librairie. Vous pouvez trouver la dernière version sur [npm](https://www.npmjs.com/package/@jodevahp/icons-ahp-library).

N'oubliez pas de mettre à jour le lien CDN dans la documentation de votre site : [https://charming-rugelach-c31ab2.netlify.app](https://charming-rugelach-c31ab2.netlify.app)

### Installation Locale (React)

```bash
npm install @jodevahp/icons-ahp-library
```

## Utilisation

### HTML (CDN)

Une fois le script CDN inclus, vous pouvez utiliser les icônes n'importe où dans votre HTML :

```html
<!-- Utilisation d'une icône -->
<i-icon name="joysline01"></i-icon>
-------------
CSS exemple styles:
i-icon {
    --icon-color: rgb(255, 255, 255);
    --icon-size: 30px;
  }
```

Vous pouvez contrôler la taille et la couleur des icônes en utilisant des variables CSS (custom properties).

### React

```jsx
import React from 'react';
import { icons } from '@jodevahp/icons-ahp-library';

function MyComponent() {
  return (
    <div>
      {/* Utilisation d'une icône */}
      <i-icon name="springbook"></i-icon>
    </div>
  );
}

export default MyComponent;
```

**Important pour React :**

*   Assurez-vous d'importer les icônes depuis `@jodevahp/icons-ahp-library` pour pouvoir les utiliser dans vos composants React.
*   Utilisez des styles en ligne (inline styles) pour définir les variables CSS `--icon-size` et `--icon-color`.

## Documentation

Visitez [https://charming-rugelach-c31ab2.netlify.app/] pour la documentation complète.

## Licence

MIT
-----
git add .
git commit -m "Update icons and styles"
git push origin main
```bash
{
  "name": "@jodevahp/icons-ahp-library",
  "version": "1.1.0", // Increment the version
  ...
}
```
npm run build:lib
npm publish --access public