Improve CodeDocDependencies for grouped functions and constants

packages/angular-demo/src/app/app.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input } from '@angular/core';
+import { ChildComponent } from './child.component';
 import { getLibraryAuthor } from './other-utils';
-import { getProductNumber, Product, UndocumentedSecret } from './types';
+import { RaceCar, getProductNumber, Product, UndocumentedSecret } from './types';
 import { ENVIRONMENT, IS_STANDALONE, isNumber, isString, LIB_NAME, VERSION } from './utils';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss'],
+	imports: [ChildComponent],
 })
 export class AppComponent {
 	@Input() testInput = '';
@@ -26,6 +28,14 @@ export class AppComponent {
 		hiddenProperty: '',
 	};
 
+	raceCar: RaceCar = {
+		brand: 'Ferrari',
+		model: '812 Superfast',
+		maxSpeed: 320,
+		price: 1500000,
+		numberOfWheels: 4,
+	};
+
 	/**
 	 * @exclude-docs
 	 */

packages/angular-demo/src/app/stories/interface.mdx

@@ -56,6 +56,10 @@ export interface Price {
 
 <ArgTypes of="Charge" />
 
+### RaceCar
+
+<ArgTypes of="RaceCar" />
+
 ## Without @include-docs
 
 Interfaces without the `@include-docs` annotation are ignored.

packages/angular-demo/src/app/types.ts

@@ -1,3 +1,5 @@
+import { PricedItem } from '@scope/entrypoint'; // eslint-disable-line @nx/enforce-module-boundaries
+
 export interface UndocumentedSecret {
 	secret: string;
 }
@@ -7,11 +9,6 @@ export interface UndocumentedSecret {
  */
 export interface Product extends Item {
 	price: Price;
-
-	/**
-	 * @exclude-docs
-	 */
-	hiddenProperty?: unknown;
 }
 
 export interface Item {
@@ -76,3 +73,38 @@ export interface Price {
 export function getProductNumber(product: Product) {
 	return `${product.id}X${product.itemNumber}`;
 }
+
+/**
+ * @include-docs
+ */
+export interface RaceCar extends Car, Vehicle, PricedItem {
+	/**
+	 * Maximum speed in km/h.
+	 */
+	maxSpeed: number;
+}
+
+export interface Car {
+	/**
+	 * Model name
+	 *
+	 * This is a property from an extended interface.
+	 */
+	model: string;
+
+	/**
+	 * Brand name
+	 *
+	 * This is a property from an extended interface.
+	 */
+	brand: string;
+}
+
+export interface Vehicle {
+	/**
+	 * Number of wheels
+	 *
+	 * This is a property from another extended interface.
+	 */
+	numberOfWheels: number;
+}

packages/angular-demo/src/entrypoint/index.ts

@@ -1 +1,2 @@
 export { GreatGrandParentDirective } from './great-grand-parent.directive';
+export { PricedItem } from './types';

packages/angular-demo/src/entrypoint/types.ts

@@ -0,0 +1,9 @@
+export interface PricedItem {
+	/**
+	 * Price of the product
+	 *
+	 * This is a property from an extended interface imported from a
+	 * secondary entry point.
+	 */
+	price: number;
+}

packages/storybook-webpack-angular-types-plugin/src/lib/extract-args-types/extract-arg-types.ts

@@ -1,5 +1,5 @@
 import { STORYBOOK_ANGULAR_ARG_TYPES, STORYBOOK_COMPONENT_ID } from '../constants';
-import { EntitiesByCategory, Entity, JsDocParam } from '../types';
+import { Category, EntitiesByCategory, Entity, JsDocParam } from '../types';
 import { Conditional } from 'storybook/internal/types';
 
 /**
@@ -80,7 +80,13 @@ const mapEntityToArgsTableProp = (entity: Entity, category: string): ExtendedArg
 const mapEntitiesToArgsTableProps = (entitiesByCategory: EntitiesByCategory): ExtendedArgType[] => {
 	const argsTableProps: ExtendedArgType[] = [];
 
-	for (const [categoryKey, entities] of Object.entries<Entity[]>(entitiesByCategory)) {
+	const categoriesToEntities = Object.entries(entitiesByCategory).sort((entry1, entry2) => {
+		const category1 = entry1[0] as Category;
+		const category2 = entry2[0] as Category;
+		return getCategoryPriority(category1) - getCategoryPriority(category2);
+	});
+
+	for (const [categoryKey, entities] of categoriesToEntities) {
 		const sortedEntities = entities.sort((a: Entity, b: Entity) =>
 			(a.alias ?? a.name).localeCompare(b.alias ?? b.name),
 		);
@@ -92,6 +98,25 @@ const mapEntitiesToArgsTableProps = (entitiesByCategory: EntitiesByCategory): Ex
 	return argsTableProps;
 };
 
+function getCategoryPriority(category: Category) {
+	switch (category) {
+		case 'inputs':
+			return 0;
+		case 'outputs':
+			return 1;
+		case 'properties':
+			return 2;
+		case 'methods':
+			return 3;
+		case 'constants':
+			return 4;
+		case 'functions':
+			return 5;
+		default:
+			return 6;
+	}
+}
+
 export const extractArgTypes = <T>(type: Type<T>): ArgType[] | undefined => {
 	const entities =
 		typeof type === 'string'

packages/storybook-webpack-angular-types-plugin/src/lib/types.ts

@@ -20,7 +20,7 @@ export interface WebpackAngularTypesPluginOptions {
 }
 
 export type EntityModifier = 'getter' | 'setter';
-export type EntityKind = 'input' | 'output' | 'property' | 'method';
+export type EntityKind = 'input' | 'output' | 'property' | 'method' | 'constant' | 'function';
 
 export interface JsDocParam {
 	name: string;
@@ -41,10 +41,17 @@ export interface Entity {
 	modifier?: EntityModifier;
 }
 
-export const _Categories = ['inputs', 'outputs', 'properties', 'methods'] as const;
-export type Categories = (typeof _Categories)[number];
+export const _Categories = [
+	'inputs',
+	'outputs',
+	'properties',
+	'methods',
+	'functions',
+	'constants',
+] as const;
+export type Category = (typeof _Categories)[number];
 export type EntitiesByCategory = {
-	[category in Categories]: Entity[];
+	[category in Category]: Entity[];
 };
 
 export type ClassInformation = CommonClassLikeInformation;