diff --git a/smart-hut/.gitignore b/smart-hut/.gitignore index 4d29575..7815e58 100644 --- a/smart-hut/.gitignore +++ b/smart-hut/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +# idea +.idea diff --git a/smart-hut/package-lock.json b/smart-hut/package-lock.json index 1a5ee8b..cb13d46 100644 --- a/smart-hut/package-lock.json +++ b/smart-hut/package-lock.json @@ -1347,11 +1347,39 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@semantic-ui-react/event-stack": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.1.tgz", + "integrity": "sha512-SA7VOu/tY3OkooR++mm9voeQrJpYXjJaMHO1aFCcSouS2xhqMR9Gnz0LEGLOR0h9ueWPBKaQzKIrx3FTTJZmUQ==", + "requires": { + "exenv": "^1.2.2", + "prop-types": "^15.6.2" + } + }, "@sheerun/mutationobserver-shim": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==" }, + "@stardust-ui/react-component-event-listener": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz", + "integrity": "sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==", + "requires": { + "@babel/runtime": "^7.1.2", + "prop-types": "^15.7.2" + } + }, + "@stardust-ui/react-component-ref": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz", + "integrity": "sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==", + "requires": { + "@babel/runtime": "^7.1.2", + "prop-types": "^15.7.2", + "react-is": "^16.6.3" + } + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -3124,6 +3152,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -3522,6 +3555,15 @@ "sha.js": "^2.4.8" } }, + "create-react-context": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", + "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==", + "requires": { + "gud": "^1.0.0", + "warning": "^4.0.3" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4948,6 +4990,11 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -7863,6 +7910,11 @@ "object.assign": "^4.1.0" } }, + "keyboard-key": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz", + "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8159,6 +8211,14 @@ "object-visit": "^1.0.0" } }, + "material-ui-image": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/material-ui-image/-/material-ui-image-3.2.3.tgz", + "integrity": "sha512-dXU9Hj7l0OvmG5s39gwmBuZdYvf5kn17tMMPYg5Hpu4vgnSdfoGkE8kt5J449BWmZZaLMTf5pExcz80Du9dwog==", + "requires": { + "prop-types": "^15.5.8" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -10698,6 +10758,20 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-popper": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", + "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "^0.3.0", + "deep-equal": "^1.1.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + } + }, "react-router": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", @@ -11388,6 +11462,24 @@ "node-forge": "0.9.0" } }, + "semantic-ui-react": { + "version": "0.88.2", + "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz", + "integrity": "sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==", + "requires": { + "@babel/runtime": "^7.1.2", + "@semantic-ui-react/event-stack": "^3.1.0", + "@stardust-ui/react-component-event-listener": "~0.38.0", + "@stardust-ui/react-component-ref": "~0.38.0", + "classnames": "^2.2.6", + "keyboard-key": "^1.0.4", + "lodash": "^4.17.15", + "prop-types": "^15.7.2", + "react-is": "^16.8.6", + "react-popper": "^1.3.4", + "shallowequal": "^1.1.0" + } + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -11577,6 +11669,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -12661,6 +12758,11 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -12962,6 +13064,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/smart-hut/package.json b/smart-hut/package.json index 649f9fa..8a47c6f 100644 --- a/smart-hut/package.json +++ b/smart-hut/package.json @@ -8,11 +8,14 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "classnames": "^2.2.6", + "material-ui-image": "^3.2.3", "react": "^16.12.0", "react-dom": "^16.12.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", - "react-scripts": "3.4.0" + "react-scripts": "3.4.0", + "semantic-ui-react": "^0.88.2" }, "scripts": { "start": "react-scripts start", diff --git a/smart-hut/public/header-pic.jpg b/smart-hut/public/header-pic.jpg new file mode 100644 index 0000000..cd3d83a Binary files /dev/null and b/smart-hut/public/header-pic.jpg differ diff --git a/smart-hut/public/img/banner.jpg b/smart-hut/public/img/banner.jpg new file mode 100644 index 0000000..b4a25db Binary files /dev/null and b/smart-hut/public/img/banner.jpg differ diff --git a/smart-hut/public/img/header.jpg b/smart-hut/public/img/header.jpg new file mode 100644 index 0000000..b0d5cfa Binary files /dev/null and b/smart-hut/public/img/header.jpg differ diff --git a/smart-hut/public/img/logo.png b/smart-hut/public/img/logo.png new file mode 100644 index 0000000..16b0486 Binary files /dev/null and b/smart-hut/public/img/logo.png differ diff --git a/smart-hut/public/index.html b/smart-hut/public/index.html index aa069f2..c6f0780 100644 --- a/smart-hut/public/index.html +++ b/smart-hut/public/index.html @@ -1,21 +1,22 @@ - - - - - - - - - - - React App - - - -
- - - + + + \ No newline at end of file diff --git a/smart-hut/public/style.css b/smart-hut/public/style.css new file mode 100644 index 0000000..c0c2326 --- /dev/null +++ b/smart-hut/public/style.css @@ -0,0 +1,6 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +/*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/ diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index c882f32..da7d978 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -5,12 +5,7 @@ import Routes from './Routes'; function App() { return ( -
-
- Go Home -
-
); } diff --git a/smart-hut/src/LogIn.js b/smart-hut/src/LogIn.js deleted file mode 100644 index e69de29..0000000 diff --git a/smart-hut/src/Routes.js b/smart-hut/src/Routes.js index 62eea3a..0afa599 100644 --- a/smart-hut/src/Routes.js +++ b/smart-hut/src/Routes.js @@ -1,11 +1,15 @@ import React from 'react'; -import {Route, Switch } from 'react-router-dom'; +import {Route, Switch} from 'react-router-dom'; import Home from './views/Home'; +import Login from "./views/Login"; +import Signup from "./views/Signup"; export default function Routes() { - return ( - - - - ) + return ( + + + + + + ) } diff --git a/smart-hut/src/SignUp.js b/smart-hut/src/SignUp.js deleted file mode 100644 index e69de29..0000000 diff --git a/smart-hut/src/components/Banner.js b/smart-hut/src/components/Banner.js new file mode 100644 index 0000000..7de0d7f --- /dev/null +++ b/smart-hut/src/components/Banner.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; +import Link from '@material-ui/core/Link'; + +const useStyles = makeStyles(theme => ({ + mainFeaturedPost: { + position: 'relative', + backgroundColor: theme.palette.grey[800], + color: theme.palette.common.white, + marginBottom: theme.spacing(4), + backgroundImage: 'img/banner.jpg', + backgroundSize: 'cover', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + }, + overlay: { + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0, + backgroundColor: 'rgba(0,0,0,.3)', + }, + mainFeaturedPostContent: { + position: 'relative', + padding: theme.spacing(3), + [theme.breakpoints.up('md')]: { + padding: theme.spacing(6), + paddingRight: 0, + }, + }, +})); + + +export default function Banner(props) { + const classes = useStyles(); + const { post } = props; + + return ( + + {/* Increase the priority of the hero background image */} + {{post.imageText}} +
+ + +
+ + {post.title} + + + {post.description} + + + {post.linkText} + +
+ + + + ); +} + +Banner.propTypes = { + post: PropTypes.object, +}; \ No newline at end of file diff --git a/smart-hut/src/components/Footer.js b/smart-hut/src/components/Footer.js new file mode 100644 index 0000000..226ee05 --- /dev/null +++ b/smart-hut/src/components/Footer.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function Footer() { + return( +
+

This is the footer

+
+ ) +} diff --git a/smart-hut/src/components/Header.js b/smart-hut/src/components/Header.js new file mode 100644 index 0000000..db3ca02 --- /dev/null +++ b/smart-hut/src/components/Header.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { makeStyles } from '@material-ui/core/styles'; +import Toolbar from '@material-ui/core/Toolbar'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import SearchIcon from '@material-ui/icons/Search'; +import Typography from '@material-ui/core/Typography'; +import Link from '@material-ui/core/Link'; + +const useStyles = makeStyles(theme => ({ + toolbar: { + borderBottom: `1px solid ${theme.palette.divider}`, + }, + toolbarTitle: { + flex: 1, + }, + toolbarSecondary: { + justifyContent: 'space-between', + overflowX: 'auto', + }, + toolbarLink: { + padding: theme.spacing(1), + flexShrink: 0, + }, +})); + +export default function Header(props) { + const classes = useStyles(); + const { sections, title } = props; + + return ( + + + + {title} + + + {sections.map(section => ( + + {section.title} + + ))} + + + + + + + + ); +} + +Header.propTypes = { + sections: PropTypes.array, + title: PropTypes.string, +}; \ No newline at end of file diff --git a/smart-hut/src/index.js b/smart-hut/src/index.js index b3142b0..df2ab27 100644 --- a/smart-hut/src/index.js +++ b/smart-hut/src/index.js @@ -5,13 +5,10 @@ import * as serviceWorker from './serviceWorker'; //React Router import { BrowserRouter as Router} from 'react-router-dom'; + ReactDOM.render( , document.getElementById('root')); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index 48a7194..c73c137 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -1,10 +1,294 @@ -import React from 'react'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { + Button, + Container, + Divider, + Grid, + Header, + Icon, + Image, + List, + Menu, + Responsive, + Segment, + Sidebar, + Visibility, +} from 'semantic-ui-react'; -/** - * @return {string} - */ -export default function Home(){ - return( - "Hello World" - ) +// Heads up! +// We using React Static to prerender our docs with server side rendering, this is a quite simple solution. +// For more advanced usage please check Responsive docs under the "Usage" section. +const getWidth = () => { + const isSSR = typeof window === 'undefined'; + return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth; } + +/* eslint-disable react/no-multi-comp */ +/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for + * such things. + */ +const HomepageHeading = ({ mobile }) => ( + +
+
+ + +) + +HomepageHeading.propTypes = { + mobile: PropTypes.bool, +} + +class DesktopContainer extends Component { + state = {}; + hideFixedMenu = () => this.setState({ fixed: false }) + showFixedMenu = () => this.setState({ fixed: true }) + + render() { + const { children } = this.props + const { fixed } = this.state + + return ( + + + + + + + Home + + + + + + + + + + + + + {children} + + ) + } +} + +DesktopContainer.propTypes = { + children: PropTypes.node, +} + +class MobileContainer extends Component { + state = {} + + handleSidebarHide = () => this.setState({ sidebarOpened: false }) + + handleToggle = () => this.setState({ sidebarOpened: true }) + + render() { + const { children } = this.props; + const { sidebarOpened } = this.state; + + return ( + + + + Home + + Log in + Sign Up + + + + + + + + + + + + + + + + + + + {children} + + + ) + } +} + +MobileContainer.propTypes = { + children: PropTypes.node, +} + +const ResponsiveContainer = ({ children }) => ( +
+ {children} + {children} +
+) + +ResponsiveContainer.propTypes = { + children: PropTypes.node, +} + +const Home = () => ( + + + + + +
+ We help you keep your home connected +
+

+ In a few steps your home will be fully connected with SmartHut. +

+
+ We Make Bananas That Can Dance +
+

+ Yes that's right, you thought it was the stuff of dreams, but even bananas can be + bioengineered. +

+ + + + + + + + + + + + + + + +
+ Breaking The Grid, Grabs Your Attention +
+

+ Instead of focusing on content creation and hard work, we have learned how to master the + art of doing nothing by providing massive amounts of whitespace and generic content that + can seem massive, monolithic and worth your attention. +

+ + + + + + + + + +
+ + Sitemap + Contact Us + Religious Ceremonies + Gazebo Plans + + + +
+ + Banana Pre-Order + DNA FAQ + How To Access + Favorite X-Men + + + +
+ SmartHut +
+

+ Keep your Home connected. +

+ + + + + + +) + +export default Home; diff --git a/smart-hut/src/views/Login.js b/smart-hut/src/views/Login.js new file mode 100644 index 0000000..051847d --- /dev/null +++ b/smart-hut/src/views/Login.js @@ -0,0 +1,80 @@ +import React, {Component} from 'react'; +import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react'; + +export default class Login extends Component { + constructor(props) { + super(props); + this.state = { + logged : false, + email: "", + password : "" + }; + } + + handleLogin = (e) => { + // TODO Login should be handled here + console.log(this.state); + }; + + onChangeHandler = (event) => { + let nam = event.target.name; + let val = event.target.value; + this.setState({[nam]: val}); + }; + + toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme })); + + render() { + return ( + + + + +
+ Log-in to SmartHut +
+
+ + + + + + + +

Forgot Password?

+

New to us? Sign Up

+ +
+ + + ) + } +} diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js new file mode 100644 index 0000000..db1fd6c --- /dev/null +++ b/smart-hut/src/views/Signup.js @@ -0,0 +1,10 @@ +import React, {Component} from 'react'; + + +export default class Signup extends Component{ + render() { + return( + "This is the register page" + ) + } +}