refactor(many): remove checkerboard background in examples, fix TS type errors, use types from react-docgen

The checkedboard needed to go because dark squared did not meet WCAG 2.1 AA contrast requirements
against red error text.
Also type checking of docs during bootstrap and use types from react-docgen

Fixes INSTUI-4282

Author: matyasf

package-lock.json

@@ -24,6 +24,7 @@
 
 // This is the format of the saved JSON files
 import { Documentation } from 'react-docgen'
+import { BaseTheme } from '@instructure/shared-types'
 
 type ProcessedFile =
   Documentation &
@@ -92,99 +93,6 @@ type JSDocFunctionReturns = {
     names: string[]
   }
 }
-// TODO these are from React-docgen Documentation.d.ts,
-// remove when react-docgen exports them
-interface MethodParameter {
-  name: string;
-  description?: string;
-  optional: boolean;
-  type?: TypeDescriptor<FunctionSignatureType> | null;
-}
-
-interface MethodReturn {
-  description?: string;
-  type: TypeDescriptor<FunctionSignatureType> | undefined;
-}
-
-interface PropDescriptor {
-  type?: PropTypeDescriptor;
-  flowType?: TypeDescriptor<FunctionSignatureType>;
-  tsType?: TypeDescriptor<TSFunctionSignatureType>;
-  required?: boolean;
-  defaultValue?: DefaultValueDescriptor;
-  description?: string;
-}
-
-interface PropTypeDescriptor {
-  name: 'any' | 'array' | 'arrayOf' | 'bool' | 'custom' | 'element' | 'elementType' | 'enum' | 'exact' | 'func' | 'instanceOf' | 'node' | 'number' | 'object' | 'objectOf' | 'shape' | 'string' | 'symbol' | 'union';
-  value?: unknown;
-  raw?: string;
-  computed?: boolean;
-  description?: string;
-  required?: boolean;
-}
-
-type TypeDescriptor<T = FunctionSignatureType> = ElementsType<T> | LiteralType | ObjectSignatureType<T> | SimpleType | T;
-
-interface DefaultValueDescriptor {
-  value: unknown;
-  computed: boolean;
-}
-interface BaseType {
-  required?: boolean;
-  nullable?: boolean;
-  alias?: string;
-}
-interface SimpleType extends BaseType {
-  name: string;
-  raw?: string;
-}
-interface LiteralType extends BaseType {
-  name: 'literal';
-  value: string;
-}
-interface ElementsType<T = FunctionSignatureType> extends BaseType {
-  name: string;
-  raw: string;
-  elements: Array<TypeDescriptor<T>>;
-}
-
-interface FunctionArgumentType<T> {
-  name: string
-  type?: TypeDescriptor<T>
-  rest?: boolean
-}
-
-interface FunctionSignatureType extends BaseType {
-  name: 'signature';
-  type: 'function';
-  raw: string;
-  signature: {
-    arguments: Array<FunctionArgumentType<FunctionSignatureType>>;
-    return?: TypeDescriptor<FunctionSignatureType>;
-  };
-}
-interface TSFunctionSignatureType extends FunctionSignatureType {
-  signature: {
-    arguments: Array<FunctionArgumentType<TSFunctionSignatureType>>;
-    return?: TypeDescriptor<TSFunctionSignatureType>;
-    this?: TypeDescriptor<TSFunctionSignatureType>;
-  };
-}
-interface ObjectSignatureType<T = FunctionSignatureType> extends BaseType {
-  name: 'signature';
-  type: 'object';
-  raw: string;
-  signature: {
-    properties: Array<{
-      key: TypeDescriptor<T> | string;
-      value: TypeDescriptor<T>;
-      description?: string;
-    }>;
-    constructor?: TypeDescriptor<T>;
-  };
-}
-// end react-docgen part
 
 type LibraryOptions = {
   name: string
@@ -237,7 +145,7 @@ type MainIconsData = {
 }
 
 type MainDocsData = {
-  themes: Record<string, { resource: any; requirePath: string }>
+  themes: Record<string, { resource: BaseTheme; requirePath: string }>
   library: LibraryOptions
 } & ParsedDoc
 
@@ -246,16 +154,6 @@ export type {
   PackagePathData,
   YamlMetaInfo,
   JSDocFunctionReturns,
-  PropDescriptor,
-  MethodParameter,
-  MethodReturn,
-  TypeDescriptor,
-  TSFunctionSignatureType,
-  SimpleType,
-  LiteralType,
-  ElementsType,
-  ObjectSignatureType,
-  BaseType,
   LibraryOptions,
   Glyph,
   MainDocsData,

packages/__docs__/buildScripts/DataTypes.mts

@@ -137,7 +137,7 @@
     "jsdoc-api": "^8.1.1",
     "mkdirp": "^3.0.1",
     "raw-loader": "^4.0.2",
-    "react-docgen": "^7.1.0",
+    "react-docgen": "^7.1.1",
     "svg-inline-loader": "^0.8.2",
     "webpack-bundle-analyzer": "^4.10.2"
   },

packages/__docs__/package.json

@@ -32,12 +32,7 @@ import {
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
-import {
-  InstUISettingsProvider,
-  withStyle,
-  jsx,
-  Global
-} from '@instructure/emotion'
+import { InstUISettingsProvider, withStyle, Global } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
@@ -398,7 +393,6 @@ class App extends Component<AppProps, AppState> {
 
     const { layout } = this.state
     const smallerScreens = layout === 'small' || layout === 'medium'
-
     const themeContent = (
       <View
         as="div"

packages/__docs__/src/App/index.tsx

@@ -32,7 +32,9 @@ import { ColorTableProps } from './props'
 
 class ColorTable extends Component<ColorTableProps> {
   renderRows() {
-    const colorMap = Object.keys(this.props.colorNames).reduce((acc, color) => {
+    const colorMap: Record<string, string> = Object.keys(
+      this.props.colorNames
+    ).reduce((acc, color) => {
       const hex = this.props.colorNames[color]
       return { ...acc, [hex]: color }
     }, {})

packages/__docs__/src/ColorTable/index.tsx

@@ -25,8 +25,8 @@ import type { PropValidators } from '@instructure/shared-types'
 import PropTypes from 'prop-types'
 
 type ColorTableOwnProps = {
-  colors: any
-  colorNames: any
+  colors: Record<string, string>
+  colorNames: Record<string, string>
 }
 
 type PropKeys = keyof ColorTableOwnProps

packages/__docs__/src/ColorTable/props.ts

@@ -53,17 +53,17 @@ type FigureTheme = {
   shadow: Shadows['depth2']
   captionFontFamily: Typography['fontFamily']
   captionFontSize: Typography['fontSizeSmall']
-  captionBackground: Colors['porcelain']
+  captionBackground: Colors['contrasts']['green1212']
   captionPadding: Spacing['small']
-  captionColor: Colors['oxford']
+  captionColor: Colors['contrasts']['grey100100']
   borderWidth: Border['widthMedium']
-  borderColor: Colors['oxford']
+  borderColor: Colors['contrasts']['grey100100']
   contentPadding: Spacing['medium']
-  contentBackground: Colors['white']
-  yesColor: Colors['shamrock']
-  noColor: Colors['crimson']
-  a11yColor: Colors['electric']
-  iconColor: Colors['white']
+  contentBackground: Colors['contrasts']['white1010']
+  yesColor: Colors['contrasts']['green4570']
+  noColor: Colors['contrasts']['red4570']
+  a11yColor: Colors['contrasts']['blue4570']
+  iconColor: Colors['contrasts']['white1010']
   iconContainerStacking: Stacking['above']
   iconContainerSize: Spacing['large']
   floatMargin: Spacing['large']

packages/__docs__/src/Figure/props.ts

@@ -169,11 +169,7 @@ class Header extends Component<HeaderProps> {
               <Link href="#index" isWithinText={false} display="block">
                 <View display="block" margin="small none none">
                   <Text size="large">
-                    {(
-                      <span>
-                        {this.props.name} {this.props.version}
-                      </span>
-                    ) || 'Documentation'}
+                    {this.props.name} {this.props.version}
                   </Text>
                 </View>
               </Link>

packages/__docs__/src/Header/index.tsx

@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 
-import React, { Children, Component } from 'react'
+import React, { Component } from 'react'
 
 import { IconSearchLine } from '@instructure/ui-icons'
 import { Link } from '@instructure/ui-link'
 import { TextInput } from '@instructure/ui-text-input'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
-import { View } from '@instructure/ui-view'
+import { View, ViewOwnProps } from '@instructure/ui-view'
 
 import { capitalizeFirstLetter } from '@instructure/ui-utils'
 
@@ -119,7 +119,7 @@ class Nav extends Component<NavProps, NavState> {
   }): React.ReactNode {
     if (
       React.isValidElement(children) &&
-      Children.count(children.props.children) === 0
+      React.Children.count(children.props.children) === 0
     ) {
       return
     }
@@ -209,9 +209,9 @@ class Nav extends Component<NavProps, NavState> {
     }
   }
 
-  removeFocus = (event) => {
-    if (event.target && event.target.blur) {
-      event.target.blur()
+  removeFocus = (event: React.MouseEvent<ViewOwnProps>) => {
+    if (event.target && (event.target as HTMLElement).blur) {
+      ;(event.target as HTMLElement).blur()
     }
   }
 

packages/__docs__/src/Nav/index.tsx

@@ -22,7 +22,10 @@
  * SOFTWARE.
  */
 
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
 import PropTypes from 'prop-types'
 type NavOwnProps = {
   docs: Record<string, any>
@@ -35,7 +38,7 @@ type PropKeys = keyof NavOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type NavProps = NavOwnProps
+type NavProps = OtherHTMLAttributes<NavOwnProps> & NavOwnProps
 
 const propTypes: PropValidators<PropKeys> = {
   docs: PropTypes.object.isRequired,