diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js index 4cc63bd..397413e 100644 --- a/src/components/Tabs/Tabs.js +++ b/src/components/Tabs/Tabs.js @@ -6,6 +6,7 @@ import styled from "styled-components"; const StyledTabs = styled.nav` position: relative; left: 8px; + text-align: left; `; const Tabs = ({ diff --git a/website/package-lock.json b/website/package-lock.json index 79dfe76..351771d 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -751,6 +751,27 @@ "regexpu-core": "^4.5.4" } }, + "@babel/polyfill": { + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.3.tgz", + "integrity": "sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q==", + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" + }, + "dependencies": { + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==" + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } + } + }, "@babel/preset-env": { "version": "7.4.3", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.3.tgz", @@ -908,6 +929,15 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" }, + "@fullpage/react-fullpage": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/@fullpage/react-fullpage/-/react-fullpage-0.1.13.tgz", + "integrity": "sha512-kpN98n/qTpYrR8dx/jP9pU6ry9qO99e1iU1cNSmzPAdr1PyGOfg5X2lYtbX71WlPBX66G1oFN6PMJxkelGqxyw==", + "requires": { + "@babel/polyfill": "^7.2.5", + "fullpage.js": "^3.0.4" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -2908,7 +2938,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2926,11 +2957,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2943,15 +2976,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3054,7 +3090,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3064,6 +3101,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3076,17 +3114,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3103,6 +3144,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3175,7 +3217,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3185,6 +3228,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3260,7 +3304,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3290,6 +3335,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3307,6 +3353,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3345,11 +3392,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -3453,11 +3502,6 @@ } } }, - "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.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -6906,6 +6950,11 @@ } } }, + "fullpage.js": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/fullpage.js/-/fullpage.js-3.0.4.tgz", + "integrity": "sha512-GWpud0Gvr8i4k3QySoajFevO18UBKMJ9znU3o4uaXZkKYqLtS8d1BSQoAARmYwYgBLOw3YrKAG+4LoaIokO1UA==" + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -10398,29 +10447,6 @@ "ts-pnp": "^1.0.0" } }, - "polished": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/polished/-/polished-3.2.0.tgz", - "integrity": "sha512-uXIr2Nu5SU5khDa4JwWh8q5czi4GoJf+U1za5LN59Tk0mL/W3egZrPL0H0ADXeompCp0QhmiK9zs06gw0J5m4Q==", - "requires": { - "@babel/runtime": "^7.4.2" - }, - "dependencies": { - "@babel/runtime": { - "version": "7.4.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz", - "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==", - "requires": { - "regenerator-runtime": "^0.13.2" - } - }, - "regenerator-runtime": { - "version": "0.13.2", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", - "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" - } - } - }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -12953,6 +12979,8 @@ }, "react": { "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -13096,6 +13124,8 @@ }, "react-dom": { "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", + "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -13161,6 +13191,8 @@ }, "react-scripts": { "version": "2.1.8", + "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.8.tgz", + "integrity": "sha512-mDC8fYWCyuB9VROti8OCPdHE79UEchVVZmuS/yaIs47VkvZpgZqUvzghYBswZRchqnW0aARNY8xXrzoFRhhK7A==", "requires": { "@babel/core": "7.2.2", "@svgr/webpack": "4.1.0", diff --git a/website/package.json b/website/package.json index 5f94973..3f58a4b 100644 --- a/website/package.json +++ b/website/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fullpage/react-fullpage": "^0.1.13", "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.0.0", diff --git a/website/src/App.js b/website/src/App.js index 13b2618..775504c 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -1,13 +1,108 @@ import React, { Component } from "react"; +import { BrowserRouter as Router, Route } from "react-router-dom"; +import ReactFullpage from "@fullpage/react-fullpage"; + import styled, { ThemeProvider, createGlobalStyle } from "styled-components"; -import { reset, themes, Button } from "./lib"; -import { BrowserRouter as Router, Route } from "react-router-dom"; +import { reset, themes, Button, Anchor } from "./lib"; +import Me from "./assets/images/me.jpg"; +import CD from "./assets/images/cd.png"; +import Logo from "./assets/images/logo.png"; +import Plastic from "./assets/images/plastic.jpg"; +import LogoIcon from "./assets/images/icons/logo.png"; + +import Settings from "./components/Settings"; const GlobalStyle = createGlobalStyle` ${reset} + body, html { + width: 100%; + height: 100%; + } `; +const Main = styled.main` + width: 100%; + height: 100%; + background: teal; +`; +const Section = styled.section` + width: 100%; + height: 100%; + position: relative; + text-align: center; +`; +const Hero = styled(Section)` + background-image: url(https://cdn.instructables.com/FRM/4UUR/GJQE90QG/FRM4UURGJQE90QG.LARGE.jpg); + background-size: cover; + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url(${Plastic}); + background-size: cover; + opacity: 0.6; + mix-blend-mode: screen; + } + /* &:before { + content: ""; + width: 45%; + padding-top: 45%; + position: absolute; + right: 25%; + top: 25%; + transform(-50%, -50%); + background-image: url(${CD}); + background-size: cover; + } */ +`; +const HeroImage = styled.img` + width: 60%; + max-width: 280px; +`; + +const Centered = styled.div` + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +`; +const TopBar = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 60px; + background: #050608; +`; +const Code = styled.code` + font-size: 1.4em; +`; +const MeImage = styled.img` + width: calc(100% - 3rem); + max-width: 380px; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); + margin: 3rem 0; + + transition: 0.2s all ease-in-out; + &:hover { + transform: scale(1.01); + } +`; +const StyledButton = styled(Button)` + padding: 0 0.5em; + font-weight: bold; + font-size: 1.4em; + img { + height: 28px; + margin-right: 0.25em; + margin-left: -0.125em; + } +`; class App extends Component { render() { return ( @@ -15,15 +110,54 @@ class App extends Component { <> -
- - } - /> - -
+
+ { + return ( + + + + + +
+ + +
+ npm install react95 +
+ +
+ fullpageApi.moveSectionDown()} + > + + Start + +
+
+ +
+
+ + Storybook + +
+ + Github + +
+ + ); + }} + /> +
); diff --git a/website/src/assets/images/cd.png b/website/src/assets/images/cd.png new file mode 100644 index 0000000..99b70fe Binary files /dev/null and b/website/src/assets/images/cd.png differ diff --git a/website/src/assets/images/icons/logo.png b/website/src/assets/images/icons/logo.png new file mode 100644 index 0000000..66812ab Binary files /dev/null and b/website/src/assets/images/icons/logo.png differ diff --git a/website/src/assets/images/me.jpg b/website/src/assets/images/me.jpg new file mode 100644 index 0000000..cde50d8 Binary files /dev/null and b/website/src/assets/images/me.jpg differ diff --git a/website/src/assets/images/skate.jpg b/website/src/assets/images/skate.jpg new file mode 100644 index 0000000..c92f657 Binary files /dev/null and b/website/src/assets/images/skate.jpg differ diff --git a/website/src/components/Settings.js b/website/src/components/Settings.js new file mode 100644 index 0000000..5286a49 --- /dev/null +++ b/website/src/components/Settings.js @@ -0,0 +1,74 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { + Window, + WindowContent, + WindowHeader, + Tabs, + Tab, + TabBody, + Button, + Checkbox, + Fieldset, + NumberField, + DatePicker, + Radio, + Select +} from "../lib"; + +const Wrapper = styled.div` + box-sizing: content-box; + display: inline-block; + width: 100%; + max-width: 400px; +`; +const StyledWindow = styled(Window)` + box-sizing: content-box; + width: calc(100% - 3rem); + text-align: left; +`; +const P = styled.p` + margin-bottom: 1.5rem; + line-height: 1.4; +`; +export default function Settings() { + const [tab, setTab] = useState(0); + return ( + + {/* */} + + ⚛ React95.exe + + + Appearance + Fonts + Other + +
+ {tab === 0 && ( + +

+ You can choose from variety of different color schemes! 🔥 +

+
+ + + +
+ null} + checked={true} + /> + + )} + {tab === 1 && Accesories stuff here} + {tab === 2 && Clothing stuff here} +
+ + + + ); +} diff --git a/website/src/lib/index.js b/website/src/lib/index.js index 121641d..2da3802 100644 --- a/website/src/lib/index.js +++ b/website/src/lib/index.js @@ -10,7 +10,7 @@ var styled = require('styled-components'); var styled__default = _interopDefault(styled); var themes = {}; -themes.default = { +themes["default"] = { canvas: "#ffffff", material: "#ced0cf", materialDark: "#9a9e9c", @@ -1350,7 +1350,7 @@ var DateItemContent = styled__default.span.withConfig({ }); function daysInMonth(year, month) { - return new Date(year, month, 0).getDate(); + return new Date(year, month + 1, 0).getDate(); } function dayIndex(year, month, day) { @@ -1362,23 +1362,22 @@ var DatePicker = function (_Component) { _inherits(DatePicker, _Component); - function DatePicker() { - var _getPrototypeOf2; - + function DatePicker(props) { var _this; _classCallCheck(this, DatePicker); - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } + _this = _possibleConstructorReturn(this, _getPrototypeOf(DatePicker).call(this, props)); - _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DatePicker)).call.apply(_getPrototypeOf2, [this].concat(args))); - - _defineProperty(_assertThisInitialized(_this), "state", { - day: 10, - month: 2, - year: 2019 + _defineProperty(_assertThisInitialized(_this), "convertDateToState", function (date) { + var day = date.getDate(); + var month = date.getMonth(); + var year = date.getFullYear(); + return { + day: day, + month: month, + year: year + }; }); _defineProperty(_assertThisInitialized(_this), "handleMonthSelect", function (month) { @@ -1399,16 +1398,19 @@ function (_Component) { }); }); - _defineProperty(_assertThisInitialized(_this), "handleChange", function () { + _defineProperty(_assertThisInitialized(_this), "handleAccept", function () { var _this$state = _this.state, year = _this$state.year, month = _this$state.month, day = _this$state.day; var date = new Date(year, month, day); - _this.props.onChange(date); + _this.props.onAccept(date); }); + var initialDate = _this.convertDateToState(props.date || new Date()); + + _this.state = initialDate; return _this; } @@ -1424,48 +1426,47 @@ function (_Component) { var _this$props = this.props, shadow = _this$props.shadow, className = _this$props.className, + onAccept = _this$props.onAccept, onCancel = _this$props.onCancel; - var baseClass = "DatePicker"; var months = [{ - value: 1, + value: 0, label: "January" }, { - value: 2, + value: 1, label: "February" }, { - value: 3, + value: 2, label: "March" }, { - value: 4, + value: 3, label: "April" }, { - value: 5, + value: 4, label: "May" }, { - value: 6, + value: 5, label: "June" }, { - value: 7, + value: 6, label: "July" }, { - value: 8, + value: 7, label: "August" }, { - value: 9, + value: 8, label: "September" }, { - value: 10, + value: 9, label: "October" }, { - value: 11, + value: 10, label: "November" }, { - value: 12, + value: 11, label: "December" }]; // console.log("days in month: ", daysInMonth(year, month)); - // console.log("day index", dayIndex(year, month, day)); - // console.log("first day index", dayIndex(year, month, 1)); + console.log("first day index", dayIndex(year, month - 1, 1)); var dayPickerItems = Array.apply(null, { length: 35 }); @@ -1502,17 +1503,15 @@ function (_Component) { } }, React__default.createElement(Select, { items: months, - selectedIndex: month - 1, + selectedIndex: month, onChange: this.handleMonthSelect, width: 128, - height: 200, - className: "".concat(baseClass, "-toolbar__input") + height: 200 }), React__default.createElement(NumberField, { value: year, disableKeyboardInput: true, onChange: this.handleYearSelect, - width: 100, - className: "".concat(baseClass, "-toolbar__input") + width: 100 })), React__default.createElement(Calendar, null, React__default.createElement(WeekDays, null, React__default.createElement(DateItem, null, "S"), React__default.createElement(DateItem, null, "M"), React__default.createElement(DateItem, null, "T"), React__default.createElement(DateItem, null, "W"), React__default.createElement(DateItem, null, "T"), React__default.createElement(DateItem, null, "F"), React__default.createElement(DateItem, null, "S")), React__default.createElement(Dates, null, dayPickerItems)), React__default.createElement(Toolbar, { noPadding: true, style: { @@ -1524,7 +1523,7 @@ function (_Component) { disabled: true }, "Cancel"), React__default.createElement(Button, { fullWidth: true, - onClick: this.handleChange + onClick: onAccept ? this.handleAccept : undefined }, "OK")))); } }]); @@ -1535,8 +1534,9 @@ function (_Component) { _defineProperty(DatePicker, "propTypes", { className: propTypes.string, shadow: propTypes.bool, - onChange: propTypes.func.isRequired, - onCancel: propTypes.func.isRequired + onAccept: propTypes.func.isRequired, + onCancel: propTypes.func.isRequired, + date: propTypes.instanceOf(Date) }); _defineProperty(DatePicker, "defaultProps", { @@ -1940,7 +1940,7 @@ Tab.propTypes = { var StyledTabs = styled__default.nav.withConfig({ displayName: "Tabs__StyledTabs", componentId: "sc-11btqu5-0" -})(["position:relative;left:8px;"]); +})(["position:relative;left:8px;text-align:left;"]); var Tabs = function Tabs(_ref) { var value = _ref.value,