controls

[Travis Arnold]

Lean on TypeScript types to generate controls for playing with live examples. In the following use case, a boolean control would be created and also utilize the JSDoc description:

export function BasicUsage({
  showing = false
}: {
  /** Controls showing and hiding the AlertDialog. */
  showing: boolean
}) {
  return (
    <AlertDialog
      title="You do not have access to this project."
      variant="error"
      isShowing={showing}
    />
  )
}

When toggling controls, the function is re-run with those arguments transformed using ts-morph. This lends for generating controls for more complex scenarios like live code. For example, when there isn't a clear boundary like props, but internal conditional logic that should still be surfaced for testing:

export function BasicUsage() {
  const [showing, setShowing] = useState(false)

  return (
    <>
      <Button onClick={() => setShowing(true)}>Show<Button>
      <AlertDialog
        title="You do not have access to this project."
        variant="error"
        isShowing={showing}
        onConfirm={() => setShowing(false)}
      />
    </>
  )
}

In this scenario we traverse all conditional logic and jsx expressions to use as heuristics for what controls to build.