fix: PR comments

babel.config.js

@@ -1,11 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-module.exports = {
-	presets: [
-		['@babel/preset-env', { targets: { node: 'current' } }],
-		'@babel/preset-typescript',
-		['@babel/preset-react', { runtime: 'automatic' }],
-	],
-}

package.json

@@ -24,10 +24,6 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/core": "^7.16.0",
-		"@babel/preset-env": "^7.16.4",
-		"@babel/preset-react": "^7.16.0",
-		"@babel/preset-typescript": "^7.16.0",
 		"@essex/eslint-config": "^20.0.0",
 		"@essex/eslint-plugin": "^20.0.0",
 		"@essex/jest-config": "^20.0.0",
@@ -48,7 +44,6 @@
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"regenerator-runtime": "^0.13.9",
-		"ts-jest": "^27.1.2",
 		"typescript": "^4.5.5"
 	},
 	"prettier": "@essex/prettier-config"

packages/color/package.json

@@ -26,7 +26,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@types/chroma-js": "^2.1.3",
 		"@types/node": "^14.18.5"
 	},

packages/core/package.json

@@ -31,7 +31,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@types/d3-scale": "^2.2.6",
 		"@types/jest": "^26.0.24",
 		"@types/lodash": "^4.14.178",

packages/core/src/extensions/office.ts

@@ -4,7 +4,7 @@
  */
 import { Theme, ThemeVariant, Transformer } from '../types/index.js'
 
-export interface OfficeTheme {
+export type OfficeTheme = {
 	dark1: string
 	light1: string
 	dark2: string

packages/d3/package.json

@@ -26,7 +26,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@types/d3-axis": "^1.0.16",
 		"@types/d3-selection": "^1.4.3",
 		"@types/node": "^14.18.5"

packages/d3/src/layers.ts

@@ -16,19 +16,19 @@ export interface SelectionOptions {
 	/**
 	 * This is a map of event handlers to apply to the selection.
 	 */
-	on?: { [key: string]: any }
+	on: { [key: string]: any }
 	/**
 	 * This is a map of ad-hoc attrs to apply to the selection.
 	 */
-	attr?: { [key: string]: any }
+	attr: { [key: string]: any }
 	/**
 	 * Map of ad-hoc classes to add or remove from the selection.
 	 */
-	classed?: { [key: string]: any }
+	classed: { [key: string]: any }
 	/**
 	 * Map of ad-hoc styles to add or remove from the selection.
 	 */
-	style?: { [key: string]: any }
+	style: { [key: string]: any }
 }
 
 export interface ChartOptions extends SelectionOptions {
@@ -45,7 +45,7 @@ export interface PlotAreaOptions extends ChartOptions {
 
 function getSelectionOptions(
 	_selection: Selection<Element, any, Element, any>,
-	options?: SelectionOptions,
+	options?: Partial<SelectionOptions>,
 ): SelectionOptions {
 	const _on = (options && options.on) || {}
 	const _attr = (options && options.attr) || {}
@@ -64,15 +64,15 @@ function getChartOptions(
 	const height = h || +selection.attr('height') || 0
 	const sOpts = getSelectionOptions(selection, options)
 	return {
-		on: sOpts.on ?? {},
+		on: sOpts.on,
 		attr: {
 			// stick these on for application later
 			width,
 			height,
 			...sOpts.attr,
 		},
-		classed: sOpts.classed ?? {},
+		classed: sOpts.classed,
-		style: sOpts.style ?? {},
+		style: sOpts.style,
 	}
 }
 
@@ -104,15 +104,15 @@ function getPlotAreaOptions(
 		marginBottom,
 		marginLeft,
 		marginRight,
-		on: sOpts.on ?? {},
+		on: sOpts.on,
 		attr: {
 			// stick these on for application later
 			width,
 			height,
 			...sOpts.attr,
 		},
-		classed: sOpts.classed ?? {},
+		classed: sOpts.classed,
-		style: sOpts.style ?? {},
+		style: sOpts.style,
 	}
 }
 

packages/fluent/package.json

@@ -28,7 +28,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@fluentui/font-icons-mdl2": "^8.1.20",
 		"@fluentui/react": "^8.49.0",
 		"@types/chroma-js": "^2.1.3",

packages/fluent/src/FluentTheme.ts

@@ -53,7 +53,7 @@ export class FluentTheme extends ThemeImpl implements IThematicFluentTheme {
 		return this._fTheme.semanticColors
 	}
 	get rtl() {
-		return this._fTheme.rtl ?? false
+		return this._fTheme.rtl
 	}
 	get spacing() {
 		return this._fTheme.spacing

packages/fluent/src/components/ColorPicker/ColorPicker.tsx

@@ -24,11 +24,11 @@ export interface ColorPickerStyles {
 }
 
 export interface ColorPickerProps {
-	onChange?: ((theme: Theme) => void) | undefined
+	onChange?: (theme: Theme) => void
 	/** Optional theme to use, otherwise it will be pulled from context */
-	theme?: Theme | undefined
+	theme?: Theme
-	layout?: ColorPickerLayout | undefined
+	layout?: ColorPickerLayout
-	styles?: ColorPickerStyles | undefined
+	styles?: ColorPickerStyles
 }
 
 export type PartialParams = Partial<Params>

packages/react/package.json

@@ -25,7 +25,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@types/node": "^14.18.5",
 		"@types/react": "^17.0.38",
 		"react": "^17.0.2"

packages/vega/package.json

@@ -24,7 +24,7 @@
 	},
 	"devDependencies": {
 		"@essex/scripts": "^20.0.1",
-		"@essex/tsconfig-base": "^1.0.0",
+		"@essex/tsconfig-base": "^1.0.1",
 		"@types/node": "^14.18.5",
 		"vega": "5.15.0"
 	},

packages/webapp/package.json

@@ -43,6 +43,7 @@
 		"@types/node": "^14.18.5",
 		"@types/react": "^17.0.38",
 		"@types/react-dom": "^17.0.11",
+		"typescript": "^4.5.5",
 		"vite": "^2.8.0"
 	},
 	"browserslist": [

packages/webapp/src/components/App/App.tsx

@@ -4,7 +4,7 @@
  */
 import { ThematicFluentProvider } from '@thematic/fluent'
 import { ApplicationStyles } from '@thematic/react'
-import { FC } from 'react'
+import type { FC } from 'react'
 import { useTheme } from '../../state'
 import { ControlPanel } from '../ControlPanel'
 import { ThemeEditor } from '../ThemeEditor'

packages/webapp/src/components/ColorPalette/ApplicationPalette.tsx

@@ -4,7 +4,7 @@
  */
 
 import './index.css'
-import { Theme, Application } from '@thematic/core'
+import type { Theme, Application } from '@thematic/core'
 import { useThematic } from '@thematic/react'
 import { FC, useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'

packages/webapp/src/components/ColorPalette/index.tsx

@@ -27,19 +27,19 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
 		usePalette()
 	const accent = (
 		<Fragment>
-			<span style={{ color: accentColor }}>Accent {accentColor}</span>
+			<span style={{ color: accentColor! }}>Accent {accentColor}</span>
 		</Fragment>
 	)
 	const background = (
 		<Fragment>
-			<span style={{ color: foregroundColor }}>
+			<span style={{ color: foregroundColor! }}>
 				Background {backgroundColor}
 			</span>
 		</Fragment>
 	)
 	const foreground = (
 		<Fragment>
-			<span style={{ color: foregroundColor }}>
+			<span style={{ color: foregroundColor! }}>
 				Foreground {foregroundColor}
 			</span>
 		</Fragment>
@@ -59,13 +59,13 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
 		<div
 			style={{
 				border: `1px solid ${foregroundColor}`,
-				background: backgroundColor,
+				background: backgroundColor!,
 				padding: '10px 30px 30px 30px',
-				color: foregroundColor,
+				color: foregroundColor!,
 				textAlign: 'left',
 			}}
 		>
-			<h2 style={{ color: foregroundColor }}>Application colors</h2>
+			<h2 style={{ color: foregroundColor! }}>Application colors</h2>
 			<ApplicationPalette />
 			<ul
 				style={{
@@ -77,9 +77,9 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
 				<li>
 					{foreground} on {background} (contrast ratio:{' '}
 					<Contrast
-						foreground={foregroundColor}
+						foreground={foregroundColor!}
-						background={backgroundColor}
+						background={backgroundColor!}
-						error={errorColor}
+						error={errorColor!}
 						showLink
 					/>
 					)
@@ -87,15 +87,15 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
 				<li>
 					{accent} on {background} (contrast ratio:{' '}
 					<Contrast
-						foreground={accentColor}
+						foreground={accentColor!}
-						background={backgroundColor}
+						background={backgroundColor!}
-						error={errorColor}
+						error={errorColor!}
 						showLink
 					/>
 					)
 				</li>
 			</ul>
-			<h2 style={{ color: foregroundColor }}>Scales</h2>
+			<h2 style={{ color: foregroundColor! }}>Scales</h2>
 			<div
 				style={{
 					display: 'flex',
@@ -108,52 +108,52 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
 			>
 				<ColorStrip
 					label="Nominal "
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					background={backgroundColor}
+					background={backgroundColor!}
-					colors={nominal}
+					colors={nominal!}
 				/>
 				<ColorStrip
 					label="Nominal+"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					background={backgroundColor}
+					background={backgroundColor!}
-					colors={nominalBold}
+					colors={nominalBold!}
-					labelColors={nominalMuted}
+					labelColors={nominalMuted!}
 				/>
 				<ColorStrip
 					label="Nominal-"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					background={backgroundColor}
+					background={backgroundColor!}
-					colors={nominalMuted}
+					colors={nominalMuted!}
-					labelColors={nominalBold}
+					labelColors={nominalBold!}
 				/>
 				<ColorBand
 					label="Sequential"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					colors={sequential}
+					colors={sequential!}
 					width={BAND_WIDTH}
 				/>
 				<ColorBand
 					label="Sequential2"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					colors={sequential2}
+					colors={sequential2!}
 					width={BAND_WIDTH}
 				/>
 				<ColorBand
 					label="Diverging"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					colors={diverging}
+					colors={diverging!}
 					width={BAND_WIDTH}
 				/>
 				<ColorBand
 					label="Diverging2"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					colors={diverging2}
+					colors={diverging2!}
 					width={BAND_WIDTH}
 				/>
 				<ColorBand
 					label="Greys"
-					foreground={foregroundColor}
+					foreground={foregroundColor!}
-					colors={greys}
+					colors={greys!}
 					width={BAND_WIDTH}
 				/>
 			</div>

packages/webapp/src/components/ColorStrip/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { CSSProperties, FC } from 'react'
+import type { CSSProperties, FC } from 'react'
 
 import './index.css'
 

packages/webapp/src/components/ControlPanel/ControlPanel.tsx

@@ -10,7 +10,7 @@ import {
 	Position,
 } from '@fluentui/react'
 import { ColorBlindnessMode, colorBlindnessInfo } from '@thematic/color'
-import { ThemeListing, Theme } from '@thematic/core'
+import type { ThemeListing, Theme } from '@thematic/core'
 import { ColorPickerButton } from '@thematic/fluent'
 import { useCallback, FC, useMemo } from 'react'
 import { EnumDropdown } from '../EnumDropdown'
@@ -58,7 +58,7 @@ export const ControlPanel: FC<ControlPanelProps> = ({
 	onDarkModeChange,
 }) => {
 	const handleThemeChange = useCallback(
-		(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+		(_event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
 			if (option) {
 				const found = themes.find(t => t.id === option.key)
 				if (found) {
@@ -91,12 +91,12 @@ export const ControlPanel: FC<ControlPanelProps> = ({
 	}, [darkMode, onDarkModeChange])
 
 	const handleDrawNodesChange = useCallback(
-		(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
+		(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
 			onDrawNodesChange(!!checked),
 		[onDrawNodesChange],
 	)
 	const handleDrawLinksChange = useCallback(
-		(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
+		(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
 			onDrawLinksChange(!!checked),
 		[onDrawLinksChange],
 	)

packages/webapp/src/components/CoolerPicker/ColorSelection.tsx

@@ -2,9 +2,9 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Theme } from '@thematic/core'
+import type { Theme } from '@thematic/core'
 import { ColorPicker, ColorPickerLayout } from '@thematic/fluent'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 import './index.css'
 

packages/webapp/src/components/CoolerPicker/index.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Theme } from '@thematic/core'
+import type { Theme } from '@thematic/core'
-import { FC } from 'react'
+import type { FC } from 'react'
 import { useSetTheme } from '../../state'
 import { ColorSelection } from './ColorSelection'
 import './index.css'

packages/webapp/src/components/EnumDropdown/index.tsx

@@ -26,10 +26,9 @@ export interface EnumDropdownProps<E> {
  */
 export function EnumDropdown<E>({
 	enumeration,
-	label,
 	selected,
 	onChange = () => null,
-	styles,
+	...props
 }: EnumDropdownProps<E>): JSX.Element {
 	const options = useMemo(
 		() =>
@@ -39,7 +38,7 @@ export function EnumDropdown<E>({
 		[enumeration],
 	)
 	const handleChange = useCallback(
-		(e: React.FormEvent, v: IDropdownOption | undefined) => {
+		(_e: React.FormEvent, v: IDropdownOption | undefined) => {
 			if (v) {
 				setSelectedKey(v.key)
 				onChange(v.key)
@@ -51,11 +50,10 @@ export function EnumDropdown<E>({
 	const [selectedKey, setSelectedKey] = useState<string | number>(key)
 	return (
 		<Dropdown
-			label={label}
 			options={options}
 			selectedKey={selectedKey}
 			onChange={handleChange}
-			styles={styles}
+			{...props}
 		/>
 	)
 }

packages/webapp/src/components/FluentControls/index.tsx

@@ -22,7 +22,10 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 }) => {
 	const theme = useThematic()
 	const [scale, setScale] = useState<string>('<none>')
-	const handleScaleChange = useCallback((e, option) => setScale(option.key), [])
+	const handleScaleChange = useCallback(
+		(_e, option) => setScale(option.key),
+		[],
+	)
 	const [scaleType, setScaleType] = useState<ScaleType>(ScaleType.Linear)
 	const handleScaleTypeChange = useCallback(type => setScaleType(type), [])
 	const handlePickerChange = useCallback(t => themeLoaded(t), [themeLoaded])

packages/webapp/src/components/FluentViewer/FluentPalette.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { IPalette, Theme } from '@fluentui/react'
+import type { IPalette, Theme } from '@fluentui/react'
-import { FluentTheme } from '@thematic/fluent'
+import type { FluentTheme } from '@thematic/fluent'
 import { FC, useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'
 

packages/webapp/src/components/JSONEditor/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { TextField } from '@fluentui/react'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 export interface JSONEditorProps {
 	value: unknown

packages/webapp/src/components/MarkGrid/GridCell.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { SelectionState, ThemeElementType } from '@thematic/core'
+import type { SelectionState, ThemeElementType } from '@thematic/core'
 import { useThematic, mark2style } from '@thematic/react'
 import { CSSProperties, FC, useMemo } from 'react'
 import { Rect, Circle, Line, Arc, Text } from '../svg'

packages/webapp/src/components/Office/OfficePalette.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { OfficeTheme } from '@thematic/core'
+import type { OfficeTheme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
 import { FC, useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'

packages/webapp/src/components/Office/index.tsx

@@ -7,6 +7,7 @@ import { useThematic } from '@thematic/react'
 import { FC, useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { OfficePalette } from './OfficePalette'
+
 export const Office: FC = () => {
 	const theme = useThematic()
 	const ofc = useMemo(() => theme.transform(office) as OfficeTheme, [theme])

packages/webapp/src/components/PowerBI/PowerBIPalette.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { PowerBITheme } from '@thematic/core'
+import type { PowerBITheme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
 import { FC, useMemo } from 'react'
 import { ColorDefinition, ColorStrip } from '../ColorStrip'

packages/webapp/src/components/ThemeEditor/ThemeEditor.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Pivot, PivotItem } from '@fluentui/react'
-import { FC } from 'react'
+import type { FC } from 'react'
 import { ColorPalette } from '../ColorPalette'
 import { CoolerPicker } from '../CoolerPicker'
 import { FluentViewer } from '../FluentViewer'

packages/webapp/src/components/ThemeViewer/ThemeViewer.tsx

@@ -4,7 +4,7 @@
  */
 import { Pivot, PivotItem } from '@fluentui/react'
 import { FC, useMemo } from 'react'
-import { Graph } from '../../interfaces'
+import type { Graph } from '../../interfaces'
 import { FluentControls } from '../FluentControls'
 import { D3Chart } from '../charts/D3'
 import { VegaChart, charts } from '../charts/Vega'

packages/webapp/src/components/charts/D3/index.tsx

@@ -158,8 +158,8 @@ export const D3Chart: FC<ChartProps> = ({ width = 800, height = 600 }) => {
 				.attr('width', LEGEND_WIDTH)
 				.attr('height', 1)
 				.attr('x', 1)
-				.attr('y', (d, i) => plotHeight - i)
+				.attr('y', (_d, i) => plotHeight - i)
-				.attr('fill', (d, i) => scale(i).hex())
+				.attr('fill', (_d, i) => scale(i).hex())
 				.attr('fill-opacity', CIRCLE_FILL_OPACITY)
 			const labels = [
 				{

packages/webapp/src/components/graphs/D3/index.tsx

@@ -22,7 +22,7 @@ import {
 	useCallback,
 	FC,
 } from 'react'
-import { Graph, Node, Edge } from '../../../interfaces'
+import type { Graph, Node, Edge } from '../../../interfaces'
 import { bounds } from '../../../util/graph'
 
 export interface GraphProps {
@@ -95,10 +95,10 @@ export const D3Graph: FC<GraphProps> = ({
 			.enter()
 			.append('line')
 			.attr('class', 'link')
-			.attr('x1', d => xScale(nmap[d.source].x) as number)
+			.attr('x1', d => xScale(nmap[d.source]!.x) as number)
-			.attr('x2', d => xScale(nmap[d.target].x) as number)
+			.attr('x2', d => xScale(nmap[d.target]!.x) as number)
-			.attr('y1', d => yScale(nmap[d.source].y) as number)
+			.attr('y1', d => yScale(nmap[d.source]!.y) as number)
-			.attr('y2', d => yScale(nmap[d.target].y) as number)
+			.attr('y2', d => yScale(nmap[d.target]!.y) as number)
 			.call(line as any, theme.link({ selectionState: SelectionState.Hidden }))
 
 		g.selectAll('.node')

packages/webapp/src/components/svg/index.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { SVGMark, Text as TextMark } from '@thematic/core'
+import type { SVGMark, Text as TextMark } from '@thematic/core'
-import { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
 
 export interface MarkProps {
 	children: ReactNode

packages/webapp/src/state/data.ts

@@ -4,7 +4,7 @@
  */
 import { atom, useRecoilState } from 'recoil'
 import { graph } from '../data'
-import { Graph } from '../interfaces'
+import type { Graph } from '../interfaces'
 
 const graphState = atom<Graph>({
 	key: 'graph',

packages/webapp/src/state/theme.ts

@@ -31,7 +31,7 @@ export function useThemes() {
 
 const themeInfoState = atom<ThemeListing>({
 	key: 'theme-info',
-	default: defaultThemes[0],
+	default: defaultThemes[0]!,
 })
 
 // we drive the theme by the params, so if a pre-defined theme

packages/webapp/src/util/download.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-export const download = (value, filename) => {
+export function download(value: BlobPart, filename: string): void {
 	const blob = new Blob([value])
 	const url = URL.createObjectURL(blob)
 	const a = document.createElement('a')

packages/webapp/src/util/graph.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Node } from '../interfaces'
+import type { Node } from '../interfaces'
 /**
  * Compute the bounds for a node list
  * @param nodes

packages/webapp/tsconfig.json

@@ -1,10 +1,33 @@
 {
-	"extends": "../../tsconfig.json",
 	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"jsx": "react-jsx",
+		"lib": ["dom", "esnext"],
+
+		// Strictest
+		"strict": true,
+		"alwaysStrict": true,
+		"allowUnusedLabels": false,
+		"allowUnreachableCode": false,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitOverride": true,
+		"noImplicitReturns": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noUncheckedIndexedAccess": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"importsNotUsedAsValues": "error",
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"skipLibCheck": true,
+
+		// Package Config
 		"outDir": "lib",
-		"allowSyntheticDefaultImports": true,
 		"resolveJsonModule": true,
-		"skipLibCheck": true
+		"allowSyntheticDefaultImports": true
 	},
 	"include": ["src/**/*"]
 }

tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"module": "esnext",
-		"moduleResolution": "node",
-		"declaration": true,
-		"jsx": "react-jsx",
-		"lib": ["dom", "esnext"],
-		// SDI covers over esm support flaws. Libraries should not ship with SDI enabled if it's at all possible.
-		// However, application code can use it to write idiomatic react imports.
-		"allowSyntheticDefaultImports": false,
-		"forceConsistentCasingInFileNames": true,
-		"strict": true,
-		"esModuleInterop": true
-	},
-	"exclude": ["**/node_modules/**", "**/__tests__/**"]
-}