@atproto/oauth-provider-ui 0.0.2 → 0.1.1

package/src/hooks/use-api.ts

@@ -1,182 +0,0 @@
-import { useLingui } from '@lingui/react/macro'
-import { useCallback, useMemo, useState } from 'react'
-import { useErrorBoundary } from 'react-error-boundary'
-import type {
-  Account,
-  ConfirmResetPasswordData,
-  InitiatePasswordResetData,
-  Session,
-  SignInData,
-  SignUpData,
-  VerifyHandleAvailabilityData,
-} from '@atproto/oauth-provider-api'
-import { AcceptData, Api, UnknownRequestUriError } from '../lib/api.ts'
-import { upsert } from '../lib/util.ts'
-import { useCsrfToken } from './use-csrf-token.ts'
-
-/**
- * Any function wrapped with this helper will automatically show the error
- * boundary when an `UnknownRequestUriError` is thrown. This typically happens
- * in development, or if the user left its browser session open for a (very)
- * long time.
- *
- * @note Requires an error boundary to be present in the component tree.
- */
-function useSafeCallback<F extends (...a: any) => any>(fn: F, deps: unknown[]) {
-  const { showBoundary } = useErrorBoundary<UnknownRequestUriError>()
-
-  return useCallback(
-    async (...args: Parameters<F>): Promise<Awaited<ReturnType<F>>> => {
-      try {
-        return await fn(...args)
-      } catch (error) {
-        if (error instanceof UnknownRequestUriError) showBoundary(error)
-        throw error
-      }
-    },
-    deps.concat(showBoundary),
-  )
-}
-
-export type UseApiOptions = {
-  requestUri: string
-  sessions?: readonly Session[]
-  newSessionsRequireConsent?: boolean
-  onRedirected?: () => void
-}
-
-export function useApi({
-  requestUri,
-  sessions: sessionsInit = [],
-  newSessionsRequireConsent = true,
-  onRedirected,
-}: UseApiOptions) {
-  const csrfToken = useCsrfToken(`csrf-${requestUri}`)
-  if (!csrfToken) throw new Error('CSRF token is missing')
-
-  const api = useMemo(() => new Api(csrfToken), [csrfToken])
-  const [sessions, setSessions] = useState(sessionsInit)
-
-  const { i18n } = useLingui()
-  const { locale } = i18n
-
-  const selectSub = useCallback(
-    (sub: string | null) => {
-      setSessions((sessions) =>
-        sub === (sessions.find((s) => s.selected)?.account.sub || null)
-          ? sessions
-          : sessions.map((s) => ({ ...s, selected: s.account.sub === sub })),
-      )
-    },
-    [setSessions],
-  )
-
-  const upsertSession = useCallback(
-    ({
-      account,
-      consentRequired,
-    }: {
-      account: Account
-      consentRequired: boolean
-    }) => {
-      const session: Session = {
-        account,
-        selected: true,
-        loginRequired: false,
-        consentRequired: newSessionsRequireConsent || consentRequired,
-      }
-
-      setSessions((sessions) =>
-        upsert(sessions, session, (s) => s.account.sub === account.sub).map(
-          // Make sure to de-select any other selected session
-          (s) => (s === session || !s.selected ? s : { ...s, selected: false }),
-        ),
-      )
-    },
-    [setSessions, newSessionsRequireConsent],
-  )
-
-  const performRedirect = useCallback(
-    (url: URL) => {
-      window.location.href = String(url)
-      if (onRedirected) setTimeout(onRedirected)
-    },
-    [onRedirected],
-  )
-
-  const doSignIn = useSafeCallback(
-    async (data: Omit<SignInData, 'locale'>, signal?: AbortSignal) => {
-      const response = await api.fetch(
-        '/sign-in',
-        { ...data, locale },
-        { signal },
-      )
-      upsertSession(response)
-    },
-    [api, locale, upsertSession],
-  )
-
-  const doInitiatePasswordReset = useSafeCallback(
-    async (
-      data: Omit<InitiatePasswordResetData, 'locale'>,
-      signal?: AbortSignal,
-    ) => {
-      await api.fetch(
-        '/reset-password-request',
-        { ...data, locale },
-        { signal },
-      )
-    },
-    [api, locale],
-  )
-
-  const doConfirmResetPassword = useSafeCallback(
-    async (data: ConfirmResetPasswordData, signal?: AbortSignal) => {
-      await api.fetch('/reset-password-confirm', data, { signal })
-    },
-    [api],
-  )
-
-  const doValidateNewHandle = useSafeCallback(
-    async (data: VerifyHandleAvailabilityData, signal?: AbortSignal) => {
-      await api.fetch('/verify-handle-availability', data, { signal })
-    },
-    [api],
-  )
-
-  const doSignUp = useSafeCallback(
-    async (data: Omit<SignUpData, 'locale'>, signal?: AbortSignal) => {
-      const response = await api.fetch(
-        '/sign-up',
-        { ...data, locale },
-        { signal },
-      )
-      upsertSession(response)
-    },
-    [api, locale, upsertSession],
-  )
-
-  const doAccept = useSafeCallback(
-    async (data: AcceptData) => {
-      performRedirect(api.buildAcceptUrl(data))
-    },
-    [api, performRedirect],
-  )
-
-  const doReject = useSafeCallback(async () => {
-    performRedirect(api.buildRejectUrl())
-  }, [api, performRedirect])
-
-  return {
-    sessions,
-    selectSub,
-
-    doSignIn,
-    doInitiatePasswordReset,
-    doConfirmResetPassword,
-    doValidateNewHandle,
-    doSignUp,
-    doAccept,
-    doReject,
-  }
-}

package/src/hooks/use-async-action.ts

@@ -1,120 +0,0 @@
-import {
-  ForwardedRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-
-export type AsyncActionController = {
-  reset: () => void
-}
-
-export type UseAsyncActionOptions = {
-  ref?: ForwardedRef<AsyncActionController>
-  onLoading?: (loading: boolean) => void
-  onError?: (error: Error | undefined) => void
-}
-
-export function useAsyncAction(
-  fn: (signal: AbortSignal) => void | PromiseLike<void>,
-  { ref, onLoading, onError }: UseAsyncActionOptions = {},
-) {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error | undefined>()
-
-  const doSetError = useCallback(
-    (error: Error | undefined) => {
-      setError(error)
-      onError?.(error)
-    },
-    [onError],
-  )
-
-  const doSetLoading = useCallback(
-    (loading: boolean) => {
-      setLoading(loading)
-      onLoading?.(loading)
-    },
-    [onLoading],
-  )
-
-  const controllerRef = useRef<AbortController>(null)
-
-  const resetRef = useRef<() => void>(null)
-  useEffect(() => {
-    resetRef.current = () => {
-      controllerRef.current?.abort()
-      controllerRef.current = null
-      doSetError(undefined)
-      doSetLoading(false)
-    }
-    return () => {
-      resetRef.current = null
-    }
-  }, [doSetError, doSetLoading])
-
-  useImperativeHandle(
-    ref,
-    (): AsyncActionController => ({
-      reset: () => resetRef.current?.(),
-    }),
-    [],
-  )
-
-  // Cancel pending action when unmounted
-  useEffect(() => {
-    return () => {
-      controllerRef.current?.abort()
-      controllerRef.current = null
-    }
-  }, [])
-
-  const run = useCallback(async (): Promise<void> => {
-    // Cancel previous run
-    controllerRef.current?.abort()
-
-    doSetLoading(true)
-    doSetError(undefined)
-
-    const controller = new AbortController()
-    const { signal } = controller
-
-    controllerRef.current = controller
-
-    try {
-      await fn(signal)
-    } catch (err) {
-      if (controller === controllerRef.current) {
-        doSetError(err instanceof Error ? err : new Error(String(err)))
-      } else {
-        if (!isAbortReason(signal, err)) {
-          console.warn('Async action error after abort', err)
-        }
-      }
-    } finally {
-      if (controller === controllerRef.current) {
-        controllerRef.current = null
-        doSetLoading(false)
-      }
-
-      controller.abort()
-    }
-  }, [fn, doSetLoading, doSetError])
-
-  return {
-    loading,
-    error,
-    run,
-  }
-}
-
-function isAbortReason(signal: AbortSignal, err: unknown): boolean {
-  return (
-    signal.aborted &&
-    (signal.reason === err ||
-      signal.reason === err?.['cause'] ||
-      (err instanceof DOMException && err.name === 'AbortError'))
-  )
-}

package/src/hooks/use-bound-dispatch.ts

@@ -1,5 +0,0 @@
-import { Dispatch, useCallback } from 'react'
-
-export function useBoundDispatch<A>(dispatch: Dispatch<A>, value: A) {
-  return useCallback(() => dispatch(value), [dispatch, value])
-}

package/src/hooks/use-browser-color-scheme.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const query =
-  typeof window === 'undefined'
-    ? null
-    : window.matchMedia('(prefers-color-scheme: dark)')
-
-export function useBrowserColorScheme() {
-  const [theme, setTheme] = useState<'light' | 'dark'>(
-    query?.matches ? 'dark' : 'light',
-  )
-
-  useEffect(() => {
-    if (!query) return
-
-    const listener = () => {
-      setTheme(query.matches ? 'dark' : 'light')
-    }
-
-    query.addEventListener('change', listener)
-
-    return () => {
-      query.removeEventListener('change', listener)
-    }
-
-    // @NOTE "query" is a global constant and does not need to be part of the
-    // array bellow:
-  }, [])
-
-  return theme
-}

package/src/hooks/use-csrf-token.ts

@@ -1,5 +0,0 @@
-import { cookies } from '../cookies.ts'
-
-export function useCsrfToken(cookieName: string) {
-  return cookies[cookieName]
-}

package/src/hooks/use-random-string.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
-export const LOWER = UPPER.toLowerCase() as Lowercase<typeof UPPER>
-export const DIGITS = '0123456789'
-
-export const ALPHANUMERIC = `${UPPER}${LOWER}${DIGITS}` as const
-
-export type UseRandomStringOptions = BuildRandomStringOptions & {
-  prefix?: string
-  suffix?: string
-}
-
-export function useRandomString(options?: UseRandomStringOptions) {
-  const [state, setState] = useState(() => buildRandomString(options))
-  useEffect(() => {
-    setState(buildRandomString(options))
-  }, [options?.length, options?.alphabet])
-
-  return `${options?.prefix ?? ''}${state}${options?.suffix ?? ''}`
-}
-
-type BuildRandomStringOptions = {
-  length?: number
-  alphabet?: string
-}
-
-function buildRandomString({
-  length = 16,
-  alphabet = ALPHANUMERIC,
-}: BuildRandomStringOptions = {}) {
-  return Array.from({ length }, () => getRandomCharFrom(alphabet)).join('')
-}
-
-function getRandomCharFrom(alphabet: string) {
-  return alphabet.charAt((Math.random() * alphabet.length) | 0)
-}

package/src/hooks/use-stepper.ts

@@ -1,87 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-export type DisabledStep = false | null | undefined
-export type Step = {
-  invalid: boolean
-}
-
-const isEnabled = <S extends Step | DisabledStep>(
-  s: S,
-): s is S extends DisabledStep ? never : S => s != null && s !== false
-const isRequired = <S extends Step | DisabledStep>(
-  s: S,
-): s is S extends DisabledStep ? never : S & { invalid: true } =>
-  isEnabled(s) && s.invalid === true
-const isCompleted = <S extends Step | DisabledStep>(
-  s: S,
-): s is S extends DisabledStep ? S : S & { invalid: false } =>
-  !isEnabled(s) || s.invalid === false
-
-export function useStepper<const S extends Step>(
-  steps: readonly (S | DisabledStep)[],
-) {
-  const firstIdx = steps.findIndex(isEnabled)
-  const lastIdx = steps.findLastIndex(isEnabled)
-  const requiredIdx = steps.findIndex(isRequired)
-
-  const [currentIdx, setCurrentIdx] = useState<number>(firstIdx)
-
-  const to = useCallback(
-    (idx: number) => {
-      if (idx !== -1 && steps[idx]) {
-        setCurrentIdx(idx)
-        return true
-      } else {
-        return false
-      }
-    },
-    [steps.map(isEnabled).join()],
-  )
-
-  const prevIdx = steps.findLastIndex((s, i) => isEnabled(s) && i < currentIdx)
-  const nextIdx = steps.findIndex((s, i) => isEnabled(s) && i > currentIdx)
-
-  const toFirst = useCallback(() => to(firstIdx), [to, firstIdx])
-  const toLast = useCallback(() => to(lastIdx), [to, lastIdx])
-  const toPrev = useCallback(() => to(prevIdx), [to, prevIdx])
-  const toNext = useCallback(() => to(nextIdx), [to, nextIdx])
-  const toRequired = useCallback(() => to(requiredIdx), [to, requiredIdx])
-
-  // Step number in user friendly terms (accounting for disabled steps)
-  const currentPosition =
-    currentIdx +
-    // use "1 indexed position" (for user friendliness):
-    1 +
-    // Adjust the position by counting the number of disabled steps before the
-    // current step (if any):
-    steps.reduce(
-      (acc, s, i) => (i >= currentIdx || isEnabled(s) ? acc : acc - 1),
-      0,
-    )
-
-  const count = steps.filter(isEnabled).length
-  const completed = steps.every(isCompleted)
-
-  const current =
-    currentIdx === -1 || !steps[currentIdx] ? undefined : steps[currentIdx]
-
-  // Fool-proof (reset current step in case the current step becomes disabled)
-  const broken = currentIdx === -1
-  useEffect(() => {
-    if (broken) toFirst()
-  }, [broken])
-
-  return {
-    current,
-    currentPosition,
-    count,
-    completed,
-    atFirst: currentPosition === 1,
-    atLast: currentPosition === count,
-    toFirst,
-    toLast,
-    toPrev,
-    toNext,
-    toRequired,
-  }
-}

package/src/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OAuth mock pages</title>
-  </head>
-  <body>
-    <a href="authorization-page.html">authorization-page</a>
-    <br />
-    <a href="error-page.html">error-page</a>
-  </body>
-</html>