wp-typia 0.16.0 → 0.16.2

package/src/ui/alternate-buffer-lifecycle.ts

@@ -0,0 +1,152 @@
+import { useCallback } from "react";
+
+import { useRuntime } from "@bunli/runtime/app";
+import { useKeyboard } from "@bunli/tui";
+
+type AlternateBufferKeyEvent = {
+	ctrl?: boolean;
+	name?: string;
+};
+
+type AlternateBufferFailureOptions = {
+	context: string;
+	error: unknown;
+	exit: () => void;
+	log?: (message: string) => void;
+};
+
+type RunAlternateBufferActionOptions = {
+	action: () => Promise<void>;
+	context: string;
+	exit: () => void;
+	log?: (message: string) => void;
+};
+
+export function describeAlternateBufferFailure(context: string, error: unknown): string {
+	const message = error instanceof Error ? error.message : String(error);
+	return `${context}: ${message}`;
+}
+
+export function isAlternateBufferExitKey(key: AlternateBufferKeyEvent): boolean {
+	return key.name === "q" || (key.ctrl === true && key.name === "c");
+}
+
+export function reportAlternateBufferFailure({
+	context,
+	error,
+	exit,
+	log = console.error,
+}: AlternateBufferFailureOptions): void {
+	const message = describeAlternateBufferFailure(context, error);
+	exit();
+	log(message);
+}
+
+export async function runAlternateBufferAction({
+	action,
+	context,
+	exit,
+	log = console.error,
+}: RunAlternateBufferActionOptions): Promise<void> {
+	try {
+		await action();
+		exit();
+	} catch (error) {
+		reportAlternateBufferFailure({ context, error, exit, log });
+	}
+}
+
+export async function resolveLazyFlowComponent<TProps>({
+	loader,
+	onLoaded,
+	onFailure,
+	isDisposed,
+}: {
+	loader: () => Promise<{ default: React.ComponentType<TProps> }>;
+	onLoaded: (component: React.ComponentType<TProps>) => void;
+	onFailure: (error: unknown) => void;
+	isDisposed: () => boolean;
+}): Promise<void> {
+	try {
+		const module = await loader();
+		if (!isDisposed()) {
+			onLoaded(module.default);
+		}
+	} catch (error) {
+		if (!isDisposed()) {
+			onFailure(error);
+		}
+	}
+}
+
+export function useAlternateBufferExitKeys(options: {
+	enabled?: boolean;
+	exit?: () => void;
+} = {}): void {
+	const runtime = useRuntime();
+	const exit = options.exit ?? (() => runtime.exit());
+	const enabled = options.enabled ?? true;
+
+	useKeyboard((key: AlternateBufferKeyEvent) => {
+		if (!enabled) {
+			return;
+		}
+
+		if (isAlternateBufferExitKey(key)) {
+			exit();
+		}
+	});
+}
+
+export function useAlternateBufferLifecycle(
+	context: string,
+	options: {
+		enableExitKeys?: boolean;
+	} = {},
+): {
+	handleCancel: () => void;
+	handleFailure: (error: unknown) => void;
+	handleSubmit: (action: () => Promise<void>) => Promise<void>;
+} {
+	const runtime = useRuntime();
+	const exit = useCallback(() => {
+		runtime.exit();
+	}, [runtime]);
+
+	useAlternateBufferExitKeys({
+		enabled: options.enableExitKeys ?? true,
+		exit,
+	});
+
+	const handleCancel = useCallback(() => {
+		exit();
+	}, [exit]);
+
+	const handleFailure = useCallback(
+		(error: unknown) => {
+			reportAlternateBufferFailure({
+				context,
+				error,
+				exit,
+			});
+		},
+		[context, exit],
+	);
+
+	const handleSubmit = useCallback(
+		async (action: () => Promise<void>) => {
+			await runAlternateBufferAction({
+				action,
+				context,
+				exit,
+			});
+		},
+		[context, exit],
+	);
+
+	return {
+		handleCancel,
+		handleFailure,
+		handleSubmit,
+	};
+}

package/src/ui/create-flow-model.ts

@@ -0,0 +1,125 @@
+import { z } from "zod";
+
+import {
+	FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+	FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT,
+	FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT,
+	getFirstPartyScrollTop,
+	getFirstPartyViewportHeight,
+} from "./first-party-form-model";
+
+export const createFlowSchema = z.object({
+	"data-storage": z.string().optional(),
+	namespace: z.string().optional(),
+	"no-install": z.boolean().default(false),
+	"package-manager": z.string().optional(),
+	"persistence-policy": z.string().optional(),
+	"php-prefix": z.string().optional(),
+	"project-dir": z.string().min(1),
+	template: z.string().optional(),
+	"text-domain": z.string().optional(),
+	variant: z.string().optional(),
+	"with-migration-ui": z.boolean().default(false),
+	"with-test-preset": z.boolean().default(false),
+	"with-wp-env": z.boolean().default(false),
+	yes: z.boolean().default(false),
+});
+
+export type CreateFlowValues = z.infer<typeof createFlowSchema>;
+
+export type CreateFieldName =
+	| "project-dir"
+	| "template"
+	| "package-manager"
+	| "namespace"
+	| "text-domain"
+	| "php-prefix"
+	| "data-storage"
+	| "persistence-policy"
+	| "no-install"
+	| "yes"
+	| "with-wp-env"
+	| "with-test-preset"
+	| "with-migration-ui";
+
+export const CREATE_CHECKBOX_FIELD_NAMES = [
+	"no-install",
+	"yes",
+	"with-wp-env",
+	"with-test-preset",
+	"with-migration-ui",
+] as const satisfies ReadonlyArray<CreateFieldName>;
+
+export const CREATE_FIELD_ORDER = [
+	"project-dir",
+	"template",
+	"package-manager",
+	"namespace",
+	"text-domain",
+	"php-prefix",
+	"data-storage",
+	"persistence-policy",
+	...CREATE_CHECKBOX_FIELD_NAMES,
+] as const satisfies ReadonlyArray<CreateFieldName>;
+
+const CREATE_FIELD_HEIGHTS: Record<CreateFieldName, number> = {
+	"data-storage": FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT,
+	namespace: FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT,
+	"no-install": FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+	"package-manager": FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT,
+	"persistence-policy": FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT,
+	"php-prefix": FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT,
+	"project-dir": FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT,
+	template: FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT,
+	"text-domain": FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT,
+	yes: FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+	"with-migration-ui": FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+	"with-test-preset": FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+	"with-wp-env": FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT,
+};
+
+export function isCreatePersistenceTemplate(template?: string): boolean {
+	return template === "persistence" || template === "compound";
+}
+
+export function getVisibleCreateFieldNames(
+	values: Partial<CreateFlowValues>,
+): Array<CreateFieldName> {
+	return CREATE_FIELD_ORDER.filter((name) => {
+		if (name === "data-storage" || name === "persistence-policy") {
+			return isCreatePersistenceTemplate(values.template);
+		}
+
+		return true;
+	});
+}
+
+export function getCreateViewportHeight(terminalHeight = 24): number {
+	return getFirstPartyViewportHeight(terminalHeight);
+}
+
+export function getCreateScrollTop(options: {
+	activeFieldName: string | null;
+	values: Partial<CreateFlowValues>;
+	viewportHeight: number;
+}): number {
+	const { activeFieldName, values, viewportHeight } = options;
+	return getFirstPartyScrollTop({
+		activeFieldName,
+		fieldHeights: CREATE_FIELD_HEIGHTS,
+		visibleFieldNames: getVisibleCreateFieldNames(values),
+		viewportHeight,
+	});
+}
+
+export function sanitizeCreateSubmitValues(values: CreateFlowValues): CreateFlowValues {
+	if (isCreatePersistenceTemplate(values.template)) {
+		return values;
+	}
+
+	return {
+		...values,
+		"data-storage": undefined,
+		"persistence-policy": undefined,
+	};
+}

package/src/ui/create-flow.tsx

@@ -1,38 +1,167 @@
-import { useState } from "react";
+import { createElement, useMemo } from "react";
 
-import { useRuntime } from "@bunli/runtime/app";
-import { Alert, SchemaForm } from "@bunli/tui";
-import { z } from "zod";
+import {
+	Form,
+	type SelectOption,
+	useFormContext,
+	useTerminalDimensions,
+} from "@bunli/tui";
 
 import { executeCreateCommand } from "../runtime-bridge";
+import { useAlternateBufferLifecycle } from "./alternate-buffer-lifecycle";
+import {
+	type CreateFlowValues,
+	CREATE_CHECKBOX_FIELD_NAMES,
+	createFlowSchema,
+	getCreateScrollTop,
+	getCreateViewportHeight,
+	getVisibleCreateFieldNames,
+	isCreatePersistenceTemplate,
+	sanitizeCreateSubmitValues,
+} from "./create-flow-model";
+import {
+	FirstPartyCheckboxField,
+	FirstPartyScrollBox,
+	FirstPartySelectField,
+	FirstPartyTextField,
+} from "./first-party-form";
+import { getWrappedFieldNeighbors } from "./first-party-form-model";
 
-const createFlowSchema = z.object({
-	"data-storage": z.string().optional(),
-	namespace: z.string().optional(),
-	"no-install": z.boolean().default(false),
-	"package-manager": z.string().optional(),
-	"persistence-policy": z.string().optional(),
-	"php-prefix": z.string().optional(),
-	"project-dir": z.string().min(1),
-	template: z.string().optional(),
-	"text-domain": z.string().optional(),
-	variant: z.string().optional(),
-	"with-migration-ui": z.boolean().default(false),
-	"with-test-preset": z.boolean().default(false),
-	"with-wp-env": z.boolean().default(false),
-	yes: z.boolean().default(false),
-});
+const templateOptions: SelectOption[] = [
+	{ description: "Basic block scaffold", name: "basic", value: "basic" },
+	{ description: "Interactivity API block scaffold", name: "interactivity", value: "interactivity" },
+	{ description: "Persistence-enabled block scaffold", name: "persistence", value: "persistence" },
+	{ description: "Compound parent + child scaffold", name: "compound", value: "compound" },
+	{ description: "Official empty workspace template", name: "workspace", value: "workspace" },
+];
 
-type CreateFlowValues = z.infer<typeof createFlowSchema>;
+const packageManagerOptions: SelectOption[] = [
+	{ description: "Use npm", name: "npm", value: "npm" },
+	{ description: "Use pnpm", name: "pnpm", value: "pnpm" },
+	{ description: "Use yarn", name: "yarn", value: "yarn" },
+	{ description: "Use bun", name: "bun", value: "bun" },
+];
+
+const dataStorageOptions: SelectOption[] = [
+	{ description: "Dedicated custom table storage", name: "custom-table", value: "custom-table" },
+	{ description: "Persist through post meta", name: "post-meta", value: "post-meta" },
+];
+
+const persistencePolicyOptions: SelectOption[] = [
+	{ description: "Authenticated write policy", name: "authenticated", value: "authenticated" },
+	{ description: "Public token policy", name: "public", value: "public" },
+];
+
+const checkboxLabels: Record<(typeof CREATE_CHECKBOX_FIELD_NAMES)[number], string> = {
+	"no-install": "Skip dependency install",
+	yes: "Use defaults without prompts",
+	"with-wp-env": "Add wp-env preset",
+	"with-test-preset": "Add test preset",
+	"with-migration-ui": "Add migration UI",
+};
 
 type CreateFlowProps = {
 	cwd: string;
 	initialValues: Partial<CreateFlowValues>;
 };
 
+type CreateSelectFieldName = {
+	[K in keyof CreateFlowValues]-?: CreateFlowValues[K] extends string | undefined ? K : never;
+}[keyof CreateFlowValues];
+
+function CreateFlowFields() {
+	const { activeFieldName, values } = useFormContext();
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
+	const createValues = values as Partial<CreateFlowValues>;
+	const template = createValues.template;
+	const viewportHeight = getCreateViewportHeight(terminalHeight);
+	const visibleFields = useMemo(() => getVisibleCreateFieldNames(createValues), [createValues]);
+	const scrollValues = useMemo(() => ({ template }), [template]);
+	const scrollTop = useMemo(
+		() =>
+			getCreateScrollTop({
+				activeFieldName,
+				values: scrollValues,
+				viewportHeight,
+			}),
+		[activeFieldName, scrollValues, viewportHeight],
+	);
+
+	return createElement(
+		FirstPartyScrollBox,
+		{ scrollTop, viewportHeight },
+		[
+			createElement(FirstPartyTextField, {
+				...getWrappedFieldNeighbors(visibleFields, "project-dir"),
+				key: "project-dir",
+				label: "Project directory",
+				name: "project-dir",
+				required: true,
+			}),
+			createElement(FirstPartySelectField, {
+				...getWrappedFieldNeighbors(visibleFields, "template"),
+				key: "template",
+				label: "Template",
+				name: "template" satisfies CreateSelectFieldName,
+				options: templateOptions,
+			}),
+			createElement(FirstPartySelectField, {
+				...getWrappedFieldNeighbors(visibleFields, "package-manager"),
+				key: "package-manager",
+				label: "Package manager",
+				name: "package-manager" satisfies CreateSelectFieldName,
+				options: packageManagerOptions,
+			}),
+			createElement(FirstPartyTextField, {
+				...getWrappedFieldNeighbors(visibleFields, "namespace"),
+				key: "namespace",
+				label: "Namespace",
+				name: "namespace",
+			}),
+			createElement(FirstPartyTextField, {
+				...getWrappedFieldNeighbors(visibleFields, "text-domain"),
+				key: "text-domain",
+				label: "Text domain",
+				name: "text-domain",
+			}),
+			createElement(FirstPartyTextField, {
+				...getWrappedFieldNeighbors(visibleFields, "php-prefix"),
+				key: "php-prefix",
+				label: "PHP prefix",
+				name: "php-prefix",
+			}),
+			isCreatePersistenceTemplate(template)
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(visibleFields, "data-storage"),
+						key: "data-storage",
+						label: "Data storage",
+						name: "data-storage" satisfies CreateSelectFieldName,
+						options: dataStorageOptions,
+					})
+				: null,
+			isCreatePersistenceTemplate(template)
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(visibleFields, "persistence-policy"),
+						key: "persistence-policy",
+						label: "Persistence policy",
+						name: "persistence-policy" satisfies CreateSelectFieldName,
+						options: persistencePolicyOptions,
+					})
+				: null,
+			...CREATE_CHECKBOX_FIELD_NAMES.map((name) =>
+				createElement(FirstPartyCheckboxField, {
+					...getWrappedFieldNeighbors(visibleFields, name),
+					key: name,
+					label: checkboxLabels[name],
+					name,
+				}),
+			),
+		],
+	);
+}
+
 export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
-	const runtime = useRuntime();
-	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia create failed");
 	const defaultPrompt = {
 		close() {},
 		select<T extends string>(_message: string, options: Array<{ value: T }>, defaultValue = 1) {
@@ -45,127 +174,25 @@ export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
 	};
 
 	return (
-		<>
-			{errorMessage ? (
-				<Alert
-					message={errorMessage}
-					title="Create failed"
-					tone="danger"
-				/>
-			) : null}
-			<SchemaForm
-				fields={[
-					{ kind: "text", label: "Project directory", name: "project-dir", required: true },
-					{
-						kind: "select",
-						label: "Template",
-						name: "template",
-						options: [
-							{ name: "basic", description: "Basic block scaffold", value: "basic" },
-							{
-								name: "interactivity",
-								description: "Interactivity API block scaffold",
-								value: "interactivity",
-							},
-							{
-								name: "persistence",
-								description: "Persistence-enabled block scaffold",
-								value: "persistence",
-							},
-							{
-								name: "compound",
-								description: "Compound parent + child scaffold",
-								value: "compound",
-							},
-							{
-								name: "@wp-typia/create-workspace-template",
-								description: "Official empty workspace template",
-								value: "@wp-typia/create-workspace-template",
-							},
-						],
-					},
-					{
-						kind: "select",
-						label: "Package manager",
-						name: "package-manager",
-						options: [
-							{ name: "npm", description: "Use npm", value: "npm" },
-							{ name: "pnpm", description: "Use pnpm", value: "pnpm" },
-							{ name: "yarn", description: "Use yarn", value: "yarn" },
-							{ name: "bun", description: "Use bun", value: "bun" },
-						],
-					},
-					{ kind: "text", label: "Namespace", name: "namespace" },
-					{ kind: "text", label: "Text domain", name: "text-domain" },
-					{ kind: "text", label: "PHP prefix", name: "php-prefix" },
-					{
-						kind: "select",
-						label: "Data storage",
-						name: "data-storage",
-						options: [
-							{
-								name: "custom-table",
-								description: "Dedicated custom table storage",
-								value: "custom-table",
-							},
-							{
-								name: "post-meta",
-								description: "Persist through post meta",
-								value: "post-meta",
-							},
-						],
-						visibleWhen: (values) =>
-							values.template === "persistence" || values.template === "compound",
-					},
-					{
-						kind: "select",
-						label: "Persistence policy",
-						name: "persistence-policy",
-						options: [
-							{
-								name: "authenticated",
-								description: "Authenticated write policy",
-								value: "authenticated",
-							},
-							{ name: "public", description: "Public token policy", value: "public" },
-						],
-						visibleWhen: (values) =>
-							values.template === "persistence" || values.template === "compound",
-					},
-					{ kind: "checkbox", label: "Skip dependency install", name: "no-install" },
-					{ kind: "checkbox", label: "Use defaults without prompts", name: "yes" },
-					{ kind: "checkbox", label: "Add wp-env preset", name: "with-wp-env" },
-					{
-						kind: "checkbox",
-						label: "Add test preset",
-						name: "with-test-preset",
-					},
-					{
-						kind: "checkbox",
-						label: "Add migration UI",
-						name: "with-migration-ui",
-					},
-				]}
-				initialValues={initialValues}
-				onCancel={() => runtime.exit()}
-				onSubmit={async (values) => {
-					try {
-						setErrorMessage(null);
-						await executeCreateCommand({
-							cwd,
-							flags: values,
-							interactive: true,
-							projectDir: values["project-dir"],
-							prompt: defaultPrompt,
-						});
-						runtime.exit();
-					} catch (error) {
-						setErrorMessage(error instanceof Error ? error.message : String(error));
-					}
-				}}
-				schema={createFlowSchema}
-				title="Create a wp-typia project"
-			/>
-		</>
+		<Form
+			initialValues={initialValues}
+			onCancel={handleCancel}
+			onSubmit={async (values) =>
+				handleSubmit(async () => {
+					const flags = sanitizeCreateSubmitValues(values);
+					await executeCreateCommand({
+						cwd,
+						flags,
+						interactive: true,
+						projectDir: values["project-dir"],
+						prompt: defaultPrompt,
+					});
+				})
+			}
+			schema={createFlowSchema}
+			title="Create a wp-typia project"
+		>
+			<CreateFlowFields />
+		</Form>
 	);
 }

package/src/ui/first-party-form-model.ts

@@ -0,0 +1,62 @@
+export const FIRST_PARTY_FIELD_GAP = 1;
+export const FIRST_PARTY_TEXT_FIELD_BODY_HEIGHT = 6;
+export const FIRST_PARTY_CHECKBOX_FIELD_BODY_HEIGHT = 2;
+export const FIRST_PARTY_SELECT_FIELD_LABEL_GAP = 1;
+export const FIRST_PARTY_SELECT_FIELD_CONTROL_HEIGHT = 3;
+export const FIRST_PARTY_SELECT_FIELD_BODY_HEIGHT =
+	1 + FIRST_PARTY_SELECT_FIELD_LABEL_GAP + FIRST_PARTY_SELECT_FIELD_CONTROL_HEIGHT + 1;
+
+export type FirstPartyFieldHeights<TName extends string> = Record<TName, number>;
+
+export function getWrappedFieldNeighbors<TName extends string>(
+	visibleFieldNames: ReadonlyArray<TName>,
+	fieldName: TName,
+): {
+	nextFieldName?: TName;
+	previousFieldName?: TName;
+} {
+	const index = visibleFieldNames.indexOf(fieldName);
+	if (index === -1 || visibleFieldNames.length < 2) {
+		return {};
+	}
+
+	return {
+		nextFieldName: visibleFieldNames[(index + 1) % visibleFieldNames.length],
+		previousFieldName:
+			visibleFieldNames[(index - 1 + visibleFieldNames.length) % visibleFieldNames.length],
+	};
+}
+
+export function getFirstPartyViewportHeight(terminalHeight = 24): number {
+	return Math.max(8, Math.min(28, terminalHeight - 12));
+}
+
+export function getFirstPartyScrollTop<TName extends string>(options: {
+	activeFieldName: string | null;
+	fieldHeights: FirstPartyFieldHeights<TName>;
+	visibleFieldNames: ReadonlyArray<TName>;
+	viewportHeight: number;
+}): number {
+	const { activeFieldName, fieldHeights, visibleFieldNames, viewportHeight } = options;
+	if (!activeFieldName) {
+		return 0;
+	}
+
+	let offset = 0;
+	for (const fieldName of visibleFieldNames) {
+		const fieldHeight = fieldHeights[fieldName];
+		if (fieldName === activeFieldName) {
+			const safeViewportHeight = Math.max(4, viewportHeight - 2);
+			const fieldBottom = offset + fieldHeight;
+			if (fieldBottom <= safeViewportHeight) {
+				return 0;
+			}
+
+			return Math.max(0, fieldBottom - safeViewportHeight + 1);
+		}
+
+		offset += fieldHeight + FIRST_PARTY_FIELD_GAP;
+	}
+
+	return 0;
+}