open-index/open-npm huggingface dataset:
npm package: @saronia/saronia-ui
Description: ui component library
Latest version: 0.10.11

# saronia-ui
React-based UI toolkit for the web.

![saronia-ui logo](https://ui.saronia.io/logo_saronia_ui.png)

* styled-components v2
* polished
* ramda
* flexbox

## Setup

```sh
# Clone the repository
git clone https://github.com/saronia/saronia-ui.git saronia-ui && cd $_

# Install node modules
yarn install

# Create a branch to work with following this pattern:
git checkout -b 'feature/subtitle' origin/master
git push -u origin feature/subtitle

# Start storybook using the following command
yarn run storybook

# Create storybook stories related to your component (copy-paste from other stories to get started)
touch src/components/Pill.js
touch src/stories/Pill.stories.js

# Work on the component and make frequent commits w/ well written commit messages
git add -A
git commit -m 'Added hover effects on <Pill /> component'

# Regularly push your work to obtain feedback
git push
```

## Development

1. `$ npm link` and then `$ yarn run dev` inside the **@saronia/saronia-ui** project
2. `$ npm link @saronia/saronia-ui` inside the target project

## Conventions

### rem vs. em

For consistency sake we exclusively use rem.
Read up the difference between the two [here](https://zellwk.com/blog/rem-vs-em/).

### Enum vs. Constant

Whenever the left-hand side is a mere lowercase representation of the right-hand side as in the example below, we add the **Enum** suffix to the variable name declaration.

```js
const SizeEnum = {
  SMALL: 'small',
  MEDIUM: 'medium',
  LARGE: 'large',
}
```

On the contrary, whenever the left-hand side and the right-hand side do not match up as the example below, no additional suffix is being attached.
```js
const Color = {
  PRIMARY: '#FFB00C',
  SECONDARY: '#F2416C',
  WHITE: '#FFFFFF',
}
```

Following this pattern has an important benefit: FlowType definitions will not clash w/ constants and enums.

The **medium** value in _SizeEnum_ and the **moderate** value in the _IntensityEnum_ are the default values.

## Release

After making changes to the project that shall be published, fire `$ yarn release`. In the ensuing prompt select between **patch**, **minor**, and **major**.

## Contributors
* @DaniyarJakupov
* @soosap
npm package: @saroshali4/vee-validate-laravel
Description: Adds simple laravel form validation support to vee-validate
Author: Robert Williams
Latest version: 1.1.1

# Vee Validate for Laravel backend validation
Simple vue js plugin that makes it easier to show validation errors from Laravel validation by using vee-validate.

### Getting Started

In your script entry point:

```javascript
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from '@saroshali4/vee-validate-laravel';

Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);

```

From Laravel:

```php

$request->validate([
    'name' => 'required|min:3|max:255'
]);


```


In Vue classes:


```vue

<template>
    <div class="form-group" v-bind:class="{'has-error' : errors.has('name')}">
        <label for="name">Name</label>
        <input 
            type="text" 
            name="name"
            class="form-control"
            v-model="name"
            v-validate="'required'" />
        <div v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</div>
    </div>
</template>

<script>
    export default {
        methods: {
            doValidation() {
                const data = {
                    name: this.name
                };
            
                axios.post('/example', data).then(res => {
                }).catch(err => {
                    this.$setLaravelValidationErrorsFromResponse(err.response.data);
                });
            }
        }
    }
</script>

```
npm package: @sarosia/e
Description: A general purpose function to manipulate HTML DOM elements.
Author: https://github.com/sarosia
Latest version: 1.0.1

# e

[![Build Status][build-image]][build-url]
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]

e is a general purpose function to manipulate HTML DOM elements.

## Usage

If the first argument is a string, it will return the element matching with that ID, or null if not elements is associated with that ID. The subsequce arguments will be used for update its attribute and children. For example,

`e('div1')` is equivalent to `document.getElementById('div1')`.
`e('div', {'style': 'color: red'}, 'Hello world')` is equivalent to the following statements:

```js
const div = document.getElementById('div1');
div.setAttribute('style', 'color: red');
div.innerHTML = 'Hello world';
```

If the param is an array, creates an HTML element based on the items in the array and return the element. The array should be in the form of the following:

```
element := [type, {attributes...}, children]
children := [elements...]|text
```

If the children is a list of array, construct the children recursively and append to the current node. If the children is a string, simply set the node's innerHTML.

## License

[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@sarosia/e.svg
[npm-url]: https://npmjs.org/package/@sarosia/e
[downloads-image]: https://img.shields.io/npm/dm/@sarosia/e
[downloads-url]: https://npmjs.org/package/@sarosia/e
[build-image]: https://github.com/sarosia/e/workflows/Node.js%20CI/badge.svg
[build-url]: https://github.com/sarosia/e/actions
npm package: @sarosia/once
Description: The simple JavaScript library to call a function once and only once
Author: https://github.com/sarosia
Latest version: 1.0.1

# once
The simple JavaScript library to call a function once and only once

## Usage

To install the module, run

```sh
npm i @sarosia/once
```

```js
const once = require('@sarosia/once');

getCachedObject = once(() => {
  return {};
});
```

Calling getCachedObject() will create the instance once and always return the
same instance.