Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including global-winery with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var globalWinery = require("global-winery")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

global-winery v1.0.18

global-winery for grape, a global frontend

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free