chore: organize stories in Storyboard explorer

app/src/__stories__/ChannelBalance.stories.tsx

@@ -5,7 +5,7 @@ import { Store } from 'store';
 import ChannelBalance from 'components/loop/ChannelBalance';
 
 export default {
-  title: 'Channel Balance',
+  title: 'Components/Channel Balance',
   component: ChannelBalance,
   parameters: { centered: true },
 };

app/src/__stories__/ChannelList.stories.tsx

@@ -4,7 +4,7 @@ import { Store } from 'store';
 import ChannelList from 'components/loop/ChannelList';
 
 export default {
-  title: 'Channel List',
+  title: 'Components/Channel List',
   component: ChannelList,
   parameters: { contained: true },
 };

app/src/__stories__/ChannelRow.stories.tsx

@@ -5,7 +5,7 @@ import { Store } from 'store';
 import ChannelRow, { ChannelRowHeader } from 'components/loop/ChannelRow';
 
 export default {
-  title: 'Channel Row',
+  title: 'Components/Channel Row',
   component: ChannelRow,
   parameters: { contained: true },
 };

app/src/__stories__/Layout.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { StoryContext } from '@storybook/addons';
 import { Store } from 'store';
+import LoopPage from 'components/loop/LoopPage';
 import { Layout } from '../components/layout';
 
 export default {
@@ -8,32 +9,11 @@ export default {
   component: Layout,
 };
 
-const SampleContent = () => (
-  <>
-    <h1 style={{ textAlign: 'center' }}>Lorem ipsum dolor sit amet</h1>
-    {[...Array(10)].map((_, i) => (
-      <p key={i}>
-        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
-        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
-        excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-        officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-        rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
-        eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
-        possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
-        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
-        voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
-        tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
-        consequatur aut perferendis doloribus asperiores repellat.
-      </p>
-    ))}
-  </>
-);
-
 export const Default = () => <Layout />;
 
 export const WithContent = () => (
   <Layout>
-    <SampleContent />
+    <LoopPage />
   </Layout>
 );
 
@@ -51,7 +31,7 @@ export const Collapsed = (ctx: StoryContext) => {
 
   return (
     <Layout>
-      <SampleContent />
+      <LoopPage />
     </Layout>
   );
 };

app/src/__stories__/LoopHistory.stories.tsx

@@ -5,7 +5,7 @@ import Tile from 'components/common/Tile';
 import LoopHistory from 'components/loop/LoopHistory';
 
 export default {
-  title: 'Loop History',
+  title: 'Components/Loop History',
   component: LoopHistory,
   parameters: { centered: true },
 };

app/src/__stories__/NodeStatus.stories.tsx

@@ -4,7 +4,7 @@ import { Store } from 'store';
 import NodeStatus from 'components/NodeStatus';
 
 export default {
-  title: 'Node Status',
+  title: 'Components/Node Status',
   component: NodeStatus,
   parameters: { centered: true },
 };

app/src/__stories__/Tile.stories.tsx

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import Tile from 'components/common/Tile';
 
 export default {
-  title: 'Tile',
+  title: 'Components/Tile',
   component: Tile,
   parameters: { centered: true },
 };