@geoqiao/pi-ask 1.1.0

package/src/state/selectors.ts

@@ -0,0 +1,135 @@
+import { OTHER_OPTION_LABEL, OTHER_OPTION_VALUE } from "../constants/text.ts";
+import type {
+	AskDisplayOption,
+	AskQuestion,
+	AskState,
+	AskStateAnswer,
+} from "../types.ts";
+import { isAnswerAnswered } from "./answers.ts";
+
+const CUSTOM_OPTION: AskDisplayOption = {
+	value: OTHER_OPTION_VALUE,
+	label: OTHER_OPTION_LABEL,
+	isCustomOption: true,
+};
+
+const DEFAULT_FREEFORM_LABEL = "Type your answer:";
+
+export function getCurrentQuestion(state: AskState): AskQuestion | undefined {
+	return state.questions[state.activeTabIndex];
+}
+
+export function getQuestionById(
+	state: AskState,
+	questionId: string
+): AskQuestion | undefined {
+	return state.questions.find((question) => question.id === questionId);
+}
+
+export function isSubmitTab(state: AskState): boolean {
+	return state.activeTabIndex >= state.questions.length;
+}
+
+export function getRenderableOptions(
+	question?: AskQuestion
+): AskDisplayOption[] {
+	if (!question) {
+		return [];
+	}
+	const freeformOption = getFreeformOption(question);
+	if (freeformOption) {
+		return [
+			{
+				...freeformOption,
+				label: DEFAULT_FREEFORM_LABEL,
+				isCustomOption: true,
+				isFreeformOnlyOption: true,
+			},
+		];
+	}
+	return [...question.options, CUSTOM_OPTION];
+}
+
+function getFreeformOption(
+	question: AskQuestion
+): AskDisplayOption | undefined {
+	if (question.options.length !== 1) {
+		return;
+	}
+	const option = question.options[0];
+	return option.freeform ? option : undefined;
+}
+
+export function getCurrentOption(
+	state: AskState
+): AskDisplayOption | undefined {
+	return getRenderableOptions(getCurrentQuestion(state))[
+		state.activeOptionIndex
+	];
+}
+
+export function getQuestionOptionByValue(
+	question: AskQuestion,
+	optionValue: string
+) {
+	return question.options.find((option) => option.value === optionValue);
+}
+
+export function getAnswer(
+	state: AskState,
+	questionId: string
+): AskStateAnswer | undefined {
+	return state.answers[questionId];
+}
+
+export function getQuestionNote(
+	state: AskState,
+	questionId: string
+): string | undefined {
+	return getAnswer(state, questionId)?.note;
+}
+
+export function getOptionNote(
+	state: AskState,
+	questionId: string,
+	optionValue: string
+): string | undefined {
+	return getAnswer(state, questionId)?.optionNotes?.[optionValue];
+}
+
+export function isQuestionAnswered(
+	state: AskState,
+	questionId: string
+): boolean {
+	return isAnswerAnswered(getAnswer(state, questionId));
+}
+
+export function isQuestionNoteOpen(
+	state: AskState,
+	questionId: string
+): boolean {
+	return (
+		state.view.kind === "note" &&
+		state.view.questionId === questionId &&
+		state.view.optionValue === undefined
+	);
+}
+
+export function isOptionNoteOpen(
+	state: AskState,
+	questionId: string,
+	optionValue: string
+): boolean {
+	return (
+		state.view.kind === "note" &&
+		state.view.questionId === questionId &&
+		state.view.optionValue === optionValue
+	);
+}
+
+export function isInputOpenForQuestion(
+	state: AskState,
+	questionId: string
+): boolean {
+	return state.view.kind === "input" && state.view.questionId === questionId;
+}

package/src/state/transitions.ts

@@ -0,0 +1,330 @@
+import type { AskAction, AskState } from "../types.ts";
+import {
+	emptyAnswer,
+	isAnswerAnswered,
+	isAnswerEmpty,
+	saveCustomText,
+	saveOptionNote,
+	saveQuestionNote,
+	setCustomSelected,
+	setSingleSelection,
+	toggleSelection,
+} from "./answers.ts";
+import {
+	cancelFlow as cancelFlowBase,
+	createInitialState as createInitialStateBase,
+	dismissFlow as dismissFlowBase,
+	moveOption as moveOptionBase,
+	moveTab as moveTabBase,
+} from "./navigation.ts";
+import {
+	getAnswer,
+	getCurrentOption,
+	getCurrentQuestion,
+	getQuestionById,
+	getRenderableOptions,
+	isSubmitTab,
+} from "./selectors.ts";
+import {
+	inputView,
+	navigateView,
+	optionNoteView,
+	questionNoteView,
+	submitView,
+} from "./view.ts";
+
+const SUBMIT_ACTION_COUNT = 3;
+
+export function createInitialState(params: {
+	title?: string;
+	questions: AskState["questions"];
+}): AskState {
+	return createInitialStateBase(params);
+}
+
+export function moveTab(state: AskState, delta: number): AskState {
+	return moveTabBase(state, delta);
+}
+
+export function moveOption(state: AskState, delta: number): AskState {
+	return moveOptionBase(state, delta);
+}
+
+export function cancelFlow(state: AskState): AskState {
+	return cancelFlowBase(state);
+}
+
+export function dismissFlow(state: AskState): AskState {
+	return dismissFlowBase(state);
+}
+
+export function reduceAskState(state: AskState, action: AskAction): AskState {
+	switch (action.type) {
+		case "MOVE_TAB":
+			return moveTabBase(state, action.delta);
+		case "MOVE_OPTION":
+			return moveOptionBase(state, action.delta);
+		case "OPEN_INPUT":
+			return setView(state, inputView(action.questionId));
+		case "OPEN_QUESTION_NOTE":
+			return setView(state, questionNoteView(action.questionId));
+		case "OPEN_OPTION_NOTE":
+			return setView(
+				state,
+				optionNoteView(action.questionId, action.optionValue)
+			);
+		case "CONFIRM":
+			return confirmCurrentSelection(state);
+		case "TOGGLE_MULTI":
+			return toggleCurrentMultiOption(state);
+		case "NUMBER_SHORTCUT":
+			return applyNumberShortcut(state, action.digit);
+		case "SAVE_INPUT":
+			return saveInputValue(state, action.value, action.submit ?? false);
+		case "SAVE_NOTE":
+			return saveNoteValue(state, action.value);
+		case "CANCEL":
+			return cancelFlowBase(state);
+		default:
+			return state;
+	}
+}
+
+export function enterInputMode(state: AskState, questionId: string): AskState {
+	return reduceAskState(state, { type: "OPEN_INPUT", questionId });
+}
+
+export function enterQuestionNoteMode(
+	state: AskState,
+	questionId: string
+): AskState {
+	return reduceAskState(state, { type: "OPEN_QUESTION_NOTE", questionId });
+}
+
+export function enterOptionNoteMode(
+	state: AskState,
+	questionId: string,
+	optionValue: string
+): AskState {
+	return reduceAskState(state, {
+		type: "OPEN_OPTION_NOTE",
+		questionId,
+		optionValue,
+	});
+}
+
+export function toggleCurrentOption(state: AskState): AskState {
+	return activateCurrentOption(state, "toggle");
+}
+
+export function toggleCurrentMultiOption(state: AskState): AskState {
+	return toggleCurrentOption(state);
+}
+
+export function confirmCurrentSelection(state: AskState): AskState {
+	if (isSubmitTab(state)) {
+		return completeSubmitAction(state);
+	}
+	return activateCurrentOption(state, "confirm");
+}
+
+export function applyNumberShortcut(state: AskState, digit: number): AskState {
+	if (digit <= 0) {
+		return state;
+	}
+
+	if (isSubmitTab(state)) {
+		if (digit > SUBMIT_ACTION_COUNT) {
+			return state;
+		}
+		return confirmCurrentSelection({
+			...state,
+			activeSubmitActionIndex: digit - 1,
+		});
+	}
+
+	const question = getCurrentQuestion(state);
+	const index = digit - 1;
+	const option = question ? getRenderableOptions(question)[index] : undefined;
+	if (!(question && option)) {
+		return state;
+	}
+
+	return activateCurrentOption({ ...state, activeOptionIndex: index }, "digit");
+}
+
+export function saveCustomAnswer(state: AskState, rawValue: string): AskState {
+	return saveInputValue(state, rawValue, false);
+}
+
+export function submitCustomAnswer(
+	state: AskState,
+	rawValue: string
+): AskState {
+	return saveInputValue(state, rawValue, true);
+}
+
+export function saveNote(state: AskState, rawValue: string): AskState {
+	return saveNoteValue(state, rawValue);
+}
+
+function completeSubmitAction(state: AskState): AskState {
+	if (state.activeSubmitActionIndex === 2) {
+		return { ...state, cancelled: true, completed: true };
+	}
+	if (state.activeSubmitActionIndex === 1) {
+		return { ...state, mode: "elaborate", completed: true };
+	}
+	return { ...state, mode: "submit", completed: true };
+}
+
+function activateCurrentOption(
+	state: AskState,
+	trigger: "toggle" | "confirm" | "digit"
+): AskState {
+	const question = getCurrentQuestion(state);
+	const option = getCurrentOption(state);
+	if (!(question && option)) {
+		return state;
+	}
+	if (option.isCustomOption) {
+		return activateCustomOption(state, question.id, question.type, trigger);
+	}
+	if (question.type === "multi") {
+		if (trigger === "confirm") {
+			return advanceToNextTab(state);
+		}
+		return updateAnswer(state, question.id, (answer) =>
+			toggleSelection(answer, option, state.activeOptionIndex)
+		);
+	}
+
+	const nextState = updateAnswer(state, question.id, (answer) => {
+		if (trigger === "toggle") {
+			const isSelected = answer.selected.some(
+				(selection) => selection.value === option.value
+			);
+			if (isSelected) {
+				return {
+					...answer,
+					selected: [],
+				};
+			}
+		}
+		return setSingleSelection(answer, option, state.activeOptionIndex);
+	});
+	return trigger === "toggle" ? nextState : advanceToNextTab(nextState);
+}
+
+function activateCustomOption(
+	state: AskState,
+	questionId: string,
+	questionType: AskState["questions"][number]["type"],
+	trigger: "toggle" | "confirm" | "digit"
+): AskState {
+	if (questionType === "multi" && trigger !== "confirm") {
+		const answer = getAnswer(state, questionId);
+		if (answer?.customText?.trim()) {
+			return updateAnswer(state, questionId, (currentAnswer) =>
+				setCustomSelected(currentAnswer, !answer.customSelected)
+			);
+		}
+	}
+	return setView(state, inputView(questionId));
+}
+
+function saveInputValue(
+	state: AskState,
+	rawValue: string,
+	submit: boolean
+): AskState {
+	if (state.view.kind !== "input") {
+		return state;
+	}
+
+	const question = getQuestionById(state, state.view.questionId);
+	if (!question) {
+		return exitEditingView(state);
+	}
+
+	const nextState = updateAnswer(
+		exitEditingView(state),
+		question.id,
+		(answer) =>
+			saveCustomText(
+				answer,
+				rawValue,
+				question.type === "multi" ? "multi" : "single"
+			)
+	);
+	if (
+		question.type === "multi" ||
+		!(submit && isAnswerAnswered(nextState.answers[question.id]))
+	) {
+		return nextState;
+	}
+	return advanceToNextTab(nextState);
+}
+
+function saveNoteValue(state: AskState, rawValue: string): AskState {
+	if (state.view.kind !== "note") {
+		return exitEditingView(state);
+	}
+
+	const { questionId, optionValue } = state.view;
+	const nextState = updateAnswer(
+		exitEditingView(state),
+		questionId,
+		(answer) =>
+			optionValue
+				? saveOptionNote(answer, optionValue, rawValue)
+				: saveQuestionNote(answer, rawValue)
+	);
+	return nextState;
+}
+
+function setView(state: AskState, view: AskState["view"]): AskState {
+	return {
+		...state,
+		view,
+	};
+}
+
+function exitEditingView(state: AskState): AskState {
+	return {
+		...state,
+		view: isSubmitTab(state) ? submitView() : navigateView(),
+	};
+}
+
+function advanceToNextTab(state: AskState): AskState {
+	const nextTab = Math.min(state.activeTabIndex + 1, state.questions.length);
+	return {
+		...state,
+		activeTabIndex: nextTab,
+		activeOptionIndex: 0,
+		activeSubmitActionIndex: 0,
+		view: nextTab === state.questions.length ? submitView() : navigateView(),
+	};
+}
+
+function updateAnswer(
+	state: AskState,
+	questionId: string,
+	mutate: (
+		answer: ReturnType<typeof emptyAnswer>
+	) => ReturnType<typeof emptyAnswer>
+): AskState {
+	const existing = getAnswer(state, questionId) ?? emptyAnswer();
+	const nextAnswer = mutate(existing);
+	const answers = { ...state.answers };
+	if (isAnswerEmpty(nextAnswer)) {
+		delete answers[questionId];
+	} else {
+		answers[questionId] = nextAnswer;
+	}
+	return {
+		...state,
+		answers,
+	};
+}

package/src/state/view.ts

@@ -0,0 +1,28 @@
+import type { AskState, ViewState } from "../types.ts";
+
+export function navigateView(): ViewState {
+	return { kind: "navigate" };
+}
+
+export function submitView(): ViewState {
+	return { kind: "submit" };
+}
+
+export function inputView(questionId: string): ViewState {
+	return { kind: "input", questionId };
+}
+
+export function questionNoteView(questionId: string): ViewState {
+	return { kind: "note", questionId };
+}
+
+export function optionNoteView(
+	questionId: string,
+	optionValue: string
+): ViewState {
+	return { kind: "note", questionId, optionValue };
+}
+
+export function isEditingView(state: AskState): boolean {
+	return state.view.kind === "input" || state.view.kind === "note";
+}

package/src/text.ts

@@ -0,0 +1,98 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+const LEADING_WHITESPACE_PATTERN = /^\s*/;
+const WORD_SPLIT_PATTERN = /\s+/;
+
+export function wrapText(text: string, width: number): string[] {
+	const effectiveWidth = Math.max(1, width);
+	const lines = text
+		.split("\n")
+		.flatMap((paragraph) =>
+			wrapParagraphWithIndentation(paragraph, effectiveWidth)
+		);
+
+	return lines.length > 0 ? lines : [""];
+}
+
+function wrapParagraphWithIndentation(
+	paragraph: string,
+	width: number
+): string[] {
+	if (paragraph.length === 0) {
+		return [""];
+	}
+
+	const leadingWhitespace =
+		paragraph.match(LEADING_WHITESPACE_PATTERN)?.[0] ?? "";
+	const body = paragraph.slice(leadingWhitespace.length).trim();
+	if (!body) {
+		return [leadingWhitespace];
+	}
+
+	const wrapped = wrapParagraph(body, width - visibleWidth(leadingWhitespace));
+	if (wrapped.length === 0) {
+		return [leadingWhitespace];
+	}
+
+	return wrapped.map((part) => `${leadingWhitespace}${part}`);
+}
+
+function wrapParagraph(text: string, width: number): string[] {
+	const effectiveWidth = Math.max(1, width);
+	const words = text.split(WORD_SPLIT_PATTERN).filter(Boolean);
+	const lines: string[] = [];
+	let current = "";
+
+	for (const word of words) {
+		if (!current) {
+			if (visibleWidth(word) <= effectiveWidth) {
+				current = word;
+			} else {
+				lines.push(...breakLongWord(word, effectiveWidth));
+			}
+			continue;
+		}
+
+		const candidate = `${current} ${word}`;
+		if (visibleWidth(candidate) <= effectiveWidth) {
+			current = candidate;
+			continue;
+		}
+
+		lines.push(current);
+		if (visibleWidth(word) <= effectiveWidth) {
+			current = word;
+		} else {
+			lines.push(...breakLongWord(word, effectiveWidth));
+			current = "";
+		}
+	}
+
+	if (current) {
+		lines.push(current);
+	}
+
+	return lines;
+}
+
+function breakLongWord(word: string, width: number): string[] {
+	const effectiveWidth = Math.max(1, width);
+	const chunks: string[] = [];
+	let current = "";
+
+	for (const char of Array.from(word)) {
+		const candidate = `${current}${char}`;
+		if (visibleWidth(candidate) > effectiveWidth && current) {
+			chunks.push(current);
+			current = char;
+			continue;
+		}
+		current = candidate;
+	}
+
+	if (current) {
+		chunks.push(current);
+	}
+
+	return chunks;
+}