Edit Site: Add tsconfig.json validation for package (#67406)

Add basic tsconfig.json validation for edit-site package

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: sirreal <[email protected]>

packages/edit-site/src/components/style-book/categories.ts

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// @wordpress/blocks imports are not typed.
+// @ts-expect-error
 import { getCategories } from '@wordpress/blocks';
 
 /**
@@ -29,15 +31,19 @@ export function getExamplesByCategory(
 	if ( ! categoryDefinition?.slug || ! examples?.length ) {
 		return;
 	}
-
-	if ( categoryDefinition?.subcategories?.length ) {
-		return categoryDefinition.subcategories.reduce(
+	const categories: CategoryExamples[] =
+		categoryDefinition?.subcategories ?? [];
+	if ( categories.length ) {
+		return categories.reduce(
 			( acc, subcategoryDefinition ) => {
 				const subcategoryExamples = getExamplesByCategory(
 					subcategoryDefinition,
 					examples
 				);
 				if ( subcategoryExamples ) {
+					if ( ! acc.subcategories ) {
+						acc.subcategories = [];
+					}
 					acc.subcategories = [
 						...acc.subcategories,
 						subcategoryExamples,
@@ -48,7 +54,6 @@ export function getExamplesByCategory(
 			{
 				title: categoryDefinition.title,
 				slug: categoryDefinition.slug,
-				subcategories: [],
 			}
 		);
 	}
@@ -84,8 +89,9 @@ export function getTopLevelStyleBookCategories(): StyleBookCategory[] {
 		...STYLE_BOOK_THEME_SUBCATEGORIES,
 		...STYLE_BOOK_CATEGORIES,
 	].map( ( { slug } ) => slug );
-	const extraCategories = getCategories().filter(
+	const extraCategories: StyleBookCategory[] = getCategories();
+	const extraCategoriesFiltered = extraCategories.filter(
 		( { slug } ) => ! reservedCategories.includes( slug )
 	);
-	return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ];
+	return [ ...STYLE_BOOK_CATEGORIES, ...extraCategoriesFiltered ];
 }

packages/edit-site/src/components/style-book/color-examples.tsx

@@ -11,26 +11,21 @@ import { View } from '@wordpress/primitives';
 import {
 	getColorClassName,
 	__experimentalGetGradientClass,
+	// @wordpress/block-editor imports are not typed.
+	// @ts-expect-error
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import type { Color, Gradient } from './types';
-
-type Props = {
-	colors: Color[] | Gradient[];
-	type: 'colors' | 'gradients';
-	templateColumns?: string | number;
-	itemHeight?: string;
-};
+import type { Color, Gradient, ColorExampleProps } from './types';
 
 const ColorExamples = ( {
 	colors,
 	type,
 	templateColumns = '1fr 1fr',
 	itemHeight = '52px',
-}: Props ): JSX.Element | null => {
+}: ColorExampleProps ): JSX.Element | null => {
 	if ( ! colors ) {
 		return null;
 	}

packages/edit-site/src/components/style-book/duotone-examples.tsx

@@ -9,7 +9,11 @@ import { View } from '@wordpress/primitives';
  */
 import type { Duotone } from './types';
 
-const DuotoneExamples = ( { duotones } ): JSX.Element | null => {
+const DuotoneExamples = ( {
+	duotones,
+}: {
+	duotones: Duotone[];
+} ): JSX.Element | null => {
 	if ( ! duotones ) {
 		return null;
 	}

packages/edit-site/src/components/style-book/examples.tsx

@@ -7,16 +7,18 @@ import {
 	getBlockTypes,
 	getBlockFromExample,
 	createBlock,
+	// @wordpress/blocks imports are not typed.
+	// @ts-expect-error
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import type {
-	Block,
 	BlockExample,
 	ColorOrigin,
 	MultiOriginPalettes,
+	BlockType,
 } from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
@@ -37,25 +39,30 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	const examples: BlockExample[] = [];
 
 	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
-		const palette = colors[ group.type ].find(
-			( origin: ColorOrigin ) => origin.slug === group.origin
-		);
+		const palette = colors[ group.type as keyof MultiOriginPalettes ];
+		const paletteFiltered = Array.isArray( palette )
+			? palette.find(
+					( origin: ColorOrigin ) => origin.slug === group.origin
+			  )
+			: undefined;
 
-		if ( palette?.[ group.type ] ) {
+		if ( paletteFiltered?.[ group.type ] ) {
 			const example: BlockExample = {
 				name: group.slug,
 				title: group.title,
 				category: 'colors',
 			};
 			if ( group.type === 'duotones' ) {
 				example.content = (
-					<DuotoneExamples duotones={ palette[ group.type ] } />
+					<DuotoneExamples
+						duotones={ paletteFiltered[ group.type ] }
+					/>
 				);
 				examples.push( example );
 			} else {
 				example.content = (
 					<ColorExamples
-						colors={ palette[ group.type ] }
+						colors={ paletteFiltered[ group.type ] }
 						type={ group.type }
 					/>
 				);
@@ -79,9 +86,11 @@ function getOverviewBlockExamples(
 	const examples: BlockExample[] = [];
 
 	// Get theme palette from colors if they exist.
-	const themePalette = colors?.colors.find(
-		( origin: ColorOrigin ) => origin.slug === 'theme'
-	);
+	const themePalette = Array.isArray( colors?.colors )
+		? colors.colors.find(
+				( origin: ColorOrigin ) => origin.slug === 'theme'
+		  )
+		: undefined;
 
 	if ( themePalette ) {
 		const themeColorexample: BlockExample = {
@@ -91,7 +100,7 @@ function getOverviewBlockExamples(
 			content: (
 				<ColorExamples
 					colors={ themePalette.colors }
-					type={ colors }
+					type="colors"
 					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
 					itemHeight="32px"
 				/>
@@ -102,7 +111,7 @@ function getOverviewBlockExamples(
 	}
 
 	// Get examples for typography blocks.
-	const typographyBlockExamples: Block[] = [];
+	const typographyBlockExamples: BlockType[] = [];
 
 	if ( getBlockType( 'core/heading' ) ) {
 		const headingBlock = createBlock( 'core/heading', {
@@ -202,15 +211,15 @@ function getOverviewBlockExamples(
  */
 export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	const nonHeadingBlockExamples = getBlockTypes()
-		.filter( ( blockType ) => {
+		.filter( ( blockType: BlockType ) => {
 			const { name, example, supports } = blockType;
 			return (
 				name !== 'core/heading' &&
 				!! example &&
 				supports?.inserter !== false
 			);
 		} )
-		.map( ( blockType ) => ( {
+		.map( ( blockType: BlockType ) => ( {
 			name: blockType.name,
 			title: blockType.title,
 			category: blockType.category,

packages/edit-site/src/components/style-book/types.ts

@@ -32,7 +32,7 @@ export type StyleBookColorGroup = {
 	origin: string;
 	slug: string;
 	title: string;
-	type: string;
+	type: 'colors' | 'gradients' | 'duotones';
 };
 
 export type Color = { slug: string };
@@ -42,6 +42,13 @@ export type Duotone = {
 	slug: string;
 };
 
+export type ColorExampleProps = {
+	colors: Color[] | Gradient[];
+	type: StyleBookColorGroup[ 'type' ];
+	templateColumns?: string | number;
+	itemHeight?: string;
+};
+
 export type ColorOrigin = {
 	name: string;
 	slug: string;
@@ -58,3 +65,16 @@ export type MultiOriginPalettes = {
 	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
 	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
 };
+
+/*
+ * Typing the items from getBlockTypes from '@wordpress/blocks'
+ * to appease the TS linter.
+ */
+export type BlockType = {
+	name: string;
+	title: string;
+	category: string;
+	example: BlockType;
+	attributes: Record< string, unknown >;
+	supports: Record< string, unknown >;
+};

packages/edit-site/tsconfig.json

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../api-fetch" },
+		{ "path": "../autop" },
+		{ "path": "../blob" },
+		{ "path": "../block-library" },
+		{ "path": "../block-editor" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../core-data" },
+		{ "path": "../data" },
+		{ "path": "../dataviews" },
+		{ "path": "../date" },
+		{ "path": "../deprecated" },
+		{ "path": "../dom" },
+		{ "path": "../editor" },
+		{ "path": "../element" },
+		{ "path": "../escape-html" },
+		{ "path": "../fields" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../interactivity" },
+		{ "path": "../interactivity-router" },
+		{ "path": "../media-utils" },
+		{ "path": "../notices" },
+		{ "path": "../keycodes" },
+		{ "path": "../plugins" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
+		{ "path": "../rich-text" },
+		{ "path": "../router" },
+		{ "path": "../style-engine" },
+		{ "path": "../url" },
+		{ "path": "../wordcount" }
+	],
+	// NOTE: This package is being progressively typed. You are encouraged to
+	// expand this array with files which can be type-checked. At some point in
+	// the future, this can be simplified to an `includes` of `src/**/*`.
+	"files": [
+		"src/components/style-book/categories.ts",
+		"src/components/style-book/constants.ts",
+		"src/components/style-book/types.ts",
+		"src/components/style-book/color-examples.tsx",
+		"src/components/style-book/duotone-examples.tsx",
+		"src/components/style-book/examples.tsx"
+	],
+	"include": []
+}

tsconfig.json

@@ -21,6 +21,7 @@
 		{ "path": "packages/dom" },
 		{ "path": "packages/dom-ready" },
 		{ "path": "packages/e2e-test-utils-playwright" },
+		{ "path": "packages/edit-site" },
 		{ "path": "packages/editor" },
 		{ "path": "packages/element" },
 		{ "path": "packages/escape-html" },