fix(emotion,shared-types): better TS types for theme objects and their overrides

Also convert some of the final files in the docs app to TS and improve their typing
TEST PLAN:
Try to make various theme and override objects, they should have nice autocomplete and no errors

Author: matyasf

package-lock.json

@@ -49,9 +49,11 @@ import '@instructure/ui-icons/es/icon-font/Solid/InstructureIcons-Solid.css'
 import '@instructure/ui-icons/es/icon-font/Line/InstructureIcons-Line.css'
 
 import { DateTime } from '@instructure/ui-i18n'
-
+// @ts-ignore webpack import
 import iconExample from './buildScripts/samplemedia/heart_lg.svg'
+// @ts-ignore webpack import
 import avatarSquare from './buildScripts/samplemedia/avatarSquare.jpg'
+// @ts-ignore webpack import
 import avatarPortrait from './buildScripts/samplemedia/avatarPortrait.jpg'
 import placeholderImage from './buildScripts/samplemedia/placeholder-image'
 // eslint-disable-next-line no-restricted-imports
@@ -83,7 +85,7 @@ const globals = {
   lorem: {
     sentence: () => lorem.generateWords(),
     paragraph: () => lorem.generateSentences(5),
-    paragraphs: (count) =>
+    paragraphs: (count: number) =>
       lorem.generateSentences(count || Math.floor(Math.random() * 10))
   },
   mirrorHorizontalPlacement,
@@ -104,7 +106,7 @@ const globals = {
 }
 
 Object.keys(globals).forEach((key) => {
-  global[key] = globals[key]
+  ;(global as any)[key] = globals[key]
 })
 
 export default globals

packages/__docs__/components.js packages/__docs__/components.tspackages/__docs__/components.js renamed to packages/__docs__/components.ts

@@ -123,7 +123,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semver": "^7.6.3",
-    "uuid": "^10.0.0",
+    "uuid": "^11.0.3",
     "webpack-merge": "^6.0.1"
   },
   "devDependencies": {

packages/__docs__/globals.js packages/__docs__/globals.tspackages/__docs__/globals.js renamed to packages/__docs__/globals.ts

@@ -23,7 +23,6 @@
  */
 
 import PropTypes from 'prop-types'
-import { DocPropType } from '../propTypes'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import type {
   PropValidators,
@@ -47,6 +46,19 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DocumentProps = DocumentOwnProps & WithStyleProps<null, DocumentStyle>
 
+// TODO this does not match the TS type either fix or remove
+const DocPropType = PropTypes.shape({
+  props: PropTypes.object,
+  id: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  undocumented: PropTypes.bool,
+  srcPath: PropTypes.string,
+  srcUrl: PropTypes.string,
+  requirePath: PropTypes.string,
+  packageName: PropTypes.string,
+  children: PropTypes.array
+})
+
 const propTypes: PropValidators<PropKeys> = {
   doc: DocPropType.isRequired,
   description: PropTypes.string,
@@ -70,5 +82,5 @@ const allowedProps: AllowedPropKeys = [
   'themeVariables'
 ]
 
-export { propTypes, allowedProps }
+export { propTypes, allowedProps, DocPropType }
 export type { DocumentProps, DocumentStyle, DocumentState, DocDataType }

packages/__docs__/package.json

@@ -25,8 +25,8 @@
 import { element } from '@instructure/ui-prop-types'
 import type { PropValidators } from '@instructure/shared-types'
 
-import { DocPropType } from '../propTypes'
 import type { DocDataType } from '../Document/props'
+import { DocPropType } from '../Document/props'
 
 type TableOfContentsOwnProps = {
   doc: DocDataType

packages/__docs__/src/Document/props.ts

@@ -39,7 +39,32 @@ import { Playground } from './Playground'
 import { compileAndRenderExample } from './compileAndRenderExample'
 import { Heading } from './Heading'
 import { Link } from './Link'
-import { trimIndent } from './trimIndent'
+
+function trimIndent(str: string) {
+  const lines = `${str.replace(/\r\n/g, '\n').replace(/\r/g, '\n')}\n`.split(
+    '\n'
+  )
+  let indentFound = false
+  let trimmed = ''
+  let indent = ''
+  lines.forEach((line, _i) => {
+    // matches whitespace at the end of a string
+    line.replace(/\s*$/, '')
+    if (indentFound === false) {
+      if (line === '') {
+        return
+      }
+      // matches whitespace at the beginning of a string
+      const matches = line.match(/^\s*/)
+      if (matches && matches.length > 0) {
+        indentFound = true
+        indent = matches[0]
+      }
+    }
+    trimmed += `${line.replace(new RegExp(`^${indent}`), '')}\n`
+  })
+  return trimmed.trim()
+}
 
 const getHeadingId = (children: ReactNode): string => {
   const headingId = Children.toArray(children).reduce((id, child) => {

packages/__docs__/src/TableOfContents/props.ts

@@ -29,7 +29,7 @@ import { App } from './App'
 import { InstUISettingsProvider } from '@instructure/emotion'
 import '../globals'
 
-createRoot(document.getElementById('app')).render(
+createRoot(document.getElementById('app')!).render(
   <React.StrictMode>
     <InstUISettingsProvider>
       <App />