restarting up work on integrating react

Author: benkeen

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.gitignore

@@ -30,4 +30,5 @@ node_modules/
 dist/
 dist/global/config.php
 
-local.dev.js
+local.dev.js
+yarn-error.log

gruntfile.js

@@ -177,13 +177,13 @@ const config = {
 
 	run: {
 		webpack_dev: {
-			cmd: 'npm',
+			cmd: 'yarn',
 			args: [
-				'start'
+				'dev'
 			]
 		},
 		webpack_prod: {
-			cmd: 'npm',
+			cmd: 'yarn',
 			args: [
 				'build'
 			]
@@ -195,7 +195,10 @@ const config = {
 			options: {
 				logConcurrentOutput: true
 			},
-			tasks: ['watch']
+			tasks: [
+				'watch',
+				'run:webpack_dev'
+			]
 		}
 	}
 };
@@ -477,8 +480,8 @@ module.exports = function (grunt) {
 	]);
 
 	// for local dev work. All you need to do is run `grunt`: that creates a dist/ folder containing all the built code,
-	// plus sets up watchers to copy over changed files and generate the CSS from Sass. Be sure to load up the dist/
-	// folder in your browser
+	// sets up watchers to copy over changed files and generate the CSS from Sass. It also boots up webpack to handle
+	// any JS conversion. Be sure to load up the dist/ subfolder in your browser
 	grunt.registerTask('default', ['sync', 'sasslint', 'sass', 'concurrent:watchers']);
 
 	// builds everything into the dist folder

package.json

@@ -64,7 +64,8 @@
     "zh_tw"
   ],
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "dev": "webpack --config webpack.config.js --env development -p --progress"
   },
   "repository": {
     "type": "git",
@@ -82,13 +83,12 @@
   },
   "homepage": "https://github.com/formtools/core#readme",
   "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.1.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^1.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
     "exec": "^0.2.1",
     "grunt": "^1.0.3",
     "grunt-cli": "^1.2.0",
@@ -103,25 +103,26 @@
     "jest": "^23.6.0",
     "line-reader": "^0.4.0",
     "load-grunt-tasks": "^4.0.0",
-    "mini-css-extract-plugin": "^0.4.1",
+    "mini-css-extract-plugin": "^0.8.0",
     "moment": "^2.22.2",
     "n-readlines": "^1.0.0",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.6.1",
     "reselect": "^3.0.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.22.1",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.1"
+    "sass-loader": "^7.2.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.7"
   },
   "dependencies": {
     "@material-ui/core": "^3.0.0",
     "@material-ui/icons": "^3.0.1",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-redux": "^5.0.7",
     "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.1",
     "redux": "^4.0.0",
     "redux-actions": "^2.3.2",
     "redux-thunk": "^2.2.0"

src/global/codemirror/AUTHORS

@@ -504,7 +504,7 @@ Oskar Segersvärd
 pablo
 pabloferz
 Pablo Zubieta
-Page
+InstallationPage
 paladox
 Panupong Pasupat
 paris

src/global/codemirror/CHANGELOG.md

@@ -358,7 +358,7 @@ The [`refresh`](http://codemirror.net/doc/manual.html#event_refresh) event is no
 
 xml-fold addon: Fix a null-dereference bug.
 
-Page up and page down now do something even in single-line documents.
+InstallationPage up and page down now do something even in single-line documents.
 
 Fix an issue where the cursor position could be off in really long (~8000 character) tokens.
 

src/global/codemirror/doc/releases.html

@@ -236,7 +236,7 @@ <h2>Version 5.x</h2>
     <li><a href="http://codemirror.net/mode/erlang">erlang mode</a>: Fix mode crash when trying to read an empty context.</li>
     <li><a href="http://codemirror.net/doc/manual.html#addon_comment">comment addon</a>: Fix broken behavior when toggling comments inside a comment.</li>
     <li>xml-fold addon: Fix a null-dereference bug.</li>
-    <li>Page up and page down now do something even in single-line documents.</li>
+    <li>InstallationPage up and page down now do something even in single-line documents.</li>
     <li>Fix an issue where the cursor position could be off in really long (~8000 character) tokens.</li>
     <li><a href="http://codemirror.net/mode/javascript">javascript mode</a>: Better indentation when semicolons are missing. Better support for TypeScript classes, optional parameters, and the <code>type</code> keyword.</li>
     <li>The <a href="http://codemirror.net/doc/manual.html#event_blur"><code>blur</code></a> and <a href="http://codemirror.net/doc/manual.html#event_focus"><code>focus</code></a> events now pass the DOM event to their handlers.</li>

src/global/codemirror/mode/asterisk/index.html

@@ -124,16 +124,16 @@ <h2>Asterisk dialplan mode</h2>
 exten => 600,n,Goto(s,6)		; Start over
 
 ;
-;	You can use the Macro Page to intercom a individual user
+;	You can use the Macro InstallationPage to intercom a individual user
 exten => 76245,1,Macro(page,SIP/Grandstream1)
 ; or if your peernames are the same as extensions
 exten => _7XXX,1,Macro(page,SIP/${EXTEN})
 ;
 ;
-; System Wide Page at extension 7999
+; System Wide InstallationPage at extension 7999
 ;
 exten => 7999,1,Set(TIMEOUT(absolute)=60)
-exten => 7999,2,Page(Local/Grandstream1@page&Local/Xlite1@page&Local/1234@page/n,d)
+exten => 7999,2,InstallationPage(Local/Grandstream1@page&Local/Xlite1@page&Local/1234@page/n,d)
 
 ; Give voicemail at extension 8500
 ;

src/global/codemirror/mode/markdown/index.html

@@ -36,7 +36,7 @@ <h2>Markdown mode</h2>
 ================
 
 &lt;ul id="ProjectSubmenu"&gt;
-    &lt;li&gt;&lt;a href="/projects/markdown/" title="Markdown Project Page"&gt;Main&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/projects/markdown/" title="Markdown Project InstallationPage"&gt;Main&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="selected" title="Markdown Basics"&gt;Basics&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/projects/markdown/syntax" title="Markdown Syntax Documentation"&gt;Syntax&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/projects/markdown/license" title="Pricing and License Information"&gt;License&lt;/a&gt;&lt;/li&gt;

src/install/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+    <title>Form Tools installation</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="../react/main.bundle.js"></script>
+</body>
+</html>

src/install/files/installation.js src/install_old/files/installation.js

@@ -56,44 +56,12 @@ body, table, td, span, div, p {
     width: 950px;
 }
 
-#footer {
-    margin-top: 30px;
-    border-top: 1px dotted #cccccc;
-    padding: 6px 0;
-    text-align: justify;
-}
 
 ul {
     margin: 0;
     padding-left: 16px;
 }
 
-#footer ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-#footer ul li {
-    float: left;
-    padding: 0px 20px;
-    border-right: 1px solid #cccccc;
-}
-
-#footer ul li.colN {
-    border-right: 0;
-}
-
-#footer ul li a {
-    color: #0066cc;
-    display: block;
-}
-
-#footer ul li a:hover {
-    border-bottom: 0;
-    color: #990000;
-}
-
 #content {
     margin: 24px 10px 0 10px;
 }

src/install/files/main.css src/install_old/files/main.css

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import InstallationPage from '../layout/InstallationPage';
+
+const App = () => (
+	<InstallationPage>
+		<div>Content here.</div>
+	</InstallationPage>
+);
+
+ReactDOM.render(
+	<App />,
+	document.getElementById('root')
+);

src/install/index.php src/install_old/index.php

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './Header.scss';
+
+
+const Header = ({ i18n, version }) => (
+	<section className={styles.header}>
+		<div className={styles.version}>
+			<img src="../themes/default/images/account_section_left_green2x.png" border="0" width="8" height="25" />
+			<div id="account_section">{version}</div>
+			<img src="../themes/default/images/account_section_right_green2x.png" border="0" width="8" height="25" />
+		</div>
+		<span style={{ float: 'left', paddingTop: 4 }}>
+            <a href="http://www.formtools.org" className="no_border">
+                <img src="../themes/default/images/logo_green2x.png" border="0" width="220" height="67"/>
+            </a>
+        </span>
+	</section>
+);
+
+export default Header;

src/install/step2.php src/install_old/step2.php

@@ -0,0 +1,18 @@
+.header {
+  height: 72px;
+  position: relative;
+  text-align: center;
+  width: 950px;
+}
+
+.version {
+  float: right;
+  display: flex;
+
+  div {
+    color: white;
+    font-weight: bold;
+    padding: 2px 12px 0;
+  }
+}
+

src/install/step3.php src/install_old/step3.php

@@ -0,0 +1,15 @@
+import React from 'react';
+
+
+const Footer = ({ i18n }) => (
+	<div id="footer">
+		<ul>
+			<li><a href="https://formtools.org" target="_blank">formtools.org</a></li>
+			<li><a href="https://docs.formtools.org/installation/" target="_blank">{i18n.phrase_installation_help}</a></li>
+			<li><a href="https://docs.formtools.org" target="_blank">{i18n.word_documentation}</a></li>
+			<li className="colN"><a href="https://github.com/formtools/core/" target="_blank">Github</a></li>
+		</ul>
+	</div>
+);
+
+export default Footer;

src/install/step4.php src/install_old/step4.php

@@ -0,0 +1,33 @@
+#footer {
+  margin-top: 30px;
+  border-top: 1px dotted #cccccc;
+  padding: 6px 0;
+  text-align: justify;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      float: left;
+      padding: 0 20px;
+      border-right: 1px solid #cccccc;
+    }
+  }
+}
+
+
+#footer ul li.colN {
+  border-right: 0;
+}
+
+#footer ul li a {
+  color: #0066cc;
+  display: block;
+}
+
+#footer ul li a:hover {
+  border-bottom: 0;
+  color: #990000;
+}

src/install/step5.php src/install_old/step5.php

@@ -0,0 +1,27 @@
+import React from 'react';
+
+
+const Navigation = ({ i18n }) => (
+	<div id="nav_items">
+		<div className="{if $step == 1}nav_current{else}nav_visited{/if}">
+			1 <span className="delim">-</span> {i18N.word_welcome}
+		</div>
+		<div className="{if $step == 2}nav_current{elseif $step < 2}nav_remaining{else}nav_visited{/if}">
+			2 <span className="delim">-</span> {i18n.phrase_system_check}
+		</div>
+		<div className="{if $step == 3}nav_current{elseif $step < 3}nav_remaining{else}nav_visited{/if}">
+			3 <span className="delim">-</span> {i18n.phrase_create_database_tables}
+		</div>
+		<div className="{if $step == 4}nav_current{elseif $step < 4}nav_remaining{else}nav_visited{/if}">
+			4 <span className="delim">-</span> {i18n.phrase_create_config_file}
+		</div>
+		<div className="{if $step == 5}nav_current{elseif $step < 5}nav_remaining{else}nav_visited{/if}">
+			5 <span className="delim">-</span> {i18n.phrase_create_admin_account}
+		</div>
+		<div className="{if $step == 6}nav_current{elseif $step < 6}nav_remaining{else}nav_visited{/if}">
+			6 <span className="delim">-</span> {i18n.phrase_clean_up}
+		</div>
+	</div>
+);
+
+export default Navigation;

src/install/step6.php src/install_old/step6.php

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from '../components/general/Header/Header';
+// import Footer from '../components/installation/InstallationFooter/InstallationFooter';
+import styles from './Page.scss';
+
+
+const InstallationPage = ({ children }) => (
+	<div className={styles.page}>
+		<Header />
+		<section>{children}</section>
+		...
+	</div>
+);
+
+export default InstallationPage;