@passui/react 0.0.0-stage → 0.1.14

package/src/components/text-field/examples/text-field-showcase.tsx

@@ -0,0 +1,50 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function TextFieldShowcase() {
+    const [name, setName] = useState("Aiko Kamado")
+    const [role, setRole] = useState("Product designer")
+    const [site, setSite] = useState("")
+
+    return (
+        <form
+            className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
+            onSubmit={(event) => {
+                event.preventDefault()
+                toast.success("Profile updated")
+            }}
+        >
+            <h2 className="text-headline font-semibold text-label">
+                Edit profile
+            </h2>
+            <TextField
+                label="Name"
+                value={name}
+                onChange={(event) =>
+                    setName(event.target.value)
+                }
+            />
+            <TextField
+                label="Role"
+                value={role}
+                onChange={(event) =>
+                    setRole(event.target.value)
+                }
+            />
+            <TextField
+                label="Website"
+                placeholder="example.com"
+                description="Shown on your public profile."
+                value={site}
+                onChange={(event) =>
+                    setSite(event.target.value)
+                }
+            />
+            <Button type="submit" variant="accent">
+                Save profile
+            </Button>
+        </form>
+    )
+}

package/src/components/text-field/examples/text-field-usage.tsx

@@ -0,0 +1,18 @@
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function TextFieldUsage() {
+    const [name, setName] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <TextField
+                label="Name"
+                placeholder="Aiko Kamado"
+                value={name}
+                onChange={(event) =>
+                    setName(event.target.value)
+                }
+            />
+        </div>
+    )
+}

package/src/components/text-field/examples/text-field-validation.tsx

@@ -0,0 +1,27 @@
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function TextFieldValidation() {
+    const [email, setEmail] = useState("aiko@")
+    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+
+    return (
+        <div className="w-full max-w-xs">
+            <TextField
+                label="Email"
+                type="email"
+                description="We only use it to sign you in."
+                value={email}
+                aria-invalid={!valid}
+                errors={
+                    valid
+                        ? []
+                        : ["Enter a full email address."]
+                }
+                onChange={(event) =>
+                    setEmail(event.target.value)
+                }
+            />
+        </div>
+    )
+}

package/src/components/text-field/text-field.docs.tsx

@@ -0,0 +1,118 @@
+import {
+    Mail01Icon,
+    Tick02Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { TextFieldIcons } from "./examples/text-field-icons"
+import { TextFieldShowcase } from "./examples/text-field-showcase"
+import { TextFieldUsage } from "./examples/text-field-usage"
+import { TextFieldValidation } from "./examples/text-field-validation"
+import { TextField, type TextFieldProps } from "./text-field"
+
+// The icons are nodes, so the playground offers a switch for each and
+// the snippet writes the icon itself.
+type DemoProps = Pick<
+    TextFieldProps,
+    "label" | "placeholder" | "disabled"
+> & {
+    icon?: boolean
+    trailingIcon?: boolean
+}
+
+function TextFieldDemo({
+    icon,
+    trailingIcon,
+    ...props
+}: DemoProps) {
+    const [value, setValue] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <TextField
+                {...props}
+                icon={
+                    icon && (
+                        <HugeiconsIcon
+                            icon={Mail01Icon}
+                            size={18}
+                        />
+                    )
+                }
+                trailingIcon={
+                    trailingIcon && (
+                        <HugeiconsIcon
+                            icon={Tick02Icon}
+                            size={18}
+                        />
+                    )
+                }
+                value={value}
+                onChange={(event) =>
+                    setValue(event.target.value)
+                }
+            />
+        </div>
+    )
+}
+
+export const textFieldDocs = defineDocs<DemoProps>()({
+    slug: "text-field",
+    name: "TextField",
+    importPath: "@passui/react/text-field",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Email",
+            required: true,
+        },
+        placeholder: {
+            kind: "text",
+            default: "you@example.com",
+        },
+        disabled: { kind: "boolean", default: false },
+        icon: { kind: "boolean", default: false },
+        trailingIcon: { kind: "boolean", default: false },
+    },
+    render: (values) => <TextFieldDemo {...values} />,
+    childrenSnippet: ({ icon, trailingIcon }) => ({
+        imports: [
+            'import { useState } from "react"',
+            ...(icon || trailingIcon
+                ? [
+                      `import { ${[icon && "Mail01Icon", trailingIcon && "Tick02Icon"].filter(Boolean).join(", ")} } from "@hugeicons/core-free-icons"`,
+                      'import { HugeiconsIcon } from "@hugeicons/react"',
+                  ]
+                : []),
+        ],
+        setup: ['const [value, setValue] = useState("")'],
+        children: "",
+        omit: ["icon", "trailingIcon"],
+        expressionProps: {
+            ...(icon
+                ? {
+                      icon: "<HugeiconsIcon icon={Mail01Icon} size={18} />",
+                  }
+                : {}),
+            ...(trailingIcon
+                ? {
+                      trailingIcon:
+                          "<HugeiconsIcon icon={Tick02Icon} size={18} />",
+                  }
+                : {}),
+            value: "value",
+            onChange:
+                "(event) => setValue(event.target.value)",
+        },
+    }),
+    usage: TextFieldUsage,
+    showcase: TextFieldShowcase,
+    examples: [
+        {
+            id: "icons",
+            component: TextFieldIcons,
+            playground: { icon: true, trailingIcon: true },
+        },
+        { id: "validation", component: TextFieldValidation },
+    ],
+})

package/src/components/text-field/text-field.tsx

@@ -0,0 +1,135 @@
+import {
+    type ComponentProps,
+    type ReactNode,
+    useId,
+    useState,
+} from "react"
+import { Button } from "../button/button"
+import { cn } from "../../lib/class-names"
+
+export const textControlClasses = cn(
+    "w-full min-w-0 rounded-xl border border-separator bg-elevated",
+    "px-3 py-2 text-body text-label placeholder:text-label-tertiary",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+    "disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger"
+)
+
+const fieldIconClasses =
+    "flex shrink-0 items-center text-label-secondary"
+
+export type TextFieldProps = ComponentProps<"input"> & {
+    label: string
+    description?: ReactNode
+    errors?: string[]
+    /** A decorative icon before the text, such as a mail glyph. */
+    icon?: ReactNode
+    /** A decorative icon after the text, such as a unit or a check. */
+    trailingIcon?: ReactNode
+    /** An interactive control after the text, such as a clear button. Size it to the field: an `xs` or `icon-xs` button, never the default. */
+    action?: ReactNode
+    revealLabels?: { show: string; hide: string }
+}
+
+export function TextField({
+    label,
+    description,
+    errors = [],
+    icon,
+    trailingIcon,
+    action,
+    revealLabels,
+    type = "text",
+    id: suppliedId,
+    className,
+    ...props
+}: TextFieldProps) {
+    const generatedId = useId()
+    const id = suppliedId ?? generatedId
+    const [revealed, setRevealed] = useState(false)
+    const messages = Array.from(new Set(errors))
+    const reveal = type === "password" && revealLabels
+    return (
+        <div className="flex flex-col gap-2">
+            <label
+                htmlFor={id}
+                className="text-subheadline font-semibold"
+            >
+                {label}
+            </label>
+            <div className="flex items-center gap-2 rounded-xl border border-separator bg-elevated px-3 focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70">
+                {icon && (
+                    <span
+                        aria-hidden
+                        className={fieldIconClasses}
+                    >
+                        {icon}
+                    </span>
+                )}
+                <input
+                    {...props}
+                    id={id}
+                    type={reveal && revealed ? "text" : type}
+                    aria-invalid={messages.length > 0}
+                    aria-describedby={
+                        messages.length || description
+                            ? `${id}-description`
+                            : undefined
+                    }
+                    className={cn(
+                        "h-11 w-full min-w-0 bg-transparent text-body text-label outline-none",
+                        "placeholder:text-label-tertiary disabled:opacity-40",
+                        className
+                    )}
+                />
+                {trailingIcon && (
+                    <span
+                        aria-hidden
+                        className={fieldIconClasses}
+                    >
+                        {trailingIcon}
+                    </span>
+                )}
+                {reveal && (
+                    <Button
+                        variant="ghost"
+                        size="xs"
+                        // sized to sit inside the 44px field; on touch a
+                        // wider invisible area keeps a 44px target
+                        className="-mr-1.5 shrink-0 whitespace-nowrap [@media(pointer:coarse)]:before:absolute [@media(pointer:coarse)]:before:-inset-1.5 [@media(pointer:coarse)]:before:content-['']"
+                        aria-controls={id}
+                        aria-label={
+                            revealed
+                                ? revealLabels.hide
+                                : revealLabels.show
+                        }
+                        aria-pressed={revealed}
+                        onClick={() => setRevealed(!revealed)}
+                    >
+                        {revealed
+                            ? revealLabels.hide
+                            : revealLabels.show}
+                    </Button>
+                )}
+                {action}
+            </div>
+            {(messages.length > 0 || description) && (
+                <div
+                    id={`${id}-description`}
+                    role={
+                        messages.length ? "alert" : undefined
+                    }
+                    className={cn(
+                        "text-footnote",
+                        messages.length
+                            ? "text-danger"
+                            : "text-label-secondary"
+                    )}
+                >
+                    {messages.length
+                        ? messages.join(". ")
+                        : description}
+                </div>
+            )}
+        </div>
+    )
+}

package/src/components/toast/examples/toast-action.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@passui/react/button"
+import { toast } from "@passui/react/toast"
+import { useState } from "react"
+
+export function ToastAction() {
+    const [archived, setArchived] = useState(0)
+
+    return (
+        <div className="flex flex-col items-center gap-3">
+            <Button
+                variant="secondary"
+                onClick={() => {
+                    setArchived((count) => count + 1)
+                    toast("Note archived", {
+                        action: {
+                            label: "Undo",
+                            onClick: () =>
+                                setArchived(
+                                    (count) => count - 1
+                                ),
+                        },
+                    })
+                }}
+            >
+                Archive note
+            </Button>
+            <p className="text-footnote text-label-secondary">
+                Archived: {archived}
+            </p>
+        </div>
+    )
+}

package/src/components/toast/examples/toast-promise.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@passui/react/button"
+import { toast } from "@passui/react/toast"
+
+function upload(fails: boolean) {
+    return new Promise<string>((resolve, reject) =>
+        setTimeout(
+            () =>
+                fails
+                    ? reject(new Error("offline"))
+                    : resolve("photo.jpg"),
+            1600
+        )
+    )
+}
+
+export function ToastPromise() {
+    return (
+        <div className="flex flex-wrap justify-center gap-2">
+            <Button
+                variant="secondary"
+                onClick={() =>
+                    toast.promise(upload(false), {
+                        loading: "Uploading",
+                        success: (name) => `${name} uploaded`,
+                        error: "Upload failed",
+                    })
+                }
+            >
+                Upload
+            </Button>
+            <Button
+                variant="secondary"
+                onClick={() =>
+                    toast.promise(upload(true), {
+                        loading: "Uploading",
+                        success: "Uploaded",
+                        error: "Upload failed. Check your connection.",
+                    })
+                }
+            >
+                Upload while offline
+            </Button>
+        </div>
+    )
+}

package/src/components/toast/examples/toast-showcase.tsx

@@ -0,0 +1,49 @@
+import { LabeledContent, Section } from "@passui/react"
+import { toast } from "@passui/react/toast"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function ToastShowcase() {
+    const [backups, setBackups] = useState(true)
+    const [alerts, setAlerts] = useState(false)
+
+    return (
+        <div className="w-full max-w-sm">
+            <Section
+                title="Account"
+                footer="Each change saves at once and confirms with a toast."
+            >
+                <LabeledContent label="Daily backups">
+                    <Toggle
+                        label="Daily backups"
+                        labelHidden
+                        checked={backups}
+                        onChange={(checked) => {
+                            setBackups(checked)
+                            toast.success(
+                                checked
+                                    ? "Backups turned on"
+                                    : "Backups turned off"
+                            )
+                        }}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Sign-in alerts">
+                    <Toggle
+                        label="Sign-in alerts"
+                        labelHidden
+                        checked={alerts}
+                        onChange={(checked) => {
+                            setAlerts(checked)
+                            toast(
+                                checked
+                                    ? "We'll email you about new sign-ins"
+                                    : "Sign-in alerts turned off"
+                            )
+                        }}
+                    />
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/toast/examples/toast-usage.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@passui/react/button"
+import { toast } from "@passui/react/toast"
+
+export function ToastUsage() {
+    // render one <Toaster /> near the root of your app
+    return (
+        <Button
+            onClick={() => toast.success("Changes saved")}
+        >
+            Save
+        </Button>
+    )
+}

package/src/components/toast/toast-store.ts

@@ -0,0 +1,166 @@
+/**
+ * App-wide toasts: short messages that confirm, report progress or explain
+ * a failure. Call `toast` from anywhere; render one `<Toaster />`.
+ */
+export type ToastTone =
+    | "neutral"
+    | "success"
+    | "error"
+    | "loading"
+
+export interface ToastAction {
+    label: string
+    onClick: () => void
+}
+
+export interface Toast {
+    id: number
+    tone: ToastTone
+    title: string
+    description?: string
+    action?: ToastAction
+    /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
+    duration: number | null
+    createdAt: number
+}
+
+export interface ToastOptions {
+    description?: string
+    action?: ToastAction
+    duration?: number | null
+}
+
+const DEFAULT_DURATION = 4200
+const MAX_VISIBLE = 3
+
+let toasts: Toast[] = []
+let nextId = 1
+const listeners = new Set<() => void>()
+
+const emit = () => {
+    for (const listener of listeners) listener()
+}
+
+function show(
+    tone: ToastTone,
+    title: string,
+    options: ToastOptions = {}
+): number {
+    const id = nextId++
+    const duration =
+        options.duration !== undefined
+            ? options.duration
+            : tone === "loading"
+              ? null
+              : DEFAULT_DURATION
+    toasts = [
+        {
+            id,
+            tone,
+            title,
+            description: options.description,
+            action: options.action,
+            duration,
+            createdAt: Date.now(),
+        },
+        ...toasts,
+    ].slice(0, MAX_VISIBLE + 2)
+    emit()
+    return id
+}
+
+/** Changes a toast in place; it morphs to its new state. */
+function update(
+    id: number,
+    tone: ToastTone,
+    title: string,
+    options: ToastOptions = {}
+) {
+    if (!toasts.some((t) => t.id === id))
+        return show(tone, title, options)
+    toasts = toasts.map((t) =>
+        t.id === id
+            ? {
+                  ...t,
+                  tone,
+                  title,
+                  description: options.description,
+                  action: options.action,
+                  duration:
+                      options.duration !== undefined
+                          ? options.duration
+                          : tone === "loading"
+                            ? null
+                            : DEFAULT_DURATION,
+                  createdAt: Date.now(),
+              }
+            : t
+    )
+    emit()
+    return id
+}
+
+function dismiss(id: number) {
+    toasts = toasts.filter((t) => t.id !== id)
+    emit()
+}
+
+interface PromiseMessages<T> {
+    loading: string
+    success: string | ((value: T) => string)
+    error: string | ((error: unknown) => string)
+}
+
+export const toast = Object.assign(
+    (title: string, options?: ToastOptions) =>
+        show("neutral", title, options),
+    {
+        success: (title: string, options?: ToastOptions) =>
+            show("success", title, options),
+        error: (title: string, options?: ToastOptions) =>
+            show("error", title, options),
+        loading: (title: string, options?: ToastOptions) =>
+            show("loading", title, options),
+        update,
+        dismiss,
+        /** Shows progress, then morphs into the outcome. Returns the promise. */
+        promise<T>(
+            promise: Promise<T>,
+            messages: PromiseMessages<T>
+        ): Promise<T> {
+            const id = show("loading", messages.loading)
+            promise.then(
+                (value) =>
+                    update(
+                        id,
+                        "success",
+                        typeof messages.success === "function"
+                            ? messages.success(value)
+                            : messages.success
+                    ),
+                (error: unknown) =>
+                    update(
+                        id,
+                        "error",
+                        typeof messages.error === "function"
+                            ? messages.error(error)
+                            : messages.error
+                    )
+            )
+            return promise
+        },
+    }
+)
+
+export function subscribeToasts(listener: () => void) {
+    listeners.add(listener)
+    return () => {
+        listeners.delete(listener)
+    }
+}
+
+export function getToasts(): Toast[] {
+    return toasts
+}
+
+export const toastLimits = { visible: MAX_VISIBLE } as const