refactor: extract shared types, filter internal keys, unify formatting

Author: superhighfives

src/components/models/SchemaDisplay.astro

@@ -21,6 +21,8 @@ import { type Dictionary } from "@stoplight/types";
 import { resolveInlineRef } from "@stoplight/json";
 import SchemaTreeView from "./SchemaTree.tsx";
 import SchemaVariantSelector from "./SchemaVariantSelector.tsx";
+import type { SchemaRowData } from "./types";
+export type { SchemaRowData };
 
 interface Props {
 	schema: Record<string, unknown>;
@@ -47,9 +49,7 @@ const isFlat = isFlatSchema(schema);
 
 // Convert flat schema keys into rows for display
 // e.g. { type: "string", format: "binary" } => rows with name=type, type=string
-function flatSchemaToRows(
-	schemaObj: Record<string, unknown>,
-): import("./SchemaDisplay.astro").SchemaRowData[] {
+function flatSchemaToRows(schemaObj: Record<string, unknown>): SchemaRowData[] {
 	const keys = Object.keys(schemaObj);
 	return keys.map((key, i) => ({
 		id: key,
@@ -100,29 +100,6 @@ const defaultResolver: SchemaTreeRefDereferenceFn =
 		throw new ReferenceError(`Could not resolve '${pointer}'`);
 	};
 
-// Schema row data structure
-export interface SchemaRowData {
-	id: string;
-	name: string;
-	type: string;
-	isArray: boolean;
-	isObject: boolean;
-	isOneOf: boolean;
-	isOneOfChild: boolean; // This item is a child of a oneOf/anyOf
-	isFirstOneOfChild: boolean; // First child (no OR divider before)
-	isLastOneOfChild: boolean; // Last child (no OR divider after, so show border)
-	required: boolean;
-	defaultValue?: string;
-	description?: string;
-	enumValues?: string[];
-	// Generic metadata - all other schema properties (format, min, max, minItems, maxItems, etc.)
-	metadata?: Record<string, string | number | boolean>;
-	depth: number;
-	isLast: boolean;
-	ancestorIsLast: boolean[];
-	children?: SchemaRowData[];
-}
-
 function collectRows(
 	nodes: SchemaNode[] | undefined,
 	depth: number,
@@ -219,18 +196,25 @@ function collectRows(
 			"anyOf",
 			"allOf",
 			"$ref",
+			"$id",
+			"$schema",
+			"$comment",
 			"title",
 			"additionalProperties",
 		]);
 
+		// Check if a key should be skipped (includes $-prefixed and x-prefixed keys)
+		const shouldSkipKey = (key: string) =>
+			skipKeys.has(key) || key.startsWith("$") || key.startsWith("x-");
+
 		const metadata: Record<string, string | number | boolean> = {};
 
 		// Get metadata from fragment (format, etc.)
 		const fragment = reg.fragment as Record<string, unknown>;
 		if (fragment) {
 			for (const [key, value] of Object.entries(fragment)) {
 				if (
-					!skipKeys.has(key) &&
+					!shouldSkipKey(key) &&
 					(typeof value === "string" ||
 						typeof value === "number" ||
 						typeof value === "boolean")
@@ -244,7 +228,7 @@ function collectRows(
 		if (reg.validations) {
 			for (const [key, value] of Object.entries(reg.validations)) {
 				if (
-					!skipKeys.has(key) &&
+					!shouldSkipKey(key) &&
 					key !== "enum" &&
 					(typeof value === "string" ||
 						typeof value === "number" ||

src/components/models/SchemaTree.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
+import type { SchemaRowData } from "./types";
 
 /**
  * SchemaTree - Interactive flex-based view for schema parameters
@@ -11,26 +12,11 @@ import { useState, useEffect, useCallback, useMemo } from "react";
  * - sessionStorage persistence for collapse state
  */
 
-export interface SchemaRowData {
-	id: string;
-	name: string;
-	type: string;
-	isArray: boolean;
-	isObject: boolean;
-	isOneOf: boolean;
-	isOneOfChild: boolean;
-	isFirstOneOfChild: boolean;
-	isLastOneOfChild: boolean;
-	required: boolean;
-	defaultValue?: string;
-	description?: string;
-	enumValues?: string[];
-	metadata?: Record<string, string | number | boolean>;
-	depth: number;
-	isLast: boolean;
-	ancestorIsLast: boolean[];
-	children?: SchemaRowData[];
-}
+export type { SchemaRowData };
+
+// Type indicator symbols
+const ARRAY_BRACKETS = "[]";
+const OBJECT_BRACES = "{}";
 
 interface SchemaTreeProps {
 	rows: SchemaRowData[];
@@ -198,12 +184,12 @@ function SchemaNode({
 							</span>
 							{row.isArray && (
 								<span className="font-mono text-gray-400 dark:text-gray-500">
-									[]
+									{ARRAY_BRACKETS}
 								</span>
 							)}
 							{row.isObject && !row.isOneOf && (
 								<span className="font-mono text-gray-400 dark:text-gray-500">
-									{"{}"}
+									{OBJECT_BRACES}
 								</span>
 							)}
 						</div>
@@ -214,11 +200,14 @@ function SchemaNode({
 							{row.metadata &&
 								Object.entries(row.metadata).map(([key, value]) => (
 									<span key={key}>
-										{key}: {String(value)}
+										<span className="font-medium">{key}:</span> {String(value)}
 									</span>
 								))}
 							{row.enumValues && row.enumValues.length > 0 && (
-								<span>enum: {row.enumValues.join(", ")}</span>
+								<span>
+									<span className="font-medium">enum:</span>{" "}
+									{row.enumValues.join(", ")}
+								</span>
 							)}
 						</div>
 
@@ -285,10 +274,14 @@ function SchemaNode({
 						{highlightMatch(row.name, searchTerm)}
 					</span>
 					{row.isArray && (
-						<span className="text-gray-400 dark:text-gray-500">[]</span>
+						<span className="text-gray-400 dark:text-gray-500">
+							{ARRAY_BRACKETS}
+						</span>
 					)}
 					{row.isObject && !row.isOneOf && (
-						<span className="text-gray-400 dark:text-gray-500">{"{}"}</span>
+						<span className="text-gray-400 dark:text-gray-500">
+							{OBJECT_BRACES}
+						</span>
 					)}
 				</div>
 

src/components/models/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared types for schema display components
+ */
+
+/**
+ * Schema row data structure for rendering parameter trees
+ */
+export interface SchemaRowData {
+	id: string;
+	name: string;
+	type: string;
+	isArray: boolean;
+	isObject: boolean;
+	isOneOf: boolean;
+	isOneOfChild: boolean; // This item is a child of a oneOf/anyOf
+	isFirstOneOfChild: boolean; // First child (no OR divider before)
+	isLastOneOfChild: boolean; // Last child (no OR divider after, so show border)
+	required: boolean;
+	defaultValue?: string;
+	description?: string;
+	enumValues?: string[];
+	// Generic metadata - all other schema properties (format, min, max, minItems, maxItems, etc.)
+	metadata?: Record<string, string | number | boolean>;
+	depth: number;
+	isLast: boolean;
+	ancestorIsLast: boolean[];
+	children?: SchemaRowData[];
+}