Fix docs showing theme variables from 11.7 for 11.6 docs

packages/__docs__/src/App/index.tsx

@@ -22,9 +22,8 @@
  * SOFTWARE.
  */
 
-import {
+import React, {
   Component,
-  createContext,
   LegacyRef,
   ReactElement,
   SyntheticEvent,
@@ -82,34 +81,18 @@ import { getComponentsForVersion } from '../../versioned-components'
 import { updateGlobalsForVersion } from '../../globals'
 import type { AppProps, AppState, DocData, LayoutSize } from './props'
 import { allowedProps } from './props'
-import type {
-  LibraryOptions,
-  MainDocsData,
-  ParsedDocSummary
-} from '../../buildScripts/DataTypes.mjs'
+import type { ParsedDocSummary } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
 import type { Spacing } from '@instructure/emotion'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 import { FocusRegion } from '@instructure/ui-a11y-utils'
-
-type AppContextType = {
-  /**
-   * The ID of the currently selected theme.
-   */
-  themeKey: keyof MainDocsData['themes']
-  themes: MainDocsData['themes']
-  library?: LibraryOptions
-}
-
-export const AppContext = createContext<AppContextType>({
-  themes: {},
-  themeKey: '',
-  library: undefined
-})
+import { AppContext } from '../appContext'
 
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
   static allowedProps = allowedProps
+  static contextType = AppContext
+  declare context: React.ContextType<typeof AppContext>
 
   private navRef = createRef<HTMLElement>()
   private navFocusRegion: FocusRegion | null = null
@@ -1068,7 +1051,8 @@ class App extends Component<AppProps, AppState> {
         value={{
           library: docsData.library,
           themeKey: this.state.themeKey!,
-          themes: docsData.themes
+          themes: docsData.themes,
+          componentVersion: this.state.selectedMinorVersion
         }}
       >
         <div css={this.props.styles?.app}>
@@ -1111,5 +1095,4 @@ class App extends Component<AppProps, AppState> {
 }
 
 export default App
-export type { AppContextType }
 export { App }

packages/__docs__/src/Document/index.tsx

@@ -22,12 +22,13 @@
  * SOFTWARE.
  */
 
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { Link } from '@instructure/ui-link'
 import { View } from '@instructure/ui-view'
 import { Tabs } from '@instructure/ui-tabs'
 import type { TabsProps } from '@instructure/ui-tabs'
+import type { NewBaseTheme } from '@instructure/ui-themes'
 import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
 import { withStyleForDocs as withStyle } from '../withStyleForDocs'
 
@@ -41,12 +42,16 @@ import { ComponentTheme } from '../ComponentTheme'
 import { TableOfContents } from '../TableOfContents'
 import { Heading } from '../Heading'
 
+import { AppContext } from '../appContext'
+
 import { allowedProps } from './props'
 import type { DocumentProps, DocumentState, DocDataType } from './props'
 
 @withStyle(generateStyle)
 class Document extends Component<DocumentProps, DocumentState> {
   static allowedProps = allowedProps
+  static contextType = AppContext
+  declare context: React.ContextType<typeof AppContext>
 
   static defaultProps = {
     description: undefined,
@@ -78,34 +83,39 @@ class Document extends Component<DocumentProps, DocumentState> {
     // use PascalCase without dots (e.g. "MenuItem").
     // New-theme entries are in themeVariables.newTheme.components.
     const selectedId = this.state.selectedDetailsTabId
+    type ComponentKey = keyof NewBaseTheme['components']
     const childDoc =
       selectedId !== doc.id
         ? doc?.children?.find((value) => value.id === selectedId)
         : null
     // in case of some components, we need to display the theme variables of other components based on themeId (like displaying the theme variables of Options in Drillsdown.Group)
-    const themeKey = childDoc?.themeId || selectedId?.replace(/\./g, '')
-    // @ts-ignore todo type
-    const newThemeEntry = themeVariables?.newTheme?.components?.[themeKey]
-    const componentInstance =
-      selectedId === doc.id
-        ? doc?.componentInstance
-        : childDoc?.componentInstance
-    if (
-      newThemeEntry &&
-      typeof componentInstance?.generateComponentTheme !== 'function'
-    ) {
-      // new theme - use pre-computed theme object directly
-      this.setState({ componentTheme: newThemeEntry })
-      return
+    const themeKey: ComponentKey = (childDoc?.themeId ||
+      selectedId?.replace(/\./g, '')) as ComponentKey
+    const isLegacyTheme = this.context?.componentVersion == 'v11_6'
+    // new theme
+    if (!isLegacyTheme) {
+      const newThemeEntry = themeVariables?.newTheme?.components?.[themeKey]
+      const componentInstance =
+        selectedId === doc.id
+          ? doc?.componentInstance
+          : childDoc?.componentInstance
+      if (
+        newThemeEntry &&
+        typeof componentInstance?.generateComponentTheme !== 'function'
+      ) {
+        // new theme - use pre-computed theme object directly
+        this.setState({ componentTheme: newThemeEntry })
+        return
+      }
     }
     // old theme - use generateComponentTheme function
     if (selectedId === doc.id) {
       generateTheme = doc?.componentInstance?.generateComponentTheme
+      // TODO functional components do not work, e.g. Avatar
     } else {
       generateTheme = childDoc?.componentInstance?.generateComponentTheme
     }
     if (typeof generateTheme === 'function' && themeVariables) {
-      // @ts-ignore todo type
       this.setState({ componentTheme: generateTheme(themeVariables) })
     } else {
       this.setState({ componentTheme: undefined })
@@ -115,7 +125,6 @@ class Document extends Component<DocumentProps, DocumentState> {
   componentDidUpdate(prevProps: typeof this.props, prevState: DocumentState) {
     this.props.makeStyles?.()
     if (
-      // @ts-ignore todo check
       this.props.themeVariables?.key !== prevProps.themeVariables?.key ||
       this.state.selectedDetailsTabId != prevState.selectedDetailsTabId
     ) {

packages/__docs__/src/Document/props.ts

@@ -23,16 +23,16 @@
  */
 
 import { ComponentStyle, WithStyleProps } from '@instructure/emotion'
-import type { BaseTheme, ThemeVariables } from '@instructure/shared-types'
+import type { ThemeVariables } from '@instructure/shared-types'
 import { DocData } from '../App/props'
-import { NewBaseTheme } from '@instructure/ui-themes'
+import type { Theme, NewBaseTheme } from '@instructure/ui-themes'
 
 type DocDataType = DocData & { legacyGitBranch?: string }
 
 type DocumentOwnProps = {
   doc: DocDataType
   description: string
-  themeVariables?: BaseTheme | NewBaseTheme
+  themeVariables?: Theme
   repository?: string
   layout?: 'small' | 'medium' | 'large' | 'x-large'
   selectedMinorVersion?: string
@@ -49,7 +49,10 @@ type DocumentStyle = ComponentStyle<'githubCornerOctoArm' | 'githubCorner'>
 type DocumentState = {
   selectedDetailsTabId: string | undefined
   pageRef: HTMLDivElement | null
-  componentTheme: Partial<ThemeVariables[keyof ThemeVariables]> | undefined
+  componentTheme:
+    | ThemeVariables[keyof ThemeVariables]
+    | NewBaseTheme['components'][keyof NewBaseTheme['components']]
+    | undefined
 }
 
 const allowedProps: AllowedPropKeys = [

packages/__docs__/src/Playground/index.tsx

@@ -39,7 +39,7 @@ import { withStyleForDocs as withStyle } from '../withStyleForDocs'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { AppContext } from '../App'
+import { AppContext } from '../appContext'
 import Preview from '../Preview'
 import { CodeSandboxButton } from '../CodeSandboxButton'
 import type { PlaygroundProps, PlaygroundState } from './props'

packages/__docs__/src/appContext.ts

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type {
+  LibraryOptions,
+  MainDocsData
+} from '../buildScripts/DataTypes.mjs'
+import { createContext } from 'react'
+
+type AppContextType = {
+  /**
+   * The ID of the currently selected theme.
+   */
+  themeKey: keyof MainDocsData['themes']
+  themes: MainDocsData['themes']
+  library?: LibraryOptions
+  /**
+   * Currently selected component version, e.g. "v11_7"
+   */
+  componentVersion?: string
+}
+
+export const AppContext = createContext<AppContextType>({
+  themes: {},
+  themeKey: '',
+  library: undefined,
+  componentVersion: undefined
+})

packages/ui-babel-preset/package.json

@@ -34,7 +34,7 @@
     "@babel/runtime": "^7.27.6",
     "@instructure/babel-plugin-transform-imports": "workspace:*",
     "@instructure/browserslist-config-instui": "workspace:*",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-macros": "^3.1.0",

packages/ui-webpack-config/config/index.js

@@ -36,7 +36,7 @@ const config = {
   mode: ENV === 'production' ? 'production' : 'development',
   cache: ENV !== 'production',
   bail: !DEBUG,
-  devtool: ENV === 'production' ? false : 'cheap-module-source-map',
+  devtool: ENV === 'production' ? false : 'eval-source-map',
   module: {
     rules
   },