@atproto/oauth-provider 0.3.1 → 0.5.0

package/src/assets/app/components/info-card.tsx

@@ -1,45 +0,0 @@
-import { clsx } from '../lib/clsx'
-import { Override } from '../lib/util'
-import { AlertIcon } from './icons/alert-icon'
-import { InputLayout, InputLayoutProps } from './input-layout'
-
-export type InfoCardProps = Override<
-  InputLayoutProps,
-  {
-    role: 'alert' | 'status'
-  }
->
-
-export function InfoCard({
-  children,
-  className,
-  role = 'alert',
-  ...props
-}: InfoCardProps) {
-  return (
-    <InputLayout
-      className={clsx(
-        role === 'alert' ? 'bg-error' : 'bg-gray-100 dark:bg-slate-800',
-        className,
-      )}
-      icon={
-        <AlertIcon
-          className={clsx(
-            'fill-current h-4 w-4',
-            role === 'alert' ? 'text-white' : 'text-brand',
-          )}
-        />
-      }
-      {...props}
-    >
-      <div
-        className={clsx(
-          'py-2 overflow-hidden',
-          role === 'alert' ? 'text-white' : undefined,
-        )}
-      >
-        {children}
-      </div>
-    </InputLayout>
-  )
-}

package/src/assets/app/components/input-checkbox.tsx

@@ -1,47 +0,0 @@
-import { InputHTMLAttributes, useRef, useState } from 'react'
-import { InputContainer } from './input-container'
-
-const generateUniqueId = () => Math.random().toString(36).slice(2)
-
-export type InputCheckboxProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'type'
->
-
-export function InputCheckbox({
-  id,
-  children,
-  className,
-  ...props
-}: InputCheckboxProps) {
-  const [htmlFor] = useState(generateUniqueId)
-  const ref = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  return (
-    <InputContainer
-      id={id}
-      ref={ref}
-      icon={
-        <input
-          {...props}
-          ref={inputRef}
-          id={htmlFor}
-          className="text-brand outline-none"
-          type="checkbox"
-        />
-      }
-      className={className}
-      onClick={(event) => {
-        if (event.target === ref.current && !event.defaultPrevented) {
-          inputRef.current?.click()
-          inputRef.current?.focus()
-        }
-      }}
-    >
-      <label htmlFor={htmlFor} className="block w-full leading-[1.6]">
-        {children}
-      </label>
-    </InputContainer>
-  )
-}

package/src/assets/app/components/input-container.tsx

@@ -1,37 +0,0 @@
-import { forwardRef, useState } from 'react'
-import { clsx } from '../lib/clsx'
-import { InputLayout, InputLayoutProps } from './input-layout'
-
-export type InputContainerProps = InputLayoutProps
-
-export const InputContainer = forwardRef<HTMLDivElement, InputContainerProps>(
-  ({ className, onFocus, icon, onBlur, ...props }, ref) => {
-    const [focused, setFocused] = useState(false)
-
-    return (
-      <InputLayout
-        ref={ref}
-        className={clsx(
-          // Background
-          'bg-gray-100 has-[:focus]:bg-slate-200',
-          'dark:bg-slate-800 dark:has-[:focus]:bg-slate-700',
-          // Border
-          'outline-none',
-          'border-solid border-2 border-transparent hover:border-gray-400 has-[:focus]:border-brand hover:has-[:focus]:border-brand',
-          'dark:hover:border-gray-500',
-          className,
-        )}
-        onFocus={(event) => {
-          onFocus?.(event)
-          if (!event.defaultPrevented) setFocused(true)
-        }}
-        onBlur={(event) => {
-          onBlur?.(event)
-          if (!event.defaultPrevented) setFocused(false)
-        }}
-        icon={<div className={focused ? 'text-brand' : undefined}>{icon}</div>}
-        {...props}
-      />
-    )
-  },
-)

package/src/assets/app/components/input-layout.tsx

@@ -1,47 +0,0 @@
-import { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import { clsx } from '../lib/clsx'
-import { Override } from '../lib/util'
-
-export type InputLayoutProps = Override<
-  HTMLAttributes<HTMLDivElement>,
-  {
-    icon?: ReactNode
-    append?: ReactNode
-  }
->
-
-export const InputLayout = forwardRef<HTMLDivElement, InputLayoutProps>(
-  ({ className, icon, append, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          // Layout
-          'pl-1 pr-2', // Less padding on the left because icon will provide some
-          'min-h-12',
-          'flex items-center justify-stretch',
-          // Border
-          'rounded-lg',
-          // Font
-          'text-gray-700',
-          'dark:text-gray-100',
-          className,
-        )}
-        {...props}
-      >
-        <div
-          className={clsx(
-            'self-start shrink-0 grow-0',
-            'w-8 h-12',
-            'flex items-center justify-center',
-            'text-gray-500',
-          )}
-        >
-          {icon}
-        </div>
-        <div className="flex-auto relative">{children}</div>
-        {append && <div className="grow-0 shrink-0">{append}</div>}
-      </div>
-    )
-  },
-)

package/src/assets/app/components/input-text.tsx

@@ -1,69 +0,0 @@
-import {
-  forwardRef,
-  InputHTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-import { InputContainer } from './input-container'
-
-export const InputText = forwardRef<
-  HTMLInputElement,
-  {
-    icon?: ReactNode
-  } & InputHTMLAttributes<HTMLInputElement>
->(({ className, icon, children, onFocus, onBlur, ...props }, ref) => {
-  const [focused, setFocused] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useImperativeHandle(ref, () => inputRef.current!, [])
-
-  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (event) => {
-      if (inputRef.current !== event.target) {
-        event.preventDefault()
-        event.stopPropagation()
-        inputRef.current?.focus()
-      }
-    },
-    [],
-  )
-
-  const handleMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (event) => {
-      if (focused && event.target !== inputRef.current) {
-        // Prevent "blur" event from firing when clicking outside the input
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    },
-    [focused],
-  )
-
-  return (
-    <InputContainer
-      icon={icon}
-      className={className}
-      onClick={handleClick}
-      onMouseDown={handleMouseDown}
-    >
-      <input
-        ref={inputRef}
-        className="w-full bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder-gray-500"
-        onFocus={(event) => {
-          setFocused(true)
-          onFocus?.(event)
-        }}
-        onBlur={(event) => {
-          setFocused(false)
-          onBlur?.(event)
-        }}
-        {...props}
-      />
-      {children}
-    </InputContainer>
-  )
-})

package/src/assets/app/components/layout-title-page.tsx

@@ -1,60 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react'
-import { clsx } from '../lib/clsx'
-import { Override } from '../lib/util'
-
-export type LayoutTitlePageProps = Override<
-  HTMLAttributes<HTMLDivElement>,
-  {
-    title?: ReactNode
-    subtitle?: ReactNode
-  }
->
-
-export function LayoutTitlePage({
-  children,
-  title,
-  subtitle,
-  className,
-  ...props
-}: LayoutTitlePageProps) {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        className,
-        'flex flex-col items-center',
-        'md:flex md:flex-row md:justify-stretch md:items-center',
-        'min-h-screen min-w-screen',
-        'bg-white text-slate-900',
-        'dark:bg-slate-900 dark:text-slate-100',
-      )}
-    >
-      <div
-        className={clsx(
-          'px-6 pt-4',
-          'md:max-w-lg',
-          'md:grid md:content-center md:justify-items-end',
-          'md:self-stretch',
-          'md:w-1/2 md:max-w-fix md:p-4',
-          'md:text-right',
-          'md:dark:border-r md:dark:border-slate-700',
-          'md:bg-slate-100 md:dark:bg-slate-800',
-        )}
-      >
-        {title && (
-          <h1 className="text-xl md:text-2xl lg:text-5xl md:mt-4 mb-4 font-semibold text-brand">
-            {title}
-          </h1>
-        )}
-
-        {subtitle && (
-          <p className="hidden md:block max-w-xs text-slate-500 dark:text-slate-500">
-            {subtitle}
-          </p>
-        )}
-      </div>
-
-      <div className="w-full px-6 md:max-w-3xl md:px-12">{children}</div>
-    </div>
-  )
-}

package/src/assets/app/components/layout-welcome.tsx

@@ -1,74 +0,0 @@
-import { HTMLAttributes } from 'react'
-import { Override } from '../lib/util'
-import { clsx } from '../lib/clsx'
-
-export type LayoutWelcomeProps = Override<
-  HTMLAttributes<HTMLDivElement>,
-  {
-    name?: string
-    logo?: string
-    links?: Array<{
-      title: string
-      href: string
-      rel?: string
-    }>
-    logoAlt?: string
-  }
->
-
-export function LayoutWelcome({
-  name,
-  logo,
-  logoAlt = name || 'Logo',
-  links,
-  children,
-  className,
-  ...props
-}: LayoutWelcomeProps) {
-  return (
-    <div
-      className={clsx(
-        'min-h-screen w-full',
-        'flex items-center justify-center flex-col',
-        'bg-white text-slate-900',
-        'dark:bg-slate-900 dark:text-slate-100',
-        className,
-      )}
-      {...props}
-    >
-      <div className="w-full max-w-screen-sm overflow-hidden flex-grow flex flex-col items-center justify-center">
-        {logo && (
-          <img
-            src={logo}
-            alt={logoAlt}
-            className="w-16 h-16 md:w-24 md:h-24 mb-8"
-          />
-        )}
-
-        {name && (
-          <h1 className="text-2xl md:text-4xl mb-8 mx-4 text-center font-bold">
-            {name}
-          </h1>
-        )}
-
-        {children}
-      </div>
-
-      {links != null && links.length > 0 && (
-        <nav className="w-full max-w-screen-sm overflow-hidden mt-4 border-t border-t-slate-200 dark:border-t-slate-700 flex flex-wrap justify-center">
-          {links.map((link) => (
-            <a
-              key={link.href}
-              href={link.href}
-              rel={link.rel}
-              target="_blank"
-              className="m-2 md:m-4 text-xs md:text-sm text-brand hover:underline"
-            >
-              {link.title}
-            </a>
-          ))}
-        </nav>
-      )}
-    </div>
-  )
-}