Add initial site layout component

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
+      "cwd": "${workspaceRoot}",
+      "protocol": "inspector",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "env": { "CI": "true" },
+      "disableOptimisticBPs": true
+    }
+  ]
+}

app/.storybook/.babelrc

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
+}

app/.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};

app/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { themes } from '@storybook/theming/create';
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  theme: themes.dark,
+});

app/.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { action } from 'mobx';
+import { addDecorator } from '@storybook/react';
+import { ThemeProvider } from '../src/components/theme';
+import { Store, StoreProvider } from '../src/store';
+import * as sampleData from '../src/util/sampleData';
+
+/**
+ * Create a store with dummy data to use for stories
+ */
+const store = new Store();
+store.info = sampleData.lndGetInfo;
+store.channels = sampleData.lndListChannels;
+store.swaps = sampleData.loopListSwaps;
+
+/**
+ * Create dummy actions to use for stories
+ */
+const actions = {
+  node: {
+    getInfo: () => action('node.getInfo'),
+  },
+  channel: {
+    getChannels: () => action('channel.getChannels'),
+  },
+  swap: {
+    listSwaps: () => action('swap.listSwaps'),
+  },
+};
+
+/**
+ * decorator function to wrap all stories with the necessary providers
+ */
+addDecorator(storyFn => (
+  <StoreProvider store={store} actions={actions}>
+    <ThemeProvider>{storyFn()}</ThemeProvider>
+  </StoreProvider>
+));

app/package.json

@@ -12,22 +12,33 @@
     "eject": "react-scripts eject",
     "lint": "eslint --ext .ts,.tsx --ignore-path .eslintignore .",
     "tsc": "tsc --noEmit",
-    "protos": "./scripts/build-protos.sh"
+    "protos": "./scripts/build-protos.sh",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "proxy": "https://localhost:8443",
   "dependencies": {
+    "@emotion/core": "10.0.28",
+    "@emotion/styled": "10.0.27",
     "@improbable-eng/grpc-web": "0.12.0",
     "debug": "4.1.1",
+    "emotion-theming": "10.0.27",
     "i18next": "19.4.1",
     "i18next-browser-languagedetector": "4.0.2",
     "mobx": "5.15.4",
-    "mobx-react": "6.2.2",
+    "mobx-react-lite": "2.0.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-i18next": "11.3.4",
     "react-scripts": "3.4.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/preset-create-react-app": "^2.1.1",
+    "@storybook/react": "^5.3.18",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -39,11 +50,13 @@
     "@types/react-dom": "^16.9.0",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
+    "bootstrap": "4.4.1",
     "cross-env": "7.0.2",
     "eslint-config-prettier": "6.10.1",
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.19.0",
     "google-protobuf": "3.11.4",
+    "node-sass": "4.13.1",
     "prettier": "2.0.4",
     "ts-protoc-gen": "0.12.0",
     "typescript": "~3.7.2"
@@ -58,6 +71,7 @@
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*.d.ts",
+      "!src/__(stories|mocks)__/**/*.{ts,tsx}",
       "!src/types/**/*.{js,ts}",
       "!src/i18n/**/*.{js,ts}",
       "!src/index.tsx"

app/public/index.html

@@ -5,39 +5,12 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Lightning Dashboard</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

app/src/App.scss

@@ -0,0 +1,51 @@
+@charset "utf-8";
+
+// required bootstrap styles
+@import '../node_modules/bootstrap/scss/functions';
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/mixins';
+@import '../node_modules/bootstrap/scss/utilities';
+
+// optional bootstrap styles
+@import '../node_modules/bootstrap/scss/reboot';
+@import '../node_modules/bootstrap/scss/buttons';
+@import '../node_modules/bootstrap/scss/tables';
+@import '../node_modules/bootstrap/scss/nav';
+
+@font-face {
+  font-family: 'OpenSans Light';
+  src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'OpenSans Regular';
+  src: url('./assets/fonts/OpenSans-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'OpenSans SemiBold';
+  src: url('./assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 600;
+}
+@font-face {
+  font-family: 'OpenSans Bold';
+  src: url('./assets/fonts/OpenSans-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'OpenSans ExtraBold';
+  src: url('./assets/fonts/OpenSans-ExtraBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 800;
+}
+
+html,
+body,
+#root {
+  min-height: 100vh;
+  width: 100%;
+}