UNPKG

design-tool-kit-react-js

Version:

Library for faster design implementation

861 lines (705 loc) 26 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Carousel = void 0; var _react = _interopRequireWildcard(require("react")); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var Carousel = /*#__PURE__*/ function (_Component) { _inherits(Carousel, _Component); function Carousel(props) { var _this; _classCallCheck(this, Carousel); _this.state = { index: 0 }; return _possibleConstructorReturn(_this); } _createClass(Carousel, [{ key: "next", value: function next() { console.log('next'); } }, { key: "render", value: function render() { return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("button", null, "prev"), _react["default"].createElement("div", null, this.props.children[0]), _react["default"].createElement("button", { onClick: next }, "next")); } }]); return Carousel; }(_react.Component); exports.Carousel = Carousel; "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Carousel = exports.ProfileBanner = exports.Link = exports.Footer = exports.Gallery = exports.Section = exports.Layout = exports.ProjectPage = exports.TextContent = exports.AngularLabel = exports.ReactLabel = exports.MobileLabel = exports.NodeJSLabel = exports.ExpressLabel = exports.MongoDBLabel = exports.FlutterLabel = exports.SketchLabel = exports.Label = exports.OtherComponent = exports.DummyComponent = void 0; var _react = _interopRequireWildcard(require("react")); var _fa = require("react-icons/fa"); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var DummyComponent = /*#__PURE__*/ function (_Component) { _inherits(DummyComponent, _Component); function DummyComponent() { _classCallCheck(this, DummyComponent); return _possibleConstructorReturn(this, _getPrototypeOf(DummyComponent).apply(this, arguments)); } _createClass(DummyComponent, [{ key: "render", value: function render() { return _react["default"].createElement("div", null, "I am a dummy react npm module"); } }]); return DummyComponent; }(_react.Component); exports.DummyComponent = DummyComponent; var OtherComponent = /*#__PURE__*/ function (_Component2) { _inherits(OtherComponent, _Component2); function OtherComponent() { _classCallCheck(this, OtherComponent); return _possibleConstructorReturn(this, _getPrototypeOf(OtherComponent).apply(this, arguments)); } _createClass(OtherComponent, [{ key: "render", value: function render() { return _react["default"].createElement("div", null, "I am another react npm module"); } }]); return OtherComponent; }(_react.Component); exports.OtherComponent = OtherComponent; var Label = /*#__PURE__*/ function (_Component3) { _inherits(Label, _Component3); function Label() { _classCallCheck(this, Label); return _possibleConstructorReturn(this, _getPrototypeOf(Label).apply(this, arguments)); } _createClass(Label, [{ key: "render", value: function render() { return _react["default"].createElement("span", { style: { color: "#F6F6F6", backgroundColor: this.props.color || "white", padding: ".5em", fontWeight: "bold", marginRight: "2em", marginBottom: "1em", borderRadius: ".3em", fontSize: "1.2em" }, className: "stroked" }, this.props.children); } }]); return Label; }(_react.Component); exports.Label = Label; var SketchLabel = /*#__PURE__*/ function (_Component4) { _inherits(SketchLabel, _Component4); function SketchLabel() { _classCallCheck(this, SketchLabel); return _possibleConstructorReturn(this, _getPrototypeOf(SketchLabel).apply(this, arguments)); } _createClass(SketchLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "#F1CA58" }, _react["default"].createElement(_fa.FaSketch, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Sketch"); } }]); return SketchLabel; }(_react.Component); exports.SketchLabel = SketchLabel; var FlutterLabel = /*#__PURE__*/ function (_Component5) { _inherits(FlutterLabel, _Component5); function FlutterLabel() { _classCallCheck(this, FlutterLabel); return _possibleConstructorReturn(this, _getPrototypeOf(FlutterLabel).apply(this, arguments)); } _createClass(FlutterLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "#3FA9F5" }, "Flutter"); } }]); return FlutterLabel; }(_react.Component); exports.FlutterLabel = FlutterLabel; var MongoDBLabel = /*#__PURE__*/ function (_Component6) { _inherits(MongoDBLabel, _Component6); function MongoDBLabel() { _classCallCheck(this, MongoDBLabel); return _possibleConstructorReturn(this, _getPrototypeOf(MongoDBLabel).apply(this, arguments)); } _createClass(MongoDBLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "green" }, _react["default"].createElement(_fa.FaDatabase, { style: { fontWeight: "bold", marginRight: ".5em" } }), "MongoDB"); } }]); return MongoDBLabel; }(_react.Component); exports.MongoDBLabel = MongoDBLabel; var ExpressLabel = /*#__PURE__*/ function (_Component7) { _inherits(ExpressLabel, _Component7); function ExpressLabel() { _classCallCheck(this, ExpressLabel); return _possibleConstructorReturn(this, _getPrototypeOf(ExpressLabel).apply(this, arguments)); } _createClass(ExpressLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "#323232" }, _react["default"].createElement(_fa.FaServer, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Express"); } }]); return ExpressLabel; }(_react.Component); exports.ExpressLabel = ExpressLabel; var NodeJSLabel = /*#__PURE__*/ function (_Component8) { _inherits(NodeJSLabel, _Component8); function NodeJSLabel() { _classCallCheck(this, NodeJSLabel); return _possibleConstructorReturn(this, _getPrototypeOf(NodeJSLabel).apply(this, arguments)); } _createClass(NodeJSLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "green" }, _react["default"].createElement(_fa.FaNodeJs, { style: { fontWeight: "bold", marginRight: ".5em" } }), "NodeJS"); } }]); return NodeJSLabel; }(_react.Component); exports.NodeJSLabel = NodeJSLabel; var MobileLabel = /*#__PURE__*/ function (_Component9) { _inherits(MobileLabel, _Component9); function MobileLabel() { _classCallCheck(this, MobileLabel); return _possibleConstructorReturn(this, _getPrototypeOf(MobileLabel).apply(this, arguments)); } _createClass(MobileLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "#505050" }, _react["default"].createElement(_fa.FaMobile, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Mobile Development"); } }]); return MobileLabel; }(_react.Component); exports.MobileLabel = MobileLabel; var ReactLabel = /*#__PURE__*/ function (_Component10) { _inherits(ReactLabel, _Component10); function ReactLabel() { _classCallCheck(this, ReactLabel); return _possibleConstructorReturn(this, _getPrototypeOf(ReactLabel).apply(this, arguments)); } _createClass(ReactLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "deepskyblue" }, _react["default"].createElement(_fa.FaReact, { style: { fontWeight: "bold", marginRight: ".5em" } }), "React"); } }]); return ReactLabel; }(_react.Component); exports.ReactLabel = ReactLabel; var AngularLabel = /*#__PURE__*/ function (_Component11) { _inherits(AngularLabel, _Component11); function AngularLabel() { _classCallCheck(this, AngularLabel); return _possibleConstructorReturn(this, _getPrototypeOf(AngularLabel).apply(this, arguments)); } _createClass(AngularLabel, [{ key: "render", value: function render() { return _react["default"].createElement(Label, { color: "red" }, _react["default"].createElement(_fa.FaAngular, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Angular"); } }]); return AngularLabel; }(_react.Component); exports.AngularLabel = AngularLabel; var TextContent = /*#__PURE__*/ function (_Component12) { _inherits(TextContent, _Component12); function TextContent() { _classCallCheck(this, TextContent); return _possibleConstructorReturn(this, _getPrototypeOf(TextContent).apply(this, arguments)); } _createClass(TextContent, [{ key: "render", value: function render() { return _react["default"].createElement("p", null, this.props.children); } }]); return TextContent; }(_react.Component); exports.TextContent = TextContent; var ProjectPage = /*#__PURE__*/ function (_Component13) { _inherits(ProjectPage, _Component13); function ProjectPage() { _classCallCheck(this, ProjectPage); return _possibleConstructorReturn(this, _getPrototypeOf(ProjectPage).apply(this, arguments)); } _createClass(ProjectPage, [{ key: "render", value: function render() { return _react["default"].createElement(Layout, null, _react["default"].createElement("div", { style: { width: "60vw", marginBottom: "4em" } }, _react["default"].createElement("a", { href: "/" }, _react["default"].createElement("h3", { style: { display: "inline" } }, _react["default"].createElement("div", { style: { width: "20%", display: "inline", color: "#F6F6F6" } }, _react["default"].createElement(_fa.FaArrowLeft, null), " Main"))), _react["default"].createElement("h2", { style: { display: "inline" }, className: "stroked" }, _react["default"].createElement("div", { style: { color: "#F6F6F6", textAlign: "center", backgroundColor: "#FAAB62", width: "80%", padding: ".5em", display: "inline", "float": "right", borderRadius: ".3em" } }, "RCM Global Solutions Mobile App"))), _react["default"].createElement("div", { style: { width: "60%", "float": "right" } }, _react["default"].createElement("div", { style: { display: "block", marginBottom: "1em" } }, _react["default"].createElement("span", { style: { color: "#F6F6F6", backgroundColor: "#3FA9F5", padding: ".5em", fontWeight: "bold", marginRight: "2em", marginBottom: "1em", borderRadius: ".3em" } }, "Flutter"), _react["default"].createElement("span", { style: { color: "#F6F6F6", backgroundColor: "#F1CA58", padding: ".5em", fontWeight: "bold", marginRight: "2em", marginBottom: "1em", borderRadius: ".3em" } }, _react["default"].createElement(_fa.FaSketch, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Sketch"), _react["default"].createElement("span", { style: { color: "#F6F6F6", backgroundColor: "#505050", padding: ".5em", fontWeight: "bold", marginBottom: "1em", borderRadius: ".3em" } }, _react["default"].createElement(_fa.FaMobile, { style: { fontWeight: "bold", marginRight: ".5em" } }), "Mobile Development")), _react["default"].createElement(Section, null, _react["default"].createElement("p", null, "Created app for Solar installers representaion company, Using Flutter for fast cross-platform development")))); } }]); return ProjectPage; }(_react.Component); exports.ProjectPage = ProjectPage; var Layout = /*#__PURE__*/ function (_Component14) { _inherits(Layout, _Component14); function Layout() { _classCallCheck(this, Layout); return _possibleConstructorReturn(this, _getPrototypeOf(Layout).apply(this, arguments)); } _createClass(Layout, [{ key: "render", value: function render() { return _react["default"].createElement("div", null, _react["default"].createElement("div", { style: { margin: "0 auto", maxWidth: "80%", padding: "0px 1.0875rem 1.45rem", paddingTop: "3em" } }, _react["default"].createElement("div", { style: { width: "30%", borderRadius: 20 } }, this.props.children[0]), _react["default"].createElement("main", { style: { maxWidth: "70%", "float": "right" } }, this.props.children[1]))); } }]); return Layout; }(_react.Component); exports.Layout = Layout; var Section = /*#__PURE__*/ function (_Component15) { _inherits(Section, _Component15); function Section() { _classCallCheck(this, Section); return _possibleConstructorReturn(this, _getPrototypeOf(Section).apply(this, arguments)); } _createClass(Section, [{ key: "render", value: function render() { return _react["default"].createElement("section", { style: { backgroundColor: "#171e27", color: "white", padding: "1em", marginBottom: "2em", borderRadius: ".5em", fontSize: "1.2em", fontWeight: "bold", border: "1px solid #323232" } }, this.props.children); } }]); return Section; }(_react.Component); exports.Section = Section; var Gallery = /*#__PURE__*/ function (_Component16) { _inherits(Gallery, _Component16); function Gallery() { _classCallCheck(this, Gallery); return _possibleConstructorReturn(this, _getPrototypeOf(Gallery).apply(this, arguments)); } _createClass(Gallery, [{ key: "render", value: function render() { return _react["default"].createElement(Carousel, { style: { width: "100%", height: "50vh", margin: "2em 0" } }, this.props.children); } }]); return Gallery; }(_react.Component); exports.Gallery = Gallery; var Footer = /*#__PURE__*/ function (_Component17) { _inherits(Footer, _Component17); function Footer() { _classCallCheck(this, Footer); return _possibleConstructorReturn(this, _getPrototypeOf(Footer).apply(this, arguments)); } _createClass(Footer, [{ key: "render", value: function render() { return _react["default"].createElement("div", { style: { margin: "1em 0", "float": "right" } }, _react["default"].createElement(Section, null, "made with \u2665\uFE0F and", _react["default"].createElement("a", { href: "https://www.npmjs.com/package/design-tool-kit-react-js", style: { marginLeft: ".3em", color: "#0db7ed" } }, "design-tool-kit-react-js"))); } }]); return Footer; }(_react.Component); exports.Footer = Footer; var Link = /*#__PURE__*/ function (_Component18) { _inherits(Link, _Component18); function Link() { _classCallCheck(this, Link); return _possibleConstructorReturn(this, _getPrototypeOf(Link).apply(this, arguments)); } _createClass(Link, [{ key: "render", value: function render() { return _react["default"].createElement("div", { style: { margin: "1em 0", "float": "right" } }, _react["default"].createElement(Section, null, "made with \u2665\uFE0F and", _react["default"].createElement("a", { href: "https://www.npmjs.com/package/design-tool-kit-react-js", style: { marginLeft: ".3em", color: "#0db7ed" } }, "design-tool-kit-react-js"))); } }]); return Link; }(_react.Component); exports.Link = Link; var ProfileBanner = /*#__PURE__*/ function (_Component19) { _inherits(ProfileBanner, _Component19); function ProfileBanner() { _classCallCheck(this, ProfileBanner); return _possibleConstructorReturn(this, _getPrototypeOf(ProfileBanner).apply(this, arguments)); } _createClass(ProfileBanner, [{ key: "render", value: function render() { return _react["default"].createElement("div", { style: { position: "fixed", backgroundColor: "#323232", padding: "1em", color: "white", width: "17%", borderRadius: "1em", border: "1px solid #fff" } }, _react["default"].createElement("div", { style: { borderRadius: "50%" } }, this.props.children), _react["default"].createElement("section", { style: { textAlign: "center", marginTop: "1em", fontWeight: "bold", fontSize: "24px" } }, "Farid Garciayala"), _react["default"].createElement("section", { style: { textAlign: "center", marginTop: "1em", fontWeight: "bold", fontSize: "24px" } }, _react["default"].createElement("a", { href: "https://www.linkedin.com/in/farid-garciayala-6a9777a7/", style: { marginRight: "1em" } }, _react["default"].createElement(_fa.FaLinkedinIn, { style: { color: "#0db7ed" } })), _react["default"].createElement("a", { href: "https://github.com/faridg18", style: { marginRight: "1em" } }, _react["default"].createElement(_fa.FaGithub, null)), _react["default"].createElement("a", { href: "https://www.npmjs.com/~faridg18" }, _react["default"].createElement(_fa.FaNpm, { style: { color: "red" } }))), _react["default"].createElement("section", { style: { textAlign: "center", marginTop: "2em", fontWeight: "bold", fontSize: "24x" } }, _react["default"].createElement("p", null, "Hard-working professional with 1.5 years of experience and a proven knowledge of experimental design, methods design, and product design. Aiming to leverage my skills to successfully fill the Full-Stack Software Engineer role at your company."))); } }]); return ProfileBanner; }(_react.Component); // need to work on position of arrows exports.ProfileBanner = ProfileBanner; var Carousel = /*#__PURE__*/ function (_Component20) { _inherits(Carousel, _Component20); function Carousel(props) { var _this; _classCallCheck(this, Carousel); _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props)); _this.state = { index: 0 }; _this.next = _this.next.bind(_assertThisInitialized(_this)); _this.previous = _this.previous.bind(_assertThisInitialized(_this)); return _this; } _createClass(Carousel, [{ key: "previous", value: function previous() { var _this2 = this; this.setState(function (state) { return { index: Math.abs((state.index - 1) % (_this2.props.children.length || 1)) }; }); } }, { key: "next", value: function next() { var _this3 = this; this.setState(function (state) { return { index: (state.index + 1) % (_this3.props.children.length || 1) }; }); } }, { key: "render", value: function render() { return _react["default"].createElement("div", { style: this.props.style }, _react["default"].createElement("div", { style: { position: "absolute", height: "100%", width: "100%" } }, _react["default"].createElement(_fa.FaArrowLeft, { onClick: this.previous, style: { color: "white", left: 0, top: 0 } }), _react["default"].createElement(_fa.FaArrowRight, { onClick: this.next, style: { color: "white", right: 0, top: 0 } })), _react["default"].createElement("div", null, this.props.children[this.state.index])); } }]); return Carousel; }(_react.Component); exports.Carousel = Carousel;