feat(build): Use stricter create-react-app

Play-OS · Feb 28, 2020 · f725074 · f725074
1 parent 102d6fb
commit f725074
Show file tree

Hide file tree

Showing 96 changed files with 498 additions and 1,738 deletions.
diff --git a/declaration.d.ts b/declaration.d.ts
@@ -1 +1,5 @@
 declare var __non_webpack_require__: any;
+declare module 'keccak' {
+    const content: any;
+    export = content;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,28 +34,19 @@
   "author": "PlayOS",
   "license": "ISC",
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@capacitor/cli": "^1.4.0",
-    "@capacitor/core": "^1.4.0",
-    "@material-ui/core": "^4.8.3",
-    "@material-ui/icons": "^4.5.1",
-    "@playos/kernel": "file:../Kernel",
-    "@types/react-loadable": "^5.5.3",
-    "@types/react-resizable": "^1.7.2",
+    "@material-ui/core": "^4.9.4",
+    "@material-ui/icons": "^4.9.1",
     "@wasmer/wasm-terminal": "^0.6.0",
     "@wasmer/wasm-transformer": "^0.6.0",
     "@wasmer/wasmfs": "^0.6.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.6.1",
-    "cross-env": "^6.0.3",
-    "css-loader": "^3.4.2",
-    "ethers": "^4.0.43",
+    "ethers": "^4.0.45",
     "inherits": "^2.0.4",
-    "jszip": "^3.2.2",
     "keccak": "^2.1.0",
     "material-ui": "^0.20.2",
     "material-ui-dialogs": "^1.3.0",
-    "memfs": "^3.0.4",
+    "memfs": "^3.1.1",
     "postcss-modules": "^1.5.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
@@ -75,25 +66,28 @@
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "terminal-in-react": "^4.3.1",
     "use-resize-observer": "^6.0.0",
     "web3": "^1.2.4",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
     "@types/jszip": "^3.1.7",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-loadable": "^5.5.3",
     "@types/react-redux": "^7.1.6",
+    "@types/react-resizable": "^1.7.2",
     "@types/react-router": "^5.1.4",
+    "@types/react-router-dom": "^5.1.3",
     "@types/react-router-redux": "^5.0.18",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/web3": "^1.2.2",
     "documentation": "12.1.4",
+    "eslint-config-airbnb": "^18.0.1",
     "node-sass": "^4.13.1",
     "standard-version": "^7.1.0",
-    "typescript": "^3.7.5",
+    "typescript": "^3.8.2",
     "worker-plugin": "^3.2.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -17,21 +17,5 @@
     <body>
         <div id="app"></div>
         <canvas id="windowCanvas" width="1920" height="1080" style="background:red; position: absolute; top:10px; left: 10px; width: 20%;"></canvas>
-        <script>
-            if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
-                const script = document.createElement('script');
-                const base = document.createElement('base');
-                base.href = 'http://localhost:3000/';
-
-                script.src = 'http://localhost:3000/build/index.js';
-                document.head.appendChild(base);
-                document.head.appendChild(script);
-            } else {
-                const script = document.createElement('script');
-                script.src = 'build/index.js';
-                document.head.appendChild(script);
-            }
-        </script>
-        <!-- <script src="build/index.js" charset="utf-8"></script> -->
     </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -3,12 +3,12 @@ import 'whatwg-fetch';
 import App from './js/App';
 import './scss/index.scss';
 // import Sdk from '../SDK';
-import Configuration from './js/Configuration';
+// import Configuration from './js/Configuration';
 import packageJson from '../package.json';
 
 // injectTapEventPlugin();
 
-const env = Configuration.getEnvironment();
+// const env = Configuration.getEnvironment();
 // const sdkEnv = env === 'production' ? 'root' : env;
 
 // const sdk = new Sdk('__playos_auth_development', {

diff --git a/src/js/App.tsx b/src/js/App.tsx
@@ -17,6 +17,7 @@ export default class App {
 
     constructor(id: string = 'app') {
         this.domId = id;
+        console.log('[] id -> ', id);
     }
 
     run() {

diff --git a/src/js/Configuration.ts b/src/js/Configuration.ts
@@ -1,5 +1,3 @@
-import RutileProvider from "./services/providers/RutileProvider";
-
 const environment = process.env.NODE_ENV;
 const DEV_HOST = 'http://localhost.playos.io/';
 
@@ -16,7 +14,6 @@ const config = {
             chainId: 929,
             coreAddress: '0xc660ac9d984c1a65ab499c93e5749bdb0b4518f5',
         },
-        provider: new RutileProvider('http://localhost:8545/', 929, '0xc660ac9d984c1a65ab499c93e5749bdb0b4518f5'),
         coreAddress: '0xb8e0baafd907f3289dbdc0a5174ba786f4b78cf2',
     },
     production: {
@@ -31,7 +28,6 @@ const config = {
             chainId: 929,
             coreAddress: '0xc660ac9d984c1a65ab499c93e5749bdb0b4518f5',
         },
-        provider: new RutileProvider('http://localhost:8545/', 929, '0xc660ac9d984c1a65ab499c93e5749bdb0b4518f5'),
         coreAddress: '0xb8e0baafd907f3289dbdc0a5174ba786f4b78cf2',
     },
 };

diff --git a/src/js/apps/Explorer/Explorer.scss → src/js/apps/Explorer/Explorer.module.scss b/src/js/apps/Explorer/Explorer.scss → src/js/apps/Explorer/Explorer.module.scss
diff --git a/src/js/apps/Explorer/Explorer.tsx b/src/js/apps/Explorer/Explorer.tsx
@@ -16,9 +16,9 @@ import Folder from './components/Folder';
 import File from './components/File';
 import Dirent from 'memfs/lib/Dirent';
 import Dropzone from '../../components/molecules/Dropzone';
-import Kernel from '@playos/kernel';
+import Kernel from '../../../vendor/kernel';
 import BackgroundTerminal from '../../background/BackgroundTerminal';
-const styles = require('./Explorer.scss');
+const styles = require('./Explorer.module.scss');
 
 export default function Explorer() {
     const [isLocationsOpen, setLocationsOpen] = React.useState(true);
@@ -28,6 +28,11 @@ export default function Explorer() {
     React.useEffect(() => {
         async function setup() {
             const kernel = InstanceBag.get<Kernel>('kernel');
+
+            if (!kernel.fs) {
+                throw new Error('System was not booted');
+            }
+
             const filesAndDirectories: any = await kernel.fs.readDir(path, {
                 encoding: 'utf8',
                 withFileTypes: true,
@@ -109,9 +114,9 @@ export default function Explorer() {
                     {files.map((file) => {
                         if (file.isDirectory()) {
                             return <Folder path={path} key={file.name.toString()} folder={file} onClick={handleFileClick} />
-                        } else if (file.isFile()) {
-                            return <File path={path} key={file.name.toString()} file={file} onClick={handleFileClick} />
                         }
+
+                        return <File path={path} key={file.name.toString()} file={file} onClick={handleFileClick} />
                     })}
                 </Dropzone>
             </AppHeader>

diff --git a/...s/apps/Explorer/components/File/File.scss → ...Explorer/components/File/File.module.scss b/...s/apps/Explorer/components/File/File.scss → ...Explorer/components/File/File.module.scss
diff --git a/src/js/apps/Explorer/components/File/File.tsx b/src/js/apps/Explorer/components/File/File.tsx
@@ -4,12 +4,12 @@ import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutli
 import WebIcon from '@material-ui/icons/Web';
 import getFileExtension from '../../../../services/micro/getFileExtension';
 
-const styles = require('./File.scss');
+const styles = require('./File.module.scss');
 
 interface Props {
     file: Dirent;
     path: string;
-    onClick?: (folder: Dirent) => void;
+    onClick: (folder: Dirent) => void;
 }
 
 function getFileIcon(file: Dirent): any {
@@ -25,8 +25,8 @@ function getFileIcon(file: Dirent): any {
 }
 
 export default function File(props: Props) {
-    const [icon, setIcon] = React.useState('');
-    const [name, setName] = React.useState(props.file.name);
+    const [icon] = React.useState('');
+    const [name] = React.useState(props.file.name);
 
     React.useEffect(() => {
         async function processFile() {
@@ -39,13 +39,13 @@ export default function File(props: Props) {
         }
 
         processFile();
-    }, []);
+    });
 
     return (
         <div className={styles.file}>
             <div className={styles.iconWrapper} onClick={() => props.onClick(props.file)}>
                 {icon === '' && getFileIcon(props.file)}
-                {icon !== '' && <img className={styles.appIcon} src={icon} />}
+                {icon !== '' && <img alt={name.toString()} className={styles.appIcon} src={icon} />}
             </div>
             <span>{name}</span>
         </div>

diff --git a/...rer/components/FileHeader/FileHeader.scss → ...ponents/FileHeader/FileHeader.module.scss b/...rer/components/FileHeader/FileHeader.scss → ...ponents/FileHeader/FileHeader.module.scss
diff --git a/src/js/apps/Explorer/components/FileHeader/FileHeader.tsx b/src/js/apps/Explorer/components/FileHeader/FileHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import Toolbar from '@material-ui/core/Toolbar';
-const styles = require('./FileHeader.scss');
+const styles = require('./FileHeader.module.scss');
 
 export default function FileHeader() {
     return (

diff --git a/...ps/Explorer/components/Folder/Folder.scss → ...orer/components/Folder/Folder.module.scss b/...ps/Explorer/components/Folder/Folder.scss → ...orer/components/Folder/Folder.module.scss
diff --git a/src/js/apps/Explorer/components/Folder/Folder.tsx b/src/js/apps/Explorer/components/Folder/Folder.tsx
@@ -4,14 +4,14 @@ import FolderIcon from '@material-ui/icons/Folder';
 import getFileExtension from '../../../../services/micro/getFileExtension';
 import { getWappInformation } from '../../../../services/WappService';
 
-const styles = require('./Folder.scss');
+const styles = require('./Folder.module.scss');
 
 const WAPP_EXTENSION = 'wapp';
 
 interface Props {
     folder: Dirent;
     path: string;
-    onClick?: (folder: Dirent) => void;
+    onClick: (folder: Dirent) => void;
 }
 
 export default function Folder(props: Props) {
@@ -43,13 +43,13 @@ export default function Folder(props: Props) {
         }
 
         processFile();
-    }, []);
+    });
 
     return (
         <div className={styles.folder}>
             <div className={styles.iconWrapper} onClick={() => props.onClick(props.folder)}>
                 {icon === '' && <FolderIcon className={styles.icon} />}
-                {icon !== '' && <img className={styles.appIcon} src={icon} />}
+                {icon !== '' && <img alt="Folder" className={styles.appIcon} src={icon} />}
             </div>
             <span>{name}</span>
         </div>

diff --git a/src/js/apps/Explorer/index.tsx b/src/js/apps/Explorer/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Loadable from 'react-loadable';
+import Loadable from 'react-loadable';
 
 function Loading() {
     return (

diff --git a/src/js/apps/Store/index.tsx b/src/js/apps/Store/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Loadable from 'react-loadable';
+import Loadable from 'react-loadable';
 
 function Loading() {
     return (

diff --git a/src/js/background/BackgroundTerminal.ts b/src/js/background/BackgroundTerminal.ts
@@ -1,6 +1,6 @@
 // @ts-ignore
 import WasmTerminal from '@wasmer/wasm-terminal/lib/unoptimized/wasm-terminal.esm';
-import Kernel from '@playos/kernel';
+import Kernel from '../../vendor/kernel';
 import TerminalService from '../services/TerminalService';
 
 class BackgroundTerminal {

diff --git a/...ms/BulletNavigation/BulletNavigation.scss → ...etNavigation/BulletNavigation.module.scss b/...ms/BulletNavigation/BulletNavigation.scss → ...etNavigation/BulletNavigation.module.scss
diff --git a/src/js/components/atoms/BulletNavigation/BulletNavigation.tsx b/src/js/components/atoms/BulletNavigation/BulletNavigation.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
-const styles = require('./BulletNavigation.scss');
+const styles = require('./BulletNavigation.module.scss');
 
 interface Props {
     amount: number;

diff --git a/src/js/components/atoms/Time/Time.jsx b/src/js/components/atoms/Time/Time.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const styles = require('./Time.scss');
+const styles = require('./Time.module.scss');
 
 class Time extends React.Component {
     constructor(props) {

diff --git a/src/js/components/atoms/Time/Time.scss → ...js/components/atoms/Time/Time.module.scss b/src/js/components/atoms/Time/Time.scss → ...js/components/atoms/Time/Time.module.scss
diff --git a/src/js/components/molecules/App/App.jsx b/src/js/components/molecules/App/App.jsx
@@ -11,7 +11,7 @@ import AppService from '../../../services/AppService';
 import { openApp } from '../../../store/AppProcessesStore';
 import Grid from '@material-ui/core/Grid';
 
-const styles = require('./App.scss');
+const styles = require('./App.module.scss');
 
 const popoverStyle = {
     textAlign: 'center',

diff --git a/src/js/components/molecules/App/App.scss → .../components/molecules/App/App.module.scss b/src/js/components/molecules/App/App.scss → .../components/molecules/App/App.module.scss
diff --git a/...components/molecules/AppGrid/AppGrid.scss → ...nts/molecules/AppGrid/AppGrid.module.scss b/...components/molecules/AppGrid/AppGrid.scss → ...nts/molecules/AppGrid/AppGrid.module.scss
diff --git a/src/js/components/molecules/AppGrid/AppGrid.tsx b/src/js/components/molecules/AppGrid/AppGrid.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import Grid from '@material-ui/core/Grid';
 import { AppGrid } from '../../../services/micro/sortAppsInGrids';
 import App from '../new/App';
-const styles = require('./AppGrid.scss');
+const styles = require('./AppGrid.module.scss');
 
 interface Props {
     grid: AppGrid;

diff --git a/...onents/molecules/AppHeader/AppHeader.scss → ...molecules/AppHeader/AppHeader.module.scss b/...onents/molecules/AppHeader/AppHeader.scss → ...molecules/AppHeader/AppHeader.module.scss
diff --git a/src/js/components/molecules/AppHeader/AppHeader.tsx b/src/js/components/molecules/AppHeader/AppHeader.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Drawer from '@material-ui/core/Drawer';
 import Hidden from '@material-ui/core/Hidden';
-const styles = require('./AppHeader.scss');
+const styles = require('./AppHeader.module.scss');
 
 interface Props {
     title: string;

diff --git a/src/js/components/molecules/Dropzone/Dropzone.tsx b/src/js/components/molecules/Dropzone/Dropzone.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Kernel from '@playos/kernel';
+import Kernel from '../../../../vendor/kernel';
 import { useDropzone } from 'react-dropzone';
 import InstanceBag from '../../../InstanceBag';
 import { readFileAsArrayBuffer } from '../../../services/FileReaderService';
@@ -19,15 +19,15 @@ export default function Dropzone(props: Props) {
         const processedFiles = await Promise.all(promises);
 
         processedFiles.forEach((file) => {
-            const path = `${props.currentPath}/${file.name}`;
+            const path = `${currentPath}/${file.name}`;
             // Filter out trailing slashes
             const newPath = path.split('/').filter((p) => p).join('/');
 
             kernel.fs.writeFile(newPath, new Uint8Array(file.bin));
         });
     }, [currentPath]);
 
-    const { getInputProps, getRootProps, isDragActive } = useDropzone({ onDrop, noClick: true });
+    const { getInputProps, getRootProps } = useDropzone({ onDrop, noClick: true });
 
     return (
         <div className={className} {...getRootProps()}>

diff --git a/...s/components/molecules/Header/Header.scss → ...nents/molecules/Header/Header.module.scss b/...s/components/molecules/Header/Header.scss → ...nents/molecules/Header/Header.module.scss
diff --git a/src/js/components/molecules/Header/Header.tsx b/src/js/components/molecules/Header/Header.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import HomeButton from '../HomeButton';
-import BackButton from '../BackButton';
 import Profile from '../Profile';
 import Application from '../../../models/Application';
 import Time from '../../atoms/Time';
 import SideNavigation from '../SideNavigation';
-const styles = require('./Header.scss');
+const styles = require('./Header.module.scss');
 
 interface Props {
     wallpaperMode?: boolean,

diff --git a/src/js/components/molecules/HomeButton/HomeButton.jsx b/src/js/components/molecules/HomeButton/HomeButton.jsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 // import { white } from 'material-ui/styles/colors';
 import { closeApp } from '../../../store/AppProcessesStore';
 import InstanceBag from '../../../InstanceBag';
-const styles = require('./HomeButton.scss');
+const styles = require('./HomeButton.module.scss');
 
 class HomeButton extends React.Component {
     constructor(props) {

diff --git a/...ents/molecules/HomeButton/HomeButton.scss → ...lecules/HomeButton/HomeButton.module.scss b/...ents/molecules/HomeButton/HomeButton.scss → ...lecules/HomeButton/HomeButton.module.scss
diff --git a/src/js/components/molecules/Profile/CloseAppButton.jsx b/src/js/components/molecules/Profile/CloseAppButton.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import CloseIcon from 'material-ui/svg-icons/navigation/close';
-import styles from './CloseAppButton.styles.scss';
+import styles from './CloseAppButton.module.scss';
 import classnames from 'classnames';
 import { closeApp } from '../../../store/AppProcessesStore';
 

diff --git a/...ecules/Profile/CloseAppButton.styles.scss → ...ecules/Profile/CloseAppButton.module.scss b/...ecules/Profile/CloseAppButton.styles.scss → ...ecules/Profile/CloseAppButton.module.scss
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ export default class App { @@
         constructor(id: string = 'app') {
             this.domId = id;
+            console.log('[] id -> ', id);
         }
         run() {
@@ Expand Down @@