gatsby-ink.jsx

import React from "react"
import { render, Static, Box, Color, Text } from "ink"
import BigText from "ink-big-text"
import BBox from "ink-box"
import TextInput from "ink-text-input"
import { Tabs, Tab } from "ink-tab"
import _ from "lodash"

const purple = [102, 51, 153]
const hexPurple = `#663399`

const GText = props => <Color rgb={purple} {...props} />

const useProgressBar = duration => {
  const [percent, setPercent] = React.useState(0)

  let timer
  React.useEffect(() => {
    if (percent === 100) {
      clearInterval(timer)
    } else {
      timer = setInterval(() => setPercent(percent + 1), duration / 100)
    }
    return () => clearInterval(timer)
  })

  return percent
}

const Activity = props => <Text>Activity: {props.activity.id}</Text>

const useActivities = () => {
  // Generate activities
  const [activities, setNewActivity] = React.useState([
    { state: `inactive`, id: 1 },
    { state: `active`, id: 2 },
  ])
  const [id, setId] = React.useState(3)

  React.useEffect(() => {
    setTimeout(() => {
      const madeInactive = activities.map(a => {
        return { state: `inactive`, id: a.id }
      })
      setNewActivity(madeInactive.concat({ state: `active`, id }))
      setId(id + 1)
    }, Math.random() * 1000)
  }, [activities])

  // console.log(activities)
  return [
    activities.filter(a => a.state === `active`),
    activities.filter(a => a.state === `inactive`),
  ]
}

const ProgressBar = ({ duration, label, total }) => {
  const percent = useProgressBar(duration)
  return (
    <Box>
      [
      {_.range(0, percent).map(id => (
        <Text key={`equals ${id}`}>=</Text>
      ))}
      {_.range(0, 100 - percent).map(id => (
        <Text key={`space ${id}`}> </Text>
      ))}
      ] {Math.round((percent * total) / 100)} / {total} {percent}% {label}
    </Box>
  )
}

const Demo = () => {
  const [active, inactive] = useActivities()
  return (
    <Box flexDirection="column">
      <Static>
        <BigText text="Building Gatsby" />
        <Text bold key="header">
          Finished:
        </Text>
        {inactive.map(activity => (
          <Activity key={activity.id} activity={activity} />
        ))}
      </Static>
      <Text> </Text>
      <Text bold>In Progress:</Text>
      <Box>Activity: {active[0].id}</Box>
      <Text> </Text>
      <Text bold>Long running jobs</Text>
      <ProgressBar label="Downloading Files" duration={9000} total={83} />
      <ProgressBar
        label="Processing Image Thumbnails"
        duration={15000}
        total={584}
      />
    </Box>
  )
}

render(<Demo />)