open-index/open-npm huggingface dataset:
npm package: @henrydf/electron-downloader
Description: download electron into cache
Author: Henry
Latest version: 1.0.6

* Download Eelectron into local cache at first
* then `npm install electron` will use the cache to avoid network request

```shell
npx @henrydf/electron-downloader -t 27 -p http://localhost:1080
### or use -h to see help message
```
npm package: @henryge/pipto
Description: Unified entrypoint for Pipto schema, export, import, preview, and customization packages.
Latest version: 1.0.0

# @henryge/pipto

`@henryge/pipto` is the umbrella package for the Pipto npm toolchain. It re-exports the workspace packages for schema parsing, PPTX export/import, browser previewing, and content/theme customization.

## Install

```bash
npm i @henryge/pipto
```

If you use the previewer entrypoint, install `react` as well:

```bash
npm i react
```

## Root Imports

The root entrypoint exposes the main APIs directly:

```ts
import {
  parseDocument,
  createPPTX,
  parsePptxToJson,
  applyCustomTheme,
  PPTXPreviewer,
  type Presentation,
  type Slide
} from '@henryge/pipto'

import type { SchemaTypes, Json2pptxTypes } from '@henryge/pipto'

type SchemaDoc = SchemaTypes.PresentationDocument
type ExportSlide = Json2pptxTypes.Slide
```

If you do not want to pull React into the root entrypoint, use the previewer subpath or the lazy loader below.

## Subpath Imports

Use subpaths when you want the full original package surface:

```ts
import { parseDocument } from '@henryge/pipto/json2pptx-schema'
import { createPPTX } from '@henryge/pipto/json2pptx'
import { parsePptxToJson } from '@henryge/pipto/ppt2json'
import { applyCustomTheme } from '@henryge/pipto/pptx-custom'
import { PPTXPreviewer } from '@henryge/pipto/pptx-previewer'
```

## Previewer From The Root Package

The root package also exposes a lazy loader if you want the previewer in a split chunk:

```ts
import type { PPTXPreviewerProps } from '@henryge/pipto'
import { importPPTXPreviewer } from '@henryge/pipto'

const { PPTXPreviewer } = await importPPTXPreviewer()
```
npm package: @henryht/draggable
Description: Small library for Bootstrap 5 that allows you to organize and rearrange your data
Author: Henry Torres
Latest version: 1.0.7

# Draggable for bootstrap

Small library for Bootstrap 5 that allows you to organize and rearrange your data

## Install

```
npm i @henryht/draggable
```

## Usage

1.  Import the pakage.
    ```
    import Draggable from '@henryht/draggable';
    window.Draggable = Draggable;
    ```

2.  Add the container.
    ```
    <div id="container-draggable" ></div>
    ```

3.  Data, The most important data includes: the ID, the name, and the children.
    ```
    const tree = [
        { 
            id: 1,
            name: 'apples',
            description: "lorem lorem",
            children: [] 
        },
        { 
            id: 2,
            name: 'vegetables', 
            children: [] 
        },
        { 
            id: 3,
            name: 'pomelo', 
            children: [
                { 
                    id: 7,
                    name: 'apples 2', 
                    description: "lorem lorem",
                    children: [] 
                },
                { 
                    id: 8,
                    name: 'apples 3', 
                    children: [] 
                },
            ] 
        },
        { 
            id: 4,
            name: 'oranges', 
            children: [] 
        },
        { 
            id: 5,
            name: 'fruits', 
            children: [
                { 
                    id: 9,
                    name: 'fornic', 
                    children: [] 
                },
                { 
                    id: 10,
                    name: 'goku', 
                    children: [] 
                },
            ] 
        },
        { 
            id: 6,
            name: 'brocolli', 
            description: "lorem lorem",
            children: [] 
        },
    ];
    ```
4.  Instantiate the class, and the reorderable tree will be created automatically.
    ```
    const drag = new Draggable(tree);
    ```
5.  This method is always called once the reordering is complete; it returns a list with the ordered data.
    ```
    drag.success = function (data) {}
    ```
6.  Each element has its own options, and this method takes these options, which include: edit and delete.
    ```
    drag.actions = function (data) {}
    ```
7.  This method takes a numeric ID as a parameter.
    ```
    drag.delete(8);
8.  It returns a list of the current state of the tree.
    ```
    drag.getOrder()
    ```

##  License

-   The js-translate is open-sourced library licensed under the [MIT license](https://opensource.org/licenses/MIT).
npm package: @henryht/js-translate
Description: A complete set for your translations
Author: Henry Torres
Latest version: 1.0.1

# js-translate - for Angular, React, Vue and normal websites 

js-translate is a versatile translation library designed for use with Angular, React, Vue, and standard web development. It streamlines the implementation of translations in your application, providing an efficient and easy-to-integrate solution for projects across various frameworks and web environments

## Install

```
npm i @henryht/js-translate
```

## Usage

1.  import the pakage
    -   normal websites
    ```
    <script type="module">
        import * as hTranslate from 'dist-browser/hTranslate.js';
        window.hTranslate = hTranslate;
    <script/>
    ```
    -   modern websites (angular, react, vue or install with npm)
    ```
    import * as hTranslate from '@henryht/js-translate';
    window.hTranslate = hTranslate;
    ```

2.  Methods

    -   First, define the base language
    ```
    hTranslate.config({
        baseLang: "es"
    });
    ```

    -   The function 'loadFile' loads the required translation file. Optionally, you can pass the 'pageName' as an argument to load a translation file for a specific page.
    ```
    hTranslate.loadFile();
    ```

    -   The function `translate` has various parameters such as `querySelector`, which is a JavaScript `document.querySelector`. The other parameter is `impType`, which has a default value of `normal`, but if your website is not modern, change it to `element`.
    ```
    hTranslate.translate(text:string, impType:string, querySelector:string);
    ```
    

3.  Important points

    -   Translation files <br/>
    Translation files should be located within a folder named 'langs'

        ```
        -langs
            es.json
            en.json
            fr.json
        index.html
        ```
        The translation files for specific pages have the following format
        ```
        langs/es.pageName.json
        ```

        If you create translation files for specific pages, the automatic search for that file will be done by adding this meta tag to the page's header that will use such file
        ```
        <meta name="h-translate" content="pageName">
        ```

##  License

-   The js-translate is open-sourced library licensed under the [MIT license](https://opensource.org/licenses/MIT).
npm package: @henryht/toast-manager
Description: A simple way to generate local notifications (toasts) with Bootstrap
Author: Henry Torres
Latest version: 1.0.6

# Toast Manager - Handle Bootstrap notifications dynamically.

Add magic to your website with our basic npm package. Local notifications and dynamic toasts with Bootstrap 5 or higher. Enhance user experience simply and effectively. Discover it now!

## Install

```
npm i @henryht/toast-manager
```

## Usage

1. import the pakage

    ```
    import * as Popper from "@popperjs/core"
    window.Popper = Popper;
    import * as bootstrap from 'bootstrap';
    window.bootstrap = bootstrap;

    import * as toastManager from '@henryht/toast-manager';
    window.toastManager = toastManager;
    ```

2. Methods

    -   The first method will create a more detailed notification.<br />
    ```toastManager.notify(type:string, title:string, message:string, date:string, options = {});```

    This generates: <br />
    <img src="img/notify-1.png" alt="see notify">

    -   This type of notification is useful for displaying the status of a request. <br />
    ```toastManager.simpleNotify(type:string, message:string, options = {});```

    This generates: <br />
    <img src="img/simple-notify-1.png" alt="see simple notify">

    -   Finally, this method clears the container of notifications with the class `.hide`. This process is automatically performed each time a new notification is created. <br />
    ```toastManager.clearHide();```

3.  HTML container

    To add notifications to the DOM, it's necessary to create a container in your HTML with the attribute `id="toast-container"`. To display them in your desired location, simply follow the toast guide on the official [Bootstrap page](https://getbootstrap.com/docs/5.0/components/toasts/#placement).

    ```
    <div class="toast-container position-reelative top-2 end-0 p-3" id="toast-container" style="z-index: 9999">
    </div>
    ```

4.  Toast Types (notifications)

    -   primary 
    -   secondary 
    -   danger
    -   dark
    -   info
    -   light
    -   success
    -   warning


## License

The Toast Manager is open-sourced library licensed under the [MIT license](https://opensource.org/licenses/MIT).
npm package: @henryjavangwe/core
Description: <a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
Author: henryjavangwe
Latest version: 2.0.2

# SpecnoComponentLibrary

This is reusable button with loading states for Ionic Angular projects

✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
npm package: @henrylalamove/mocha-bdd-steps
Description: Mocha interface that adds step function to BDD
Author: Matt Crisp
Latest version: 1.0.0

# mocha-bdd-steps

Will now work with Mocha 6.

Mocha interface that adds a `step()` function to BDD, as an alternative to `it()`.

If a `step()` fails, following `step()` calls within the `describe()` will be skipped. Useful for BDD where tests need to be run in a specific sequence.

Works with tests that are synchronous, asynchronous, and returned promises.

## Example

```
it function
  ✓ should be called
  1) should be called and error
  ✓ should be called

step sequence
  ✓ should first be called
  2) then should be called and error
  - then should be skipped
  - then should also be skipped
```

## Installation

    $ npm install --save-dev mocha-bdd-steps


## Usage

From the command line:

    $ mocha --ui mocha-bdd-steps test.js

## Notes
- If using a linter, `/* global step */` should be added to the top of your test files.
npm package: @henrylin03/language-picker
Description: JavaScript-generated UI dropdown for users to pick languages.
Author: Henry Lin
Latest version: 1.0.3

# @henrylin03/language-picker

Lightweight language picker UI component, written in vanilla JavaScript (JS).

This package was developed and published as an exercise for [The Odin Project](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions).

## Installation

Install the package using npm:

```bash
npm install @henrylin03/language-picker
```

## Usage

In your JS file, import the `createLanguagePicker` function to create a dropdown of languages

```js
import createLanguagePicker from "@henrylin03/language-picker";
```

### Syntax

```js
createLanguagePicker( obj )
```

#### Parameters

`obj` is a JS object that contains several parameters required to generate your language picker. The following are its keys:

* **`containerElementCSSSelector`** (string): CSS selector of the container (parent) element where the language picker will be appended as a child.

  * If not provided, the language picker will be appended to the `<body>` of the document

* **`languages`** (array): array of language strings to display in the dropdown. The first language in the array will be the initial selected language, and displayed on the button that triggers the dropdown.

  * If not provided, the only language will be "English"

* **`expandEvent`** (string): specifies the type of user interaction that will expand the language picker.

  * **Valid values**: `"hover"`, `"click"`
  * If not provided, the dropdown will be expanded on a click event

### Example

#### HTML

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DEMO</title>
</head>
<body>
  <section id="hover-dropdown">
    <h2>Hover dropdown</h2>
  </section>
  <section id="click-dropdown">
    <h2>Click dropdown</h2>
  </section>
  
  <script type="module">
    import createDropdown from '@henrylin03/ui-dropdown';

    const LANGUAGES = ["English", "简体中文", "繁體中文"];

    const clickDropdownOptions = {
      containerElementCSSSelector: "#click-dropdown",
      expandEvent: "click",
      languages: LANGUAGES,
    };
    const hoverDropdownOptions = {
      containerElementCSSSelector: "#hover-dropdown",
      expandEvent: "hover",
      languages: LANGUAGES,
    };

    createDropdown(clickDropdownOptions);
    createDropdown(hoverDropdownOptions);
  </script>

</body>
</html>
```

#### Initial state

![Example dropdowns not expanded](./docs/not-expanded.png)

#### Expanded

![Example dropdowns expanded](./docs/expanded.png)

## Contributing

Contributions are welcome! Please feel free to open an issue and/or submit a pull request on [GitHub](https://github.com/henrylin03/language-picker).

## License

This project is licensed under the MIT License.

## Author

Henry Lin: <https://henrylin.io>

## Links

* [GitHub repository](https://github.com/henrylin03/language-picker)
* [Issues](https://github.com/henrylin03/language-picker/issues)