olimpo v1.1.4

olimpo

React Component Framework

Install

npm install --save olimpo

Usage

Button

import React, { Component } from 'react'
import { Button } from 'olimpo'

class Example extends Component {

  onClick = () => {
    console.log("On click event");
  }

  onMouseOver = () => {
    console.log("On mouse over event");
  }

  render() {
    return <Button
        text='My text' 
        size='large'
        color='red'
        textColor='yellow'
        shape='round'
        disabled={false}
        onClick={this.onClick()}
        onMouseOver={this.onMouseOver()}
        
     />
  }
}

Obs.: When use materialui or antd framework component, all properties available on Material-UI and Ant Design documentation can be use.

Input

import React, { Component } from 'react'
import { Input } from 'olimpo'

class Example extends Component {

  onClick = () => {
    console.log("On click event");
  }

  onMouseOver = () => {
    console.log("On mouse over event");
  }

  onChange = () => {
    console.log("On change event");
  }

  render() {
    return <Input
        label='This is an example'
        placeholder='Input Example' 
        backgroundColor='#cccc'
        size='large'
        shape='round'
        disabled={false}
        error={false}
        onClick={this.onClick()}
        onMouseOver={this.onMouseOver()}
        onChange={this.onChange()}
     />
  }
}

Obs.: When use materialui or antd framework component, all properties available on Material-UI and Ant Design documentation can be use.

Checkbox

import React, { Component } from 'react'
import { Checkbox } from 'olimpo'

class Example extends Component {

  onClick = () => {
    console.log("On click event");
  }

  onChange = () => {
    console.log("On change event");
  }

  render() {
    return 
      <Checkbox 
        label='This is an example' 
        backgroundColor='#cccc'
        size='medium'
        shape='round'
        disabled={false}
        onClick={this.onClick()}
        />
  }
}

Obs.: When use materialui or antd framework component, all properties available on Material-UI and Ant Design documentation can be use.

Avatar

import React, { Component } from 'react'
import { Avatar } from 'olimpo'

class Example extends Component {

  onMouseOver = () => {
    console.log("On mouse over event");
  }

  render() {
    return 
      <Avatar 
        type='text'
        value='Olimpo'
        fontColor='white'
        backgroundColor='#0891a1'
        shape='circle' 
        size='large'
        onMouseOver={this.onMouseOver()} 
      />
  }
}

Obs.: When use materialui or antd framework component, all properties available on Material-UI and Ant Design documentation can be use.

Contributing Guide

Olimpo welcome all contributions. Please read contributing guide first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, follow the develop patterns that already exist in other components and have a good time! :smile: For every new component, it must exist on others frameworks! Olimpo is the house of all gods, can you imagine if only Zeus live there? :stuck_out_tongue_winking_eye:

Development

To start develpment in olimpo there is a few things that you need to do in order to get it running on your machine. First setup you environment:

cd olimpo/
npm install

To create a new component you can run npm run create that will initialize a component class for you instead of you have to write everything from scratch.

Then you are able to start it. For development, you can start a rollup and also a example if you want to check visualy your change or new component. Jut import the module from local files, you need to import olimpo on your project then run the following commands:

npm start ./olimpo
npm start ./olimpo/example

All new component MUST be exported at index.js file.

Tests and Lint

As part of the good pratices pack, tests MUST be written for every change. Change or new components that don't have tests won't be accepted. So please, make sure tests are passing and testing every thing the right way before a pull request is open.

Also, make sure that lint are running and no errors are ocurring, this helps to implement a pattern for olimpo and it should be followed by everyone. :smile:

Documentation

For better usability and understanding, documentation is very necessary, so for every contribution that changes a component interface/property or add a new component to olimpo, it MUST have the right documentation. Add documentation location of the other frameworks as well! Check the example below:

import React, { Component } from 'react'
import MyComponent from 'olimpo'
 
class Example extends Component {
  render() {
    return <MyComponent property='myPropery'/>
  }
}

Pull requests

If you are contributign with olimpo, make sure that everything is tested and ready for be in master before you open the pull request. In pull request description, please, specify what is the change or new component that are being merged. Give every possible detail about it, this way the development team that mantains the framework can merge this as soon as possible!

License

MIT © pereiraguilherme