@spunto/design-system 0.16.0 → 0.18.0

package/src/components/auth/oauth-button.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+import { buttonVariants } from "../button-variants"
+import { GitHubIcon, GoogleIcon } from "./oauth-icons"
+import type { AuthLinkRender } from "./types"
+
+/* ─── OAuthButton ──────────────────────────────────────────────────────────
+   "Continue with <provider>", full width, above the separator.
+
+   It's the design system's `Button` in its `outline` register, only taller and
+   rounder than any of its sizes — an auth screen's two big targets (this one and
+   the submit) are 44 px pills, not 32 px toolbar buttons. That's a `className`
+   over `buttonVariants`, deliberately, rather than a new `size` on the primitive:
+   the shape belongs to this screen, not to buttons in general.
+
+   Going through `buttonVariants` (and not the `Button` component) is also what
+   makes the link case honest: an OAuth "button" is nearly always an `<a href>`
+   to the API's redirect route, and both cases must come out pixel-identical. */
+
+export type OAuthProvider = "google" | "github"
+
+const providers: Record<OAuthProvider, { label: string; icon: ReactNode }> = {
+  google: { label: "Continue with Google", icon: <GoogleIcon /> },
+  github: { label: "Continue with GitHub", icon: <GitHubIcon /> },
+}
+
+export interface OAuthButtonProps {
+  /** Picks the shipped icon and the default label. */
+  provider?: OAuthProvider
+  /** Overrides the provider's icon (or supplies one for a provider we don't ship). */
+  icon?: ReactNode
+  /** Overrides the label. Defaults to "Continue with <provider>". */
+  children?: ReactNode
+  /**
+   * Where the provider dance starts — an API route, not a client-side one
+   * (`/api/auth/login`). Set it and the button renders as an `<a>`.
+   */
+  href?: string
+  /** Alternative to `href` when the app opens the flow itself (a popup, a SDK call). */
+  onClick?: () => void
+  disabled?: boolean
+  /** `link` renders the anchor (a router link…); without it, a plain `<a>`. */
+  render?: { link?: AuthLinkRender }
+  className?: string
+}
+
+export function OAuthButton({
+  provider = "google",
+  icon,
+  children,
+  href,
+  onClick,
+  disabled,
+  render,
+  className,
+}: OAuthButtonProps) {
+  const preset = providers[provider]
+  const classes = cn(
+    buttonVariants({ variant: "outline" }),
+    "h-auto w-full gap-3 rounded-xl bg-card px-4 py-3 text-sm font-medium text-foreground",
+    className
+  )
+  const content = (
+    <>
+      {icon ?? preset?.icon}
+      {children ?? preset?.label}
+    </>
+  )
+
+  if (href && !disabled) {
+    const link = render?.link ?? ((props) => <a {...props} />)
+    return link({ href, className: classes, children: content })
+  }
+
+  return (
+    <button type="button" className={classes} onClick={onClick} disabled={disabled}>
+      {content}
+    </button>
+  )
+}

package/src/components/auth/oauth-icons.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "../../utils"
+
+/* The two marks that actually appear on an auth screen, shipped with the package
+   for the same reason `/devcontainer` ships its stack marks: a login button that
+   has to fetch its provider logo from a CDN is a login button that renders wrong
+   on a cold cache. Google's is drawn in its brand colors (its guidelines don't
+   allow recoloring it); GitHub's inherits `currentColor` like every other glyph. */
+
+export function GoogleIcon({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={cn("h-4 w-4 shrink-0", className)}
+      {...props}
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  )
+}
+
+export function GitHubIcon({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={cn("h-4 w-4 shrink-0", className)}
+      {...props}
+    >
+      <path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.5 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.2.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z" />
+    </svg>
+  )
+}

package/src/components/auth/types.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactElement } from "react"
+
+/** The two faces of one screen: signing in, or opening an account. */
+export type AuthMode = "login" | "register"
+
+/**
+ * What `AuthForm` hands back on submit. `name` only exists in `register` mode
+ * (and only when the display-name field is shown and filled).
+ *
+ * The package **never calls an API**: it collects, validates natively (`required`,
+ * `type="email"`, `minLength`) and gives the values back. Which endpoint they go
+ * to, what a session cookie is, and where to redirect afterwards are the app's.
+ */
+export interface AuthSubmitValues {
+  mode: AuthMode
+  email: string
+  password: string
+  name?: string
+}
+
+/**
+ * Props handed to the app's link component — spread them all.
+ *
+ * Same slot motif as `CommandPaletteLinkRender` and `WorkerCard`'s `render.link`:
+ * the package never imports `next/link`, so anything that navigates takes an
+ * `href` plus an optional renderer. Without one, it falls back to a plain `<a>`.
+ */
+export type AuthLinkProps = ComponentProps<"a"> & { href: string }
+export type AuthLinkRender = (props: AuthLinkProps) => ReactElement