open-index/open-npm huggingface dataset:
npm package: @simpli/cli
Description: Tools to generate either web-server or web-client projects based on a MySQL database scheme
Author: Felipe Gibran Eleuterio Toledo
Latest version: 2.4.3

<p align="center">
  <img alt="Simpli Logo" src="https://github.com/simplitech/simpli-cli/raw/master/logo.png" width="256" height="256">
  <br>
  <a href="https://www.npmjs.com/package/@simpli/cli"><img src="https://img.shields.io/npm/v/@simpli/cli.svg"></a>
  <a href="https://www.npmjs.com/package/@simpli/cli"><img src="https://img.shields.io/npm/dt/@simpli/cli.svg"></a>
  <a href="https://www.npmjs.com/package/@simpli/cli"><img src="https://img.shields.io/npm/l/@simpli/cli.svg"></a>
</p>

# Simpli CLI

Simpli CLI provides tools to generate either web-server or web-client projects based on a MySQL database scheme.

## [Documentation](https://github.com/simplitech/simpli-cli)
npm package: @simpli/react-native-await
Description: Easy-to-use loading indicator
Author: Felipe Gibran Eleuterio Toledo
Latest version: 0.2.1

# @simpli/react-native-await

Easy-to-use loading indicator

## Installation

```sh
npm install @simpli/react-native-await
```

## Usage

```tsx
import React from 'react'
import {AwaitActivity, Await} from '@simpli/react-native-await'
import {StyleSheet, View, Text, Button} from 'react-native'

export default function App() {
  const fakeRequest = () => new Promise((resolve) => setTimeout(resolve, 3000))

  const populate = async () => {
    // Loading starts here
    await Await.run('myRequestName', fakeRequest)
    // Loading ends after 3 seconds
  }

  populate()

  return (
    <View style={styles.container}>
      <AwaitActivity name={'myRequestName'}>
        <Text>To be shown after loading</Text>
        <Button title={'Try Again'} onPress={populate} />
      </AwaitActivity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})
```

## Alternative Usage
```tsx
// ...
const populate = async () => {
  try {
    Await.init('myRequestName')
    // Loading starts here
    await fakeRequest()
    // Loading ends after 3 seconds
    Await.done('myRequestName')
  } catch {
    Await.error('myRequestName')
  }
}
// ...
```


## Other props
```tsx
import {Text} from 'react-native'
import {AwaitActivity} from '@simpli/react-native-await'

export default function App() {
  return (
    <AwaitActivity
      name={'myRequestName'}
      onLoadingStart={() => console.log('loading start event')}
      onLoadingEnd={() => console.log('loading end event')}
      onError={() => console.log('error event')}
      loadingView={<Text>Loading...</Text>} // Custom Loading View
      errorView={<Text>Error</Text>} // Custom Error View
    >
      To be shown after loading
    </AwaitActivity>
  )
}
```

## Await Methods
```tsx
import {Await} from '@simpli/react-native-await'

// returns a boolean indicating if 'myrequestname' is loading
const isLoading = Await.inAction('myRequestName')

// initialize the loading passing the request name
Await.init('myRequestName')

// ends the loading of 'myRequestName'
Await.done('myRequestName')

// indicate an error on 'myRequestName'
Await.error('myRequestName')

// initialize the loading, process the request on the callback and then ends the loading
Await.run('myRequestName', () => {
  // your request goes here
})

```

## Using with [Serialized-Request](https://github.com/simplitech/serialized-request)
```typescript
RequestListener.onRequestStart(reqName => Await.init(reqName))
RequestListener.onRequestEnd(reqName => Await.done(reqName))
RequestListener.onRequestError(reqName => Await.error(reqName))
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @simpli/react-native-storage
Description: Deserialize your async-storage
Author: Felipe Gibran Eleuterio Toledo
Latest version: 0.2.2

# @simpli/react-native-storage

Deserialize your async-storage

## Installation

```sh
npm install @simpli/react-native-storage
```

## Usage

### ~/src/User.ts
```tsx
import {DataStorage} from '@simpli/react-native-storage'

export class User {
  name?: string
  surname?: string

  async save() {
    // Associate the key '@user' as User class then save this content
    return await DataStorage.bind('@user').as(User).save(this)
  }

  async load() {
    // Associate the key '@user' as this instance them populate in it
    return await DataStorage.bind('@user').as(this).load()
    // Note: alternatively, you can replace this to User, but it won't populate.
    // The response will be in the return.
  }
}
```

### ~/src/App.tsx
```tsx
import * as React from 'react'
import {StyleSheet, View, Text, TextInput, Button, Alert} from 'react-native'
import {User} from './User'
import {useState} from 'react'

export default function App() {
  const [name, setName] = useState<string>()
  const [surname, setSurname] = useState<string>()

  const user = new User()

  const persist = async () => {
    user.name = name
    user.surname = surname
    await user.save()
    Alert.alert('Restart the app')
  }

  const populate = async () => {
    await user.load()
    setName(user.name)
    setSurname(user.surname)
  }

  return (
    <View onLayout={() => populate()}>
      <Text>Your profile: </Text>

      <TextInput
        placeholder={'Name'}
        value={name}
        onChangeText={(val) => setName(val)}
      />

      <TextInput
        placeholder={'Surname'}
        value={surname}
        onChangeText={(val) => setSurname(val)}
      />

      <Button title={'Update your profile'} onPress={() => persist()} />
    </View>
  )
}
````

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @simpli/redux-wrapper
Description: Make simple the way of using Redux
Author: ftgibran
Latest version: 0.2.0

# @simpli/redux-wrapper

> Make simple the way of using Redux

[![NPM](https://img.shields.io/npm/v/@simpli/redux-wrapper.svg)](https://www.npmjs.com/package/@simpli/redux-wrapper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @simpli/redux-wrapper
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@simpli/redux-wrapper'
import '@simpli/redux-wrapper/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [ftgibran](https://github.com/ftgibran)
npm package: @simpli/vue-await
Description: Easy-to-use loading indicator
Author: gil
Latest version: 1.0.5

# Vue-Await

Easy-to-use loading indicator

# Install
```
npm i @simpli/vue-await
```

## Import
```typescript
import Vue from 'vue'
import VueAwait from '@simpli/vue-await'

Vue.use(VueAwait)
```
On your Scss:
```scss
@import "~@simpli/vue-await/scss/await";
```

## Basic Usage
```html
<await name="myRequestName">
  To be shown after loading
</await>
```
On a Vue instance:
```typescript
this.$await.run('myRequestName', async () => {
  // Make the request here
})
```
Outside a Vue instance:
```typescript
import {$await} from '@simpli/vue-await'

$await.run('myRequestName', async () => {
  // Make the request here
})
```

## Other props and slots
```html
<await
  name="myRequestName"
  effect="vueTransitionCssClass"
  spinner="vueComponentNameToBeRenderedOnLoading"
  :spinnerColor="colorThatWillBePassedAsPropToTheComponent"
  :spinnerPadding="paddingForTheLoadingElement"
  :spinnerScale="zoomForTheLoadingElement"
  @loading="callbackWhenLoading"
  @error="callbackWhenErrorIsThrown"
>
  The content to be shown after loading
  <template slot="error">
    The content to be shown if a error is thrown
  </template>
</await>
```

## Define the loading indicator with a slot
```html
<await
  name="myRequestName"
>
  The content to be shown after loading
  <template slot="loading">
    The content to be shown when loading
  </template>
</await>
```

## Configure the Default behaviour
```typescript
$await.defaultTransition = 'vueTransitionCssClass'
$await.defaultSpinner = 'vueComponentNameToBeRenderedOnLoading'
$await.defaultSpinnerColor = '#42b983'
$await.defaultSpinnerPadding = '10px'
$await.defaultSpinnerScale = 1
```

## $await Methods
```typescript
// gets the component to be shown when 'myRequestName' is loading
const spinnerOfMyRequest = $await.loader['myRequestName']

// define the component to be shown when using 'MyComp' as loader
$await.addLoader('MyComp', MyComponentClass)

// returns a boolean indicating if 'myRequestName' is loading
const isLoading = $await.inAction('myRequestName')

// initialize the loading passing the request name
$await.init('myRequestName')

// ends the loading of 'myRequestName'
$await.done('myRequestName')

// indicate an error on 'myRequestName'
$await.error('myRequestName')

// initialize the loading, process the request on the callback and then ends the loading
$await.run('myRequestName', async () => {
  // your request goes here
})

```

## Using with [Serialized-Request](https://github.com/simplitech/serialized-request)
```typescript
RequestListener.onRequestStart(reqName => $await.init(reqName))
RequestListener.onRequestEnd(reqName => $await.done(reqName))
```

## Using with [Vue-spinner](https://github.com/greyby/vue-spinner)
```typescript
import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'

$await.addLoader('ScaleLoader', ScaleLoader)
$await.defaultSpinner = 'ScaleLoader'
```
npm package: @simpli/vue-input
Description: Vue Input with multiple functionality
Author: gil
Latest version: 2.2.2

# Vue-Input

Vue Input with multiple functionality

# Install
```
npm i @simpli/vue-input moment class-transformer vue-multiselect
```

## Import
```typescript
import Vue from 'vue'
import VueInput from '@simpli/vue-input'

Vue.use(VueInput)
```
On your Scss:
```scss
@import "~@simpli/vue-input/scss/input";
```

## Basic InputText
Type can be 'text', 'mask', 'currency', 'textarea' or any other [HTML's input type](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input)
```html
<input-text
  v-model="myValue"
  type="text"
/>
```

## Other InputText properties
```html
<input-text
  v-model="myValue"
  type="text"
  label="Input Label"
  name="input-name"
  :required="ifTrueWillShowAnAsterisk"
  :selectall="ifTrueWillSelectTheTextOnFocus"
  inputClass="aClassToDecorateTheInput"
  mask="###/###.###-###"
  validation="required|email"
  @focus="focusEvent"
  @blur="BlurEvent"
/>
```
You can define the label as a Slot aswell

## Using a MaskPreset with InputText
Use one of the following on the property `maskPreset`:
- cnpj
- cpf
- date
- datetime
- phone
- phoneAlt
- rg
- zipcode
- zipcodeAlt

```html
<input-text
  v-model="myValue"
  type="text"
  maskPreset="phone"
/>
```

## Basic InputCheckbox
```html
<input-checkbox
  v-model="myValue"
/>
```

## Other InputCheckbox properties
```html
<input-checkbox
  v-model="myValue"
  label="Checkbox Label"
  labelClass="aClassForTheLabel"
  inputClass="aClassForTheInput"
  radio="ifTrueTheInputWillBeARadioButton"
  @focus="focusEvent"
  @blur="BlurEvent"
/>
```
You can define the label as a Slot aswell

## InputDate
TODO documentation

## InputSelect
TODO documentation
npm package: @simpli/vue-modal
Description: Create Reactive Vue Modals
Author: gil
Latest version: 1.0.5

# Vue-Modal

Create Reactive Vue Modals 

# Install
```
npm i @simpli/vue-modal
```

## Import
```typescript
import Vue from 'vue'
import VueModal from '@simpli/vue-modal'

Vue.use(VueModal)
```
On your Scss:
```scss
@import "~@simpli/vue-modal/scss/modal";
```

## Basic Usage
```html
<modal name="myModal">
  My Modal content
</modal>
```
On a Vue instance:
```typescript
this.$modal.open('myModal')
```
Outside a Vue instance:
```typescript
import {$modal} from '@simpli/vue-modal'

$modal.open('myModal')
```

## Reactive Visibility
```html
<a @click="message = 'hello'">Hi</a>
<modal v-model="message">{{ message }}</modal>
```
```typescript
data() {
  return {
    message: null
  }
}
```

## Other props
```html
<modal
  name="myModal"
  title="Modal Title"
  innerClass="aCssClassAppliedToTheModalWhiteFrame"
  effect="vueTransitionCssClass"
  backgroundEffect="vueTransitionCssClassForTheBackground"
  :closable="true"
  :closeOutside="true"
  @open="myOpenListener"
  @close="myCloseListener"
>
  {{ message }}
</modal>
```

## $modal Methods
```typescript
// opens the modal with a optional payload
$modal.open('modalName', { anyObject: 'as payload for the open event' })

// closes the modal
$modal.close('modalName')

// toggles the modal state, open-to-closed or closed-to-open
$modal.toggle('modalName', { anyObject: 'as payload for the open event' })

// closes all modals
$modal.closeAll()
```
npm package: @simpli/vue-render-schema
Description: Vue component to conditionally apply the behaviour described by Meta-Schema
Author: gil
Latest version: 1.3.1

# Vue-Render-Schema

Vue component to conditionally apply the behaviour described by [Meta-Schema](https://github.com/simplitech/meta-schema)

# Install
```
npm i @simpli/vue-render-schema @simpli/meta-schema
```

## Import
```typescript
import Vue from 'vue'
import VueRenderSchema from '@simpli/vue-render-schema'

Vue.use(VueRenderSchema)
```

## Usage
```html
<render-schema
  v-model="myModel"
  :schema="mySchema"
  field="title"
/>
```
On code:
```typescript
data() {
  return {
    myModel = new MyModel()
    mySchema = new MySchema()
  }
}
```
And as documented on [Meta-Schema](https://github.com/simplitech/meta-schema), define your model and schema like this:
```typescript
class MyModel {
  title: string | null = null
  description: string | null = null
}

class MySchema extends Schema {
  // create a function to translate your field names, 
  // my translation only put it on uppercase
  translateFrom = (fieldName: string) => fieldName.toUpperCase()

  // declare the fieldSet
  readonly fieldSet: FieldSet<MyModel> = {
    // our first field is 'title', is a FieldComponent
    title: (schema): FieldComponent => ({
      // on "is" you may put the component class to render the fieldset
      is: MyComponent,
      // on "bind" you can put any prop
      bind: {
        label: this.translateFrom(schema.fieldName),
        class: 'my-class',
      },
    }),
  }
}
```

## Overriding
You can always override a property on `render-schema` declaration. So following the previous example, if you declare your render-schema like this:
```html
<render-schema
  v-model="myModel"
  :schema="mySchema"
  field="title"
  label="overriding label"
  anotherProp="something here"
/>
```
The output component will be this:
```html
<my-component v-model="myModel.title" label="overriding label" class="my-class" anotherProp="something here" />
```

## Using converters
To avoid having to make the same getters/setters or computed properties multiple times you can declare a special property
for conversion. Just make a converter object like this: 
```javascript
myConverter = {
  from: function(val) {
    return String(val)
  },
  to: function(val) {
    return Number(val)
  }
}
```

And use it on schema:
```javascript
class MySchema extends Schema {
  readonly fieldSet: FieldSet<MyModel> = {
    age: (schema): FieldComponent => ({
      is: MyComponent,
      bind: {
        converter: myConverter,
        class: 'my-class',
      },
    }),
  }
}
```
The output component will be something like this:
```html
<my-component :value="myConverter.from(myModel.title)" @input="myModel.title = myConverter.to($event)" label="TITLE" class="my-class" />
```
npm package: @simpli/web-bus
Description: Simple bus event controller
Author: ftgibran
Latest version: 1.0.0

# web-bus

> Simple bus event controller

[![NPM](https://img.shields.io/npm/v/web-bus.svg)](https://www.npmjs.com/package/web-bus) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save web-bus
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from 'web-bus'
import 'web-bus/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [ftgibran](https://github.com/ftgibran)