@evenicanpm/admin-integrate 1.8.1 → 2.0.0

package/src/components/templatesV2/inputs/context/TemplateContext.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+type TemplateContextValue = {
+	templateId: string;
+	templateConfig?: string;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	clearTemplateFields?: (templateId: string) => void;
+};
+
+const TemplateContext = React.createContext<TemplateContextValue | null>(null);
+
+export function TemplateProvider({
+	value,
+	children,
+}: Readonly<{
+	value: TemplateContextValue;
+	children: React.ReactNode;
+}>) {
+	return (
+		<TemplateContext.Provider value={value}>
+			{children}
+		</TemplateContext.Provider>
+	);
+}
+
+export function useTemplateContext() {
+	const ctx = React.useContext(TemplateContext);
+	if (!ctx) {
+		throw new Error("useTemplateContext must be used inside TemplateProvider");
+	}
+	return ctx;
+}

package/src/components/templatesV2/inputs/field-names.ts

@@ -0,0 +1,8 @@
+/**
+ * Reserved form/config field names used by the template wizard.
+ * Use this enum instead of string literals to avoid typos and keep a single source of truth.
+ */
+export enum ReservedFieldName {
+	ProcessTemplateId = "processTemplateId",
+	IsUnique = "isUnique",
+}

package/src/components/templatesV2/inputs/form-type.ts

@@ -0,0 +1,48 @@
+import type { TemplateInputSearchQueryKey } from "@evenicanpm/admin-integrate/api/templates/queries/types";
+import type { FieldValue, ProcessTemplateInputSchema } from "../types";
+import type { InputType } from "./input-type";
+export type TableRow = Record<string, string | number | boolean | null>;
+
+export type SetRowsFn = (rows: TableRow[]) => void;
+
+export interface InputTableProps {
+	rows: TableRow[];
+	setRows: SetRowsFn;
+	schemas: ProcessTemplateInputSchema[];
+	tableError: string | null;
+	readOnly?: boolean;
+}
+
+export type SearchInputWrapperProps = {
+	fieldName?: string;
+	inputType:
+		| InputType.MULTI_TEXT_SEARCH
+		| InputType.TEXT_SEARCH
+		| InputType.TEXT_UNIQUE_IDENTIFIER;
+
+	label: string;
+	value: string | string[];
+	setValue:
+		| ((v: string) => void)
+		| ((v: string[]) => void)
+		| ((v: string, fieldName?: string) => void);
+
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+
+	queryName: TemplateInputSearchQueryKey;
+
+	/** Raw query name (e.g. Templates_GetSourceEndpoints) for getFieldValues API when inputType is TEXT_SEARCH */
+	validationQuery?: string;
+
+	/** Used by TextSearchInput to apply selected template config into the form */
+	handleFieldChange?: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+
+	/** Call when the search input blurs so errors show on focus out */
+	onBlur?: () => void;
+};

package/src/components/templatesV2/inputs/index.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+export { FormikPageBody } from "./FormikPageBody";
+export { ReservedFieldName } from "./field-names";
+export type { SearchInputWrapperProps } from "./form-type";
+export { InputType, isHiddenInputType } from "./input-type";
+export {
+	CheckboxInput,
+	NumberInput,
+	SelectorInput,
+	TextInput,
+} from "./primitives";
+export { renderFormControl, renderSearchInput } from "./renderers";
+
+export {
+	MultiTextSearchInput,
+	SearchInputWrapper,
+	TextSearchInput,
+	useSearchInput,
+} from "./search";
+export { TemplateSearchQueryKey } from "./search/search-query-key";
+
+export { InputTable } from "./table";
+export {
+	applyTemplateConfig,
+	arrangeInputs,
+	getSelectorOptionsFromInput,
+	getTableRowErrors,
+	parseQueryName,
+	renderReadOnlyText,
+	toStringArray,
+} from "./utils";
+export type { InputRow } from "./utils/arrangeInputs";

package/src/components/templatesV2/inputs/input-type.ts

@@ -0,0 +1,23 @@
+export enum InputType {
+	TEXT = "text",
+	NUMBER = "number",
+	CHECKBOX = "checkbox",
+	SELECTOR = "selector",
+	INPUT_TABLE = "input-table",
+	TEXT_SEARCH = "text-search",
+	MULTI_TEXT_SEARCH = "multi-text-search",
+	TEXT_UNIQUE_IDENTIFIER = "text-unique-identifier",
+	HIDDEN = "hidden",
+	HIDDEN_NUMBER = "hidden-number",
+	HIDDEN_NUMBER_OR_NULL = "hidden-number-or-null",
+}
+
+export function isHiddenInputType(
+	inputType: string | null | undefined,
+): boolean {
+	return (
+		inputType === InputType.HIDDEN ||
+		inputType === InputType.HIDDEN_NUMBER ||
+		inputType === InputType.HIDDEN_NUMBER_OR_NULL
+	);
+}

package/src/components/templatesV2/inputs/primitives/CheckboxInput.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { SxProps, Theme } from "@mui/material";
+import { Box, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
+
+export function CheckboxInput({
+	label,
+	checked,
+	setChecked,
+	helpText,
+	readOnly,
+	disabled,
+	formHelperTextSx,
+}: Readonly<{
+	label: string;
+	checked: boolean;
+	setChecked: (v: boolean) => void;
+	helpText?: string | null;
+	readOnly?: boolean;
+	/** Disable without read-only (e.g. while validating). */
+	disabled?: boolean;
+	/** Optional sx for the helper text (e.g. color: 'success.main' or 'error.main'). */
+	formHelperTextSx?: SxProps<Theme>;
+}>) {
+	return (
+		<Box>
+			<FormControlLabel
+				control={
+					<Checkbox
+						checked={checked}
+						onChange={(e) => setChecked(e.target.checked)}
+					/>
+				}
+				label={label}
+				disabled={disabled ?? readOnly}
+			/>
+
+			<FormHelperText
+				sx={{ mt: -1.5, mb: 1, marginLeft: 0, ...formHelperTextSx }}
+			>
+				{helpText || "  "}
+			</FormHelperText>
+		</Box>
+	);
+}

package/src/components/templatesV2/inputs/primitives/NumberInput.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { SxProps, Theme } from "@mui/material";
+import { TextField } from "@mui/material";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+
+export function NumberInput({
+	label,
+	placeholder,
+	value,
+	setValue,
+	error,
+	helpText,
+	readOnly,
+	disabled,
+	onBlur,
+	onFocus,
+	formHelperTextSx,
+}: Readonly<{
+	label: string;
+	placeholder?: string | null;
+	value: number | "" | null;
+	setValue: (v: number | "") => void;
+	error?: string | null;
+	helpText?: string | null;
+	readOnly?: boolean;
+	/** Disable input without switching to read-only text (e.g. while validating). */
+	disabled?: boolean;
+	onBlur?: () => void;
+	onFocus?: () => void;
+	/** Optional sx for the helper text (e.g. color: 'success.main' for validation success). */
+	formHelperTextSx?: SxProps<Theme>;
+}>) {
+	if (readOnly) return renderReadOnlyText(label, value);
+
+	return (
+		<TextField
+			type="number"
+			label={label}
+			value={value ?? ""}
+			onChange={(e) =>
+				setValue(e.target.value === "" ? "" : Number(e.target.value))
+			}
+			onBlur={onBlur}
+			onFocus={onFocus}
+			placeholder={placeholder ?? undefined}
+			fullWidth
+			error={Boolean(error)}
+			helperText={error ?? helpText ?? " "}
+			disabled={disabled}
+			slotProps={{
+				formHelperText: {
+					sx: { marginLeft: 0, ...formHelperTextSx },
+				},
+			}}
+		/>
+	);
+}

package/src/components/templatesV2/inputs/primitives/SelectorInput.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import type { SxProps, Theme } from "@mui/material";
+import { Autocomplete, Box, TextField } from "@mui/material";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+
+/** Option can be a plain string (label = value) or { label, value } for API-backed options. */
+export type SelectorOption = string | { label: string; value: string };
+
+function getOptionLabel(opt: SelectorOption): string {
+	return typeof opt === "string" ? opt : opt.label;
+}
+
+function getOptionValue(opt: SelectorOption): string {
+	return typeof opt === "string" ? opt : opt.value;
+}
+
+function optionEquals(opt: SelectorOption, value: string): boolean {
+	return getOptionValue(opt) === value;
+}
+
+export function SelectorInput({
+	fieldName,
+	label,
+	value,
+	setValue,
+	helpText,
+	error,
+	options,
+	insideTable = false,
+	minWidth,
+	readOnly,
+	disabled,
+	onBlur,
+	onFocus,
+	formHelperTextSx,
+}: Readonly<{
+	fieldName: string;
+	label: string;
+	value: string;
+	setValue: (v: string) => void;
+	helpText?: string | null;
+	error?: string | null;
+	/** String options (label = value) or { label, value } for API-backed options. */
+	options?: SelectorOption[];
+	insideTable?: boolean;
+	minWidth?: number;
+	readOnly?: boolean;
+	/** Disable input without switching to read-only text (e.g. while validating). */
+	disabled?: boolean;
+	onBlur?: () => void;
+	onFocus?: () => void;
+	/** Optional sx for the helper text (e.g. color: 'success.main' for validation success). */
+	formHelperTextSx?: SxProps<Theme>;
+}>) {
+	const opts = options ?? [];
+	const allowFreeText = opts.length === 0;
+	const id = `selector-${fieldName}`;
+	const currentValue = value ?? "";
+	const selectedOption =
+		opts.find((o) => optionEquals(o, currentValue)) ?? (currentValue || null);
+
+	if (readOnly)
+		return renderReadOnlyText(insideTable ? undefined : label, value);
+
+	return (
+		<Box
+			sx={{
+				minWidth: minWidth ?? (insideTable ? 220 : undefined),
+				width: "100%",
+			}}
+		>
+			<Autocomplete<SelectorOption, false, false, boolean>
+				id={id}
+				disablePortal={insideTable}
+				options={opts}
+				getOptionLabel={getOptionLabel}
+				isOptionEqualToValue={(opt, v) =>
+					v == null
+						? false
+						: opt === v ||
+							optionEquals(opt, typeof v === "string" ? v : getOptionValue(v))
+				}
+				freeSolo={allowFreeText}
+				value={selectedOption ?? null}
+				onChange={(_e, val) => setValue(val != null ? getOptionValue(val) : "")}
+				onInputChange={(_e, val) => setValue(val)}
+				disabled={disabled ?? readOnly}
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						size={insideTable ? "small" : "medium"}
+						label={label}
+						name={fieldName}
+						error={Boolean(error)}
+						helperText={error ?? helpText ?? " "}
+						fullWidth
+						disabled={disabled ?? readOnly}
+						onBlur={onBlur}
+						onFocus={onFocus}
+						slotProps={{
+							formHelperText: {
+								sx: { marginLeft: 0, ...formHelperTextSx },
+							},
+						}}
+					/>
+				)}
+			/>
+		</Box>
+	);
+}

package/src/components/templatesV2/inputs/primitives/TextInput.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { SxProps, Theme } from "@mui/material";
+import { TextField } from "@mui/material";
+import { renderReadOnlyText } from "../utils/renderReadOnlyText";
+
+export function TextInput({
+	label,
+	placeholder,
+	value,
+	setValue,
+	error,
+	helpText,
+	readOnly,
+	disabled,
+	onBlur,
+	onFocus,
+	formHelperTextSx,
+}: Readonly<{
+	label: string;
+	placeholder?: string | null;
+	value: string;
+	setValue: (v: string) => void;
+	error?: string | null;
+	helpText?: string | null;
+	readOnly?: boolean;
+	/** Disable input without switching to read-only text (e.g. while validating). */
+	disabled?: boolean;
+	onBlur?: () => void;
+	onFocus?: () => void;
+	/** Optional sx for the helper text (e.g. color: 'success.main' for validation success). */
+	formHelperTextSx?: SxProps<Theme>;
+}>) {
+	if (readOnly) return renderReadOnlyText(label, value);
+
+	return (
+		<TextField
+			label={label}
+			value={value ?? ""}
+			onChange={(e) => setValue(e.target.value)}
+			onBlur={onBlur}
+			onFocus={onFocus}
+			placeholder={placeholder ?? undefined}
+			fullWidth
+			error={Boolean(error)}
+			helperText={error ?? helpText ?? "  "}
+			disabled={disabled}
+			slotProps={{
+				formHelperText: {
+					sx: { minHeight: 16, marginLeft: 0, ...formHelperTextSx },
+				},
+			}}
+		/>
+	);
+}