@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/error-state-maintenance-mode/ErrorStateMaintenanceMode.tsx

@@ -0,0 +1,255 @@
+"use client"
+
+import * as React from "react"
+import { Mail, Wrench } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button } from "../../ui/button/button"
+import { Input } from "../../ui/input/input"
+import { Progress } from "../../ui/progress/progress"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Maintenance Mode.
+ *
+ * A planned-downtime page on a muted field: a wrench card, a status pill,
+ * the expected return time, the upgrade's progress and a sign-up to hear
+ * when it is back. It has no status code.
+ *
+ * `progress` sets the bar; pass a new value as the job reports it. The form
+ * is real: it checks the address itself, the button shows its spinner while
+ * `onSubscribe` runs, and then the form gives way to `success`, or keeps
+ * what was typed and shows `error`.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), where the field
+ * and button stack; `md:` is its Tablet (768) and `lg:` its Desktop (1440).
+ * Direction is the page's `dir`: the bar fills from the inline start, so it
+ * runs right to left in Arabic.
+ */
+
+export interface ErrorStateMaintenanceModeCopy {
+  /** The pill above the heading. Hidden when empty. */
+  badge: React.ReactNode
+  /** The page's heading, an `h1`. Name what is happening. */
+  heading: React.ReactNode
+  /** The line under the heading: when it will be back. */
+  description: React.ReactNode
+  /** What the upgrade is doing now, under the bar's start. */
+  stage: React.ReactNode
+  /** The percentage under the bar's end, from `progress`. */
+  complete: (percent: number) => React.ReactNode
+  /** The email field's placeholder, and its accessible name. */
+  emailPlaceholder: string
+  /** Under the field when it is empty or not an address. */
+  emailError: React.ReactNode
+  /** The submit button. */
+  submitLabel: React.ReactNode
+  /** Read out while `onSubscribe` runs. */
+  pendingLabel: string
+  /** Replaces the form once `onSubscribe` resolves. */
+  success: React.ReactNode
+  /** Shown under the form when `onSubscribe` rejects. */
+  error: React.ReactNode
+  /** The small print at the foot. Hidden when empty. */
+  note: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateMaintenanceModeCopy> = {
+  en: {
+    badge: "Scheduled maintenance",
+    heading: "We’ll be back shortly",
+    description:
+      "Fasla is being upgraded. Everything will be back online at around 03:40 UTC — roughly 20 minutes from now.",
+    stage: "Migrating workspace data",
+    complete: (percent) => `${percent}% complete`,
+    emailPlaceholder: "you@company.com",
+    emailError: "Enter an email address, like you@company.com.",
+    submitLabel: "Notify me",
+    pendingLabel: "Signing you up",
+    success: "Done. We’ll email you as soon as Fasla is back.",
+    error: "That didn’t go through. Try again in a moment.",
+    note: "Follow live progress on the Fasla status page.",
+  },
+  ar: {
+    badge: "أعمال صيانة",
+    heading: "سنعود قريبًا",
+    description: (
+      <>
+        يجري تحديث فاصلة. سيعود كل شيء للعمل عند الساعة <bdi dir="ltr">03:40</bdi> بالتوقيت العالمي، أي بعد نحو{" "}
+        <bdi dir="ltr">20</bdi> دقيقة من الآن.
+      </>
+    ),
+    stage: "نقل بيانات مساحة العمل",
+    complete: (percent) => (
+      <>
+        اكتمل <bdi dir="ltr">{percent}%</bdi>
+      </>
+    ),
+    emailPlaceholder: "you@company.com",
+    emailError: (
+      <>
+        أدخل بريدًا إلكترونيًا، مثل <bdi dir="ltr">you@company.com</bdi>.
+      </>
+    ),
+    submitLabel: "أعلمني",
+    pendingLabel: "جارٍ التسجيل",
+    success: "تم. سنراسلك فور عودة فاصلة.",
+    error: "لم يكتمل الطلب. حاول مجددًا بعد قليل.",
+    note: "تابع التقدم المباشر على صفحة حالة فاصلة.",
+  },
+}
+
+type Status = "idle" | "pending" | "success" | "error"
+
+export interface ErrorStateMaintenanceModeProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateMaintenanceModeCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * How far the upgrade has got, from 0 to 100.
+   * @default 65
+   */
+  progress?: number
+  /**
+   * The glyph in the card. Pass `null` to drop the card.
+   * @default a wrench
+   */
+  icon?: React.ReactNode
+  /**
+   * Sends the sign-up. The button shows its spinner until the promise
+   * settles; then the form gives way to `success`, or shows `error`. Without
+   * it nothing is sent, so the form shows `error`.
+   */
+  onSubscribe?: (email: string) => Promise<void> | void
+  /**
+   * Turns the sign-up off: the field and the button are disabled.
+   * @default false
+   */
+  disabled?: boolean
+}
+
+export function ErrorStateMaintenanceMode({
+  locale = "en",
+  badge,
+  heading,
+  description,
+  stage,
+  complete,
+  emailPlaceholder,
+  emailError,
+  submitLabel,
+  pendingLabel,
+  success,
+  error,
+  note,
+  progress = 65,
+  icon,
+  onSubscribe,
+  disabled,
+  className,
+  ...props
+}: ErrorStateMaintenanceModeProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const stageId = React.useId()
+  const [status, setStatus] = React.useState<Status>("idle")
+  const [emailInvalid, setEmailInvalid] = React.useState(false)
+  const pending = status === "pending"
+  const pill = badge ?? copy.badge
+  const small = note ?? copy.note
+  const percent = Math.round(Math.min(100, Math.max(0, progress)))
+  const placeholder = emailPlaceholder ?? copy.emailPlaceholder
+  const glyph = icon === undefined ? <Wrench size={30} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-[30px]" /> : icon
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement
+    if (!email.checkValidity()) {
+      setEmailInvalid(true)
+      email.focus()
+      return
+    }
+    setEmailInvalid(false)
+    // Nothing to send the sign-up with: say so rather than confirm it.
+    if (!onSubscribe) return setStatus("error")
+    setStatus("pending")
+    try {
+      await onSubscribe(email.value.trim())
+      setStatus("success")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[620px] flex-col items-center gap-6 text-center md:max-w-none md:gap-7 lg:max-w-[620px]">
+        {glyph ? (
+          <div className="flex size-14 items-center justify-center rounded-xl border border-border bg-card text-foreground shadow-sm md:size-[72px]">
+            {glyph}
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col items-center gap-3">
+          {pill ? (
+            <Badge variant="soft" tone="warning">
+              {pill}
+            </Badge>
+          ) : null}
+          <h1 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <div className="flex w-full flex-col gap-2.5">
+          <Progress value={percent} showPercentage={false} aria-labelledby={stageId} />
+          <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
+            <span id={stageId}>{stage ?? copy.stage}</span>
+            <span className="font-medium">{(complete ?? copy.complete)(percent)}</span>
+          </div>
+        </div>
+        {status === "success" ? (
+          <p role="status" className="text-sm text-foreground">
+            {success ?? copy.success}
+          </p>
+        ) : (
+          <div className="flex w-full flex-col items-center gap-2 md:w-[460px]">
+            <form
+              noValidate
+              onSubmit={handleSubmit}
+              className="flex w-full flex-col items-stretch gap-2.5 text-start md:flex-row md:items-start md:gap-3"
+            >
+              <Input
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                placeholder={placeholder}
+                aria-label={placeholder}
+                startIcon={<Mail size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" />}
+                invalid={emailInvalid}
+                error={emailError ?? copy.emailError}
+                disabled={disabled || pending}
+                onChange={() => emailInvalid && setEmailInvalid(false)}
+                className="md:flex-1"
+              />
+              <Button type="submit" loading={pending} loadingLabel={pendingLabel ?? copy.pendingLabel} disabled={disabled}>
+                {submitLabel ?? copy.submitLabel}
+              </Button>
+            </form>
+            <p role="status" className="text-sm text-destructive empty:hidden">
+              {status === "error" ? (error ?? copy.error) : null}
+            </p>
+          </div>
+        )}
+        {small ? <p className="text-xs text-muted-foreground">{small}</p> : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateMaintenanceModeCopy = COPY

package/registry/blocks/error-state-maintenance-mode/index.ts

@@ -0,0 +1,6 @@
+export {
+  ErrorStateMaintenanceMode,
+  errorStateMaintenanceModeCopy,
+  type ErrorStateMaintenanceModeCopy,
+  type ErrorStateMaintenanceModeProps,
+} from "./ErrorStateMaintenanceMode"

package/registry/blocks/error-state-marquee-404-band/ErrorStateMarquee404Band.tsx

@@ -0,0 +1,316 @@
+"use client"
+
+import * as React from "react"
+import { CircleDot, Pause, Play, Signpost } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Marquee 404 Band.
+ *
+ * A centred message between two tickers on inverted bands. The bands are
+ * painted with the inverse tokens, the only way Fasla inverts a surface: dark
+ * in Light, light in Dark. The theme-inverse registry item maps them, falling
+ * back to the page colours swapped in a theme without them.
+ *
+ * The tickers scroll for real, as Figma's motion notes ask: the top one
+ * toward the start of the line and the bottom one toward its end, at 55px a
+ * second (half that below Tablet), each looping seamlessly over a duplicate of
+ * its run. Hovering a band eases it to a stop over 300ms, and leaving it eases
+ * it back. In Arabic the start is the right, so both swap directions. Under
+ * `prefers-reduced-motion: reduce` neither moves. The animation is the Web
+ * Animations API, so the block needs no keyframes in your Tailwind config.
+ *
+ * A pause button at the end of the bottom band stops both tickers and starts
+ * them again, for keyboard and touch as well as the mouse. It is not in
+ * Figma: moving content needs a way to stop it (WCAG 2.2.2). It is hidden
+ * under reduced motion, when there is nothing to stop.
+ *
+ * The tickers repeat the heading's news, so they are hidden from assistive
+ * technology; the heading carries it. The signpost is a pictogram and is never
+ * mirrored. Mobile first: the base classes are Figma's Mobile (360), `md:` its
+ * Tablet (768) and `lg:` its Desktop (1440).
+ */
+
+export interface ErrorStateMarquee404BandAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateMarquee404BandCopy {
+  /** The code in each ticker, in the inverse foreground. */
+  tickerCode: React.ReactNode
+  /** The words after it in each ticker, in the muted inverse foreground. */
+  tickerLabel: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateMarquee404BandAction
+  /** The outline button beside it. Hidden when null. */
+  secondaryAction: ErrorStateMarquee404BandAction | null
+  /** The pause button's accessible name while the tickers move. */
+  pauseLabel: string
+  /** Its accessible name while they are paused. */
+  playLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateMarquee404BandCopy> = {
+  en: {
+    tickerCode: "404",
+    tickerLabel: "PAGE NOT FOUND",
+    heading: "Nothing lives at this address",
+    description:
+      "The link may be old, or the page may have been renamed. Everything else on Fasla is exactly where it should be.",
+    primaryAction: { label: "Take me home", href: "/" },
+    secondaryAction: { label: "Search the site", href: "#search" },
+    pauseLabel: "Pause the animation",
+    playLabel: "Play the animation",
+  },
+  ar: {
+    tickerCode: "404",
+    tickerLabel: "الصفحة غير موجودة",
+    heading: "لا يوجد شيء على هذا العنوان",
+    description: "قد يكون الرابط قديمًا، أو أُعيدت تسمية الصفحة. كل شيء آخر في فاصلة في مكانه تمامًا.",
+    primaryAction: { label: "خذني إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "ابحث في الموقع", href: "#search" },
+    pauseLabel: "إيقاف الحركة مؤقتًا",
+    playLabel: "تشغيل الحركة",
+  },
+}
+
+/** Figma's speed, in pixels a second, from Tablet up; below Tablet it is halved. */
+const SPEED = 55
+/** Code-and-label pairs in one run: wide enough to fill a 2560px screen before the duplicate. */
+const RUN_LENGTH = 8
+/** How long a band takes to ease to a stop on hover, and back. */
+const EASE_MS = 300
+
+/** Whether the visitor asks for reduced motion, kept up to date. False on the server. */
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false)
+  React.useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const update = () => setReduced(query.matches)
+    update()
+    query.addEventListener("change", update)
+    return () => query.removeEventListener("change", update)
+  }, [])
+  return reduced
+}
+
+function Ticker({
+  code,
+  label,
+  toward,
+  paused,
+  children,
+}: {
+  code: React.ReactNode
+  label: React.ReactNode
+  /** Which end of the line the run travels toward. */
+  toward: "start" | "end"
+  /** Stopped with the pause button. */
+  paused: boolean
+  /** Sits over the band's end: the pause button. */
+  children?: React.ReactNode
+}) {
+  const trackRef = React.useRef<HTMLDivElement>(null)
+  const runRef = React.useRef<HTMLDivElement>(null)
+  const animationRef = React.useRef<Animation | null>(null)
+  const easeFrame = React.useRef(0)
+  const pausedRef = React.useRef(paused)
+  pausedRef.current = paused
+
+  React.useEffect(() => {
+    const track = trackRef.current
+    const run = runRef.current
+    if (!track || !run || typeof track.animate !== "function") return
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const tablet = window.matchMedia("(min-width: 768px)")
+
+    const play = () => {
+      animationRef.current?.cancel()
+      animationRef.current = null
+      const width = run.getBoundingClientRect().width
+      if (reduce.matches || width === 0) return
+      // The duplicate run follows the first toward the line's end, so moving
+      // toward the start slides it in. The start is the left in LTR and the
+      // right in RTL.
+      const rtl = getComputedStyle(track).direction === "rtl"
+      const shift = (rtl ? 1 : -1) * width
+      const from = toward === "start" ? 0 : shift
+      const to = toward === "start" ? shift : 0
+      const speed = tablet.matches ? SPEED : SPEED / 2
+      animationRef.current = track.animate(
+        [{ transform: `translateX(${from}px)` }, { transform: `translateX(${to}px)` }],
+        { duration: (width / speed) * 1000, iterations: Infinity, easing: "linear" }
+      )
+      // A resize restarts the run; a paused band stays still.
+      if (pausedRef.current) animationRef.current.playbackRate = 0
+    }
+
+    play()
+    const observer = new ResizeObserver(play)
+    observer.observe(run)
+    reduce.addEventListener("change", play)
+    tablet.addEventListener("change", play)
+    return () => {
+      observer.disconnect()
+      reduce.removeEventListener("change", play)
+      tablet.removeEventListener("change", play)
+      cancelAnimationFrame(easeFrame.current)
+      animationRef.current?.cancel()
+      animationRef.current = null
+    }
+  }, [toward])
+
+  /** Eases the band's speed to `target` (0 stops it, 1 is full speed). */
+  const easeTo = (target: number) => {
+    const animation = animationRef.current
+    if (!animation) return
+    cancelAnimationFrame(easeFrame.current)
+    const from = animation.playbackRate
+    const began = performance.now()
+    const step = (now: number) => {
+      const t = Math.min(1, (now - began) / EASE_MS)
+      animation.playbackRate = from + (target - from) * (1 - (1 - t) * (1 - t))
+      if (t < 1) easeFrame.current = requestAnimationFrame(step)
+    }
+    easeFrame.current = requestAnimationFrame(step)
+  }
+
+  // The pause button eases the band to a stop, and back, as hovering does.
+  React.useEffect(() => {
+    easeTo(paused ? 0 : 1)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused])
+
+  const pairs = Array.from({ length: RUN_LENGTH }, (_, index) => (
+    <React.Fragment key={index}>
+      <span className="text-foreground-inverse">{code}</span>
+      <CircleDot size={12} strokeWidth={1.5} absoluteStrokeWidth className="size-3 shrink-0 text-muted-foreground-inverse" />
+      <span className="whitespace-nowrap text-muted-foreground-inverse">{label}</span>
+      <CircleDot size={12} strokeWidth={1.5} absoluteStrokeWidth className="size-3 shrink-0 text-muted-foreground-inverse" />
+    </React.Fragment>
+  ))
+
+  return (
+    <div className="relative">
+      <div
+        aria-hidden="true"
+        onPointerEnter={() => easeTo(0)}
+        onPointerLeave={() => {
+          if (!pausedRef.current) easeTo(1)
+        }}
+        className="flex h-14 items-center overflow-hidden bg-background-inverse ps-6 text-lg font-semibold md:h-[68px] md:text-xl lg:h-[76px]"
+      >
+        <div ref={trackRef} className="flex w-max shrink-0">
+          <div ref={runRef} className="flex shrink-0 items-center gap-4 pe-4 md:gap-6 md:pe-6">
+            {pairs}
+          </div>
+          <div className="flex shrink-0 items-center gap-4 pe-4 md:gap-6 md:pe-6">{pairs}</div>
+        </div>
+      </div>
+      {children ? (
+        <div className="absolute inset-y-0 end-0 flex items-center bg-background-inverse pe-4 ps-3 md:pe-6">{children}</div>
+      ) : null}
+    </div>
+  )
+}
+
+export interface ErrorStateMarquee404BandProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateMarquee404BandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The glyph in the badge. Pass `null` to drop the badge.
+   * @default a signpost
+   */
+  icon?: React.ReactNode
+}
+
+export function ErrorStateMarquee404Band({
+  locale = "en",
+  tickerCode,
+  tickerLabel,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  pauseLabel,
+  playLabel,
+  icon,
+  className,
+  ...props
+}: ErrorStateMarquee404BandProps) {
+  const copy = COPY[locale]
+  const reduced = usePrefersReducedMotion()
+  const [paused, setPaused] = React.useState(false)
+  const headingId = React.useId()
+  const code = tickerCode ?? copy.tickerCode
+  const label = tickerLabel ?? copy.tickerLabel
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const glyph = icon === undefined ? <Signpost aria-hidden="true" size={28} strokeWidth={1.5} absoluteStrokeWidth className="size-7" /> : icon
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background", className)} {...props}>
+      <Ticker code={code} label={label} toward="start" paused={paused} />
+
+      <div className="p-8 md:px-16 md:py-12 lg:px-24 lg:py-16">
+        <div className="mx-auto flex w-full max-w-[600px] flex-col items-center gap-6 text-center">
+          {glyph ? (
+            <div className="flex size-14 items-center justify-center rounded-full bg-muted text-muted-foreground md:size-16">
+              {glyph}
+            </div>
+          ) : null}
+          <div className="flex w-full flex-col gap-2.5">
+            <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+              {heading ?? copy.heading}
+            </h1>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </div>
+          <div className="flex flex-wrap justify-center gap-3">
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+                {secondary.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <Ticker code={code} label={label} toward="end" paused={paused}>
+        {reduced ? null : (
+          <Button
+            type="button"
+            variant="secondary"
+            size="icon-sm"
+            aria-label={paused ? playLabel ?? copy.playLabel : pauseLabel ?? copy.pauseLabel}
+            onClick={() => setPaused((value) => !value)}
+            className="after:ring-foreground-inverse"
+          >
+            {paused ? (
+              <Play aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth />
+            ) : (
+              <Pause aria-hidden="true" size={16} strokeWidth={1.5} absoluteStrokeWidth />
+            )}
+          </Button>
+        )}
+      </Ticker>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateMarquee404BandCopy = COPY

package/registry/blocks/error-state-marquee-404-band/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateMarquee404Band,
+  errorStateMarquee404BandCopy,
+  type ErrorStateMarquee404BandAction,
+  type ErrorStateMarquee404BandCopy,
+  type ErrorStateMarquee404BandProps,
+} from "./ErrorStateMarquee404Band"