global-winery

global-winery for grape, a global frontend

Usage no npm install needed!

<script type="module">
  import globalWinery from 'https://cdn.skypack.dev/global-winery';
</script>

README

global-winery

global-winery for grape, a global frontend

NPM
JavaScript Style Guide

License

Issues

minified_size

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