global-winery

global-winery

global-winery for grape, a global frontend

sammyrp.com/global-winery

Warning

This Library is currently incomplete and is in the process of being built

Install

npm install --save global-winery

Usage

import React, { Component } from 'react'

import Button from 'global-winery'

class Example extends Component {
  render() {
    return (
      <Button
        text='Sign Up'
        small={true}
        event={() => alert('Button Clicked!')}
        hover={true}
      />
    )
  }
}

Running Locally

git clone https://github.com/SammyRobensParadise/global-winery.git

cd raindrop && npm start

cd raindrop/example && npm start

What is available:

1. Buttons
2. Chevrons
3. TextInputs
4. Icons
   

Buttons

Button

Button.propTypes = {
  text: PropTypes.string,
  hover: PropTypes.bool,
  invert: PropTypes.bool,
  small: PropTypes.bool,
  dropShadow: PropTypes.bool,
  event: PropTypes.func
}

MultiButton

MultiButton.propTypes = {
  textLeft: PropTypes.string,
  textRight: PropTypes.string,
  rightEvent: PropTypes.func,
  leftEvent: PropTypes.func,
  leftFocus: PropTypes.bool,
  rightFocus: PropTypes.bool,
  dropShadow: PropTypes.bool
}

Chevrons

Chevron

Chevron.propTypes = {
  direction: PropTypes.string,
  color: PropTypes.string
}

Directions:
UP, DOWN, LEFT, RIGHT

Text Inputs

Fixed Input

FixedInput.propTypes = {
  type: PropTypes.string,
  size: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number
}

Single Input

SingleInput.propTypes = {
  type: PropTypes.string,
  size: PropTypes.number,
  scrollAndResize: PropTypes.bool
}

Icons

See all icons

General Icons

Icon.propTypes = {
  type: PropTypes.element,
  hoverable: PropTypes.bool,
  circle: PropTypes.bool,
  square: PropTypes.bool,
  color: PropTypes.string,
  event: PropTypes.func,
  children: PropTypes.component
}

Icon Child

CodeBlock.propTypes = {
  color: PropTypes.string
}

Usage

.
.
.
render(){
  const children = <CodeBlock color={'#000000'} />
  return(
    <Icon
      type={children}
      event={()  => alert('🚨 watch out!')}
      circle
      color={'#adadad'}
    />
  )
}

Icon List

1. Code Block
2. Refresh Arrow
3. Back Arrow
4. Forward Arrow
5. Export and Share
6. More Dots
7. Star
8. Exit Icon
9. Home Icon
10. Add Icon
11. Profile Badge Icon
12. InfoIcon
13. FullScreenIcon
14. DownloadIcon
15. ForkIcon
16. DataIcon
17. CodeEditorIcon
18. FileIcon
19. CodepenIcon
20. TextboxIcon
21. ConsoleIcon
22. PhotovideoIcon
23. DiagramIcon

More To Come... :)

Creator

Webiste
Portfolio

License

MIT © SammyRobensParadise