@sjolystinnovation/app-kit 0.5.0 → 0.7.0

package/src/ui/PasswordInput.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
-import { useId, useState, type InputHTMLAttributes } from "react";
-import { cx } from "./cx";
+import { useState, type InputHTMLAttributes } from "react";
+import { FieldError, FieldLabel, inputClass, useField } from "./field";
 
 /** The input's type is left out: the component switches it to show and hide the value. */
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
   label: string;
-  error?: string;
+  error?: string | undefined;
   /** Accessible name of the toggle while the password is hidden. */
-  showPasswordLabel?: string;
+  showPasswordLabel?: string | undefined;
   /** Accessible name of the toggle while the password is visible. */
-  hidePasswordLabel?: string;
+  hidePasswordLabel?: string | undefined;
   /**
    * Classes for placing the field, such as a margin. They go on the outer element, which holds the
    * label, the input and the error. Restyle the field through the theme variables.
@@ -22,39 +22,25 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
 export function PasswordInput({
   label,
   error,
-  id,
-  required,
   className,
   showPasswordLabel = "Show password",
   hidePasswordLabel = "Hide password",
   ...props
 }: PasswordInputProps) {
   const [visible, setVisible] = useState(false);
-  // A generated id ties the label to its own control, even when two fields on a page share a name.
-  const generated = useId();
-  const inputId = id ?? generated;
-  // From useId, which has no spaces. aria-describedby splits its ids on spaces.
-  const errorId = `${generated}-error`;
+  const field = useField(props, error);
 
   return (
     <div className={className}>
-      <label htmlFor={inputId} className="block text-field-label font-medium text-field-label-text mb-field-label">
+      <FieldLabel htmlFor={field.inputId} required={props.required}>
         {label}
-        {required && <span className="text-field-required"> *</span>}
-      </label>
+      </FieldLabel>
       <div className="relative">
         <input
           {...props}
-          id={inputId}
+          {...field.inputProps}
           type={visible ? "text" : "password"}
-          required={required}
-          aria-required={required ? true : props["aria-required"]}
-          aria-invalid={error ? true : props["aria-invalid"]}
-          aria-describedby={cx(props["aria-describedby"], error && errorId) || undefined}
-          className={cx(
-            "w-full rounded-input border px-3 py-input-y pr-10 text-sm bg-input-bg text-input-text placeholder-input-placeholder focus:outline-hidden focus:ring-(length:--input-focus-ring-width) focus:ring-input-focus-ring",
-            error ? "border-input-border-error" : "border-input-border focus:border-input-focus-border",
-          )}
+          className={inputClass(error, "pr-10")}
         />
         <button
           type="button"
@@ -65,11 +51,7 @@ export function PasswordInput({
           {visible ? <EyeSlashIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
         </button>
       </div>
-      {error && (
-        <p id={errorId} className="mt-1 text-xs text-field-error">
-          {error}
-        </p>
-      )}
+      <FieldError id={field.errorId} error={error} />
     </div>
   );
 }

package/src/ui/TextInput.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { InputHTMLAttributes } from "react";
+import { FieldError, FieldLabel, inputClass, useField } from "./field";
+
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string | undefined;
+  /**
+   * Classes for placing the field, such as a margin. They go on the outer element, which holds the
+   * label, the input and the error. Restyle the field through the theme variables.
+   */
+  className?: string | undefined;
+}
+
+export function TextInput({ label, error, className, ...props }: TextInputProps) {
+  const field = useField(props, error);
+
+  return (
+    <div className={className}>
+      <FieldLabel htmlFor={field.inputId} required={props.required}>
+        {label}
+      </FieldLabel>
+      <input {...props} {...field.inputProps} className={inputClass(error)} />
+      <FieldError id={field.errorId} error={error} />
+    </div>
+  );
+}

package/src/ui/credentialsFormStrings.ts

@@ -0,0 +1,29 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** Thrown from `onSignedIn` to refuse a sign-in. Its message is shown in the form. */
+export class SignInRejected extends Error {}
+
+/** The form's text. Pass the app's own language. The defaults are English. */
+export interface CredentialsFormStrings {
+  email: string;
+  password: string;
+  signIn: string;
+  signingIn: string;
+  invalidCredentials: string;
+  signInUnavailable: string;
+  somethingWentWrong: string;
+  showPassword: string;
+  hidePassword: string;
+}
+
+export const defaultCredentialsFormStrings: CredentialsFormStrings = {
+  email: "Email",
+  password: "Password",
+  signIn: "Sign in",
+  signingIn: "Signing in…",
+  invalidCredentials: "Invalid email or password.",
+  signInUnavailable: "Sign-in is unavailable right now. Try again shortly.",
+  somethingWentWrong: "Something went wrong",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+};

package/src/ui/field.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useId, type InputHTMLAttributes, type ReactNode } from "react";
+import { cx } from "./cx";
+
+/** The ids and aria attributes a labelled input needs, from the caller's own props. */
+export function useField(props: Pick<InputHTMLAttributes<HTMLInputElement>, "id" | "required" | "aria-required" | "aria-invalid" | "aria-describedby">, error: string | undefined) {
+  // A generated id ties the label to its own control, even when two fields on a page share a name.
+  const generated = useId();
+  const inputId = props.id ?? generated;
+  // From useId, which has no spaces. aria-describedby splits its ids on spaces.
+  const errorId = `${generated}-error`;
+  return {
+    inputId,
+    errorId,
+    inputProps: {
+      id: inputId,
+      required: props.required,
+      "aria-required": props.required ? true : props["aria-required"],
+      "aria-invalid": error ? true : props["aria-invalid"],
+      "aria-describedby": cx(props["aria-describedby"], error && errorId) || undefined,
+    },
+  };
+}
+
+/** The input's look, with the error border when there is an error. */
+export function inputClass(error: string | undefined, extra?: string): string {
+  return cx(
+    "w-full rounded-input border px-3 py-input-y text-sm bg-input-bg text-input-text placeholder-input-placeholder focus:outline-hidden focus:ring-(length:--input-focus-ring-width) focus:ring-input-focus-ring",
+    extra,
+    error ? "border-input-border-error" : "border-input-border focus:border-input-focus-border",
+  );
+}
+
+export function FieldLabel({ htmlFor, required, children }: { htmlFor: string; required: boolean | undefined; children: ReactNode }) {
+  return (
+    <label htmlFor={htmlFor} className="block text-field-label font-medium text-field-label-text mb-field-label">
+      {children}
+      {required && <span className="text-field-required" aria-hidden="true"> *</span>}
+    </label>
+  );
+}
+
+export function FieldError({ id, error }: { id: string; error: string | undefined }) {
+  if (!error) return null;
+  return (
+    <p id={id} className="mt-1 text-xs text-field-error">
+      {error}
+    </p>
+  );
+}

package/src/ui/index.ts

@@ -1,4 +1,11 @@
 export { Alert } from "./Alert";
 export type { AlertProps } from "./Alert";
+export { CredentialsForm } from "./CredentialsForm";
+export type { CredentialsFormProps } from "./CredentialsForm";
+export { SignInRejected, defaultCredentialsFormStrings } from "./credentialsFormStrings";
+export type { CredentialsFormStrings } from "./credentialsFormStrings";
 export { PasswordInput } from "./PasswordInput";
 export type { PasswordInputProps } from "./PasswordInput";
+export { TextInput } from "./TextInput";
+export type { TextInputProps } from "./TextInput";
+export type { TextOverrides } from "./withDefaults";

package/src/ui/withDefaults.ts

@@ -0,0 +1,14 @@
+/** Text overrides where any key may be missing or undefined. */
+export type TextOverrides<T> = { [K in keyof T]?: T[K] | undefined };
+
+/**
+ * Fills in defaults for any string that is missing or undefined, so a key missing from an app's
+ * dictionary still shows the default text.
+ */
+export function withDefaults<T extends object>(defaults: T, overrides: TextOverrides<T> | undefined): T {
+  const result = { ...defaults };
+  for (const [key, value] of Object.entries(overrides ?? {})) {
+    if (value !== undefined) (result as Record<string, unknown>)[key] = value;
+  }
+  return result;
+}