cleanup and consistency (#213)

- Made the use of `const` and `let` consistent
- import required functions and types from 'react' instead of using the
  `React.` namespace.
- Added `Expand` type, which can expand complex types to their "final"
  result.
- Ensured that we use `as const` for DEFAULT_XXX_TAG where we used a
  string. So that we have the type of `div` instead of `string` for
  example.
- Used `interface` over `type` where possible. I'm personally more of a
  `type` fan. But the TypeScript recommends `interfaces` where possible
  because they are faster, yield better error messages and so on.

Author: RobinMalfait

jest/custom-matchers.ts

@@ -1,17 +1,17 @@
 import '@testing-library/jest-dom/extend-expect'
 
 // Assuming requestAnimationFrame is roughly 60 frames per second
-const frame = 1000 / 60
-const amountOfFrames = 2
+let frame = 1000 / 60
+let amountOfFrames = 2
 
-const formatter = new Intl.NumberFormat('en')
+let formatter = new Intl.NumberFormat('en')
 
 expect.extend({
   toBeWithinRenderFrame(actual, expected) {
-    const min = expected - frame * amountOfFrames
-    const max = expected + frame * amountOfFrames
+    let min = expected - frame * amountOfFrames
+    let max = expected + frame * amountOfFrames
 
-    const pass = actual >= min && actual <= max
+    let pass = actual >= min && actual <= max
 
     return {
       message: pass

packages/@headlessui-react/pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
 
@@ -7,7 +7,7 @@ import { useDisposables } from '../src/hooks/use-disposables'
 import { PropsOf } from '../src/types'
 
 function NextLink(props: PropsOf<'a'>) {
-  const { href, children, ...rest } = props
+  let { href, children, ...rest } = props
   return (
     <Link href={href}>
       <a {...rest}>{children}</a>
@@ -58,23 +58,23 @@ function tap<T>(value: T, cb: (value: T) => void) {
 }
 
 function useKeyDisplay() {
-  const [mounted, setMounted] = React.useState(false)
+  let [mounted, setMounted] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setMounted(true)
   }, [])
 
   if (!mounted) return {}
-  const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
+  let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
   return isMac ? KeyDisplayMac : KeyDisplayWindows
 }
 
 function KeyCaster() {
-  const [keys, setKeys] = React.useState<string[]>([])
-  const d = useDisposables()
-  const KeyDisplay = useKeyDisplay()
+  let [keys, setKeys] = useState<string[]>([])
+  let d = useDisposables()
+  let KeyDisplay = useKeyDisplay()
 
-  React.useEffect(() => {
+  useEffect(() => {
     function handler(event: KeyboardEvent) {
       setKeys(current => [
         event.shiftKey && event.key !== 'Shift'

packages/@headlessui-react/pages/_error.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react'
-import Error from 'next/error'
+import React from 'react'
+import ErrorPage from 'next/error'
 import Head from 'next/head'
 import Link from 'next/link'
 
 import { ExamplesType, resolveAllExamples } from '../playground-utils/resolve-all-examples'
 import { PropsOf } from '../src/types'
 
 function NextLink(props: PropsOf<'a'>) {
-  const { href, children, ...rest } = props
+  let { href, children, ...rest } = props
   return (
     <Link href={href}>
       <a {...rest}>{children}</a>
@@ -25,7 +25,7 @@ export async function getStaticProps() {
 
 export default function Page(props: { examples: false | ExamplesType[] }) {
   if (props.examples === false) {
-    return <Error statusCode={404} />
+    return <ErrorPage statusCode={404} />
   }
 
   return (

packages/@headlessui-react/pages/listbox/listbox-with-pure-tailwind.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Listbox } from '@headlessui/react'
 
 import { classNames } from '../../src/utils/class-names'
 
-const people = [
+let people = [
   'Wade Cooper',
   'Arlene Mccoy',
   'Devon Webb',
@@ -17,10 +17,10 @@ const people = [
 ]
 
 export default function Home() {
-  const [active, setActivePerson] = React.useState(people[2])
+  let [active, setActivePerson] = useState(people[2])
 
   // Choose a random person on mount
-  React.useEffect(() => {
+  useEffect(() => {
     setActivePerson(people[Math.floor(Math.random() * people.length)])
   }, [])
 

packages/@headlessui-react/pages/listbox/multiple-elements.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Listbox } from '@headlessui/react'
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-const people = [
+let people = [
   'Wade Cooper',
   'Arlene Mccoy',
   'Devon Webb',
@@ -41,10 +41,10 @@ export default function Home() {
 }
 
 function PeopleList() {
-  const [active, setActivePerson] = React.useState(people[2])
+  let [active, setActivePerson] = useState(people[2])
 
   // Choose a random person on mount
-  React.useEffect(() => {
+  useEffect(() => {
     setActivePerson(people[Math.floor(Math.random() * people.length)])
   }, [])
 

packages/@headlessui-react/pages/menu/menu-with-framer-motion.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Link from 'next/link'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Menu } from '../../src/components/menu/menu'
@@ -69,7 +69,7 @@ export default function Home() {
 }
 
 function NextLink(props: PropsOf<'a'>) {
-  const { href, children, ...rest } = props
+  let { href, children, ...rest } = props
   return (
     <Link href={href}>
       <a {...rest}>{children}</a>

packages/@headlessui-react/pages/menu/menu-with-popper.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import React, { ReactNode, useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { Menu } from '@headlessui/react'
 
 import { usePopper } from '../../playground-utils/hooks/use-popper'
@@ -9,7 +9,7 @@ function classNames(...classes) {
 }
 
 export default function Home() {
-  const [trigger, container] = usePopper({
+  let [trigger, container] = usePopper({
     placement: 'bottom-end',
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
@@ -87,12 +87,12 @@ export default function Home() {
   )
 }
 
-function Portal(props: { children: React.ReactNode }) {
-  const { children } = props
-  const [mounted, setMounted] = React.useState(false)
+function Portal(props: { children: ReactNode }) {
+  let { children } = props
+  let [mounted, setMounted] = useState(false)
 
-  React.useEffect(() => setMounted(true), [])
+  useEffect(() => setMounted(true), [])
 
   if (!mounted) return null
-  return ReactDOM.createPortal(children, document.body)
+  return createPortal(children, document.body)
 }

packages/@headlessui-react/pages/menu/menu-with-transition-and-popper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Menu, Transition } from '@headlessui/react'
 
 import { usePopper } from '../../playground-utils/hooks/use-popper'
@@ -8,7 +8,7 @@ function classNames(...classes) {
 }
 
 export default function Home() {
-  const [trigger, container] = usePopper({
+  let [trigger, container] = usePopper({
     placement: 'bottom-end',
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],

packages/@headlessui-react/pages/menu/menu-with-transition.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Menu, Transition } from '@headlessui/react'
 
 function classNames(...classes) {

packages/@headlessui-react/pages/menu/menu.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Menu } from '@headlessui/react'
 
 import { PropsOf } from '../../src/types'
@@ -55,7 +55,7 @@ export default function Home() {
   )
 }
 
-function CustomMenuItem(props: PropsOf<Menu.Item<'a'>>) {
+function CustomMenuItem(props: PropsOf<typeof Menu.Item>) {
   return (
     <Menu.Item {...props}>
       {({ active, disabled }) => (