open-index/open-npm huggingface dataset:
npm package: @modnes/access-controller
Description: Module to Control Access using roles and functions
Author: Luiz Henrique Canet Filho
Latest version: 1.0.0

Access Controller Modules
=========================

[![Coverage Status](https://coveralls.io/repos/github/modnes/access-controller/badge.svg?branch=master)](https://coveralls.io/github/modnes/access-controller?branch=master)

Access Controller module provides an utility class to check if an user has access to some resource based in constraints as roles or functions set.


Installing
----------

    npm i @modnes/access-controller


Usage
-----

To check if an user has access to something the [`AccessController.hasAccess()`](https://github.com/modnes/access-controller/wiki/API#hasaccess) method must be called passing an user object and a constraints object.


```javascript
import AccessController from 'path/to/@modnes/access-controller/access-controller.js'

const USER = {
  id: 1,
  roles: ['user'],
  isLogged: () => true
}
const CONSTRAINTS = {
  roles: ['user', 'manager'],
  functions: [
    user => user.id === 1,
    USER.isLogged
  ]
}

if AccessController.hasAccess(USER, CONSTRAINTS) console.log('User has access!')
```

Methods
-------

Access Controller provides more two methods: userHasRoles() and callFunctions(). These methods can be called in isolation in certain circumstances.

### userHasRoles

The [`userHasRoles()`](https://github.com/modnes/access-controller/wiki/API#userhasroles) method checks if an user has some of passed roles.

```javascript
const USER = {
  id: 1,
  roles: ['user']
}
const ROLES = ['user', 'manager']

if AccessController.userHasRoles(USER, ROLES) console.log('User has some of these roles!')
```

### callFunctions

The [`callFunctions()`](https://github.com/modnes/access-controller/wiki/API#callfunctions) method returns `true` if all passed functions return `true`.

```javascript
const USER = {
  id: 1,
  isLogged: () => true
}
const FUNCTIONS = [
  user => user.id === 1,
  USER.isLogged
]

if AccessController.callFunctions(USER, FUNCTIONS) console.log('All functions returned true!')
```

See the [API documentation](https://github.com/modnes/access-controller/wiki/API)
npm package: @modnes/custom-element
Description: Module to help on creation of new custom elements
Author: Luiz Henrique Canet Filho
Latest version: 1.0.1

Custom Element Module
=====================

Custom Element Module helps on creation of new custom elements.

Installing
----------

    npm i @modnes/custom-element


Usage
-----

The CustomElement must be extended by your own class that can be used to define a new custom element.

```javascript
import CustomElement from 'path/to/@modnes/custom-element/custom-element.js'

class CustomExample extends CustomElement {
  /**
   * The constructor can be used to set a template as string or function.
   */
  constructor () {
    super()
    this.template = `
      <h1>Custom Example</h1>
      <button type="button">OK</button>
    `
  }

  /**
   * This method is called when the template is rendered.
   */
  init () {
    const BUTTON = this.querySelector('button')

    BUTTON.addEventListener('click', () => {
      alert('Custom Example!')
    })
  }
}

/**
 * This provides this tag to be used in HTML: <custom-example></custom-example>
 */
customElements.define('custom-example', CustomExample)

```

You can set some data using de `data` property that is passed when the template is a function that returns the HTML content.

```javascript
import CustomElement from 'path/to/@modnes/custom-element/custom-element.js'

class DataExample extends CustomElement {
  constructor () {
    super()
    /**
     * this.data is passed to the template function
     */
    this.template = data => `
      <h1>${data.title}</h1>
      <p>${data.text}</p>
    `
  }

  async connectedCallback () {
    const FETCH_RESULT = await fetch('path/to/data.json')
    this.data = await FETCH_RESULT.json()

    // You can call super.connectedCallback() or this.render()
    super.connectedCallback()
  }
}

/**
 * This provides this tag to be used in HTML: <data-example></data-example>
 */
customElements.define('data-example', DataExample)

```

See the [API documentation](https://github.com/modnes/custom-element/wiki/API)
npm package: @modnes/router
Description: Module to Control which Element to insert based on the Path
Author: Luiz Henrique Canet Filho
Latest version: 1.1.1

Router Module
======================

Router is a browser module that aims to let implementations change elements inside a wrapper element in response to path change events.


Installing
----------

    npm i @modnes/router


Usage
-----

The Router must receive an HTML Element from DOM and optionally an Array of route objects.


```javascript
import Router from "path/to/@modnes/router/router.js"

let router = new Router(document.querySelector('main'), [
  {
    path: '/posts',      // will use this settings when accessing /posts
    tagName: 'post-list' // will put <post-list></post-list> inside <main></main>
  },
  {
    path: '/posts/:id',      // will provide the parameter 'id' with value 3 at /posts/3
    tagName: 'post-article',
    attributes: [
      { // will change main element content to <post-article post-id="3"></post-article>
        name: 'post-id',
        value: '{{ id }}'
      }
    ]
  },
  { // will change main element content to <category-list class="categories list"></category-list>
    path: '/categories',
    tagName: 'category-list',
    classes: ['categories', 'list'],
    modules: ['path/to/category-list-module/index.js'] // will import this module before update the element
  },
  { // will change main element content to <movies-list class="movies-category list"></movies-list>
    path: '/categories/:name', // will provide the parameter 'name' with value 'movies' at /categories/movies
    tagName: '{{ name }}-list',
    classes: ['{{ name }}-category', 'list']
  },
  { path: '/*', tagName: 'home-page' }
])
```

Methods
-------

### addRoute

The [`addRoute()`](https://github.com/modnes/router/wiki/API#addRoute) method can be used inside a proccess to dynamically add new routes to the Router.

```javascript
router.addRoute({
  path: '/section/:param1/:param2/*',
  tagName: 'section-list'
})
```

### getParams

The [`getParams()`](https://github.com/modnes/router/wiki/API#getParams) returns an object with URI parameters as properties.

```javascript
// When location is /section/book/50/any-string
// and route path is /section/:param1/:param2/*
let params = router.getParams()
// params will be equal { param1: 'book', param2: '50' }
```

### Router.goTo

[`Router.goTo()`](https://github.com/modnes/router/wiki/API#goto) is a static method that can be used to navigate to a new path.

```javascript
Router.goTo('/categories') // will change location path to /categories
```

Router Anchor
-------------

The Router package also provides a custom element module to extend the native `a` HTML tag. It implements the Router.goTo() static method.

```html
<html>
  <head>
    <title>Router Anchor</title>
    <script href="path/to/@modnes/router/anchor/index.js" type="module"></script>
  </head>
  <body>
    <a href="/categories" is="router-anchor">Go To Categories</a>
  </body>
</html>
```

See the [API documentation](https://github.com/modnes/router/wiki/API)
npm package: @modnxyz/scalablecss
Description: PostCSS plugin to scale (up/down) css numerical values.
Author: Fares AlHarbi
Latest version: 0.1.1

# Scalable CSS

[PostCSS] plugin to scale (up/down) CSS numerical values.

[PostCSS]: https://github.com/postcss/postcss
[≡ Mod(N)]: https://modn.xyz

## Example

#### Input:
```css
.foo {
    height: 100px;
}
```
Reduced by 50%:
#### Output:
```css
.foo {
  height: 50px;
}
```

## Installation
```
npm i @modnxyz/scalablecss
```
- The package is available on both NPM and Github registry.
## Usage
`ScalableCSS` takes one argument, which is javascript object:
```js
options = {
  // required options 
  percent: (1/2)*100,// scaling percent, e.g. 50%
  // optional options
  declares:['min-height','height'] // an array of declares, the scaling will apply **only** to it.
  // the default value: 
  // ['min-height','min-width','left','top','width','height','margin', 'padding', 'font-size', 'line-height', 'transform'];
}

// Then embed it into your project.
scalableCSS(options)
```

See [PostCSS] docs for examples related to your environment.

## TODO
- [ ] Refactoring.
- [ ] Implement `cli` version.
- [ ] Scale `functions` numerical values, e.g. scale down `translate(100px)` to `translate(50px)`.

*Feel free to pick one, and submit pull request!*
## Credit & License
- **Author:** Fares AlHarbi, [≡ Mod(N)].
- **License:** MIT license, 2021 ≡ Mod(N), all rights reserved.
npm package: @modohockey/components
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/components.svg)](https://www.npmjs.com/package/@modohockey/components) [![npm license](https://img.
Author: gunnarx2
Latest version: 1.1.2

# `@modohockey/components`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/components.svg)](https://www.npmjs.com/package/@modohockey/components)
[![npm license](https://img.shields.io/npm/l/@modohockey/components)](https://www.npmjs.com/package/@modohockey/components)

## Installation

```shell
yarn add @modohockey/components
```

### Peer dependencies

```json
{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}
```

### Root provider

For the application to work you need to setup [Root provider](https://modohockey-storybook.internal.isdemo.se/?path=/story/documentation-root-provider--page).

### Documentation

See [Storybook](https://modohockey-storybook.internal.isdemo.se/) to read documentation and visualize components.
npm package: @modohockey/eslint-config-eslint-react
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/eslint-config-eslint-react.svg)](https://www.npmjs.com/package/@modohockey/eslint-config-eslint-rea
Author: gunnarx2
Latest version: 1.0.1

# `@modohockey/eslint-react`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/eslint-config-eslint-react.svg)](https://www.npmjs.com/package/@modohockey/eslint-config-eslint-react)
[![npm license](https://img.shields.io/npm/l/@modohockey/eslint-config-eslint-react)](https://www.npmjs.com/package/@modohockey/eslint-config-eslint-react)

Extendable [ESLint](https://eslint.org/) configuration.

## Installation

```shell
yarn add @modohockey/eslint-config-eslint-react -D
```

### Peer dependencies

```json
{
  "@babel/eslint-parser": "^7.18.2",
  "@calm/eslint-plugin-react-intl": "^1.4.1",
  "@modohockey/prettier": "^1.0.0",
  "eslint": "^8.0.0",
  "eslint-config-airbnb": "^19.0.4",
  "eslint-config-prettier": "^8.3.0",
  "eslint-config-react-app": "^7.0.0",
  "eslint-plugin-cypress": "^2.11.3",
  "eslint-plugin-prettier": "^4.0.0"
}
```

### With Create React App

Exclude `eslint`, `@babel/eslint-parser` and `eslint-config-react-app` from the peer dependencies shell above.

## Usage

Extend `@modohockey/eslint-react` in the ESLint configuration. Also make sure to setup and install `@modohockey/prettier` and its peer dependencies.

```javascript
module.exports = {
  extends: ['@modohockey/eslint-react']
};
```
npm package: @modohockey/eslint-plugin-eslint-react
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/eslint-plugin-eslint-react.svg)](https://www.npmjs.com/package/@modohockey/eslint-plugin-eslint-rea
Author: gunnarx2
Latest version: 1.0.0

# `@modohockey/eslint-react`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/eslint-plugin-eslint-react.svg)](https://www.npmjs.com/package/@modohockey/eslint-plugin-eslint-react)
[![npm license](https://img.shields.io/npm/l/@modohockey/eslint-plugin-eslint-react)](https://www.npmjs.com/package/@modohockey/eslint-plugin-eslint-react)

Extendable [ESLint](https://eslint.org/) plugin.

## Installation

```shell
yarn add @modohockey/eslint-plugin-eslint-react -D
```

### Peer dependencies

```json
{
  "eslint": "^8.0.0"
}
```

### With Create React App

Exclude `eslint` from the shell above.

## Usage

Extend `plugin:@modohockey/eslint-react/recommended` in the ESLint configuration.

```javascript
module.exports = {
  extends: ['plugin:@modohockey/eslint-react/recommended']
};
```
npm package: @modohockey/hooks
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/hooks.svg)](https://www.npmjs.com/package/@modohockey/hooks) [![npm license](https://img.shields.io
Author: gunnarx2
Latest version: 1.0.6

# `@modohockey/hooks`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/hooks.svg)](https://www.npmjs.com/package/@modohockey/hooks)
[![npm license](https://img.shields.io/npm/l/@modohockey/hooks)](https://www.npmjs.com/package/@modohockey/hooks)

## Installation

```shell
yarn add @modohockey/hooks
```

### Peer dependencies

```json
{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}
```

## Documentation

See [Storybook](https://modohockey-storybook.internal.isdemo.se/) to read documentation.
npm package: @modohockey/ipsum
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/ipsum.svg)](https://www.npmjs.com/package/@modohockey/ipsum) [![npm license](https://img.shields.io
Author: gunnarx2
Latest version: 0.0.1

# `@modohockey/ipsum`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/ipsum.svg)](https://www.npmjs.com/package/@modohockey/ipsum)
[![npm license](https://img.shields.io/npm/l/@modohockey/ipsum)](https://www.npmjs.com/package/@modohockey/ipsum)

## Installation

```shell
yarn add @modohockey/ipsum
```

### Peer dependencies

```json
{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}
```
npm package: @modohockey/prettier
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/prettier.svg)](https://www.npmjs.com/package/@modohockey/prettier) [![npm license](https://img.shie
Author: gunnarx2
Latest version: 1.0.0

# `@modohockey/prettier`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/prettier.svg)](https://www.npmjs.com/package/@modohockey/prettier)
[![npm license](https://img.shields.io/npm/l/@modohockey/prettier)](https://www.npmjs.com/package/@modohockey/prettier)

Configuration for [Prettier](https://prettier.io/).

## Installation

```shell
yarn add @modohockey/prettier -D
```

### Peer dependencies

```json
{
  "prettier": "^2.4.0"
}
```

## Usage

Require `@modohockey/prettier` in the Prettier configuration.

```javascript
module.exports = require('@modohockey/prettier');
```
npm package: @modohockey/stylelint
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/stylelint.svg)](https://www.npmjs.com/package/@modohockey/stylelint) [![npm license](https://img.sh
Author: gunnarx2
Latest version: 0.2.1

# `@modohockey/stylelint`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/stylelint.svg)](https://www.npmjs.com/package/@modohockey/stylelint)
[![npm license](https://img.shields.io/npm/l/@modohockey/stylelint)](https://www.npmjs.com/package/@modohockey/stylelint)

Extendable [Stylelint](https://stylelint.io/) configuration.

## Installation

```shell
yarn add @modohockey/stylelint -D
```

### Peer dependencies

```json
{
  "@modohockey/prettier": "^0.x",
  "prettier": "^2.4.0",
  "stylelint": "^14.2.0",
  "stylelint-config-prettier": "^9.0.3",
  "stylelint-config-sass-guidelines": "^9.0.1",
  "stylelint-prettier": "^2.0.0"
}
```

## Usage

Extend `@modohockey/stylelint` in the Stylelint configuration. Also make sure to setup and install `@modohockey/prettier` and its peer dependencies.

```javascript
module.exports = {
  extends: '@modohockey/stylelint'
};
```
npm package: @modohockey/stylelint-scss
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/stylelint-scss.svg)](https://www.npmjs.com/package/@modohockey/stylelint-scss) [![npm license](http
Author: gunnarx2
Latest version: 1.0.2

# `@modohockey/stylelint-scss`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/stylelint-scss.svg)](https://www.npmjs.com/package/@modohockey/stylelint-scss)
[![npm license](https://img.shields.io/npm/l/@modohockey/stylelint-scss)](https://www.npmjs.com/package/@modohockey/stylelint-scss)

Extendable [Stylelint](https://stylelint.io/) configuration for [SCSS](https://sass-lang.com/).

## Installation

```shell
yarn add @modohockey/stylelint-scss -D
```

### Peer dependencies

```json
{
  "@modohockey/prettier": "^1.0.0",
  "prettier": "^2.4.0",
  "stylelint": "^14.2.0",
  "stylelint-config-prettier": "^9.0.3",
  "stylelint-config-sass-guidelines": "^9.0.1",
  "stylelint-prettier": "^2.0.0"
}
```

## Usage

Extend `@modohockey/stylelint-scss` in the Stylelint configuration. Also make sure to setup and install `@modohockey/prettier` and its peer dependencies.

```javascript
module.exports = {
  extends: '@modohockey/stylelint-scss'
};
```
npm package: @modohockey/stylelint-styled-components
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/stylelint-styled-components.svg)](https://www.npmjs.com/package/@modohockey/stylelint-styled-compon
Author: gunnarx2
Latest version: 1.0.3

# `@modohockey/stylelint-styled-components`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/stylelint-styled-components.svg)](https://www.npmjs.com/package/@modohockey/stylelint-styled-components)
[![npm license](https://img.shields.io/npm/l/@modohockey/stylelint-styled-components)](https://www.npmjs.com/package/@modohockey/stylelint-styled-components)

Extendable [Stylelint](https://stylelint.io/) configuration for [styled-components](https://styled-components.com/).

## Installation

```shell
yarn add @modohockey/stylelint-styled-components -D
```

### Peer dependencies

```json
{
  "@modohockey/prettier": "^1.0.0",
  "@stylelint/postcss-css-in-js": "^0.38.0",
  "postcss": "^8.4.17",
  "postcss-syntax": "^0.36.2",
  "prettier": "^2.4.0",
  "stylelint": "^14.2.0",
  "stylelint-config-prettier": "^9.0.3",
  "stylelint-config-styled-components": "^0.1.1",
  "stylelint-prettier": "^2.0.0"
}
```

## Usage

Extend `@modohockey/stylelint-styled-components` in the Stylelint configuration. Also make sure to setup and install `@modohockey/prettier` and its peer dependencies.

```javascript
module.exports = {
  extends: '@modohockey/stylelint-styled-components'
};
```
npm package: @modohockey/utils
Description: [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![npm version](https://img.shields.io/npm/v/@modohockey/utils.svg)](https://www.npmjs.com/package/@modohockey/utils) [![npm license](https://img.shields.io
Author: gunnarx2
Latest version: 1.0.2

# `@modohockey/utils`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm version](https://img.shields.io/npm/v/@modohockey/utils.svg)](https://www.npmjs.com/package/@modohockey/utils)
[![npm license](https://img.shields.io/npm/l/@modohockey/utils)](https://www.npmjs.com/package/@modohockey/utils)

## Installation

```shell
yarn add @modohockey/utils
```

### Peer dependencies

```json
{
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0",
  "tslib": "^2.3.0"
}
```

## Documentation

See [Storybook](https://modohockey-storybook.internal.isdemo.se/) to read documentation.