Various experiments with JS and React and what-not.

resources/js/app.js

@@ -1,4 +1,24 @@
 
+/*
+ * app.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes React and other helpers. It's a great starting point while
@@ -13,4 +33,7 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-require('./components/Example');
+require('./components/Main');
+require('./components/TopMenu');
+
+

resources/js/bootstrap.js

@@ -1,4 +1,24 @@
 
+/*
+ * bootstrap.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 window._ = require('lodash');
 
 /**
@@ -43,9 +63,6 @@ if (token) {
  * for events that are broadcast by Laravel. Echo and event broadcasting
  * allows your team to easily build robust real-time web applications.
  */
-
-// import Echo from 'laravel-echo'
-
 // window.Pusher = require('pusher-js');
 
 // window.Echo = new Echo({

resources/js/components/Example.js

@@ -1,3 +1,23 @@
+/*
+ * Example.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 

resources/js/components/Main.js

@@ -0,0 +1,63 @@
+/*
+ * Main.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import "tabler-react/dist/Tabler.css";
+import { Card, Button } from "tabler-react";
+
+class MyCard extends Component {
+    render() {
+        return (
+            <Card>
+                <Card.Header>
+                    <Card.Title>Card Title</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                    <Button color="primary">A Button</Button>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+/* An example React component */
+class Main extends Component {
+    render() {
+        return (
+            <div>
+                <h3>All Products</h3>
+            </div>
+        );
+    }
+}
+
+export default Main;
+
+/* The if statement is required so as to Render the component on pages that have a div with an ID of "root";
+*/
+
+if (document.getElementById('root')) {
+    ReactDOM.render(<Main />, document.getElementById('root'));
+}
+
+if (document.getElementById('root')) {
+    ReactDOM.render(<MyCard />, document.getElementById('myCard'));
+}

resources/js/components/TopMenu.js

@@ -0,0 +1,49 @@
+/*
+ * TopMenu.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react';
+import ReactDOM from "react-dom";
+import {Nav} from "tabler-react";
+
+
+
+
+class TopMenu extends Component {
+    render() {
+        return (
+            <Nav className="nav nav-tabs border-0 flex-column flex-lg-row">
+                <Nav.Item active hasSubNav value="Dashboard" icon="zap">
+                    <Nav.SubItem value="Sub Item 1" />
+                    <Nav.SubItem>Sub Item 2</Nav.SubItem>
+                    <Nav.SubItem icon="globe">Sub Item 3</Nav.SubItem>
+                </Nav.Item>
+                <Nav.Item to="http://www.example.com">Page Two</Nav.Item>
+                <Nav.Item value="Page Three" />
+                <Nav.Item active icon="user">
+                    Page Four
+                </Nav.Item>
+            </Nav>
+        );
+    }
+}
+
+if (document.getElementById('TopMenu')) {
+    ReactDOM.render(<TopMenu />, document.getElementById('TopMenu'));
+}

resources/sass/_variables.scss

@@ -1,3 +1,23 @@
+/*!
+ * _variables.scss
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 
 // Body
 $body-bg: #f8fafc;

resources/sass/app.scss

@@ -1,3 +1,23 @@
+/*!
+ * app.scss
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');
@@ -8,7 +28,6 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
 
-.navbar-laravel {
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}
+// Font awesome.
+// @import "node_modules/font-awesome/scss/font-awesome";
+@import "~font-awesome/scss/font-awesome";