wp-typia 0.16.1 → 0.16.3

package/src/ui/add-flow.tsx

@@ -1,32 +1,95 @@
-import { SchemaForm } from "@bunli/tui";
-import { HOOKED_BLOCK_POSITION_IDS } from "@wp-typia/project-tools";
-import { z } from "zod";
+import { createElement, useEffect, useMemo, useState } from "react";
 
-import { executeAddCommand } from "../runtime-bridge";
+import {
+	Form,
+	type SelectOption,
+	useFormContext,
+	useTerminalDimensions,
+} from "@bunli/tui";
+import { HOOKED_BLOCK_POSITION_IDS } from "@wp-typia/project-tools/hooked-blocks";
+
+import { executeAddCommand, loadAddWorkspaceBlockOptions } from "../runtime-bridge";
 import { useAlternateBufferLifecycle } from "./alternate-buffer-lifecycle";
+import {
+	type AddFlowValues,
+	addFlowSchema,
+	getAddScrollTop,
+	getAddViewportHeight,
+	getVisibleAddFieldNames,
+	isAddPersistenceTemplate,
+	sanitizeAddSubmitValues,
+} from "./add-flow-model";
+import {
+	FirstPartyScrollBox,
+	FirstPartySelectField,
+	FirstPartyTextField,
+} from "./first-party-form";
+import { getWrappedFieldNeighbors } from "./first-party-form-model";
 
-const addFlowSchema = z.object({
-	anchor: z.string().optional(),
-	block: z.string().optional(),
-	"data-storage": z.string().optional(),
-	kind: z.enum(["block", "variation", "pattern", "binding-source", "hooked-block"]).default("block"),
-	name: z.string().optional(),
-	"persistence-policy": z.string().optional(),
-	position: z.string().optional(),
-	template: z.string().optional(),
-});
+const kindOptions: SelectOption[] = [
+	{ name: "block", description: "Add a real block slice", value: "block" },
+	{
+		name: "variation",
+		description: "Add a variation to an existing block",
+		value: "variation",
+	},
+	{
+		name: "pattern",
+		description: "Add a PHP block pattern shell",
+		value: "pattern",
+	},
+	{
+		name: "binding-source",
+		description: "Add a shared block bindings source",
+		value: "binding-source",
+	},
+	{
+		name: "hooked-block",
+		description: "Add block.json hook metadata to an existing block",
+		value: "hooked-block",
+	},
+];
 
-type AddFlowValues = z.infer<typeof addFlowSchema>;
+const templateOptions: SelectOption[] = [
+	{ 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",
+	},
+];
 
-type AddFlowProps = {
-	cwd: string;
-	initialValues: Partial<AddFlowValues>;
-	workspaceBlockOptions: Array<{
-		description: string;
-		name: string;
-		value: string;
-	}>;
-};
+const dataStorageOptions: SelectOption[] = [
+	{
+		name: "custom-table",
+		description: "Dedicated custom table storage",
+		value: "custom-table",
+	},
+	{
+		name: "post-meta",
+		description: "Persist through post meta",
+		value: "post-meta",
+	},
+];
+
+const persistencePolicyOptions: SelectOption[] = [
+	{
+		name: "authenticated",
+		description: "Authenticated write policy",
+		value: "authenticated",
+	},
+	{ name: "public", description: "Public token policy", value: "public" },
+];
 
 const HOOKED_BLOCK_POSITION_DESCRIPTIONS: Record<
 	(typeof HOOKED_BLOCK_POSITION_IDS)[number],
@@ -38,170 +101,207 @@ const HOOKED_BLOCK_POSITION_DESCRIPTIONS: Record<
 	lastChild: "Insert as the last child of the anchor block",
 };
 
-export function AddFlow({ cwd, initialValues, workspaceBlockOptions }: AddFlowProps) {
-	const { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia add failed");
+type AddFlowProps = {
+	cwd: string;
+	initialValues: Partial<AddFlowValues>;
+};
+
+type WorkspaceBlockOption = {
+	description: string;
+	name: string;
+	value: string;
+};
 
-	return (
-		<SchemaForm
-			fields={[
-					{
-						kind: "select",
-						label: "Kind",
-						name: "kind",
-						options: [
-							{ name: "block", description: "Add a real block slice", value: "block" },
-							{
-								name: "variation",
-								description: "Add a variation to an existing block",
-								value: "variation",
-							},
-							{
-								name: "pattern",
-								description: "Add a PHP block pattern shell",
-								value: "pattern",
-							},
-							{
-								name: "binding-source",
-								description: "Add a shared block bindings source",
-								value: "binding-source",
-							},
-							{
-								name: "hooked-block",
-								description: "Add block.json hook metadata to an existing block",
-								value: "hooked-block",
-							},
-						],
-					},
-					{
-						kind: "text",
-						label: "Block name",
+type AddSelectFieldName = {
+	[K in keyof AddFlowValues]-?: AddFlowValues[K] extends string | undefined ? K : never;
+}[keyof AddFlowValues];
+
+function getAddNameLabel(kind?: string): string {
+	switch (kind) {
+		case "variation":
+			return "Variation name";
+		case "pattern":
+			return "Pattern name";
+		case "binding-source":
+			return "Binding source name";
+		case "hooked-block":
+			return "Target block";
+		case "block":
+		default:
+			return "Block name";
+	}
+}
+
+function AddFlowFields({
+	workspaceBlockOptions,
+}: {
+	workspaceBlockOptions: WorkspaceBlockOption[];
+}) {
+	const { activeFieldName, values } = useFormContext();
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
+	const addValues = values as Partial<AddFlowValues>;
+	const kind = addValues.kind ?? "block";
+	const template = addValues.template;
+	const viewportHeight = getAddViewportHeight(terminalHeight);
+	const scrollValues = useMemo(() => ({ kind, template }), [kind, template]);
+	const scrollTop = useMemo(
+		() =>
+			getAddScrollTop({
+				activeFieldName,
+				values: scrollValues,
+				viewportHeight,
+			}),
+		[activeFieldName, scrollValues, viewportHeight],
+	);
+
+	const visibleFields = new Set(getVisibleAddFieldNames(addValues));
+	const orderedVisibleFields = useMemo(() => getVisibleAddFieldNames(addValues), [addValues]);
+	const hookedBlockNameUsesSelect = kind === "hooked-block" && workspaceBlockOptions.length > 0;
+	const variationBlockUsesSelect = kind === "variation" && workspaceBlockOptions.length > 0;
+
+	return createElement(
+		FirstPartyScrollBox,
+		{ scrollTop, viewportHeight },
+		[
+			createElement(FirstPartySelectField, {
+				...getWrappedFieldNeighbors(orderedVisibleFields, "kind"),
+				key: "kind",
+				label: "Kind",
+				name: "kind" satisfies AddSelectFieldName,
+				options: kindOptions,
+			}),
+			visibleFields.has("name") && !hookedBlockNameUsesSelect
+				? createElement(FirstPartyTextField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "name"),
+						key: `name-text:${kind}`,
+						label: getAddNameLabel(kind),
 						name: "name",
-						visibleWhen: (values) => values.kind === "block",
-					},
-					{
-						kind: "select",
+					})
+				: null,
+			hookedBlockNameUsesSelect
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "name"),
+						key: "name-select:hooked-block",
+						label: getAddNameLabel(kind),
+						name: "name" satisfies AddSelectFieldName,
+						options: workspaceBlockOptions,
+					})
+				: null,
+			visibleFields.has("template")
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "template"),
+						key: "template",
 						label: "Template family",
-						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",
-							},
-						],
-						visibleWhen: (values) => values.kind === "block",
-					},
-					{
-						kind: "text",
-						label: "Variation name",
-						name: "name",
-						visibleWhen: (values) => values.kind === "variation",
-					},
-					{
-						kind: workspaceBlockOptions.length > 0 ? "select" : "text",
+						name: "template" satisfies AddSelectFieldName,
+						options: templateOptions,
+					})
+				: null,
+			visibleFields.has("block") && !variationBlockUsesSelect
+				? createElement(FirstPartyTextField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "block"),
+						key: "block-text",
 						label: "Target block",
 						name: "block",
-						options: workspaceBlockOptions,
-						visibleWhen: (values) => values.kind === "variation",
-					},
-					{
-						kind: "text",
-						label: "Pattern name",
-						name: "name",
-						visibleWhen: (values) => values.kind === "pattern",
-					},
-					{
-						kind: "text",
-						label: "Binding source name",
-						name: "name",
-						visibleWhen: (values) => values.kind === "binding-source",
-					},
-					{
-						kind: workspaceBlockOptions.length > 0 ? "select" : "text",
+					})
+				: null,
+			variationBlockUsesSelect
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "block"),
+						key: "block-select",
 						label: "Target block",
-						name: "name",
+						name: "block" satisfies AddSelectFieldName,
 						options: workspaceBlockOptions,
-						visibleWhen: (values) => values.kind === "hooked-block",
-					},
-					{
-						kind: "text",
+					})
+				: null,
+			visibleFields.has("anchor")
+				? createElement(FirstPartyTextField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "anchor"),
+						key: "anchor",
 						label: "Anchor block name",
 						name: "anchor",
-						visibleWhen: (values) => values.kind === "hooked-block",
-					},
-					{
-						kind: "select",
+					})
+				: null,
+			visibleFields.has("position")
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "position"),
+						key: "position",
 						label: "Hook position",
-						name: "position",
+						name: "position" satisfies AddSelectFieldName,
 						options: HOOKED_BLOCK_POSITION_IDS.map((position) => ({
-							name: position,
 							description: HOOKED_BLOCK_POSITION_DESCRIPTIONS[position],
+							name: position,
 							value: position,
 						})),
-						visibleWhen: (values) => values.kind === "hooked-block",
-					},
-					{
-						kind: "select",
+					})
+				: null,
+			visibleFields.has("data-storage") && isAddPersistenceTemplate(template)
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "data-storage"),
+						key: "data-storage",
 						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.kind === "block" &&
-							(values.template === "persistence" || values.template === "compound"),
-					},
-					{
-						kind: "select",
+						name: "data-storage" satisfies AddSelectFieldName,
+						options: dataStorageOptions,
+					})
+				: null,
+			visibleFields.has("persistence-policy") && isAddPersistenceTemplate(template)
+				? createElement(FirstPartySelectField, {
+						...getWrappedFieldNeighbors(orderedVisibleFields, "persistence-policy"),
+						key: "persistence-policy",
 						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.kind === "block" &&
-							(values.template === "persistence" || values.template === "compound"),
-					},
-				]}
+						name: "persistence-policy" satisfies AddSelectFieldName,
+						options: persistencePolicyOptions,
+					})
+				: null,
+		],
+	);
+}
+
+export function AddFlow({ cwd, initialValues }: AddFlowProps) {
+	const { handleCancel, handleFailure, handleSubmit } = useAlternateBufferLifecycle(
+		"wp-typia add failed",
+	);
+	const [workspaceBlockOptions, setWorkspaceBlockOptions] = useState<WorkspaceBlockOption[]>([]);
+
+	useEffect(() => {
+		let disposed = false;
+		setWorkspaceBlockOptions([]);
+
+		void loadAddWorkspaceBlockOptions(cwd)
+			.then((options) => {
+				if (!disposed) {
+					setWorkspaceBlockOptions(options);
+				}
+			})
+			.catch((error) => {
+				if (!disposed) {
+					handleFailure(error);
+				}
+			});
+
+		return () => {
+			disposed = true;
+		};
+	}, [cwd, handleFailure]);
+
+	return (
+		<Form
 			initialValues={initialValues}
 			onCancel={handleCancel}
 			onSubmit={async (values) =>
 				handleSubmit(async () => {
-						await executeAddCommand({
-							cwd,
-							flags: values,
-							kind: values.kind,
-							name: values.name,
-						});
+					const flags = sanitizeAddSubmitValues(values);
+					await executeAddCommand({
+						cwd,
+						flags,
+						kind: values.kind,
+						name: typeof flags.name === "string" ? flags.name : undefined,
+					});
 				})
 			}
 			schema={addFlowSchema}
 			title="Extend a wp-typia workspace"
-		/>
+		>
+			<AddFlowFields workspaceBlockOptions={workspaceBlockOptions} />
+		</Form>
 	);
 }

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,
+	};
+}