refactor: fix type issues in docs app

packages/__docs__/package.json

@@ -18,6 +18,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "build:scripts:ts": "tsc -b tsconfig.node.build.json",
+    "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false",
     "clean": "ui-scripts clean",
     "createStatsFile": "mkdirp ./__build__ && webpack --profile --json > __build__/bundleStats.json",
     "analyseStatsFile": "webpack-bundle-analyzer __build__/bundleStats.json"

packages/__docs__/src/App/index.tsx

@@ -101,7 +101,7 @@ class App extends Component<AppProps, AppState> {
   static defaultProps = {
     trayWidth: 300
   }
-  _content?: HTMLDivElement
+  _content?: HTMLDivElement | null
   _menuTrigger?: HTMLButtonElement
   _mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
   _defaultDocumentTitle?: string

packages/__docs__/src/App/props.ts

@@ -28,7 +28,7 @@ import type {
   MainIconsData,
   MainDocsData,
   ProcessedFile
-} from '../../buildScripts/DataTypes'
+} from '../../buildScripts/DataTypes.mts'
 
 type AppOwnProps = {
   trayWidth: number

packages/__docs__/src/Document/index.tsx

@@ -345,7 +345,7 @@ import { ${importName} } from '${esPath}'
             >
               {this.renderDetails(doc)}
             </Tabs.Panel>
-            {children.map((child, index) => (
+            {children.map((child: any, index: any) => (
               <Tabs.Panel
                 renderTitle={child.title}
                 key={`${child.id}TabPanel`}

packages/__docs__/src/Header/index.tsx

@@ -48,7 +48,7 @@ class Header extends Component<HeaderProps> {
   }
 
   handleSelect = (
-    _e: React.MouseEvent<Element, MouseEvent>,
+    _e: React.MouseEvent<any>,
     updated: (string | number | undefined)[]
   ) => {
     const [selectedVersion] = updated

packages/__docs__/src/Hero/index.tsx

@@ -467,7 +467,7 @@ class Hero extends Component<HeroProps> {
                     <Button
                       withBackground={false}
                       color="primary-inverse"
-                      renderIcon={IconGithubSolid}
+                      renderIcon={IconGithubSolid as any}
                       href="https://github.com/instructure/instructure-ui"
                       size={bigScreen ? 'large' : 'medium'}
                       margin="0 x-small x-small 0"

packages/__docs__/src/Methods/index.tsx

@@ -29,12 +29,11 @@ import { Table } from '@instructure/ui-table'
 import { compileMarkdown } from '../compileMarkdown'
 import type { MethodsProps } from './props'
 import { propTypes, allowedProps } from './props'
-import {
+import type {
   MethodParameter,
   MethodReturn,
   TypeDescriptor
-  // eslint-disable-next-line import/no-unresolved
-} from '../../buildScripts/DataTypes'
+} from '../../buildScripts/DataTypes.mts'
 
 class Methods extends Component<MethodsProps> {
   static propTypes = propTypes

packages/__docs__/src/Preview/index.tsx

@@ -47,7 +47,8 @@ class Preview extends Component<PreviewProps, PreviewState> {
     background: 'checkerboard'
   }
 
-  static getDerivedStateFromProps(props: PreviewProps, state: PreviewState) {
+  // TODO investigate why any is needed here
+  static getDerivedStateFromProps(props: any, state: PreviewState) {
     if (props.error) {
       return {
         ...state,

packages/__docs__/src/Preview/props.ts

@@ -30,8 +30,8 @@ import type {
 } from '@instructure/shared-types'
 import PropTypes from 'prop-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
-// eslint-disable-next-line import/no-unresolved
-import type { MainDocsData } from '../../buildScripts/DataTypes'
+
+import type { MainDocsData } from '../../buildScripts/DataTypes.mts'
 
 type PreviewOwnProps = {
   code: string
@@ -93,7 +93,8 @@ const propTypes: PropValidators<PropKeys> = {
     'none'
   ]),
   themes: PropTypes.object,
-  themeKey: PropTypes.string
+  themeKey: PropTypes.string,
+  error: PropTypes.string
 }
 type PreviewState = {
   error: string | null

packages/__docs__/src/Preview/styles.ts

@@ -83,7 +83,7 @@ const generateStyle = (
     position: 'relative',
     overflow: 'auto',
 
-    ...backgroundVariants[background],
+    ...backgroundVariants[background!],
 
     ...(fullscreen && {
       position: 'fixed',

packages/__docs__/src/Properties/index.tsx

@@ -39,7 +39,7 @@ import type {
   SimpleType,
   TSFunctionSignatureType,
   TypeDescriptor
-} from '../../buildScripts/DataTypes'
+} from '../../buildScripts/DataTypes.mts'
 
 @withStyle(generateStyle, null)
 class Properties extends Component<PropertiesProps> {
@@ -90,7 +90,7 @@ class Properties extends Component<PropertiesProps> {
               <code>{name}</code>
             </Table.Cell>
             <Table.Cell>
-              <code>{this.renderTSType(prop.tsType)}</code>
+              <code>{this.renderTSType(prop.tsType!)}</code>
             </Table.Cell>
             <Table.Cell>{this.renderDefault(prop)}</Table.Cell>
             <Table.Cell>{this.renderDescription(prop)}</Table.Cell>

packages/__docs__/src/Properties/props.ts

@@ -25,8 +25,8 @@
 import type { PropValidators } from '@instructure/shared-types'
 import PropTypes from 'prop-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
-// eslint-disable-next-line import/no-unresolved
-import type { PropDescriptor } from '../../buildScripts/DataTypes'
+
+import type { PropDescriptor } from '../../buildScripts/DataTypes.mts'
 
 type PropertiesOwnProps = {
   props: Record<string, PropDescriptor>

packages/__docs__/src/Returns/index.tsx

@@ -29,8 +29,8 @@ import { Table } from '@instructure/ui-table'
 import { compileMarkdown } from '../compileMarkdown'
 
 import type { ReturnsProps } from './props'
-// eslint-disable-next-line import/no-unresolved
-import type { JSDocFunctionReturns } from '../../buildScripts/DataTypes'
+
+import type { JSDocFunctionReturns } from '../../buildScripts/DataTypes.mts'
 
 class Returns extends Component<ReturnsProps> {
   renderRows() {

packages/__docs__/src/Returns/props.ts

@@ -23,8 +23,8 @@
  */
 import type { PropValidators } from '@instructure/shared-types'
 import PropTypes from 'prop-types'
-// eslint-disable-next-line import/no-unresolved
-import type { JSDocFunctionReturns } from '../../buildScripts/DataTypes'
+
+import type { JSDocFunctionReturns } from '../../buildScripts/DataTypes.mts'
 
 type ReturnsOwnProps = {
   types: JSDocFunctionReturns[]

packages/__docs__/src/TableOfContents/index.tsx

@@ -26,18 +26,11 @@ import React, { Component } from 'react'
 
 import { canUseDOM, ownerDocument } from '@instructure/ui-dom-utils'
 
-// TODO ESList erroneusly reports this figure out why
-// eslint-disable-next-line import/no-unresolved
 import { Link } from '@instructure/ui-link'
-// eslint-disable-next-line import/no-unresolved
 import { List } from '@instructure/ui-list'
-// eslint-disable-next-line import/no-unresolved
 import { View } from '@instructure/ui-view'
-// eslint-disable-next-line import/no-unresolved
 import { ToggleDetails } from '@instructure/ui-toggle-details'
-// eslint-disable-next-line import/no-unresolved
 import { instructure } from '@instructure/ui-themes'
-// eslint-disable-next-line import/no-unresolved
 import { InstUISettingsProvider } from '@instructure/emotion'
 import type { SpacingValues } from '@instructure/emotion'
 

packages/__docs__/tsconfig.build.json

@@ -3,13 +3,15 @@
   "compilerOptions": {
     "outDir": "./types",
     "module": "CommonJS",
-    "composite": true
+    "composite": true,
+    "allowImportingTsExtensions": true
   },
   "include": [
     "src/**/*",
     "components.js",
     "globals.js",
-    "buildScripts/DataTypes.mts"
+    "buildScripts/DataTypes.mts",
+    "buildScripts/samplemedia/placeholder-image.js"
   ],
   "exclude": ["__build__/**/*"],
   "references": [