wp-typia 0.16.1 → 0.16.2

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,33 +1,165 @@
-import { SchemaForm } from "@bunli/tui";
-import { z } from "zod";
+import { createElement, useMemo } from "react";
+
+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 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" },
+];
+
+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 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 persistencePolicyOptions: SelectOption[] = [
+	{ description: "Authenticated write policy", name: "authenticated", value: "authenticated" },
+	{ description: "Public token policy", name: "public", value: "public" },
+];
 
-type CreateFlowValues = z.infer<typeof createFlowSchema>;
+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 { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia create failed");
 	const defaultPrompt = {
@@ -42,114 +174,25 @@ export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
 	};
 
 	return (
-		<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",
-					},
-				]}
+		<Form
 			initialValues={initialValues}
 			onCancel={handleCancel}
 			onSubmit={async (values) =>
 				handleSubmit(async () => {
-						await executeCreateCommand({
-							cwd,
-							flags: values,
-							interactive: true,
-							projectDir: values["project-dir"],
-							prompt: defaultPrompt,
-						});
+					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;
+}