open-index/open-npm huggingface dataset:
npm package: @frontkom/g-feature-box
Description: A composition block for Gutenberg Cloud
Author: AJOTKA Agata Dobrowolska
Latest version: 0.1.0

# Feature Box

Gutenberg Block.

Feature Box allowed you to create custom short posts or feature content.

## Installation

### Cloud Blocks

You can get this block through [Cloud Blocks](https://wordpress.org/plugins/cloud-blocks/) plugin panel. Just search `Feature Box` and click install!

### Locally

1. Clone this repo into your gutenberg blocks directory
2. Build it 
    > npm install \
    npm run-script build 
3. Install local block in your Cloud Blocks plugin

## Changelog

### 0.1.0
Fix media upload \
Added switch between a cover image and feature box with image \
Improved the appearance \
Change screenshot \
Reformat code

### 0.0.5
Update readme

### 0.0.4
Add screenshot

### 0.0.3
Update readme

### 0.0.2
Margins
Background

### 0.0.1
Initialize simple card block
Feature image
Header
Description
Link on whole card
More Button
npm package: @frontkom/g-hero-section
Description: A custom block for Gutenberg Cloud
Author: Frontkom
Latest version: 0.7.5

# Hero Section

This project is both a Proof of Concept and Boilerplate for blocks meant to be used with the [GutenbergJS](https://github.com/front/gutenberg-js) editor or Gutenberg for WordPress.

## Build folder

The `build` folder is **temporarily** part of this repository in order this block be ready to be downloaded and included in the Gutenberg editor, without any compilation at client-side.

# Installation

Install from npm:

```sh
npm install @frontkom/g-hero-section
```

Then load the block module and css on the editor:

```js
import '@frontkom/g-hero-section';
import '@frontkom/g-hero-section/build/style.css';
```

# Dev mode

To run the block in development mode:

```sh
npm start
```

## Project Structure
TBA


## Development
TBA


## Gutenberg Cloud
TBA
npm package: @frontkom/g-media-attributes
Description: A set of extensions for core media blocks in order to support Drupal's media attributes.
Author: The Frontkom Contributors
Latest version: 1.0.5

# Gutenberg JS Media Attributes
> A set of extensions for core media blocks in order to support Drupal's media attributes.


### How to use

Install the package from NPM.

```
$ npm install @frontkom/g-media-attributes
```

Add to the editor before the core blocks are loaded:

```
import '@frontkom/g-media-attributes';
```


### Motivation

In order to fully support Drupal's file entity when handling images on Gutenberg editor, the <img /> tags on core media blocks need to have the `data-entity-uuid` and `data-entity-type` attributes.

The block resulting HTML must be something like this:

```
<figure class="wp-block-image">
  <img data-entity-uuid="f398bc3b-1c50-4394-bf80-3af0f72fef42" data-entity-type="file" src="..."
    alt="Picture" class="wp-image-1">
</figure>
```

The data-* attributes are provided by `api-fetch`'s upload method.

The following core blocks needed to be updated:

- core/image
- core/video
- core/media-text
- core/cover
- core/gallery


### Solution

The solution we found was to wrap the Edit and Save components with [Higher Order Components](https://reactjs.org/docs/higher-order-components.html)'s (HOC) that handle the fetching and printing of these media attributes.

```
settings.edit = editWithMediaAttrs(settings.edit);
settings.save = saveWithMediaAttrs(settings.save);
```

When an image is selected, the Edit HOC captures that event and fecthes the additional data required from the API.

On save, the Save HOC updates the rendered tree with the necessary attributes for each media element.


### Known issues

- core/gallery

Currently the block validation for `core/gallery` throws an error to the console. However, this does not affect the loading of the block itself. It seems to be caused by the difference in number of attributes present on each of the gallery items (expected vs actual). More discovery is needed.


## License
[MIT](./LICENSE)
npm package: @frontkom/g-section
Description: A customizable wrapper for your blocks
Author: Frontkom
Latest version: 0.4.3

# Section Block
A customizable wrapper for your blocks
> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).


Below you will find some information on how to run scripts.

## `npm start`
- Use to compile and run the block in development mode.
- Live reload is not supported currently.


## `npm run build`
- Use to build production code for your block inside `build` folder.


## `npm publish`
 - Use to publish the block to NPM
 - It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/lint-html-with-css
Description: Let CSS lint your HTML pages.
Author: Sofia Sousa
Latest version: 0.1.0

## Lint HTML with CSS

Let CSS lint your HTML pages.

### Usage

1. Add this package to your project dependecies.

```
npm install @frontkom/lint-html-with-css
```

2. Include the `build/style.css` file in your HTML page and voilá!

Make sure you **do not include it in production** env!

### Contributions

Feel free and motivated to suggest new lint rules. Just have to add the CSS rule and a little description about the fault in comments.

### Reference

The inspiration for this package and the initial lint rules came from the following post
* [7 amazing CSS tips and tricks for linting your HTML](https://dev.to/viclafouch/7-amazing-css-tips-and-tricks-for-linting-your-html-o5n)

Thanks [@viclafouch](https://github.com/viclafouch) for the share.
npm package: @frontkom/nim-g-blocks
Description: Collection of blocks for the NIM frontpage
Author: Frontkom
Latest version: 0.1.2
Deprecated: This package is no longer used

# NIM frontpage blocks
> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).


Below you will find some information on how to run scripts.

## `npm start`
- Use to compile and run the block in development mode.
- Live reload is not supported currently.


## `npm run build`
- Use to build production code for your block inside `build` folder.


## `npm run deploy`
 - Use to publish the block to NPM
 - It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/section-row
Description: A collection of blocks that compose together to create flexible sections.
Author: Frontkom
Latest version: 0.2.0

# Section Row

A collection of blocks that compose together to create flexible sections. The structure of the blocks are as follows:

- Section Row
  - Row Inner One Column
    - Section Cell
  - Row Inner Two Columns
    - Section Cell
    - Section Cell
  - Row Inner Gallery
    - Section Cell
    - Section Cell
    - Section Cell

## Section Row Block

Section row is the root block where we can add on or more of the following blocks in any order.

- Row Inner One Column
- Row Inner Two Columns
- Row Inner Gallery

### Settings

- Html element [div, section]
- Width
- Height
- Behind page header
- Background image
- Background image position
- Background image size 
- Background color
- Background color opacity
- Top and bottom padding
- Top and bottom margin
- Vertical align content [top, center, bottom]
- Skip link

## Row Inner One Column Block

Row inner one column can be put inside Section Row, and has a Row Cell child block.

### Settings

- Widht
- Top and bottom margin [xsmall, small, medium, large, xlarge, xxlarge]

## Row Inner Two Column Block

Row inner two columns can be put inside Section Row, and has two Row Cell child blocks.

### Settings

- Widht
- Split [One to One, One to Two, Two to One, One to Three, Three to One, One to Four, Four to One]
- Column gap [xsmall, small, medium, large, xlarge, xxlarge]
- Invert
- Top and bottom margin [xsmall, small, medium, large, xlarge, xxlarge]

## Row Inner Gallery Block

Row inner gallery columns can be put inside Section Row, and has two or more Row Cell child blocks.

### Settings

- Widht
- Columns 1-10
- Gallery items 2-40
- Column gap [xsmall, small, medium, large, xlarge, xxlarge]
- Row gap [xsmall, small, medium, large, xlarge, xxlarge]
- Tob and bottom margin [xsmall, small, medium, large, xlarge, xxlarge]

## Row cell

Row cell is child block of any Row Inner block, and any block can be put inside it.

### Settings

- Max width
- Align self [None, Auto, Center, Flex-start, Flex-end, Baseline]
- Justify self [None, Auto, Center, Flex-start, Flex-end, Baseline]
- Align items [None, Auto, Center, Flex-start, Flex-end, Baseline]
- Justify content [None, Auto, Center, Flex-start, Flex-end, Baseline, Space-between, Space-around, Space-evenly]

## Intallation

> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).

Below you will find some information on how to run scripts.

### `npm start`

- Use to compile and run the block in development mode.
- Live reload is not supported currently.

### `npm run build`

- Use to build production code for your block inside `build` folder.

### `npm run deploy`

- Use to publish the block to NPM
- It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/starterx-employees
Description: Grid block with list of employees
Author: Frontkom
Latest version: 1.3.0

# StarterX Employees
> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).


Below you will find some information on how to run scripts.

## `npm start`
- Use to compile and run the block in development mode.
- Live reload is not supported currently.


## `npm run build`
- Use to build production code for your block inside `build` folder.


## `npm run deploy`
 - Use to publish the block to NPM
 - It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/starterx-mosaic
Description: Mosaic block with articles
Author: Frontkom
Latest version: 1.0.1

# StarterX Mosaic
> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).


Below you will find some information on how to run scripts.

## `npm start`
- Use to compile and run the block in development mode.
- Live reload is not supported currently.


## `npm run build`
- Use to build production code for your block inside `build` folder.


## `npm run deploy`
 - Use to publish the block to NPM
 - It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/starterx-quote-background
Description: Quote block with a background image
Author: Frontkom
Latest version: 2.0.0

# StarterX Quote with background
> This project was bootstrapped with [Create Cloud Block](https://github.com/front/create-cloud-block).


Below you will find some information on how to run scripts.

## `npm start`
- Use to compile and run the block in development mode.
- Live reload is not supported currently.


## `npm run build`
- Use to build production code for your block inside `build` folder.


## `npm run deploy`
 - Use to publish the block to NPM
 - It will become available in Gutenberg Cloud in a few minutes
npm package: @frontkom/vf-calc
Description: Vestfold Fugl Recipe Calculator
Author: Frontkom
Latest version: 0.1.1

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)


## Using this component

Install from NPM

```
$ npm install --save @frontkom/vf-calc
```

Put a script tag similar to this in the head of your index.html

```
<script src="/node_modules/@frontkom/vf-calc/dist/vf-calc.js"></script>
```

Then you can use the element anywhere in your template, JSX, html, etc.

```
<vf-calc recipe-id="261"></vf-calc>
```


### Example

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vestfold Fugl Calculator</title>
  <script src="./node_modules/@frontkom/vf-calc/dist/vf-calc.js"></script>
</head>
<body>
  <h1>Vestfold Fugl Recipe Calculator</h1>
  <vf-calc recipe-id="261"></vf-calc>
</body>
</html>
```
npm package: @frontlabsofficial/google-fonts-fetch
Description: A lightweight utility for seamlessly integrating Google Fonts into web projects, optimizing web performance, and enhancing user experience.
Author: ErikPham
Latest version: 1.0.3

## @frontlabsofficial/google-fonts-fetch

### Description
`@frontlabsofficial/google-fonts-fetch` is a lightweight and efficient package designed to simplify the process of self-host Google Fonts. By leveraging this package, developers can effortlessly download Google Fonts to their local environment, enabling seamless integration and improved website performance.

## Motivation
While working on improving PageSpeed, I discovered the significant enhancements brought by Google Fonts v2. Everything seemed to become smoother and lighter, from font sizes to the ability to reuse various font weights. Despite my efforts to find a suitable API or package for immediate use, I came up empty-handed.

For instance, take the font Roboto. The font sizes of version 1 compared to version 2 were ~130kb and ~11kb respectively. Different font weights could be utilized within a single file. The savings were substantial, sparking a strong inspiration within me to create this package. It's evident that this project has the potential to make a substantial impact on metrics such as FCP, LCP, and overall PageSpeed scores, significantly benefiting your website.

This project aims to harness the efficiencies of Google Fonts v2, offering a streamlined solution for integrating fonts into web projects. By optimizing font usage, we can enhance website performance and user experience, ultimately leading to improved rankings and user engagement.

### Features
- **Effortless Font Download**: Quickly fetch and download Google Fonts to your local project directory with minimal configuration.

- **Customizable Options**: Customize font selection, variants, and subsets to tailor the download to your specific project needs.

- **Optimized Performance**: Reduce page load times and enhance website performance by serving fonts directly from your server.

## Installation
  ```bash
  npm install @frontlabsofficial/google-fonts-fetch
  ```

## Usage
### Create Google Fonts Fetch
```js
import { createGoogleFontsFetch } from '@frontlabsofficial/google-fonts-fetch'
const fetch = createGoogleFontsFetch()
```
### Download single font
```js
fetch.single('Roboto')
fetch.single('Roboto', { weight: [400] })
```

### Download multiple fonts
```js
fetch.multiple([
  { name: 'Roboto' },
  { name: 'Open Sans' },
])

fetch.multiple([
  { name: 'Roboto', weight: [400] },
  { name: 'Open Sans', weight: [400, 500] },
])
```

### Download all fonts
```js
fetch.all()
```

## Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @frontle/cordova-fileutil
Description: 'cordova-plugin-file' easily
Author: Yun Hyeongjun
Latest version: 1.0.2

<p align="center">
  <a href="https://frontle.org/" target="blank"><img src="https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png" width="120" alt="Frontle Logo" /></a>
</p>

  <p align="center">The easiest multi-platform SPA framework.</p>

<p align="center">
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/v/@frontle/cordova-fileutil.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/l/@frontle/cordova-fileutil.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/dm/@frontle/cordova-fileutil.svg" alt="NPM Downloads" /></a>
</p>


## Description

'cordova-plugin-file' easily

## Usage

```javascript
import  { getDirEntry, getFileEntry, read, write, remove, removeDir } from "../../browser_modules/@frontle/cordova-fileutil/index.js";

// get directory entry
const dirEntry = await getDirEntry(cordova.file.dataDirectory, 'testFolder');

// get file entry
const fileEntry = await getFileEntry('test.text', dirEntry);

// read file
const readData = await read(fileEntry);

// write file
await write(fileEntry, "test text");

// remove file
await remove('test.text', dirEntry);

// remove directory
await removeDir(dirEntry);
```

## Install

**Frontle**

```shell
$ frontle install @frontle/cordova-fileutil --noBuild
```

**Download Vanilla JS Library**

https://github.com/Frontle-Foundation/cordova-fileutil

## API

#### getDirEntry(path, folderName, create = true)

Get directory entry

```javascript
const dirEntry = await getDirEntry(cordova.file.dataDirectory, 'testFolder');
```

#### getFileEntry(fileName, dirEntry, create = true)

Get file entry

```javascript
const fileEntry = await getFileEntry('test.text', dirEntry);
```

#### read(fileEntry)

Read file data

```javascript
const readData = await read(fileEntry);
```

#### write(fileEntry, writeData)

Write file data

```javascript
await write(fileEntry, "test text");
```

#### remove(fileName, dirEntry)

Remove file

```javascript
await remove('test.text', dirEntry);
```

#### removeDir(dirEntry)

Remove directory

```javascript
await removeDir(dirEntry);
```

## People

The original author of @frontle/cordova-fileutil is [MushStory](https://github.com/MushStory)

## License

[MIT](LICENSE)
npm package: @frontle/cordova-getplatformid
Description: Get platform id in Cordova
Author: Yun Hyeongjun
Latest version: 1.0.3

<p align="center">
  <a href="https://frontle.org/" target="blank"><img src="https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png" width="120" alt="Frontle Logo" /></a>
</p>

  <p align="center">The easiest multi-platform SPA framework.</p>

<p align="center">
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/v/@frontle/cordova-getplatformid.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/l/@frontle/cordova-getplatformid.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/dm/@frontle/cordova-getplatformid.svg" alt="NPM Downloads" /></a>
</p>


## Description

Get platform ID from cordova

## Usage

```javascript
import { GetPlatformID } from "../../browser_modules/@frontle/cordova-getplatformid/index.js";

console.log(GetPlatformID()); // browser, ios, android, electron
```

## Install

**Frontle**

```shell
$ frontle install @frontle/cordova-getplatformid --noBuild
```

**Download Vanilla JS Library**

https://github.com/Frontle-Foundation/cordova-getplatformid

## API

#### GetPlatformID()

Get platform ID from cordova

```javascript
console.log(GetPlatformID()); // browser, ios, android, electron
```

## People

The original author of @frontle/cordova-getplatformid is [MushStory](https://github.com/MushStory)

## License

[MIT](LICENSE)
npm package: @frontle/cordova-keyvaluestorage
Description: File-based key-value storage
Author: Yun Hyeongjun
Latest version: 1.0.4

<p align="center">
  <a href="https://frontle.org/" target="blank"><img src="https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png" width="120" alt="Frontle Logo" /></a>
</p>

  <p align="center">The easiest multi-platform SPA framework.</p>

<p align="center">
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/v/@frontle/cordova-keyvaluestorage.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/l/@frontle/cordova-keyvaluestorage.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/dm/@frontle/cordova-keyvaluestorage.svg" alt="NPM Downloads" /></a>
</p>


## Description

File-based key-value storage

## Usage

```javascript
import { CordovaKeyValueStorage } from "../../browser_modules/@frontle/cordova-keyvaluestorage/index.js";

// get instance
const cordovaKeyValueStorage = new CordovaKeyValueStorage();

// load storage
await cordovaKeyValueStorage.load();

// get storage directory entry
console.log(cordovaKeyValueStorage.getStorageDirEntry());

// save data
await cordovaKeyValueStorage.setItem('test', '123');

// get data
console.log(await cordovaKeyValueStorage.getItem('test')); // 123
```

## Install

**Frontle**

```shell
$ frontle install @frontle/cordova-keyvaluestorage --noBuild
```

**Download Vanilla JS Library**

https://github.com/Frontle-Foundation/cordova-keyvaluestorage

## API

#### new CordovaKeyValueStorage()

Creating a CordovaKeyValueStorage object. Single tone pattern used

```javascript
const cordovaKeyValueStorage = new CordovaKeyValueStorage();
```

#### .load(storageFolderName = 'cordovaKeyValueStorage')

Load storage. You must run this function before you can use any of the other functions

```javascript
await cordovaKeyValueStorage.load();
```

#### .getStorageDirEntry()

Get Storage directory entry

```javascript
console.log(cordovaKeyValueStorage.getStorageDirEntry());
```

#### .setItem(key, value, fileName = key)

Save Value

```javascript
await cordovaKeyValueStorage.setItem('test', '123');
```

#### .getItem(key, fileName = key)

Get Value

```javascript
console.log(await cordovaKeyValueStorage.getItem('test')); // 123
```

## People

The original author of @frontle/cordova-keyvaluestorage is [MushStory](https://github.com/MushStory)

## License

[MIT](LICENSE)
npm package: @frontle/frontle-cli
Description: Frontle command line interface tool
Author: Artifriends, Inc.
Latest version: 1.1.9

<p align="center">
  <a href="https://frontle.org/" target="blank"><img src="https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png" width="120" alt="Frontle Logo" /></a>
</p>

  <p align="center">The easiest multi-platform SPA framework.</p>

<p align="center">
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/v/@frontle/frontle-cli.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/l/@frontle/frontle-cli.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/dm/@frontle/frontle-cli.svg" alt="NPM Downloads" /></a>
</p>

> Experience the easiest multi-platform SPA development in the world!

## Install

```shell
npm install -g cordova
npm install -g @frontle/frontle-cli
```

## Creating a new Frontle project

```shell
frontle create myApp
cd myApp
frontle install
cordova platform add browser
cordova run browser
```

## Docs

[Guide](https://frontle.org/docs/installation/getting-started/)

## Contributing

Frontle is an open source project. We welcome all contributions that can help Frontle, including bug fixes and improvements, testing, and documentation additions!

## License

[MIT](LICENSE)
npm package: @frontle/modal
Description: Modal UI
Author: Yun Hyeongjun
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @frontle/modal

> Modal UI
>

![화면-기록-2022-07-12-오후-3.40.17](https://user-images.githubusercontent.com/49587288/197337429-6fe44f6f-c06d-42ff-a7f4-d3e67b725c29.gif)

## Usage

```javascript
import { Modal } from "../../browser_modules/@frontle/modal/index.js";

const modal = new Modal("#app", "<button id='closeButton'>close</button>");
modal.beforeOpen = (modalId) => {
  document.querySelector("#closeButton").onclick = () => {
    modal.close(modalId);
  };
};
modal.open();
```

## Install

**Frontle**

```shell
frontle install @frontle/modal --noBuild
```

**Download files**

https://github.com/Frontle-Foundation/Modal

## API

#### new Modal(parents, html)

Create a modal object

```javascript
const modal = new Modal("#app", "<button id='closeButton'>close</button>");
```

#### .modalClass

#### .contentsClass

#### .backgroundClass

Set the css class of a modal

```javascript
modal.modalClass = 'cssClassName';
modal.contentsClass = 'cssClassName1 cssClassName2';
modal.backgroundClass = '';
```

#### .transitionSeconds

Set the modal animation time

```javascript
modal.transitionSeconds = 0.3;
```

#### .backgroundClickExit

Set whether modal can be closed by clicking on modal background

```javascript
modal.backgroundClickExit = true;
```

#### .beforeOpen

This lifecycle is executed before the modal is opened

```javascript
modal.beforeOpen = (modalID) => { console.log('before opened') }
```

#### .afterOpen

This lifecycle is executed after the modal is opened

```javascript
modal.afterOpen = (modalID) => { console.log('after opened') }
```

#### .beforeEnd

This lifecycle is executed before the modal closes

```javascript
modal.beforeEnd = (modalID) => { console.log('before closed') }
```

#### .afterEnd

This lifecycle is executed after the modal is closed

```javascript
modal.afterEnd = (modalID) => { console.log('after closed') }
```

#### .open()

Open modal

```javascript
const modalID = await modal.open();
```

#### .close(modalID)

Close modal

```javascript
await modal.close(modalID);
```

## People

The original author of @frontle/modal is [MushStory](https://github.com/MushStory)

## License

 [MIT](LICENSE)
npm package: @frontle/toast
Description: Toast UI
Author: Yun Hyeongjun
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @frontle/toast

> Toast UI
>

![화면-기록-2022-07-12-오후-4.50.51](https://user-images.githubusercontent.com/49587288/197339444-10307238-3297-42d7-abe2-3cf154bb7f44.gif)

## Usage

```javascript
import { Toast } from "../../browser_modules/@frontle/toast/index.js";

const toast = new Toast("#app", "<div>this is a toast<div>");
toast.open();
```

## Install

**Frontle**

```shell
frontle install @frontle/toast --noBuild
```

**Download files**

https://github.com/Frontle-Foundation/Toast

## API

#### new Toast(parents, html)

Create a toast object

```javascript
const toast = new Toast("#app", "<div>this is a toast<div>");
```

#### .toastClass

Set the css class of a toast

```javascript
toast.toastClass = 'cssClassName';
```

#### .transitionSeconds

Set the toast animation time

```javascript
toast.transitionSeconds = 0.3;
```

#### .holdSeconds

Set the toast hold time

```javascript
toast.holdSeconds = 3;
```

#### .beforeOpen

This lifecycle is executed before the toast is opened

```javascript
toast.beforeOpen = (toastID) => { console.log('before opened') }
```

#### .afterOpen

This lifecycle is executed after the toast is opened

```javascript
toast.afterOpen = (toastID) => { console.log('after opened') }
```

#### .beforeEnd

This lifecycle is executed before the toast closes

```javascript
toast.beforeEnd = (toastID) => { console.log('before closed') }
```

#### .afterEnd

This lifecycle is executed after the toast is closed

```javascript
toast.afterEnd = (toastID) => { console.log('after closed') }
```

#### .open()

Open toast

```javascript
const toastID = await toast.open();
```

#### .close(toastID)

Close toast

```javascript
await toast.close(toastID);
```

## People

The original author of @frontle/toast is [MushStory](https://github.com/MushStory)

## License

 [MIT](LICENSE)
npm package: @frontle/z-index-manager
Description: Finds the highest z-index value
Author: Yun Hyeongjun
Latest version: 1.0.2

<p align="center">
  <a href="https://frontle.org/" target="blank"><img src="https://user-images.githubusercontent.com/49587288/209550001-97ccc567-f9d9-4f47-affe-7abccb3967e6.png" width="120" alt="Frontle Logo" /></a>
</p>

  <p align="center">The easiest multi-platform SPA framework.</p>

<p align="center">
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/v/@frontle/z-index-manager.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/l/@frontle/z-index-manager.svg" alt="Package License" /></a>
  <a href="https://www.npmjs.com/~frontle"><img src="https://img.shields.io/npm/dm/@frontle/z-index-manager.svg" alt="NPM Downloads" /></a>
</p>


## Description

Finds the highest z-index value

## Usage

```javascript
import { findHighestZIndex } from "../../browser_modules/@frontle/z-index-manager/index.js";

// get highest z-index value
console.log(findHighestZIndex('body')); // 1
```

## Install

**Frontle**

```shell
$ frontle install @frontle/z-index-manager --noBuild
```

**Download Vanilla JS Library**

https://github.com/Frontle-Foundation/zIndexManager

## API

#### findHighestZIndex(element)

Get the highest z-index value within the specified element

```javascript
console.log(findHighestZIndex('body')); // 1
```

## People

The original author of @frontle/z-index-manager is [MushStory](https://github.com/MushStory)

## License

 [MIT](LICENSE)
npm package: @frontless/redux
Description: Redux store for frontless
Author: Anton Nesterov
Latest version: 1.0.0

# frontless-redux
Simple redux plugin for [Frontless](https://github.com/nesterow/frontless) and [Riot.JS](https://riot.js.org)

```bash
npm i @frontless/redux --save
```

## Component settings
`observe` - an array of property names.
A component re-renders only when specified properties are changed.
```javascript
export default {
  observe: ['number']
}
```

## Properties
The plugin extends component's scope with following properties:
1. `this.$store` - Redux store instance
2. `this.$state` - The state


## Hooks
`onAction(data)` - fires whenever a redux action is dispatched

## Plugin factory
Plugin factory accepts two positional arguments: `store( Object<{state, actions}> , Function<Context> )`
Second argument is a *context resolver* function it has to return any global object where Redux store instance should be kept, defaults to `document.__GLOBAL`.

```javascript
import store from '@frontles/redux'
const plugin = store({ state, actions,}, () => window)
```

## Usage

```javascript
 // store.js
 
 import store from '@frontles/redux'
 import riot from 'riot'
 
 const state = {
  number: 0
 }
 
 const actions = {
  INCREMENT: function(state, {value = 1}){
    state.number += value
  },
  DECREMENT: function(state, {value = 1}){
    state.number -= value
  }
 }
 
 const plugin = store({ state, actions,}, () => window)
 riot.install(plugin)
 
```

```javascript
// component.riot
export default {
  observe: ['number'],
  plus(){
    this.$store.dispatch({
      type: 'INCREMENT',
      value: 10
    })
  }
}
```
npm package: @frontless/riot
Description: Riot.JS with dependency injection
Author: Anton Nesterov
Latest version: 4.5.1

[![Build Status](https://travis-ci.org/nesterow/frontless-riot.svg?branch=master)](https://travis-ci.org/nesterow/frontless-riot)
## frontless-riot
Riot.JS build with dependency injection for globals like `document` or `Node`. 
Main purpose is to avoid concurent access to global variables when rendering components on the server side inside async functions or promises.

#### References
Cases when concurrent access happens on backend: 
  1. [Concurrency in Node.JS](https://medium.com/platformer-blog/node-js-concurrency-with-async-await-and-promises-b4c4ae8f4510)
  2. [Async/Await Hell](https://www.freecodecamp.org/news/avoiding-the-async-await-hell-c77a0fb71c4c/)

For frontend guys : [Wait don't touch that](https://medium.engineering/wait-dont-touch-that-a211832adc3a)

## Usage
```bash
  npm i @frontless/riot
```
```javascript
import * as riot from '@frontless/riot'
import {JSDOM} from 'jsdom'
import MyTag from 'mytag.riot'

riot.register('mytag', MyTag)

async render(){
  const {document, Node} = new JSDOM().window;
  const root1 = document.createElement('div')
  document.body.appendChild(root1)
  const result = riot.di({document, Node}).mount(root1, {}, 'random')
}


```
npm package: @frontline-hq/mailguard-supabase
Description: ## Dev notes
Latest version: 1.0.1

# supabase

## Dev notes

After a change in the database structure, run:

`pnpm --filter @frontline-hq/mailguard-supabase after-db-change`

Or instead, synonymously:

1. `pnpm --filter @frontline-hq/mailguard-supabase test` - will reset and test the database
2. `pnpm --filter @frontline-hq/mailguard-supabase sync-snaplet` - sync snaplet schema with database
3. `pnpm --filter @frontline-hq/mailguard-supabase generate-types` - generate new supabase database types
4. `pnpm --filter @frontline-hq/mailguard-supabase build` - build database

Then restart your typescript server.
npm package: @frontline-hq/react-in-svelte
Description: A library that allows you to use react components in svelte
Author: Benjamin Preiss benjaminpreiss@protonmail.com
Latest version: 0.0.11

# React in svelte

A library that enables you to use React components in Svelte - 6.8kB mified & gzipped 

It even utilizes SSR and hydration to reduce client side rendering work.

## Installation

`yarn add @frontline-hq/react-in-svelte` or `npm install @frontline-hq/react-in-svelte`

## Usage

Import our Wrapper in your application and pass a VNode to it. We recommend creating a VNode with htm.

```svelte
<script lang="ts">
    import {h, type VNode} from 'preact';
    import ReactWrapper from "@frontline-hq/react-in-svelte"
    import htm from "htm"
    import SomeComponent from "SomeComponentLibrary"

    const html = htm.bind(h)

    const props = {
        // a lot of props here
    }

    const vNode = html`
        <${SomeComponent} ...${props}>
            <div>Some more components here</div>
        <//>
    ` as VNode
</script>

<ReactWrapper {vNode} />
```

This will create a `<div></div>` within ReactWrapper to host the (p)react dom. The React components will then be inserted within the wrapper.

## 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
```

## Publishing

```bash
cd package
npm publish
```
npm package: @frontline-hq/rollup-merge-import
Description: A rollup plugin to support virtual imports for mdx files
Author: Benjamin Preiss
Latest version: 0.0.6

# Rollup merge import

A rollup plugin that enables "merge-importing" all files within a folder that match a certain glob.

## Requirements

An environment where node is installed.

## Installation

```bash
yarn add --dev @frontline-hq/rollup-merge-import
```

or

```bash
npm install --save-dev @frontline-hq/rollup-merge-import
```

## Usage

Merge import your files by specifying the corresponding virtual import:

```ts
import * as module from "virtual:merge/contents/**/*.mdx";
```

The above will match all files withing the `contents` directory matching the glob `contents/**/*.mdx`.
It will then reexport all exports from these files under the name of each files path (excluding the root folders name, in this example `contents`).
Let's say we have the following file structure:

```
src
  contents
    en
      file1.mdx
    de
      file2.mdx
      file3.mdx
```

This will produce the following exports from the virtual import:

```ts
export * as en_file1 from "absolute_path_to_file1";
export * as de_file2 from "absolute_path_to_file2";
export * as de_file3 from "absolute_path_to_file3";
```

This plugin uses `_` as a path delimiter by default, but this is easily configured in the plugins settings.

## Syntax

```ts
import * as module from "virtual:merge/<folder>/<glob>";
```

Where

-   `<folder>` is the name of the folder that you want to search in
-   `<glob>` is the tiny-glob glob that specifies which files should be merge-imported

## Setup

Add this plugin to your rollup config:

```ts
// vite.config.ts
// ...

import rollupMergeImport from "@frontline-hq/rollup-merge-import";

export default defineConfig({
	plugins: [
		// ...
		rollupMergeImport(),
		// or rollupMergeImport({delimiter: "_"}) with custom delimiter
		// ...
	],
});
```

Don't forget to add a plugin capable of handling your files though!
A more complete config would probably could look more like this (here with mdx files):

```ts
// vite.config.ts
// ...

import rollupMergeImport from "@frontline-hq/rollup-merge-import";
import mdx from "@mdx-js/rollup";

export default defineConfig({
	plugins: [
		// ...
		rollupMergeImport(),
		mdx(),
	],
});
```

This plugin has on configurable option, which is the delimiter field already explained in the Usage section above:

```ts
type options = { delimiter?: string } | undefined;
```

## Shortcomings

Importing files from folders with `_` might lead to problems, as this plugin also uses `_` as a path delimiter on reexporting.

## Development

Please note the [fronline-hq development guidelines](https://github.com/frontline-hq/developer-guidelines)