refactor: better TS typing for the docs app

There were some TS erorrs regaring icons, type some any-s correctly

Author: matyasf

packages/__docs__/buildScripts/DataTypes.mts

@@ -224,23 +224,16 @@ export type ParsedDocSummary = Record<string,{
   tags?: string
 }>
 
-type IconGlyph = {
+type Glyph = {
+  bidirectional: boolean
+  lineSrc: string
+  solidSrc: string
   name: string
-  variant: any
   glyphName: string
-  deprecated: boolean
-}
-
-type IconFormat = {
-  format: 'React' | 'SVG' | 'Font'
-  glyphs: Record<string, IconGlyph>
-  packageName: string
-  requirePath: string
 }
 
 type MainIconsData = {
-  packageName: string
-  formats: Record<'icons-svg' | `icons-react` | 'icons-font', IconFormat>
+  glyphs: Glyph[]
 }
 
 type MainDocsData = {
@@ -264,8 +257,7 @@ export type {
   ObjectSignatureType,
   BaseType,
   LibraryOptions,
-  IconFormat,
-  IconGlyph,
+  Glyph,
   MainDocsData,
   MainIconsData,
   JsDocResult

packages/__docs__/src/App/index.tsx

@@ -124,7 +124,7 @@ class App extends Component<AppProps, AppState> {
       themeKey: undefined,
       layout: 'large',
       docsData: null,
-      versionsData: null,
+      versionsData: undefined,
       iconsData: null
     }
   }
@@ -165,34 +165,6 @@ class App extends Component<AppProps, AppState> {
     }
   }
 
-  /**
-   * Get every static prop from an object (inherited ones too)
-   * @param object The object to check
-   * @returns {Set<string>} the properties
-   */
-  getAllPropNames(object: Record<string, any>) {
-    let obj: object | null = object
-    const props: Set<string> = new Set()
-    // exclude some common static props for performance
-    const invalidKeys = [
-      '$$typeof',
-      'render',
-      'propTypes',
-      'selector',
-      'defaultProps',
-      'displayName',
-      'generateComponentTheme'
-    ]
-    while (obj) {
-      const keys = Object.keys(obj)
-      keys.forEach((k) => {
-        if (!invalidKeys.includes(k)) props.add(k)
-      })
-      obj = Reflect.getPrototypeOf(obj)
-    }
-    return props
-  }
-
   componentDidMount() {
     this._defaultDocumentTitle = document.title
     this.updateKey()
@@ -416,7 +388,7 @@ class App extends Component<AppProps, AppState> {
         <Heading level="h1" as="h2" margin="0 0 medium">
           Icons
         </Heading>
-        <IconsPage glyphs={iconsData.glyphs} />
+        <IconsPage glyphs={iconsData!.glyphs} />
       </View>
     )
 
@@ -453,9 +425,9 @@ class App extends Component<AppProps, AppState> {
     const { themes } = this.state.docsData!
     const { layout, themeKey, versionsData } = this.state
     const { olderVersionsGitBranchMap } = versionsData || {}
-    let legacyGitBranch
+    let legacyGitBranch: string | undefined = undefined
 
-    if (olderVersionsGitBranchMap) {
+    if (olderVersionsGitBranchMap && versionInPath) {
       legacyGitBranch = olderVersionsGitBranchMap[versionInPath]
     }
 

packages/__docs__/src/App/props.ts

@@ -82,7 +82,14 @@ type AppState = {
   layout: LayoutSize
   showMenu: boolean
   key?: string
-  versionsData: any
+  versionsData?: {
+    // like `v10`
+    latestVersion: string
+    // like `['v9', 'v10']`
+    previousVersions: string[]
+    // like `{"v8": "v8_maintenance", "v9": "v9_maintenance"}`
+    olderVersionsGitBranchMap: Record<string, string>
+  }
   // changelog.md read from the JSON file
   changelogData?: DocData
   // the currently shown document

packages/__docs__/src/Document/props.ts

@@ -31,7 +31,7 @@ import type {
 } from '@instructure/shared-types'
 import { DocData } from '../App/props'
 
-type DocDataType = DocData & { legacyGitBranch: any }
+type DocDataType = DocData & { legacyGitBranch?: string }
 
 type DocumentOwnProps = {
   doc: DocDataType

packages/__docs__/src/Icons/index.tsx

@@ -45,13 +45,7 @@ import * as InstIcons from '@instructure/ui-icons'
 import { IconXSolid } from '@instructure/ui-icons'
 import { Link } from '@instructure/ui-link'
 import { Flex } from '@instructure/ui-flex'
-
-type Glyph = {
-  lineSrc: string
-  solidSrc: string
-  name: string
-  glyphName: string
-}
+import { Glyph } from '../../buildScripts/DataTypes.mjs'
 
 type Format = 'react' | 'svg' | 'font'
 
@@ -108,6 +102,7 @@ const IconTile = memo(
         const componentName = `${name}${
           styleType === 'line' ? 'Line' : 'Solid'
         }`
+        // @ts-ignore TS cant type import *
         const IconComponent = InstIcons[componentName]
         return <IconComponent />
       } else if (format === 'svg') {
@@ -263,7 +258,7 @@ const IconsPage = ({ glyphs }: IconsPageProps) => {
         >
           {Object.keys(formats).map((f) => (
             <SimpleSelect.Option value={f} id={f} key={f}>
-              {formats[f]}
+              {formats[f as keyof typeof formats]}
             </SimpleSelect.Option>
           ))}
         </SimpleSelect>

packages/__docs__/src/versionData.js packages/__docs__/src/versionData.tspackages/__docs__/src/versionData.js renamed to packages/__docs__/src/versionData.ts

@@ -32,25 +32,26 @@
  * @param signal {AbortController.signal}
  * @returns {Promise<null|object>}
  */
-const fetchVersionData = async (signal) => {
+const fetchVersionData = async (signal: AbortSignal) => {
   const isLocalHost = window.location.hostname === 'localhost'
-
   if (!isLocalHost) {
     const isGhPages = window.location.origin === 'https://instructure.github.io'
-    const versionsDataUrl = window.location.origin + (isGhPages ? '/instructure-ui' : '') + '/versions.json'
+    const versionsDataUrl =
+      window.location.origin +
+      (isGhPages ? '/instructure-ui' : '') +
+      '/versions.json'
     const result = await fetch(versionsDataUrl, { signal })
     return await result.json()
   }
-
-  return null
+  return undefined
 }
 
 /**
  * if we are on the docs page of a legacy version,
  * the path includes the version number, e.g. `/v7` or `/v8`
  */
 const versionMatch = window.location.pathname.match(/\/(v\d+)(\/|$)/)
-const versionInPath =  versionMatch ? versionMatch[1] : null
+const versionInPath = versionMatch ? versionMatch[1] : null
 
 export default fetchVersionData
 export { fetchVersionData, versionInPath }