[WAGYU-56-59] Update directory structure, housekeeping, storybook, and more

.gitignore

@@ -1,6 +1,3 @@
 node_modules/
 dist/
 .idea
-
-# Ignore Visual Studio Code IDE workspace settings
-.vscode/

.storybook/decorators/withGlobalStyles.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.main`
+  font-family: 'PT Mono', monospace;
+`;
+
+export const withGlobalStyles = (storyFn: any) => {
+  return (
+    <>
+      <Container>{storyFn()}</Container>
+    </>
+  );
+};

.storybook/main.ts

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import { addDecorator } from '@storybook/react';
+import { withGlobalStyles } from './decorators/withGlobalStyles';
+
+addDecorator(withGlobalStyles);
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.formatOnSave": true,
+  "workbench.tree.renderIndentGuides": "always",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.options": {
+    "rules": {
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "prefer-const": "off"
+    }
+  }
+}

package.json

@@ -6,11 +6,17 @@
   "author": "Colfax Selby <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-links": "^6.3.7",
+    "@storybook/react": "^6.3.7",
     "@types/js-yaml": "^4.0.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.7",
+    "babel-loader": "^8.2.2",
     "electron": "^12.0.0",
     "ts-loader": "^8.0.17",
     "typescript": "^4.2.2",
@@ -23,15 +29,19 @@
     "build:watch": "yarn build -- --watch",
     "start": "electron ./dist/electron/index.js",
     "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
-    "dev:react": "NODE_ENV=development webpack-serve --config webpack.react.config.js --mode development"
+    "dev:react": "NODE_ENV=development webpack-serve --config webpack.react.config.js --mode development",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@rauschma/stringio": "^1.4.0",
     "html-webpack-plugin": "^5.2.0",
     "js-yaml": "^4.0.0",
+    "polished": "^4.1.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
+    "sb": "^6.3.7",
     "shebang-loader": "^0.0.1",
     "styled-components": "^5.2.1"
   }

src/electron/index.ts

@@ -1,6 +1,6 @@
-import { BrowserWindow, app, globalShortcut } from "electron";
+import { BrowserWindow, app, globalShortcut } from 'electron';
 
-app.on("ready", () => {
+app.on('ready', () => {
   // once electron has started up, create a window.
   const window = new BrowserWindow({
     width: 900,
@@ -12,18 +12,17 @@ app.on("ready", () => {
 
       // TODO: is it a problem to disable this?
       // https://www.electronjs.org/docs/tutorial/context-isolation#security-considerations
-      contextIsolation: false
-    }
+      contextIsolation: false,
+    },
   });
 
   // hide the default menu bar that comes with the browser window
   window.setMenuBarVisibility(false);
 
-
-	globalShortcut.register('CommandOrControl+R', function() {
-		console.log('CommandOrControl+R is pressed')
-		window.reload()
-	})
+  globalShortcut.register('CommandOrControl+R', function () {
+    console.log('CommandOrControl+R is pressed');
+    window.reload();
+  });
 
   // load a website to display
   window.loadURL(`file://${__dirname}/../react/index.html`);

src/react/App.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import { Background } from './colors';
+import { Slate1 } from './colors';
 import { Deposit } from './components/Deposit';
 import { Home } from './components/Home';
 import { InstallFailed } from './components/InstallFailed';
-import Installing from './components/Installing';
-import Status from './components/Status';
+import { Installing } from './components/Installing';
+import { StatusPage as Status } from './components/Status';
 import { SystemCheck } from './components/SystemCheck';
 
 const Container = styled.main`
   font-family: 'PT Mono', monospace;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: ${Background};
+  background-color: ${Slate1};
 `;
 
-const App = () => {
+export const App = () => {
   return (
     <HashRouter>
       <Container>
@@ -33,5 +33,3 @@ const App = () => {
     </HashRouter>
   );
 };
-
-export default App;

src/react/colors.ts

@@ -1,30 +1,21 @@
-export const Gray1 = "#F1F6FE";
-export const Gray2 = "#E3EBF7";
-export const Gray3 = "#d0dae8";
-export const Gray4 = "#ACBED5";
-export const DarkGray = "#A9A9A9";
+export const White = '#FFFFFF';
+export const Gray1 = '#F1F6FE';
+export const Gray2 = '#E3EBF7';
+export const Gray3 = '#d0dae8';
+export const Gray4 = '#ACBED5';
+export const DarkGray = '#A9A9A9';
+export const Black = '#000000';
 
-export const TextDark = "#0B1E58";
-
-export const PrimaryBlue = "#3366FF";
-export const PrimaryBlueDark = "#174BE6";
+export const TextDark = '#0B1E58';
+export const PrimaryBlue = '#3366FF';
+export const PrimaryBlueDark = '#174BE6';
 
 // https://colorhunt.co/palette/167893
-export const DarkBlue = "#0f4c75";
-export const MediumBlue = "#3282b8";
-export const LightBlue = "#bbe1fa";
-export const White = "#FFFFFF";
-export const Red = "#fa1e0e";
-
-export const LightGreen = "#52b788";
-
-export const Background = "#1b262c";
-export const Button = LightBlue;
-export const ButtonHover = LightGreen;
-export const Heading = MediumBlue;
-export const MainContent = Gray3;
-export const MainContentAlert = Red;
-export const Black = "#000000"
-export const DisabledButton = DarkGray;
+export const DarkBlue = '#0F4C75';
+export const MediumBlue = '#3282B8';
+export const LightBlue = '#BBE1FA';
+export const Red = '#FA1E0E';
 
+export const LightGreen = '#52B788';
 
+export const Slate1 = '#1B262C';

src/react/commands/BashUtils.ts

@@ -1,24 +1,21 @@
-import { executeCommandSync, executeCommandSyncReturnStdout } from "./ExecuteCommand";
+import {
+  executeCommandSync,
+  executeCommandSyncReturnStdout,
+} from './ExecuteCommand';
 
-const doesFileExist = (filename: string): boolean => {
-  const cmd = "test -f " + filename;
+export const doesFileExist = (filename: string): boolean => {
+  const cmd = 'test -f ' + filename;
   const result = executeCommandSync(cmd);
   return result == 0;
 };
 
-//TODO: add error handling
-const readlink = (file: string): string => {
-  return executeCommandSyncReturnStdout("readlink -f " + file).trim();
-}
+// TODO: add error handling
+export const readlink = (file: string): string => {
+  return executeCommandSyncReturnStdout('readlink -f ' + file).trim();
+};
 
-const which = (tool: string): boolean => {
-  const cmd = "which " + tool;
+export const which = (tool: string): boolean => {
+  const cmd = 'which ' + tool;
   const result = executeCommandSync(cmd);
   return result == 0;
-}
-
-export {
-  doesFileExist,
-  readlink,
-  which
-};
+};