snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/admin/components/common/controller-input.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// icons
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+
+// Generic over the form's values because react-hook-form's Control is invariant: its
+// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
+// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  control: Control<TFieldValues>;
+  type: "text" | "password";
+  name: FieldPath<TFieldValues>;
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export type TControllerInputFormField<TFieldValues extends FieldValues = FieldValues> = {
+  key: FieldPath<TFieldValues>;
+  type: "text" | "password";
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
+  const { name, control, type, label, description, placeholder, error, required } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <h4 className="text-13 text-tertiary">{label}</h4>
+      <InputGroup size="lg">
+        <Controller
+          control={control}
+          name={name}
+          rules={{ required: required ? `${label} is required.` : false }}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              size="lg"
+              id={name}
+              name={name}
+              type={type === "password" && showPassword ? "text" : type}
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              aria-invalid={error}
+              placeholder={placeholder}
+            />
+          )}
+        />
+        {type === "password" &&
+          (showPassword ? (
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(false)}
+            >
+              <HideOutline className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              aria-label="Show password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(true)}
+            >
+              <ShowOutline className="h-4 w-4" />
+            </button>
+          ))}
+      </InputGroup>
+      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
+    </div>
+  );
+}