Switch to bun recommended tsconfig file (#104)

Updates TypeScript config file to recommended format from Bun.

- https://bun.sh/docs/typescript#suggested-compileroptions
- https://github.com/tsconfig/bases/blob/main/bases/bun.json

Involves some project-wide import changes.

src/hooks/UseArray/Bookshelf/Bookshelf.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react'
+import type React from 'react'
+import { Fragment } from 'react'
 import { Button } from '../../../storybook-common/components'
 import useArray from '../useArray'
 import { BOOKS, UNUSED_BOOKS } from './constants'

src/hooks/UseArray/Bookshelf/UseArray.Bookshelf.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import Bookshelf from './Bookshelf'
 import BOOKSHELF_CODE from './Bookshelf.tsx?raw'
 

src/hooks/UseArray/Burger/Burger.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 import '../../../index.css'
 import { Button, Select } from '../../../storybook-common/components'
 import useArray from '../useArray'
@@ -10,7 +11,7 @@ import {
   INGREDIENT_OPTIONS,
   INGREDIENT_WIDTH,
 } from './constants'
-import { Ingredient, IngredientGroup } from './types'
+import type { Ingredient, IngredientGroup } from './types'
 
 const Burger: React.FC = () => {
   const [

src/hooks/UseArray/Burger/UseArray.Burger.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import Burger from './Burger'
 import BURGER_CODE from './Burger.tsx?raw'
 

src/hooks/UseArray/Burger/components/BottomBun.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const BottomBun: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.93 62.64" {...props}>

src/hooks/UseArray/Burger/components/Cheese.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Cheese: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 115 340.1 57.45" {...props}>

src/hooks/UseArray/Burger/components/Ketchup.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Ketchup: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 316.03 16.55" {...props}>

src/hooks/UseArray/Burger/components/Lettuce.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Lettuce: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.93 49.14" {...props}>

src/hooks/UseArray/Burger/components/Mayo.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Mayo: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 316.03 16.55" {...props}>

src/hooks/UseArray/Burger/components/Mustard.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Mustard: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 316.03 16.55" {...props}>

src/hooks/UseArray/Burger/components/Patty.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Patty: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325.77 46.2" {...props}>

src/hooks/UseArray/Burger/components/Tomato.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const Tomato: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 180 346.93 46.49" {...props}>

src/hooks/UseArray/Burger/components/TopBun.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react'
+import type React from 'react'
+import type { SVGProps } from 'react'
 
 const TopBun: React.FC<SVGProps<SVGSVGElement>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346.93 121.44" {...props}>

src/hooks/UseArray/Burger/constants.ts

@@ -9,7 +9,7 @@ import {
   Tomato,
   TopBun,
 } from './components'
-import { Ingredient, IngredientGroup } from './types'
+import type { Ingredient, IngredientGroup } from './types'
 
 export const INGREDIENT_WIDTH = '20rem'
 

src/hooks/UseArray/Burger/types.ts

@@ -1,4 +1,4 @@
-import { INGREDIENTS, INGREDIENT_GROUPS } from './constants'
+import type { INGREDIENTS, INGREDIENT_GROUPS } from './constants'
 
 export type Ingredient = keyof typeof INGREDIENTS
 

src/hooks/UseDeepCompareEffect/useDeepCompareEffect.ts

@@ -1,5 +1,6 @@
 import isEqual from 'lodash.isequal'
-import React, { useEffect, useMemo, useRef } from 'react'
+import type React from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 const useDeepCompareMemoize = <T>(value: T) => {
   const ref = useRef<T>(value)

src/hooks/UseFlag/Form/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import { Button } from '../../../storybook-common/components'
 import useFlag from '../useFlag'
 

src/hooks/UseFlag/Form/UseFlag.Form.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import Form from './Form'
 import FORM_CODE from './Form.tsx?raw'
 

src/hooks/UseFlag/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import '../../../index.css'
 import { Button, Modal as Modal_ } from '../../../storybook-common/components'
 import useFlag from '../useFlag'

src/hooks/UseFlexCorners/Apps/Apps.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import type React from 'react'
+import { useMemo } from 'react'
 import useFlexCorners from '../useFlexCorners'
 
 interface Props {

src/hooks/UseForm/JobApplication/JobApplication.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import type React from 'react'
 import { Select } from '../../../storybook-common/components'
 import Button from '../../../storybook-common/components/Button'
-import useForm, { Errors } from '../useForm'
+import type { Errors } from '../useForm'
+import useForm from '../useForm'
 import { buildOverriddenRegister } from '../useForm/utils'
 
 enum Title {

src/hooks/UseForm/JobApplication/UseForm.JobApplication.stories.tsx

@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { Errors } from '../useForm'
-import JobApplication, { ApplicationFormData } from './JobApplication'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { Errors } from '../useForm'
+import type { ApplicationFormData } from './JobApplication'
+import JobApplication from './JobApplication'
 import JOB_APPLICATION_CODE from './JobApplication.tsx?raw'
 
 type FormMeta = Meta<typeof JobApplication>

src/hooks/UseForm/Spreadsheet/Spreadsheet.tsx

@@ -1,8 +1,10 @@
-import React, { Fragment } from 'react'
+import type React from 'react'
+import { Fragment } from 'react'
 import { Select } from '../../../storybook-common/components'
 import Button from '../../../storybook-common/components/Button'
 import useTally from '../../UseTally/useTally'
-import useForm, { Errors, FormData } from '../useForm'
+import type { Errors, FormData } from '../useForm'
+import useForm from '../useForm'
 import { buildOverriddenRegister } from '../useForm/utils'
 import { SIZE_OPTIONS } from './constants'
 import { formatField } from './formatters'

src/hooks/UseForm/Spreadsheet/UseForm.Spreadsheet.stories.tsx

@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { Errors, FormData } from '../useForm'
-import Spreadsheet, { SpreadsheetFormData } from './Spreadsheet'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { Errors, FormData } from '../useForm'
+import type { SpreadsheetFormData } from './Spreadsheet'
+import Spreadsheet from './Spreadsheet'
 import SPREADSHEET_CODE from './Spreadsheet.tsx?raw'
 
 type FormMeta = Meta<typeof Spreadsheet>

src/hooks/UseForm/useForm/types/internal.ts

@@ -1,4 +1,4 @@
-import { FieldElement, FieldsData } from './public'
+import type { FieldElement, FieldsData } from './public'
 
 export type ObjectKey = string | number | symbol
 

src/hooks/UseForm/useForm/types/public.ts

@@ -1,12 +1,12 @@
-import React from 'react'
-import {
+import type React from 'react'
+import type {
   Coordinates,
   CoordinatesOfLength,
   CoordinatesOrNever,
   GraphData,
   IGraph,
 } from '../../../UseGraph/Graph'
-import { ObjectKey, PartialDataKeys } from './internal'
+import type { ObjectKey, PartialDataKeys } from './internal'
 
 /**
  * The type of elements that can be registered with `useForm` - inputs, selects, and textareas

src/hooks/UseForm/useForm/useForm.ts

@@ -1,14 +1,14 @@
 import React, { useCallback, useMemo, useRef } from 'react'
 import { getObjectWithoutKey } from '../../../common/utils'
-import {
+import type {
   Coordinates,
   CoordinatesOfLength,
   CoordinatesOrNever,
-  Graph,
   IGraph,
 } from '../../UseGraph/Graph'
+import { Graph } from '../../UseGraph/Graph'
 import useGraph from '../../UseGraph/useGraph'
-import {
+import type {
   Changed,
   Deregister,
   DeregisterAtCoordinates,

src/hooks/UseForm/useForm/utils/internal.ts

@@ -1,13 +1,15 @@
-import React from 'react'
-import { CoordinatesOrNever, Tuple } from '../../../UseGraph/Graph'
-import {
+import type React from 'react'
+import type { CoordinatesOrNever, Tuple } from '../../../UseGraph/Graph'
+import type {
   FieldData,
   FieldElement,
   Fields,
   FieldsData,
   FormData,
   PartialDataKeys,
   RegisterResult,
+} from '../types'
+import {
   isCheckboxInput,
   isDateInput,
   isFileInput,

src/hooks/UseForm/useForm/utils/public.ts

@@ -1,4 +1,4 @@
-import { FieldElement, FieldsData, Register, RegisterOptions } from '../types'
+import type { FieldElement, FieldsData, Register, RegisterOptions } from '../types'
 import { overrideRegisterResultPropNames } from './internal'
 
 export /**

src/hooks/UseGraph/Graph.ts

@@ -1,4 +1,4 @@
-import { Length, SafeSubtract } from '../../common/types/arithmetic'
+import type { Length, SafeSubtract } from '../../common/types/arithmetic'
 import { getObjectWithoutKey } from '../../common/utils'
 
 // #region tuple types

src/hooks/UseGraph/useGraph.ts

@@ -1,13 +1,12 @@
 import { useCallback, useState } from 'react'
-import {
+import type {
   Clear,
   Coordinates,
   CoordinatesOfLength,
   CoordinatesOrNever,
   ForEachVertex,
   GetAtCoordinates,
   GetVertex,
-  Graph,
   GraphData,
   GraphDataAtCoordinates,
   Map,
@@ -19,6 +18,7 @@ import {
   SetAllVertices,
   SomeVertex,
 } from './Graph'
+import { Graph } from './Graph'
 
 /**
  * The type of the `set` function for `useGraph`

src/hooks/UseMutationObserver/Attributes/Attributes.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react'
+import type React from 'react'
+import { useEffect } from 'react'
 import useMutationObserver from '../useMutationObserver'
 
 interface Props {
@@ -12,7 +13,7 @@ const Attributes: React.FC<Props> = ({ attributeMutation, attribute }) => {
     subtree: true,
   })
   useEffect(() => {
-    const currentAttribute = document.getElementById('example-div')?.dataset.attribute
+    const currentAttribute = document.getElementById('example-div')?.dataset['attribute']
     if (records && currentAttribute !== undefined) {
       attributeMutation(
         `Observed mutation with record attributeName ${records?.[0].attributeName}, div data ${

src/hooks/UseResizeObserver/ContainerQuery/ContainerQuery.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 import useResizeObserver from '../useResizeObserver'
 
 const ContainerQuery: React.FC = () => {

src/hooks/UseResizeObserver/TextArea/TextArea.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 import useResizeObserver from '../useResizeObserver'
 
 interface Props {

src/hooks/UseTally/SocialMedia/SocialMedia.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import { Button } from '../../../storybook-common/components'
 import useTally from '../useTally'
 import PFP from './assets/pfp.jpeg'

src/hooks/UseTally/useTally.ts

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react'
+import type React from 'react'
+import { useCallback, useState } from 'react'
 
 /**
  * Arguments to the `useTally` hook

src/hooks/UseThrottleFunction/API/API.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 import useThrottleFunction from '../useThrottleFunction'
 import COUNTRIES from './assets/countries.json'
 

src/hooks/UseThrottleValue/Counter/Counter.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react'
+import type React from 'react'
+import { useEffect } from 'react'
 import useTally from '../../UseTally/useTally'
 import useThrottleValue from '../useThrottleValue'
 

src/hooks/UseThrottleValue/Search/Search.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import type React from 'react'
+import { useMemo } from 'react'
 import BOOK_NAMES from '../../../storybook-common/assets/book-names.json'
 import useThrottleValue from '../useThrottleValue'
 

src/hooks/UseWindowListener/MouseMove/MouseMove.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import useWindowListener from '../useWindowListener'
 
 interface Props {

src/hooks/UseWindowListener/Resize/Resize.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import useWindowListener from '../useWindowListener'
 
 interface Props {

src/index.ts

@@ -10,11 +10,8 @@ import useFlexCorners, {
   type UseFlexCornersReturn,
 } from './hooks/UseFlexCorners/useFlexCorners'
 import useForm from './hooks/UseForm/useForm'
-import useGraph, {
-  UseGraph,
-  UseGraphReturn,
-  UseGraphReturnFunctions,
-} from './hooks/UseGraph/useGraph'
+import type { UseGraph, UseGraphReturn, UseGraphReturnFunctions } from './hooks/UseGraph/useGraph'
+import useGraph from './hooks/UseGraph/useGraph'
 import useMatchMedia, { type UseMatchMedia } from './hooks/UseMatchMedia/useMatchMedia'
 import useMutationObserver, {
   type UseMutationObserver,

src/storybook-common/components/Button.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react'
+import type React from 'react'
+import type { ComponentProps } from 'react'
 
 interface Props extends ComponentProps<'button'> {
   variant?: 'fill' | 'outline' | 'text'

src/storybook-common/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import ReactDOM from 'react-dom'
 import Button from './Button'
 

src/storybook-common/components/Select.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react'
+import type React from 'react'
+import type { ComponentProps } from 'react'
 
 type OptionValue = React.OptionHTMLAttributes<HTMLOptionElement>['value']