feat: Updating for use in both standalone and Flipper versions

BREAKING CHANGE: The ReactotronProvider has been renamed to ReactotronAppProvider and a new ReactotronProvider has been created serving a different function

.storybook/config.js

@@ -2,11 +2,9 @@ import React from "react"
 import { configure, addDecorator } from "@storybook/react"
 import { withKnobs } from "@storybook/addon-knobs"
 
-import ReactotronProvider from "../src/components/ReactotronProvider"
+import ReactotronAppProvider from "../src/components/ReactotronAppProvider"
 
-import theme from "../src/theme"
-
-const StyledDecorator = storyFn => <ReactotronProvider>{storyFn()}</ReactotronProvider>
+const StyledDecorator = storyFn => <ReactotronAppProvider>{storyFn()}</ReactotronAppProvider>
 addDecorator(StyledDecorator)
 
 addDecorator(withKnobs)

package.json

@@ -56,6 +56,7 @@
     "@storybook/addons": "5.3.13",
     "@storybook/react": "5.3.13",
     "@types/jest": "25.1.3",
+    "@testing-library/react-hooks": "3.2.1",
     "@types/react-modal": "3.10.2",
     "@types/react-motion": "0.0.29",
     "@types/react-tooltip": "3.11.0",
@@ -70,6 +71,8 @@
     "eslint-plugin-import": "2.20.1",
     "eslint-plugin-node": "11.0.0",
     "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "eslint-plugin-standard": "4.0.1",
     "jest": "25.1.0",
     "npm-run-all": "4.1.5",
@@ -80,6 +83,7 @@
     "react-motion": "0.5.2",
     "react-tooltip": "4.0.3",
     "rollup": "1.31.1",
+    "react-test-renderer": "16.12.0",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.1",
     "rollup-plugin-filesize": "6.2.1",
@@ -96,6 +100,7 @@
     "parser": "@typescript-eslint/parser",
     "extends": [
       "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
       "standard",
       "prettier"
     ],
@@ -106,9 +111,13 @@
       "project": "./tsconfig.json"
     },
     "plugins": [
-      "@typescript-eslint"
+      "@typescript-eslint",
+      "react-hooks"
     ],
     "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/prop-types": 0,
       "no-unused-vars": 0,
       "no-undef": 0,
       "space-before-function-paren": 0,
@@ -119,15 +128,15 @@
       "@typescript-eslint/no-object-literal-type-assertion": 0,
       "@typescript-eslint/no-empty-interface": 0,
       "@typescript-eslint/no-var-requires": 0,
-      "@typescript-eslint/member-delimiter-style": 0,
-      "@typescript-eslint/no-unused-vars": 0
+      "@typescript-eslint/member-delimiter-style": 0
     }
   },
   "jest": {
     "preset": "ts-jest",
-    "testEnvironment": "node",
+    "testEnvironment": "jsdom",
     "testMatch": [
-      "**/*.test.ts"
+      "**/*.test.ts",
+      "**/*.test.tsx"
     ]
   }
 }

src/components/EmptyState/EmptyState.story.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from "react"
+import { MdReorder } from "react-icons/md"
+
+import EmptyState from "./index"
+
+export default {
+  title: "Empty State",
+}
+
+export const Default = () => (
+  <EmptyState icon={MdReorder} title="Empty!">
+    Some more information
+  </EmptyState>
+)

src/components/EmptyState/index.tsx

@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from "react"
+import styled from "styled-components"
+
+const Container = styled.div`
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: ${props => props.theme.foregroundLight};
+`
+
+const Title = styled.div`
+  font-size: 2rem;
+  padding-bottom: 50px;
+  padding-top: 10px;
+`
+
+const Message = styled.div`
+  color: ${props => props.theme.foreground};
+  max-width: 400px;
+  line-height: 1.4;
+  text-align: center;
+`
+
+interface Props {
+  icon?: any // TODO: Type Better?
+  title: string
+}
+
+const EmptyState: FunctionComponent<Props> = ({ title, icon: Icon, children }) => {
+  return (
+    <Container>
+      {Icon && <Icon size={100} />}
+      <Title>{title}</Title>
+      <Message>{children}</Message>
+    </Container>
+  )
+}
+
+export default EmptyState

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

@@ -5,16 +5,18 @@ import theme from "../../theme"
 
 const ReactotronContainer = styled.div`
   font-family: ${props => props.theme.fontFamily};
+  font-size: 0.94em;
   width: 100%;
   height: 100%;
+  user-select: none;
 `
 
-const ReactotronProvider: FunctionComponent = ({ children }) => {
+const ReactotronAppProvider: FunctionComponent = ({ children }) => {
   return (
     <ThemeProvider theme={theme}>
       <ReactotronContainer>{children}</ReactotronContainer>
     </ThemeProvider>
   )
 }
 
-export default ReactotronProvider;
+export default ReactotronAppProvider;

src/contexts/CustomCommands/index.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent, useContext, useCallback } from "react"
+
+import ReactotronContext from "../Reactotron"
+
+import useCustomCommands, { CustomCommand } from "./useCustomCommands"
+
+interface Context {
+  customCommands: CustomCommand[]
+  sendCustomCommand: (command: any, args: any) => void
+}
+
+const CustomCommandsContext = React.createContext<Context>({
+  customCommands: [],
+  sendCustomCommand: null,
+})
+
+const Provider: FunctionComponent<any> = ({ children }) => {
+  const { sendCommand } = useContext(ReactotronContext)
+  const { customCommands } = useCustomCommands()
+
+  const sendCustomCommand = useCallback(
+    (command, args) => {
+      sendCommand("custom", { command, args })
+    },
+    [sendCommand]
+  )
+
+  return (
+    <CustomCommandsContext.Provider
+      value={{
+        customCommands,
+        sendCustomCommand,
+      }}
+    >
+      {children}
+    </CustomCommandsContext.Provider>
+  )
+}
+
+export default CustomCommandsContext
+export const CustomCommandsProvider = Provider

src/contexts/CustomCommands/useCustomCommands.test.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable react/display-name */
+import React from "react"
+import { renderHook } from "@testing-library/react-hooks"
+
+import ReactotronContext from "../Reactotron"
+import { CommandType } from "../../types"
+
+import useCustomCommands from "./useCustomCommands"
+
+function buildContextValues({ addCommandListener = null } = {}) {
+  return {
+    commands: [],
+    sendCommand: jest.fn(),
+    clearCommands: jest.fn(),
+    addCommandListener: addCommandListener || jest.fn(),
+    isDispatchModalOpen: false,
+    dispatchModalInitialAction: "",
+    openDispatchModal: jest.fn(),
+    closeDispatchModal: jest.fn(),
+    isSubscriptionModalOpen: false,
+    openSubscriptionModal: jest.fn(),
+    closeSubscriptionModal: jest.fn(),
+  }
+}
+
+describe("contexts/CustomCommands/useCustomCommands", () => {
+  it("should add and remove custom commands", () => {
+    let addCallback = null
+
+    const contextValues = buildContextValues({
+      addCommandListener: callback => {
+        addCallback = callback
+      },
+    })
+
+    const { result } = renderHook(() => useCustomCommands(), {
+      wrapper: ({ children }) => (
+        <ReactotronContext.Provider value={contextValues}>{children}</ReactotronContext.Provider>
+      ),
+    })
+
+    expect(result.current.customCommands).toEqual([])
+
+    addCallback({
+      type: CommandType.CustomCommandRegister,
+      clientId: "1234",
+      payload: {
+        id: 0,
+      },
+    })
+
+    expect(result.current.customCommands).toEqual([
+      {
+        clientId: "1234",
+        id: 0,
+      },
+    ])
+
+    addCallback({
+      type: CommandType.CustomCommandUnregister,
+      clientId: "1234",
+      payload: {
+        id: 0,
+      },
+    })
+
+    expect(result.current.customCommands).toEqual([])
+  })
+
+  it("should clear all commands after a reconnect", () => {
+    let addCallback = null
+
+    const contextValues = buildContextValues({
+      addCommandListener: callback => {
+        addCallback = callback
+      },
+    })
+
+    const { result } = renderHook(() => useCustomCommands(), {
+      wrapper: ({ children }) => (
+        <ReactotronContext.Provider value={contextValues}>{children}</ReactotronContext.Provider>
+      ),
+    })
+
+    expect(result.current.customCommands).toEqual([])
+
+    addCallback({
+      type: CommandType.CustomCommandRegister,
+      clientId: "1234",
+      payload: {
+        id: 0,
+      },
+    })
+
+    expect(result.current.customCommands).toEqual([
+      {
+        clientId: "1234",
+        id: 0,
+      },
+    ])
+
+    addCallback({
+      type: CommandType.ClientIntro,
+      clientId: "1234",
+    })
+
+    expect(result.current.customCommands).toEqual([])
+  })
+})