@atproto/oauth-provider-ui 0.0.2

package/src/components/forms/form-card-async.tsx

@@ -0,0 +1,103 @@
+import { Trans } from '@lingui/react/macro'
+import { FormEvent, ReactNode, useCallback } from 'react'
+import {
+  UseAsyncActionOptions,
+  useAsyncAction,
+} from '../../hooks/use-async-action.ts'
+import { Override } from '../../lib/util.ts'
+import { ErrorCard } from '../utils/error-card.tsx'
+import { Button } from './button.tsx'
+import { FormCard, FormCardProps } from './form-card.tsx'
+
+export type { AsyncActionController } from '../../hooks/use-async-action.ts'
+
+export type ErrorRender = (data: { error: Error }) => ReactNode
+export const errorRenderDefault: ErrorRender = ({ error }) => (
+  <ErrorCard error={error} />
+)
+
+export type FormCardAsyncProps = Override<
+  Override<
+    Omit<FormCardProps, 'cancel' | 'actions' | 'prepend'>,
+    Pick<UseAsyncActionOptions, 'ref' | 'onLoading' | 'onError'>
+  >,
+  {
+    invalid?: boolean
+    disabled?: boolean
+
+    onSubmit: (signal: AbortSignal) => void | PromiseLike<void>
+    submitLabel?: ReactNode
+
+    onCancel?: () => void
+    cancelLabel?: ReactNode
+
+    errorRender?: ErrorRender
+  }
+>
+
+export function FormCardAsync({
+  invalid,
+  disabled,
+
+  onSubmit,
+  submitLabel,
+
+  onCancel = undefined,
+  cancelLabel,
+
+  errorRender = errorRenderDefault,
+
+  // UseAsyncActionOptions
+  ref,
+  onLoading,
+  onError,
+
+  // FormCardProps
+  children,
+  ...props
+}: FormCardAsyncProps) {
+  const { run, loading, error } = useAsyncAction(onSubmit, {
+    ref,
+    onError,
+    onLoading,
+  })
+
+  const doSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      if (!event.currentTarget.reportValidity()) return
+
+      if (!disabled && !invalid) void run()
+    },
+    [disabled, invalid, run],
+  )
+
+  return (
+    <FormCard
+      {...props}
+      onSubmit={doSubmit}
+      disabled={disabled || loading}
+      prepend={error != null ? errorRender({ error }) : undefined}
+      cancel={
+        onCancel && (
+          <Button onClick={onCancel}>
+            {cancelLabel || <Trans>Cancel</Trans>}
+          </Button>
+        )
+      }
+      actions={
+        <Button
+          color="brand"
+          type="submit"
+          loading={loading}
+          disabled={disabled}
+        >
+          {submitLabel || <Trans>Submit</Trans>}
+        </Button>
+      }
+    >
+      {children}
+    </FormCard>
+  )
+}

package/src/components/forms/form-card.tsx

@@ -0,0 +1,49 @@
+import { JSX, ReactNode } from 'react'
+import { Override } from '../../lib/util.ts'
+
+export type FormCardProps = Override<
+  JSX.IntrinsicElements['form'],
+  {
+    disabled?: boolean
+    append?: ReactNode
+    prepend?: ReactNode
+    cancel?: ReactNode
+    actions?: ReactNode
+  }
+>
+
+export function FormCard({
+  actions,
+  cancel,
+  append,
+  children,
+  prepend,
+  disabled,
+
+  // form
+  inert = disabled,
+  ...props
+}: FormCardProps) {
+  return (
+    <form {...props} inert={inert} className="flex flex-col space-y-4">
+      {prepend && <div key="prepend">{prepend}</div>}
+
+      <div key="children" className="space-y-4">
+        {children}
+      </div>
+
+      {append && <div key="append">{append}</div>}
+
+      {(actions || cancel) && (
+        <div
+          key="buttons"
+          className="flex flex-wrap flex-row-reverse items-center justify-end space-x-reverse space-x-2"
+        >
+          {actions}
+          <div className="flex-auto" />
+          {cancel}
+        </div>
+      )}
+    </form>
+  )
+}

package/src/components/forms/input-checkbox.tsx

@@ -0,0 +1,78 @@
+import { JSX, ReactNode, useContext, useRef } from 'react'
+import { useRandomString } from '../../hooks/use-random-string.ts'
+import { clsx } from '../../lib/clsx.ts'
+import { mergeRefs } from '../../lib/ref.ts'
+import { Override } from '../../lib/util.ts'
+import { FieldsetContext } from './fieldset.tsx'
+import { InputContainer } from './input-container.tsx'
+
+export type InputCheckboxProps = Override<
+  Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'children'>,
+  {
+    className?: string
+    children?: ReactNode
+  }
+>
+
+export function InputCheckbox({
+  className,
+  children,
+
+  // input
+  id,
+  ref,
+  disabled,
+  title,
+  'aria-label': ariaLabel = title,
+  'aria-labelledby': ariaLabelledBy,
+  ...props
+}: InputCheckboxProps) {
+  const htmlFor = useRandomString('input-checkbox-')
+  const labelRef = useRef<HTMLLabelElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const ctx = useContext(FieldsetContext)
+
+  const inputId = id ?? htmlFor
+
+  return (
+    <InputContainer
+      className={clsx('cursor-pointer', className)}
+      icon={
+        <input
+          {...props}
+          disabled={disabled ?? ctx.disabled}
+          title={title}
+          aria-label={ariaLabel}
+          aria-labelledby={
+            children
+              ? // Prefer the local "<label>" element (through "htmlFor") over the wrapping "<fieldset>" to describe the checkbox.
+                undefined
+              : ariaLabelledBy ?? ctx.labelId
+          }
+          ref={mergeRefs([ref, inputRef])}
+          id={inputId}
+          className="accent-brand outline-none"
+          type="checkbox"
+        />
+      }
+      tabIndex={-1}
+      onClick={({ target }) => {
+        // Native behavior of clicking the label should toggle the checkbox.
+        if (target === labelRef.current) return
+        if (target === inputRef.current) return
+
+        inputRef.current?.click()
+      }}
+    >
+      {children && (
+        <label
+          ref={labelRef}
+          htmlFor={inputId}
+          className="block w-full leading-[1.6] select-none cursor-pointer"
+        >
+          {children}
+        </label>
+      )}
+    </InputContainer>
+  )
+}

package/src/components/forms/input-container.tsx

@@ -0,0 +1,107 @@
+import { JSX, ReactNode, useState } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { Override } from '../../lib/util.ts'
+
+export type InputContainerProps = Override<
+  JSX.IntrinsicElements['div'],
+  {
+    icon: ReactNode
+    append?: ReactNode
+    bellow?: ReactNode
+  }
+>
+
+export function InputContainer({
+  icon,
+  append,
+  bellow,
+
+  // div
+  className,
+  children,
+  onFocus,
+  onBlur,
+  ...props
+}: InputContainerProps) {
+  const [hasFocus, setHasFocus] = useState(false)
+
+  return (
+    <div
+      {...props}
+      onFocus={(event) => {
+        onFocus?.(event)
+        if (!event.defaultPrevented) setHasFocus(true)
+      }}
+      onBlur={(event) => {
+        onBlur?.(event)
+        if (!event.defaultPrevented) setHasFocus(false)
+      }}
+      className={clsx(
+        // Layout
+        'min-h-12',
+        'max-w-full',
+        'overflow-hidden',
+        // Border
+        'rounded-lg',
+        className,
+      )}
+    >
+      <div
+        className={clsx(
+          // Layout
+          'px-1',
+          'w-full min-h-12',
+          'flex items-center justify-stretch',
+          // Border
+          'rounded-lg',
+          bellow ? 'rounded-br-none rounded-bl-none' : undefined,
+          'outline-none',
+          'border-solid border-2 border-transparent',
+          'focus:border-brand has-[:focus]:border-brand',
+          'hover:border-gray-400 hover:focus:border-gray-400',
+          'dark:hover:border-gray-500 dark:hover:focus:border-gray-500',
+          // Background
+          'bg-gray-100 focus:bg-slate-200 has-[:focus]:bg-slate-200',
+          'dark:bg-slate-800 dark:focus:bg-slate-700 dark:has-[:focus]:bg-slate-700',
+          // Font
+          'text-slate-600 dark:text-slate-300',
+          'accent-brand',
+        )}
+      >
+        {icon && (
+          <div
+            className={clsx(
+              'shrink-0 grow-0',
+              'mx-1',
+              hasFocus ? 'text-brand' : 'text-slate-500',
+            )}
+          >
+            {icon}
+          </div>
+        )}
+
+        {children}
+
+        <div className="ml-1 grow-0 shrink-0 flex items-center">{append}</div>
+      </div>
+      {bellow && (
+        <div
+          className={clsx(
+            // Layout
+            'px-3 py-2 space-x-2',
+            'flex flex-row items-center gap-1',
+            // Border
+            'rounded-br-2 rounded-bl-2',
+            // Background
+            'bg-gray-200 dark:bg-slate-700',
+            // Font
+            'text-gray-700 dark:text-gray-300',
+            'text-sm italic',
+          )}
+        >
+          {bellow}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/forms/input-email-address.tsx

@@ -0,0 +1,65 @@
+import { useLingui } from '@lingui/react/macro'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { Override } from '../../lib/util.ts'
+import { AtSymbolIcon } from '../utils/icons.tsx'
+import { InputText, InputTextProps } from './input-text.tsx'
+
+export type InputEmailAddressProps = Override<
+  Omit<InputTextProps, 'type'>,
+  {
+    onEmail?: (email: string | undefined) => void
+  }
+>
+
+export function InputEmailAddress({
+  onEmail,
+
+  // InputTextProps
+  autoCapitalize = 'none',
+  autoComplete = 'email',
+  autoCorrect = 'off',
+  dir = 'auto',
+  icon = <AtSymbolIcon className="w-5" />,
+  onBlur,
+  onChange,
+  pattern = '^[^@]+@[^@]+\\.[^@]+$',
+  spellCheck = 'false',
+  value,
+  defaultValue = value,
+  title,
+  ...props
+}: InputEmailAddressProps) {
+  const { t } = useLingui()
+  const [email, setEmail] = useState<string>(
+    typeof defaultValue === 'string' ? defaultValue : '',
+  )
+
+  const doChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const email = event.target.value.toLowerCase()
+
+      setEmail(email)
+      onChange?.(event)
+      onEmail?.(event.target.validity.valid ? email : undefined)
+    },
+    [onChange, onEmail],
+  )
+
+  return (
+    <InputText
+      {...props}
+      title={title ?? t`Email address`}
+      type="email"
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      dir={dir}
+      spellCheck={spellCheck}
+      icon={icon}
+      pattern={pattern}
+      autoComplete={autoComplete}
+      value={email}
+      onChange={doChange}
+      onBlur={onBlur}
+    />
+  )
+}

package/src/components/forms/input-new-password.tsx

@@ -0,0 +1,62 @@
+import { useLingui } from '@lingui/react/macro'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { MIN_PASSWORD_LENGTH } from '../../lib/password.ts'
+import { Override } from '../../lib/util.ts'
+import { PasswordStrengthLabel } from '../utils/password-strength-label.tsx'
+import { PasswordStrengthMeter } from '../utils/password-strength-meter.tsx'
+import { InputPassword, InputPasswordProps } from './input-password.tsx'
+
+export type InputNewPasswordProps = Override<
+  Omit<InputPasswordProps, 'value' | 'defaultValue'>,
+  {
+    password?: string
+    onPassword?: (password: undefined | string) => void
+  }
+>
+
+export function InputNewPassword({
+  password: passwordInit = '',
+  onPassword,
+
+  // InputPasswordProps
+  onChange,
+  autoComplete = 'new-password',
+  minLength = MIN_PASSWORD_LENGTH,
+  ...props
+}: InputNewPasswordProps) {
+  const { t } = useLingui()
+  const [password, setPassword] = useState<string>(passwordInit)
+
+  const doChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target
+      onChange?.(event)
+      if (event.defaultPrevented) return
+      setPassword(value)
+      onPassword?.(event.target.validity.valid ? value : undefined)
+    },
+    [onChange, onPassword],
+  )
+
+  return (
+    <InputPassword
+      {...props}
+      placeholder={t`Enter a password`}
+      aria-label={t`Enter your new password`}
+      title={t`Password with at least ${MIN_PASSWORD_LENGTH} characters`}
+      minLength={minLength}
+      onChange={doChange}
+      value={password}
+      autoComplete={autoComplete}
+      bellow={
+        <>
+          <PasswordStrengthMeter password={password} />
+          <PasswordStrengthLabel
+            className="grow-1 min-w-max text-xs text-gray-500 dark:text-gray-400"
+            password={password}
+          />
+        </>
+      }
+    />
+  )
+}

package/src/components/forms/input-password.tsx

@@ -0,0 +1,87 @@
+import { useLingui } from '@lingui/react/macro'
+import { ChangeEvent, useCallback, useRef, useState } from 'react'
+import { mergeRefs } from '../../lib/ref.ts'
+import { Override } from '../../lib/util.ts'
+import { LockIcon } from '../utils/icons.tsx'
+import { ButtonToggleVisibility } from './button-toggle-visibility.tsx'
+import { InputText, InputTextProps } from './input-text.tsx'
+
+export type InputPasswordProps = Override<
+  Omit<InputTextProps, 'type' | 'children'>,
+  {
+    autoHide?: boolean
+  }
+>
+
+export function InputPassword({
+  autoHide = true,
+
+  // InputTextProps
+  onBlur,
+  onChange,
+  append,
+  autoComplete = 'current-password',
+  icon = <LockIcon className="w-5" />,
+  value,
+  defaultValue = value,
+  ref,
+  title,
+  dir = 'auto',
+  autoCapitalize = 'none',
+  autoCorrect = 'off',
+  spellCheck = 'false',
+  ...props
+}: InputPasswordProps) {
+  const { t } = useLingui()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [visible, setVisible] = useState<boolean>(false)
+  const [password, setPassword] = useState<string>(
+    typeof defaultValue === 'string' ? defaultValue : '',
+  )
+
+  const doChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event)
+      setPassword(event.target.value)
+    },
+    [onChange],
+  )
+
+  return (
+    <InputText
+      {...props}
+      title={title ?? t`Password`}
+      ref={mergeRefs([ref, inputRef])}
+      dir={dir}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      spellCheck={spellCheck}
+      icon={icon}
+      onBlur={
+        autoHide
+          ? (event) => {
+              onBlur?.(event)
+              if (!event.defaultPrevented) setVisible(false)
+            }
+          : onBlur
+      }
+      value={password}
+      onChange={doChange}
+      type={visible ? 'text' : 'password'}
+      autoComplete={autoComplete}
+      append={
+        <>
+          <ButtonToggleVisibility
+            className="m-1"
+            visible={visible}
+            toggleVisible={() => {
+              setVisible((prev) => !prev)
+              inputRef.current?.focus()
+            }}
+          />
+          {append}
+        </>
+      }
+    />
+  )
+}

package/src/components/forms/input-text.tsx

@@ -0,0 +1,82 @@
+import { JSX, ReactNode, useContext, useRef } from 'react'
+import { clsx } from '../../lib/clsx.ts'
+import { mergeRefs } from '../../lib/ref.ts'
+import { Override } from '../../lib/util.ts'
+import { FieldsetContext } from './fieldset.tsx'
+import { InputContainer } from './input-container.tsx'
+
+export type InputTextProps = Override<
+  Omit<JSX.IntrinsicElements['input'], 'children'>,
+  {
+    icon?: ReactNode
+    append?: ReactNode
+    bellow?: ReactNode
+    className?: string
+  }
+>
+
+export function InputText({
+  icon,
+  append,
+  bellow,
+  className,
+
+  // input
+  onFocus,
+  onBlur,
+  ref,
+  disabled,
+  title,
+  'aria-label': ariaLabel = title,
+  'aria-labelledby': ariaLabelledBy,
+  placeholder = ariaLabel,
+  ...props
+}: InputTextProps) {
+  const ctx = useContext(FieldsetContext)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const focusedRef = useRef(false) // ref instead of state to avoid re-renders
+
+  return (
+    <InputContainer
+      icon={icon}
+      append={append}
+      bellow={bellow}
+      className={clsx('cursor-text', className)}
+      tabIndex={-1}
+      onClick={(event) => {
+        if (inputRef.current !== event.target) {
+          event.preventDefault()
+          event.stopPropagation()
+          inputRef.current?.focus()
+        }
+      }}
+      onMouseDown={(event) => {
+        if (focusedRef.current && event.target !== inputRef.current) {
+          // Prevent "blur" event from firing when clicking outside the input
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }}
+    >
+      <input
+        {...props}
+        disabled={disabled ?? ctx.disabled}
+        title={title}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy ?? ctx.labelId}
+        ref={mergeRefs([ref, inputRef])}
+        className="w-full bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder-gray-500 text-ellipsis"
+        onFocus={(event) => {
+          onFocus?.(event)
+          if (!event.defaultPrevented) focusedRef.current = true
+        }}
+        onBlur={(event) => {
+          onBlur?.(event)
+          if (!event.defaultPrevented) focusedRef.current = false
+        }}
+      />
+    </InputContainer>
+  )
+}