ui: add storybook story for NodeStatus component

app/.storybook/preview.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import 'mobx-react-lite/batchingForReactDom';
 import { addDecorator } from '@storybook/react';
+import '../src/App.scss';
 import ChannelAction from '../src/action/channel';
 import NodeAction from '../src/action/node';
 import SwapAction from '../src/action/swap';
 import { LndApi, LoopApi } from '../src/api';
+import { Background } from '../src/components/common/base';
 import { ThemeProvider } from '../src/components/theme';
 import { Store, StoreProvider } from '../src/store';
 import { sampleApiResponses } from '../src/util/sampleData';
@@ -20,7 +23,11 @@ const store = new Store();
 const grpc = {
   request: (methodDescriptor: any) => {
     const endpoint = `${methodDescriptor.service.serviceName}.${methodDescriptor.methodName}`;
-    const response = sampleApiResponses[endpoint] || {};
+    const data = sampleApiResponses[endpoint] || {};
+    // the calling function expects the return value to have a `toObject` function
+    const response: any = {
+      toObject: () => data,
+    };
     return Promise.resolve(response);
   },
 };
@@ -38,11 +45,16 @@ const actions = {
   swap,
 };
 
+// execute actions to populate the store data with the sample API responses
+actions.node.getBalances();
+
 /**
  * decorator function to wrap all stories with the necessary providers
  */
 addDecorator(storyFn => (
   <StoreProvider store={store} actions={actions}>
-    <ThemeProvider>{storyFn()}</ThemeProvider>
+    <ThemeProvider>
+      <Background>{storyFn()}</Background>
+    </ThemeProvider>
   </StoreProvider>
 ));

app/src/__stories__/Layout.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../App.scss';
 import { Layout } from '../components/layout';
 
 export default {

app/src/__stories__/NodeStatus.stories.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import NodeStatus from 'components/NodeStatus';
+
+export default {
+  title: 'Node Status',
+  component: NodeStatus,
+};
+
+export const Default = () => <NodeStatus />;

app/src/components/common/base.tsx

@@ -0,0 +1,9 @@
+import { styled } from 'components/theme';
+
+export const Background = styled.div`
+  min-height: 100vh;
+  color: ${props => props.theme.colors.white};
+  background-color: ${props => props.theme.colors.blue};
+  font-family: ${props => props.theme.fonts.regular};
+  font-size: ${props => props.theme.sizes.m};
+`;

app/src/components/layout/Layout.tsx

@@ -1,15 +1,9 @@
 import React from 'react';
+import { Background } from 'components/common/base';
 import { styled } from 'components/theme';
 import Sidebar from './Sidebar';
 
 const Styled = {
-  Background: styled.div`
-    min-height: 100vh;
-    color: ${props => props.theme.colors.white};
-    background-color: ${props => props.theme.colors.blue};
-    font-family: ${props => props.theme.fonts.regular};
-    font-size: ${props => props.theme.sizes.m};
-  `,
   Container: styled.div`
     min-height: 100vh;
     width: 1440px;
@@ -21,7 +15,7 @@ const Styled = {
     height: 100vh;
     background-color: ${props => props.theme.colors.darkBlue};
     width: 285px;
-    padding: 17px;
+    padding: 15px;
   `,
   Content: styled.div`
     margin-left: 285px;
@@ -30,7 +24,7 @@ const Styled = {
 };
 
 const Layout: React.FC = ({ children }) => {
-  const { Background, Container, Aside, Content } = Styled;
+  const { Container, Aside, Content } = Styled;
   return (
     <Background>
       <Container>