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

[matyasf]

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

To test:

• check pages in the docs app that they look OK and there are no console errors
• check code examples that the checkerboard is gone and things look OK

Fixes INSTUI-4282

[matyasf]

react-docgen exports these types now, so it can be deleted from here

[matyasf]

This will type check the docs app during build, it just increases build time by ~1 sec. This surfaced a couple of type errors in our docs app, I've fixed those.

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-04-24 11:49 UTC

[Copilot]

Pull Request Overview

This PR removes the checkerboard background from examples for better WCAG 2.1 AA contrast compliance, fixes TypeScript type errors, and updates theme types to use definitions from react-docgen. Key changes include:

• Eliminating all checkerboard-related styles and props from the Preview and Playground components.
• Refining TypeScript typings across multiple components (Preview, Document, App, etc.) using updated types from react-docgen and ui-themes.
• Minor refactors in Nav, Header, ColorTable, and build scripts to align with the new theming and type structures.

Reviewed Changes

Copilot reviewed 31 out of 32 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/docs/src/Preview/theme.ts	Removed checkerboard color constants and related properties; updated background color and border color values.
packages/docs/src/Preview/styles.ts	Simplified style generation by removing checkerboard variants and using the new backgroundColor property.
packages/docs/src/Preview/props.ts	Removed background prop definitions and allowedProps entries.
packages/docs/src/Preview/index.tsx	Removed default background prop from component defaults.
packages/docs/src/Playground/props.ts	Removed background prop definitions and updated allowedProps accordingly.
packages/docs/src/Playground/index.tsx	Removed background prop usage when rendering Preview and updated default props.
packages/docs/src/NavToggle/props.ts	Simplified type definitions by removing redundant imports and using Omit.
packages/docs/src/Nav/props.ts	Enhanced NavProps with OtherHTMLAttributes for improved prop support.
packages/docs/src/Nav/index.tsx	Updated the event type in removeFocus and streamlined Children.count usage.
packages/docs/src/Header/index.tsx	Removed an unnecessary span wrapper around header name and version.
packages/docs/src/Figure/props.ts	Updated theme values to fetch colors from the new Colors.contrasts interface.
packages/docs/src/Document/props.ts	Revised themeVariables and componentTheme types to align with the new Theme definitions.
packages/docs/src/Document/index.tsx	Renamed and refactored generateComponentTheme to generateTheme and updated state assignment logic.
packages/docs/src/ColorTable/props.ts & index.tsx	Improved type definitions for color mappings.
packages/docs/src/App/props.ts	Added new ThemeFunctions types and updated DocData typings for proper theme generation.
packages/docs/src/App/index.tsx	Cleaned up import statements from emotion.
packages/docs/functionalComponentThemes.ts	Updated the import and type usage for theme functions (note the key renaming from lowercase to “Avatar”).
packages/docs/buildScripts/DataTypes.mts	Removed deprecated react-docgen type definitions and updated themes resource type.

Files not reviewed (1)

• packages/docs/package.json: Language not supported

[Copilot]

Ensure that the key used to access functionalComponentThemes matches the expected case. Previously, doc.id was converted to lowercase before lookup—if the functionalComponentThemes keys are stored in lowercase, consider using doc.id.toLowerCase() to avoid potential mismatches.

Suggested change

	doc.id as keyof typeof functionalComponentThemes
	doc.id.toLowerCase() as keyof typeof functionalComponentThemes