@atproto/oauth-provider-ui 0.1.0 → 0.1.1

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

@@ -1,78 +0,0 @@
-import { clsx } from 'clsx'
-import { JSX, ReactNode, useContext, useRef } from 'react'
-import { useRandomString } from '../../hooks/use-random-string.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-primary outline-hidden"
-          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 cursor-pointer select-none leading-[1.6]"
-        >
-          {children}
-        </label>
-      )}
-    </InputContainer>
-  )
-}

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

@@ -1,107 +0,0 @@
-import { clsx } from 'clsx'
-import { JSX, ReactNode, useState } from 'react'
-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',
-          'min-h-12 w-full',
-          'flex items-center justify-stretch',
-          // Border
-          'rounded-lg',
-          bellow ? 'rounded-bl-none rounded-br-none' : undefined,
-          'outline-hidden',
-          'border-2 border-solid border-transparent',
-          'focus:border-primary has-focus:border-primary',
-          'hover:border-gray-400 hover:focus:border-gray-400',
-          'dark:hover:border-gray-500 dark:hover:focus:border-gray-500',
-          // Background
-          'has-focus:bg-slate-200 bg-gray-100 focus:bg-slate-200',
-          'dark:has-focus:bg-slate-700 dark:bg-slate-800 dark:focus:bg-slate-700',
-          // Font
-          'text-slate-600 dark:text-slate-300',
-          'accent-primary',
-        )}
-      >
-        {icon && (
-          <div
-            className={clsx(
-              'shrink-0 grow-0',
-              'mx-1',
-              hasFocus ? 'text-primary' : 'text-slate-500',
-            )}
-          >
-            {icon}
-          </div>
-        )}
-
-        {children}
-
-        <div className="ml-1 flex shrink-0 grow-0 items-center">{append}</div>
-      </div>
-      {bellow && (
-        <div
-          className={clsx(
-            // Layout
-            'space-x-2 px-3 py-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 { clsx } from 'clsx'
-import { JSX, ReactNode, useContext, useRef } from 'react'
-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="outline-hidden w-full text-ellipsis bg-transparent bg-clip-padding text-base text-inherit dark:placeholder-gray-500"
-        onFocus={(event) => {
-          onFocus?.(event)
-          if (!event.defaultPrevented) focusedRef.current = true
-        }}
-        onBlur={(event) => {
-          onBlur?.(event)
-          if (!event.defaultPrevented) focusedRef.current = false
-        }}
-      />
-    </InputContainer>
-  )
-}

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

@@ -1,94 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { ChangeEvent, useState } from 'react'
-import { Override } from '../../lib/util.ts'
-import { TokenIcon } from '../utils/icons.tsx'
-import { InputText, InputTextProps } from './input-text.tsx'
-
-export type InputTokenProps = Override<
-  Omit<
-    InputTextProps,
-    | 'type'
-    | 'pattern'
-    | 'autoCapitalize'
-    | 'autoCorrect'
-    | 'autoComplete'
-    | 'spellCheck'
-    | 'minLength'
-    | 'maxLength'
-    | 'placeholder'
-    | 'dir'
-  >,
-  {
-    example?: string
-    onToken?: (code: string | null) => void
-  }
->
-
-export const OTP_CODE_EXAMPLE = 'XXXXX-XXXXX'
-
-export function InputToken({
-  example = OTP_CODE_EXAMPLE,
-  onToken,
-
-  // InputTextProps
-  icon = <TokenIcon className="w-5" />,
-  title = example,
-  onChange,
-  value,
-  defaultValue = value,
-  ...props
-}: InputTokenProps) {
-  const { t } = useLingui()
-  const [token, setToken] = useState<string>(
-    typeof defaultValue === 'string' ? defaultValue : '',
-  )
-
-  return (
-    <InputText
-      {...props}
-      type="text"
-      autoCapitalize="none"
-      autoCorrect="off"
-      autoComplete="off"
-      spellCheck="false"
-      minLength={11}
-      maxLength={11}
-      dir="auto"
-      icon={icon}
-      pattern="^[A-Z2-7]{5}-[A-Z2-7]{5}$"
-      placeholder={t`Looks like ${example}`}
-      title={title}
-      value={token}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        const { value, selectionEnd, selectionStart } = event.currentTarget
-
-        const fixedValue = fix(value)
-
-        event.currentTarget.value = fixedValue
-
-        // Move the cursor back where it was relative to the original value
-        const pos = selectionEnd ?? selectionStart
-        if (pos != null) {
-          const fixedSlicedValue = fix(value.slice(0, pos))
-          event.currentTarget.selectionStart =
-            event.currentTarget.selectionEnd = fixedSlicedValue.length
-        }
-
-        setToken(fixedValue)
-        onChange?.(event)
-
-        if (!event.isDefaultPrevented()) {
-          onToken?.(fixedValue.length === 11 ? fixedValue : null)
-        }
-      }}
-    />
-  )
-}
-
-function fix(value: string) {
-  const normalized = value.toUpperCase().replaceAll(/[^A-Z2-7]/g, '')
-
-  if (normalized.length <= 5) return normalized
-
-  return `${normalized.slice(0, 5)}-${normalized.slice(5, 10)}`
-}

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

@@ -1,116 +0,0 @@
-import { Trans } from '@lingui/react/macro'
-import { clsx } from 'clsx'
-import { JSX, ReactNode, useCallback } from 'react'
-import { DisabledStep, Step, useStepper } from '../../hooks/use-stepper.ts'
-import { Override } from '../../lib/util.ts'
-
-export type DoneFn = (...a: any) => unknown
-
-export type WizardRenderProps<TDone extends DoneFn> = {
-  /**
-   * Indicates wether the render function being invoked corresponds to the step
-   * currently active. The steps titles could, for example, be rendered in a
-   * list of links, where the current step is highlighted (based on `current`).
-   *
-   * Another use for this is to render the next/previous steps in order to
-   * provide animated transitions between steps. In this case, `current` would
-   * be used to disable any form interaction with the form transitioning in/out.
-   */
-  current: boolean
-  invalid: boolean
-
-  prev?: () => void
-  prevLabel: ReactNode
-
-  // On the last step, the "next()" function will actually be the done function
-  next: (() => void) | TDone
-  nextLabel: ReactNode
-}
-
-export type WizardRenderFn<TDone extends DoneFn> = (
-  data: WizardRenderProps<TDone>,
-) => ReactNode
-
-export type WizardStep<TDone extends DoneFn> = Step & {
-  titleRender?: WizardRenderFn<TDone>
-  contentRender: WizardRenderFn<TDone>
-}
-
-export type WizardCardProps<TDone extends DoneFn> = Override<
-  Omit<JSX.IntrinsicElements['div'], 'children'>,
-  {
-    prevLabel?: ReactNode
-    nextLabel?: ReactNode
-
-    onBack?: () => void
-    backLabel?: ReactNode
-
-    onDone: TDone
-    doneLabel?: ReactNode
-
-    steps: readonly (WizardStep<TDone> | DisabledStep)[]
-  }
->
-
-export function WizardCard<TDone extends DoneFn>({
-  prevLabel,
-  nextLabel,
-
-  onBack,
-  backLabel,
-
-  onDone,
-  doneLabel,
-
-  steps,
-  className,
-
-  ...props
-}: WizardCardProps<TDone>) {
-  const {
-    atFirst,
-    atLast,
-    count,
-    current,
-    currentPosition,
-    completed,
-    toNext,
-    toPrev,
-    toRequired,
-  } = useStepper(steps)
-
-  // Memoized to avoid re-renders in child (rendered) components
-  const onNext = useCallback(() => {
-    // If already at last step, go to the first incomplete (required) step
-    if (!toNext()) toRequired()
-  }, [toNext, toRequired])
-
-  const data: WizardRenderProps<TDone> = {
-    // The current UI only displays the current title & content.
-    current: true,
-    invalid: current ? current.invalid : false,
-
-    prevLabel: (atFirst && backLabel) || prevLabel || <Trans>Back</Trans>,
-    prev: atFirst ? onBack : toPrev,
-
-    nextLabel: (atLast && doneLabel) || nextLabel || <Trans>Next</Trans>,
-    next: atLast && completed ? onDone : onNext,
-  }
-
-  const stepTitle = current?.titleRender?.(data)
-  const stepContent = current?.contentRender?.(data)
-
-  return (
-    <div className={clsx(className, 'flex flex-col')} {...props}>
-      <p className="text-slate-500 dark:text-slate-400">
-        <Trans>
-          Step {currentPosition} of {count}
-        </Trans>
-      </p>
-
-      {stepTitle && <h2 className="mb-4 text-xl font-medium">{stepTitle}</h2>}
-
-      {stepContent}
-    </div>
-  )
-}