@atproto/oauth-provider-ui 0.0.2 → 0.1.1

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

@@ -1,103 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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>
-  )
-}