open-index/open-npm huggingface dataset:
npm package: @front.zen/theme
Description: <h1 align="center" >Theme</h1>
Latest version: 1.17.0

<h1 align="center" >Theme</h1>

## 📦 Install

```bash
npm install @front.zen/theme
```

## 🔨 Usage

```bash
import {createTheme} from '@front.zen/theme'
```

To use fonts, you must import them:

```bash
import '@front.zen/theme/fonts/fa/fontiran.css';
import '@front.zen/theme/fonts/faNum/fontiran.css';
```
npm package: @front10/bootstrap
Description: Style library based on bootstrap
Author: front10-dev
Latest version: 2.10.1

<h1 style="text-align: center;">
    <a href="http://front10.com/">
        <img src="https://github.com/front10/landing-page-book/blob/master/assets/images/logo/logo-frton10.jpg?raw=true" alt="Front10 Component Explorer" width="200">
    </a>
</h1>

# front10 Bootstrap

`@front10/front10-bootstrap` is an customization of bootstrap library.

[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

In our constant effort for the optimization and efficiency of our components, we have decided to create this library of styles that will allow us to only import in each component / project the css classes that we need.

At this time we need the bootstrap system layout but without Flex for compatibility reason.
All Utilities and colors of bootstrap 4 plus new utilities.

### Change log

- 1.1.8 (2/5/2019)
  - Added: Border compatibility.
  - Fixed Bug:
    - Padding and margin rules are now !important
    - Improved compatibility with border-style.
- 1.1.6 (2/5/2019)
  - Added: CSS rules to typography, rounded border, display, code and border to bootstrap customization 4.
- 1.1.3 (2/4/2019)
  - Fixed bug: Improved row compatibility for RTL languages.
- 1.1.1 (2/4/2019)
  - Fixed bug: Rename missing rules css for the padding.
- 1.1.0 (2/4/2019)
  - Useful classes have been added for bootstrap customization 4.
    - Fonts
    - Margin
    - Padding
    - Rounded

### Library content

- [Bootstrap 4 (RTL compatibility)](#bootstrap4)
- [Personalization of Bootstrap 3 (RTL compatibility)](#bootstrap3)

### How Use

Import in your website the CSS file that you want to use according to your needs.

<div id="bootstrap4">

#### Bootstrap 4

##### **LTR**

`import from '@front10/bootstrap/bootstrap4/index.css'`
or

`import from '@front10/bootstrap/bootstrap4/index.min.css'`

##### **RTL**

`import from '@front10/bootstrap/bootstrap4/index.rtl.css'`
or

`import from '@front10/bootstrap/bootstrap4/index.rtl.min.css'`

</div>

<div id="bootstrap3">

#### Bootstrap 3

##### **LTR**

`import from '@front10/bootstrap/index.css'`
or

`import from '@front10/bootstrap/index.min.css'`

##### **RTL**

`import from '@front10/bootstrap/index.rtl.css'`
or

`import from '@front10/bootstrap/index.rtl.min.css'`

</div>
npm package: @front10/component-explorer-utils
Description: Components lib to front10 components book
Author: Yulier Camilo Garrido Garrido
Latest version: 3.8.1

<h1 style="text-align: center;">
    <a href="http://front10.com/">
        <img src="https://github.com/front10/landing-page-book/blob/master/assets/images/logo/logo-frton10.jpg?raw=true" alt="Front10 Component Explorer" width="200">
    </a>
</h1>

# Component Explorer Utils

`@front10/component-explorer-utils` is a components lib to front10 components book.

[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

## Setup

```sh
npm install @front10/component-explorer-utils --save-dev
```
npm package: @front10/deployment-scripts
Description: ``` # npm i @front10/deployment-scripts # node ./node_modules/@front10/deployment-scripts/staging.js ```
Author: ycgarrido@gmail.com
Latest version: 1.0.10

#### Usage

```
# npm i @front10/deployment-scripts
# node ./node_modules/@front10/deployment-scripts/staging.js
```
npm package: @front10/flexible-layout
Description: Allow use a flexible layout for components
Author: ycgarrido@gmail.com
Latest version: 0.0.2

# Example

```js
import React from "react";
import { useLayout, useAriaLabel } from "@front10flexible-layout";

const Text = () => <span>Hello</span>;

const Box = ({ children }) => <div>{children}</div>;

const MyComponent = ({ layout }) => {
  const { dom, ariaLabel } = useLayout(layout, {
    Text,
    Box
  });

  return <Box ariaLabel={ariaLabel}>{dom}</Box>;
};

const MyPage = () => {
  const layout = {
    type: "Box",
    children: [
      {
        type: "Text"
      }
    ]
  };

  return <MyComponent layout={layout} />;
};
```
npm package: @front10/theme-services-integration
Description: Helpers for translate the EveryMundo Theme
Author: Jorge Luis Suárez Falcón
Latest version: 0.0.32

# Theme Service Integration

# Introduction

This library was created as part of the process of having a single source where to apply the changes, this library is used in:

- The registry-integration branch in the airModules library (https://gitlab.com/front10-devs/airmodules/-/tree/registry-integration)
- In the Cloudflare Worker that receives notifications from EveryMundo when a theme is edited to then transform it and save it already transformed in the CDN. (https://gitlab.com/front10-devs/figma-integration-eds)
- In the airModules Booking/Popup library developed from airModules as part of the strategy of having fewer dependencies in the Vangogh integration (https://gitlab.com/front10-devs/airmodules-vertical-booking-popup)

# Deployment process

- Once the changes have been made, update the new version of the library as well. To do this, you can use the command `npm version <new version>`.

PS: If you use the command, you must make sure that you do not have any changes in the git tree.
npm package: @front10/woxo-wc
Description: Woxo web components following open-wc recommendations
Author: Rainer Martínez Fraga
Latest version: 0.0.1

# \<wc-front10-ui>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i wc-front10-ui
```

## Usage
```html
<script type="module">
  import 'wc-front10-ui/wc-front10-ui.js';
</script>

<wc-front10-ui></wc-front10-ui>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @frontalex/myfirstuikit
Description: Simple example of react library
Author: jmorozov
Latest version: 0.0.9

# react-library-example

> Simple example of react library with typescript, rollup, jest, storybook, eslint and prettier

## Install

```bash
npm i -s git+https://github.com/jmorozov/react-library-example.git
```

## Usage

```tsx
import * as React from 'react';
import 'react-library-example/dist/index.css';
import { ExampleComponent } from 'react-library-example';

class Example extends React.Component {
   render() {
      return <ExampleComponent text="Test" />;
   }
}
```

## License

MIT © [jmorozov](https://github.com/jmorozov)
npm package: @frontalnh/json-dot-parser
Description: Converts json object whick has key written in dot notation to plain json object
Latest version: 0.1.7

# json-dot-parser

Converts json object whick has key with dot notation to plain json object

## Install

`npm install @frontalnh/json-dot-parser`

## Usage

```js
import { removeDotInJson } from '@frontalnh/json-dot-parser';

let data = {
  a: 'a',
  b: 'b',
  'c.a': 'a',
  'c.b': 'b'
};

removeDotInJson(data);
console.log(data); // {a:"a",b:"b",c:{a:"a",b:"b"}}
```
npm package: @frontant/aniscroll
Description: animated scrolling, written in ES6
Author: Anton Horn
Latest version: 1.0.2

# Animated scrolling

### Install

```bash
> yarn add @frontant/aniscroll
```

### Quick start

Minimal call

```javascript
import AniScroll from "@frontant/aniscroll";

var aniscroll = new AniScroll();
aniscroll.scroll(0, 500); // scroll down 500px
```

Scroll down 300px inside an element with the id `id`. Set the easing function to `easeCubic` from the module **d3-ease**.

```javascript
import * as d3Ease from 'd3-ease';
import AniScroll from '@frontant/aniscroll';

var elem = document.querySelector('#id');
var aniscroll = new AniScroll({
  elem: elem, // apply aniscroll to this element
  easing: d3Ease.easeCubic, // set the easing function
};
aniscroll.scroll(0, 300); // scroll down 300px
```

### Options

```javascript
var aniscroll = new AniScroll(options);
```

**options.elem**  
AniScroll will applied to this element.

Default: `window`

**options.easing**  
Sets the easing function. You can use easing functions offered by the module **d3-ease**.

**options.onAnimationEnd**  
This option defines the callback function invoked after the animation has finished.

**options.onAnimationCanceled**  
This option defines the callback function invoked when the animation was canceled by the **cancel()** function.

**options.autoCancel**  
If is set to `true`, the user will be able to cancel the animation with a click, a touch gesture or with the mouse wheel.

Default: `false`

### Functions

**scroll(x, y)**  
**scroll(x, y, duration)**  
**x** and **y** represent the horizontal and vertical axis. **duration** is the animation speed (the default value is 500ms).

**cancel()**  
Cancels the animation.

**isRunning()**  
This function returns `true` if the animation is running otherwise it returns `false`.