wip router

cli/introspection/src/prompt/components/Link.tsx

@@ -4,6 +4,7 @@ import { BACK_SYMBOL } from './helpers'
 import figures = require('figures')
 import { TabIndexContext } from './TabIndex'
 import { Key } from 'readline'
+import { RouterContext } from './Router'
 
 export type LinkKind = 'back' | 'forward'
 
@@ -29,7 +30,8 @@ export const Link: React.FC<Props> = props => {
   const { tabIndex, kind, description } = props
 
   const [focussed, setFocussed] = useState(false)
-  const ctx = useContext(TabIndexContext)
+  const tabCtx = useContext(TabIndexContext)
+  const routerCtx = useContext(RouterContext)
 
   useEffect(() => {
     const args = {
@@ -38,15 +40,14 @@ export const Link: React.FC<Props> = props => {
         setFocussed(focus)
       },
       onKey(key: Key) {
-        // TODO: Add arrow left & arrow right
         if (key.name === 'return') {
-          // DO SOMETHING
+          routerCtx.setRoute(props.href)
         }
       },
     }
-    ctx.register(args)
+    tabCtx.register(args)
     return () => {
-      ctx.unregister(args)
+      tabCtx.unregister(args)
     }
   })
 
@@ -62,7 +63,7 @@ export const Link: React.FC<Props> = props => {
           <Color bold dim={!focussed && backOrForward}>
             {showSymbol ? getSymbol(kind) : ' '}
           </Color>{' '}
-          <Color {...{ bold: focussed }}>{props.label.padEnd(padding)}</Color>
+          <Color {...{ bold: focussed || backOrForward }}>{props.label.padEnd(padding)}</Color>
         </Box>
         <Color dim>{description || ''}</Color>
       </Color>

cli/introspection/src/prompt/components/Router.tsx

@@ -0,0 +1,77 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+class RouterContextClass {
+  routes: { [key: string]: (active: boolean) => void } = {}
+  activeRoute?: string
+  registerRoute(route: string, cb: (active: boolean) => void) {
+    this.routes[route] = cb
+    if (this.activeRoute && this.activeRoute === route) {
+      this.routes[route](true)
+    }
+  }
+  unregisterRoute(route: string) {
+    console.log('unregistering', route)
+    console.log('unregistering', route)
+    console.log('unregistering', route)
+    console.log('unregistering', route)
+    console.log('unregistering', route)
+    delete this.routes[route]
+  }
+  setRoute(route: string) {
+    if (route !== this.activeRoute && this.routes[route]) {
+      if (this.activeRoute && this.routes[this.activeRoute]) {
+        this.routes[this.activeRoute](false)
+      }
+      this.activeRoute = route
+      // CONTINUE: Find out why <Route>'s are being removed from the "DOM"
+      setTimeout(() => {
+        this.routes[route](true)
+      })
+    }
+  }
+  setDefaultRoute(route: string) {
+    if (!this.activeRoute) {
+      this.setRoute(route)
+    }
+  }
+}
+
+const contextState = new RouterContextClass()
+
+export const RouterContext = React.createContext(contextState)
+
+export interface RouterProps {
+  defaultRoute: string
+}
+
+export const Router: React.FC<RouterProps> = props => {
+  const ctx = useContext(RouterContext)
+
+  useEffect(() => {
+    ctx.setDefaultRoute(props.defaultRoute)
+  }, [props.defaultRoute])
+
+  return <RouterContext.Provider value={contextState}>{props.children}</RouterContext.Provider>
+}
+
+export interface RouteProps {
+  component: any
+  path: string
+}
+
+export const Route: React.FC<RouteProps> = ({ component, path }) => {
+  const ctx = useContext(RouterContext)
+  const [active, setActive] = useState(false)
+
+  useEffect(() => {
+    const callback = active => {
+      setActive(active)
+    }
+    ctx.registerRoute(path, callback)
+    return () => {
+      ctx.unregisterRoute(path)
+    }
+  }, [path])
+
+  return active ? <>{component}</> : null
+}

cli/introspection/src/prompt/components/TabIndex.tsx

@@ -60,51 +60,15 @@ const contextState = new TabIndexContextClass()
 export const TabIndexContext = React.createContext(contextState)
 
 export function TabIndexProvider(props) {
-  const [state, setState] = React.useState(contextState)
-
   useStdin(({ key, actionKey, text }) => {
     if (key.name === 'up' || (key.name === 'tab' && key.shift)) {
-      state.up()
+      contextState.up()
     } else if (key.name === 'down' || key.name === 'tab') {
-      state.down()
+      contextState.down()
     } else {
-      state.emitKeyPress(key, actionKey, text)
+      contextState.emitKeyPress(key, actionKey, text)
     }
   })
 
-  return <TabIndexContext.Provider value={state}>{props.children}</TabIndexContext.Provider>
-}
-
-export function TabApp() {
-  const [value0, setValue0] = React.useState('')
-  const [value1, setValue1] = React.useState('')
-  const [value2, setValue2] = React.useState('')
-  const [value3, setValue3] = React.useState(false)
-
-  return (
-    <TabIndexProvider>
-      <Box marginTop={1} flexDirection="column">
-        <Color bold>This is a title</Color>
-        <Color dim>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </Color>
-        <BorderBox title="Some Title" flexDirection="column" marginTop={1}>
-          <TextInput
-            label="some labe"
-            value={value0}
-            placeholder="this is a placeholder"
-            tabIndex={0}
-            onChange={setValue0}
-          />
-          <Color dim>{'  '}Some other text</Color>
-          <TextInput label="some lable" value={value1} tabIndex={1} onChange={setValue1} />
-          <TextInput label="lubel" value={value2} tabIndex={2} onChange={setValue2} />
-          <Checkbox checked={value3} onChange={setValue3} tabIndex={3} label="This is a checkbox" />
-          <Link href="asd" label="Hellooo" tabIndex={4} />
-        </BorderBox>
-        <Box marginTop={1} flexDirection="column">
-          <Link href="asd" label="Create" tabIndex={5} kind="forward" />
-          <Link href="asd" label="Back" tabIndex={6} kind="back" description="(Database options)" />
-        </Box>
-      </Box>
-    </TabIndexProvider>
-  )
+  return <TabIndexContext.Provider value={contextState}>{props.children}</TabIndexContext.Provider>
 }

cli/introspection/src/prompt/inkTest.tsx

@@ -1,39 +1,19 @@
-import { render, Color, Box, Text } from 'ink'
+import { render } from 'ink'
 import React from 'react'
-import { Progress } from './components/Progress'
-import BorderBox from './components/BorderBox'
-import chalk from 'chalk'
-// import Step0StarterVsBlank from './newInit/Step0StarterVsBlank'
-import { TabApp } from './components/TabIndex'
-
-class Compy extends React.Component<any, { step: number; progress: number }> {
-  state = {
-    step: 0,
-    progress: 0,
-  }
-  componentDidMount() {
-    setInterval(() => {
-      this.setState(({ step }) => {
-        step += 0.05
-
-        return {
-          step,
-          progress: Math.abs(Math.sin(step)),
-        }
-      })
-    }, 16)
-  }
-  render() {
-    return (
-      <BorderBox flexDirection="column" title={chalk.bold('Hello World ' + Math.round(this.state.progress * 100))}>
-        <Progress progress={this.state.progress} />
-      </BorderBox>
-    )
-  }
-}
+import { TabIndexProvider } from './components/TabIndex'
+import { Router, Route } from './components/Router'
+import { TabApp } from './screens/TabApp'
+import { TabApp2 } from './screens/TabApp2'
 
 export function renderInk() {
   return new Promise(resolve => {
-    render(<TabApp />)
+    render(
+      <TabIndexProvider>
+        <Router defaultRoute="home">
+          <Route path="home" component={<TabApp />} />
+          <Route path="asd" component={<TabApp2 />} />
+        </Router>
+      </TabIndexProvider>,
+    )
   })
 }

cli/introspection/src/prompt/screens/TabApp.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { Box, Color } from 'ink'
+import BorderBox from '../components/BorderBox'
+import { TextInput } from '../components/inputs/TextInput'
+import { Checkbox } from '../components/inputs/Checkbox'
+import { Link } from '../components/Link'
+
+export function TabApp() {
+  const [value0, setValue0] = useState('')
+  const [value1, setValue1] = useState('')
+  const [value2, setValue2] = useState('')
+  const [value3, setValue3] = useState(false)
+
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Color bold>This is a title</Color>
+      <Color dim>This is TabApp 1</Color>
+      <BorderBox title="Some Title" flexDirection="column" marginTop={1}>
+        <TextInput
+          label="some labe"
+          value={value0}
+          placeholder="this is a placeholder"
+          tabIndex={0}
+          onChange={setValue0}
+        />
+        <Color dim>{'  '}Some other text</Color>
+        <TextInput label="some lable" value={value1} tabIndex={1} onChange={setValue1} />
+        <TextInput label="lubel" value={value2} tabIndex={2} onChange={setValue2} />
+        <Checkbox checked={value3} onChange={setValue3} tabIndex={3} label="This is a checkbox" />
+        <Link href="asd" label="Hellooo" tabIndex={4} />
+      </BorderBox>
+      <Box marginTop={1} flexDirection="column">
+        <Link href="asd" label="Create" tabIndex={5} kind="forward" />
+        <Link href="asd" label="Back" tabIndex={6} kind="back" description="(Database options)" />
+      </Box>
+    </Box>
+  )
+}

cli/introspection/src/prompt/screens/TabApp2.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { Box, Color } from 'ink'
+import BorderBox from '../components/BorderBox'
+import { TextInput } from '../components/inputs/TextInput'
+import { Checkbox } from '../components/inputs/Checkbox'
+import { Link } from '../components/Link'
+
+export function TabApp2() {
+  const [value0, setValue0] = useState('')
+  const [value1, setValue1] = useState('')
+  const [value2, setValue2] = useState('')
+  const [value3, setValue3] = useState(false)
+
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Color bold>This is a title 2</Color>
+      <Color dim>This is TabApp 2</Color>
+      <BorderBox title="Some Title" flexDirection="column" marginTop={1}>
+        <TextInput
+          label="some labe"
+          value={value0}
+          placeholder="this is a placeholder"
+          tabIndex={0}
+          onChange={setValue0}
+        />
+        <Color dim>{'  '}Some other text</Color>
+        <TextInput label="some lable" value={value1} tabIndex={1} onChange={setValue1} />
+        <TextInput label="lubel" value={value2} tabIndex={2} onChange={setValue2} />
+        <Checkbox checked={value3} onChange={setValue3} tabIndex={3} label="This is a checkbox" />
+        <Link href="home" label="Hellooo" tabIndex={4} />
+      </BorderBox>
+      <Box marginTop={1} flexDirection="column">
+        <Link href="home" label="Create" tabIndex={5} kind="forward" />
+        <Link href="home" label="Back" tabIndex={6} kind="back" description="(Database options)" />
+      </Box>
+    </Box>
+  )
+}