Create types for utility functions and constants

Author: ramonjd

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

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	BlockExample,
+	StyleBookCategory,
+	CategoryExamples,
+} from './types';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]}    examples           An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getCategoryExamples(
+	categoryDefinition: StyleBookCategory,
+	examples: BlockExample[]
+): CategoryExamples | undefined {
+	if ( ! categoryDefinition?.slug || ! examples?.length ) {
+		return;
+	}
+
+	if ( categoryDefinition?.subcategories?.length ) {
+		return categoryDefinition.subcategories.reduce(
+			( acc, subcategoryDefinition ) => {
+				const subcategoryExamples = getCategoryExamples(
+					subcategoryDefinition,
+					examples
+				);
+				if ( subcategoryExamples ) {
+					acc.subcategories = [
+						...acc.subcategories,
+						subcategoryExamples,
+					];
+				}
+				return acc;
+			},
+			{
+				title: categoryDefinition.title,
+				slug: categoryDefinition.slug,
+				subcategories: [],
+			}
+		);
+	}
+
+	const blocksToInclude = categoryDefinition?.blocks || [];
+	const blocksToExclude = categoryDefinition?.exclude || [];
+	const categoryExamples = examples.filter( ( example ) => {
+		return (
+			! blocksToExclude.includes( example.name ) &&
+			( example.category === categoryDefinition.slug ||
+				blocksToInclude.includes( example.name ) )
+		);
+	} );
+
+	if ( ! categoryExamples.length ) {
+		return;
+	}
+
+	return {
+		title: categoryDefinition.title,
+		slug: categoryDefinition.slug,
+		examples: categoryExamples,
+	};
+}

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

@@ -3,7 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const STYLE_BOOK_THEME_SUBCATEGORIES = [
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory } from './types';
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
+	StyleBookCategory,
+	'subcategories'
+>[] = [
 	{
 		slug: 'site-identity',
 		title: __( 'Site Identity' ),
@@ -53,7 +61,7 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES = [
 	},
 ];
 
-export const STYLE_BOOK_CATEGORIES = [
+export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	{
 		slug: 'text',
 		title: __( 'Text' ),

packages/edit-site/src/components/style-book/constants.js renamed to packages/edit-site/src/components/style-book/constants.ts

@@ -10,22 +10,16 @@ import {
 } from '@wordpress/blocks';
 
 /**
- * blockExamples object.
- *
- * @typedef {Object} blockExamples
- *
- * @property {string} name     Block name, e.g., "core/paragraph".
- * @property {string} title    Block title/label.
- * @property {string} category Block category.
- * @property {Object} blocks   Block object.
+ * Internal dependencies
  */
+import type { BlockExample } from './types';
 
 /**
  * Returns a list of examples for registered block types.
  *
- * @return {Array<blockExamples>} An array of block examples.
+ * @return {BlockExample[]} An array of block examples.
  */
-export function getExamples() {
+export function getExamples(): BlockExample[] {
 	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
@@ -41,7 +35,6 @@ export function getExamples() {
 			category: blockType.category,
 			blocks: getBlockFromExample( blockType.name, blockType.example ),
 		} ) );
-
 	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
 
 	if ( ! isHeadingBlockRegistered ) {

packages/edit-site/src/components/style-book/examples.js renamed to packages/edit-site/src/components/style-book/examples.ts

@@ -0,0 +1,27 @@
+type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks: Block[];
+};
+
+export type StyleBookCategory = {
+	title: string;
+	slug: string;
+	blocks?: string[];
+	exclude?: string[];
+	subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+	name: string;
+	title: string;
+	category: string;
+	blocks: Block;
+};
+
+export type CategoryExamples = {
+	title: string;
+	slug: string;
+	examples?: BlockExample[];
+	subcategories?: CategoryExamples[];
+};