feat: Reorganized the files a bit for future work

.storybook/config.js

@@ -2,7 +2,7 @@ import React from "react"
 import { configure, addDecorator } from "@storybook/react"
 import { withKnobs } from "@storybook/addon-knobs"
 
-import ReactotronProvider from "../src/ReactotronProvider"
+import ReactotronProvider from "../src/components/ReactotronProvider"
 
 import theme from "../src/theme"
 

package.json

@@ -57,6 +57,7 @@
     "@types/react-modal": "^3.10.0",
     "@types/react-motion": "^0.0.29",
     "@types/react-tooltip": "^3.9.3",
+    "@types/stringify-object": "^3.2.0",
     "@types/styled-components": "^4.1.19",
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/parser": "^2.5.0",

src/ContentView/index.tsx → src/components/ContentView/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "styled-components"
-import makeTable from "../utils/makeTable"
-import isShallow from "../utils/isShallow"
+import makeTable from "../../utils/makeTable"
+import isShallow from "../../utils/isShallow"
 import TreeView from "../TreeView"
 
 const NullContainer = styled.div`

src/ReactotronProvider/index.tsx → src/components/ReactotronProvider/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import styled, { ThemeProvider } from "styled-components"
 
-import theme from "../theme"
+import theme from "../../theme"
 
 const ReactotronContainer = styled.div`
   font-family: ${props => props.theme.fontFamily};

src/Timestamp/index.tsx → src/components/Timestamp/index.tsx

@@ -4,6 +4,8 @@ import { format } from "date-fns"
 
 const Container = styled.div`
   position: relative;
+  font-family: "Fira Code", "SF Mono", "Consolas", "Segoe UI", "Roboto", "-apple-system",
+    "Helvetica Neue", sans-serif;
 `
 const LeftDateContainer = styled.span`
   color: ${props => props.theme.highlight};

src/TreeView/index.tsx → src/components/TreeView/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import JSONTree from "react-json-tree"
 import styled from "styled-components"
 
-import baseTheme from "../theme"
+import baseTheme from "../../theme"
 
 // TODO: Ripping this right from reactotron right now... should probably be better.
 const theme = {

src/index.ts

@@ -2,19 +2,23 @@
 import theme from "./theme"
 
 // Components
-import ContentView from "./ContentView"
-import DispatchActionModal from "./DispatchActionModal"
-import Header from "./Header"
-import Modal from "./Modal"
-import ReactotronProvider from "./ReactotronProvider"
-import SubscriptionAddModal from "./SubscriptionAddModal"
-import ActionButton from "./ActionButton"
-import TimelineCommand from "./TimelineCommand"
-import timelineCommandResolver from "./TimelineCommands"
-import TimelineCommandTabButton from "./TimelineCommandTabButton"
-import TimelineFilterModal from "./TimelineFilterModal"
-import Timestamp from "./Timestamp"
-import TreeView from "./TreeView"
+import ContentView from "./components/ContentView"
+import Header from "./components/Header"
+import Modal from "./components/Modal"
+import ReactotronProvider from "./components/ReactotronProvider"
+import ActionButton from "./components/ActionButton"
+import TimelineCommand from "./components/TimelineCommand"
+import TimelineCommandTabButton from "./components/TimelineCommandTabButton"
+import Timestamp from "./components/Timestamp"
+import TreeView from "./components/TreeView"
+
+// Modals
+import DispatchActionModal from "./modals/DispatchActionModal"
+import SubscriptionAddModal from "./modals/SubscriptionAddModal"
+import TimelineFilterModal from "./modals/TimelineFilterModal"
+
+// Timeline Commands
+import timelineCommandResolver from "./timelineCommands"
 
 // Utils
 import repairSerialization from "./utils/repair-serialization"

src/DispatchActionModal/index.tsx → src/modals/DispatchActionModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useRef, useState, useCallback, useEffect } from "react"
 import styled from "styled-components"
 
-import Modal, { KeystrokeContainer, Keystroke } from "../Modal"
+import Modal, { KeystrokeContainer, Keystroke } from "../../components/Modal"
 
 const InstructionText = styled.div`
   text-align: left;

src/SubscriptionAddModal/index.tsx → src/modals/SubscriptionAddModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useRef, useState, useCallback } from "react"
 import styled from "styled-components"
 
-import Modal, { KeystrokeContainer, Keystroke } from "../Modal"
+import Modal, { KeystrokeContainer, Keystroke } from "../../components/Modal"
 
 const InstructionText = styled.div`
   text-align: left;

src/TimelineFilterModal/TimelineFilterModal.story.tsx → src/modals/TimelineFilterModal/TimelineFilterModal.story.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
 import TimelineFilterModal from "./index"
-import { CommandType } from "../types"
+import { CommandType } from "../../types"
 
 export default {
   title: "Timeline Filter Modal",

src/TimelineFilterModal/index.tsx → src/modals/TimelineFilterModal/index.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 
-import Modal from "../Modal"
-import Checkbox from "../Checkbox"
-import { CommandType } from "../types"
+import Modal from "../../components/Modal"
+import Checkbox from "../../components/Checkbox"
+import { CommandType } from "../../types"
 
 const GROUPS = [
   {

src/TimelineCommands/ApiResponseCommand/index.tsx → src/timelineCommands/ApiResponseCommand/index.tsx

@@ -2,9 +2,9 @@ import React, { useState, FunctionComponent } from "react"
 import styled from "styled-components"
 import { MdCallReceived, MdCallMade, MdReceipt, MdContentCopy } from "react-icons/md"
 
-import TimelineCommand from "../../TimelineCommand"
-import TimelineCommandTabButton from "../../TimelineCommandTabButton"
-import ContentView from "../../ContentView"
+import TimelineCommand from "../../components/TimelineCommand"
+import TimelineCommandTabButton from "../../components/TimelineCommandTabButton"
+import ContentView from "../../components/ContentView"
 import { apiToMarkdown } from "../../utils/api-to-markdown"
 import { apiRequestToCurl } from "../../utils/api-to-curl"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"

src/TimelineCommands/AsyncStorageMutationCommand/index.tsx → src/timelineCommands/AsyncStorageMutationCommand/index.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
 import makeTable from "../../utils/makeTable"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 

src/TimelineCommands/BenchmarkReportCommand/index.tsx → src/timelineCommands/BenchmarkReportCommand/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 
 const NameContainer = styled.div`

src/TimelineCommands/ClientIntroCommand/index.tsx → src/timelineCommands/ClientIntroCommand/index.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
 import makeTable from "../../utils/makeTable"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 

src/TimelineCommands/DisplayCommand/index.tsx → src/timelineCommands/DisplayCommand/index.tsx

@@ -2,9 +2,9 @@ import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 import { MdContentCopy } from "react-icons/md"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
-import ContentView from "../../ContentView"
 
 const ImageContainer = styled.div``
 

src/TimelineCommands/ImageCommand/index.tsx → src/timelineCommands/ImageCommand/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 
 const Image = styled.img`

src/TimelineCommands/LogCommand/index.tsx → src/timelineCommands/LogCommand/index.tsx

@@ -3,9 +3,9 @@ import styled from "styled-components"
 import { MdContentCopy } from "react-icons/md"
 import stringifyObject from "stringify-object"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
-import ContentView from "../../ContentView"
 
 const SOURCE_LINES_UP = 3
 const SOURCE_LINES_DOWN = 3
@@ -200,6 +200,8 @@ function getPreview(message: string | object | boolean | number) {
   } else if (message === null || typeof message === "boolean" || typeof message === "number") {
     return String(message)
   }
+
+  return message;
 }
 
 function useFileSource(stack, readFile) {

src/TimelineCommands/SagaTaskCompleteCommand/Stateless.tsx → src/timelineCommands/SagaTaskCompleteCommand/Stateless.tsx

@@ -7,9 +7,9 @@ import {
   MdError as IconStatusRejected,
 } from "react-icons/md"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps } from "../BaseCommand"
-import ContentView from "../../ContentView"
 
 const STATUS_MAP = {
   RESOLVED: <IconStatusResolved size={18} />,

src/TimelineCommands/StateActionCompleteCommand/index.tsx → src/timelineCommands/StateActionCompleteCommand/index.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components"
 import { MdRepeat, MdCode } from "react-icons/md"
 import stringifyObject from "stringify-object"
 
-import TimelineCommand from "../../TimelineCommand"
-import ContentView from "../../ContentView"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 
 const NameContainer = styled.div`

src/TimelineCommands/StateKeysResponseCommand/index.tsx → src/timelineCommands/StateKeysResponseCommand/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
 
 const PathLabel = styled.div`

src/TimelineCommands/StateValuesChangeCommand/index.tsx → src/timelineCommands/StateValuesChangeCommand/index.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
-import ContentView from "../../ContentView"
 
 interface StateValuesChangePayload {
   added: any

src/TimelineCommands/StateValuesResponseCommand/index.tsx → src/timelineCommands/StateValuesResponseCommand/index.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
 
-import TimelineCommand from "../../TimelineCommand"
+import TimelineCommand from "../../components/TimelineCommand"
+import ContentView from "../../components/ContentView"
 import { TimelineCommandProps, buildTimelineCommand } from "../BaseCommand"
-import ContentView from "../../ContentView"
 
 const PathLabel = styled.div`
   padding-bottom: 10px;

yarn.lock

@@ -2074,6 +2074,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/stringify-object@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@types/stringify-object/-/stringify-object-3.2.0.tgz#17242cea3788eaea1ab3295dfee6da89a4f19a23"
+  integrity sha512-VUrjNFiyn1KcNV6nDf2L12pOfNLBQsUUvlniQymEwHCCX7XMa2OWIjr9Fgr1RoDWeCcfj7sMZFB6B3FfGD+Jdw==
+
 "@types/styled-components@^4.1.19":
   version "4.1.19"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.19.tgz#535b455d7744fda1608c605df82c0800eda61a09"