feat(03-02): create BackendCard and PasswordField UI atoms

- BackendCard: clickable selection card with selected/unselected visual states - PasswordField: password input with per-instance show/hide toggle (text labels, no emoji) - Both files in new src/components/ui/ directory
2026-03-27 09:29:08 +01:00
parent a2d4318b45
commit cec45e8f17
2 changed files with 72 additions and 0 deletions
@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+interface BackendCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  name: string;
+  description: string;
+  selected?: boolean;
+  onClick: () => void;
+}
+
+export function BackendCard({ name, description, selected = false, onClick, ...rest }: BackendCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-selected={selected}
+      className={[
+        'flex flex-col items-start gap-1 rounded-lg border-2 p-4 text-left transition-colors',
+        selected
+          ? 'border-blue-600 bg-blue-50'
+          : 'border-gray-200 bg-white hover:border-blue-400 hover:bg-gray-50',
+      ].join(' ')}
+      {...rest}
+    >
+      <span className="font-semibold text-gray-900">{name}</span>
+      <span className="text-sm text-gray-500">{description}</span>
+    </button>
+  );
+}
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import type { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+
+interface PasswordFieldProps {
+  id: string;
+  label: string;
+  error?: FieldError;
+  registration: UseFormRegisterReturn;
+  placeholder?: string;
+  helpText?: string;
+}
+
+export function PasswordField({ id, label, error, registration, placeholder, helpText }: PasswordFieldProps) {
+  const [show, setShow] = useState(false);
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={id} className="text-sm font-medium text-gray-700">
+        {label}
+      </label>
+      <div className="relative">
+        <input
+          id={id}
+          type={show ? 'text' : 'password'}
+          placeholder={placeholder}
+          className={[
+            'w-full rounded-md border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2',
+            error ? 'border-red-500 focus:ring-red-300' : 'border-gray-300 focus:ring-blue-300',
+          ].join(' ')}
+          {...registration}
+        />
+        <button
+          type="button"
+          onClick={() => setShow(v => !v)}
+          aria-label={show ? 'Hide' : 'Show'}
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
+        >
+          {show ? 'Hide' : 'Show'}
+        </button>
+      </div>
+      {helpText && !error && <p className="text-xs text-gray-500">{helpText}</p>}
+      {error && <p className="text-xs text-red-600">{error.message}</p>}
+    </div>
+  );
+}