@passui/react 0.0.0-stage → 0.1.15

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

@@ -0,0 +1,72 @@
+import {
+    Link01Icon,
+    Mail01Icon,
+    Search01Icon,
+    Tick02Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function TextFieldIcons() {
+    const [email, setEmail] = useState("aiko@example.com")
+    const [site, setSite] = useState("")
+    const [query, setQuery] = useState("")
+    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+
+    return (
+        <div className="flex w-full max-w-xs flex-col gap-4">
+            <TextField
+                label="Email"
+                type="email"
+                icon={
+                    <HugeiconsIcon
+                        icon={Mail01Icon}
+                        size={18}
+                    />
+                }
+                trailingIcon={
+                    valid && (
+                        <HugeiconsIcon
+                            icon={Tick02Icon}
+                            size={18}
+                            className="text-success"
+                        />
+                    )
+                }
+                value={email}
+                onChange={(event) =>
+                    setEmail(event.target.value)
+                }
+            />
+            <TextField
+                label="Website"
+                placeholder="example.com"
+                icon={
+                    <HugeiconsIcon
+                        icon={Link01Icon}
+                        size={18}
+                    />
+                }
+                value={site}
+                onChange={(event) =>
+                    setSite(event.target.value)
+                }
+            />
+            <TextField
+                label="Find a member"
+                placeholder="Name or email"
+                icon={
+                    <HugeiconsIcon
+                        icon={Search01Icon}
+                        size={18}
+                    />
+                }
+                value={query}
+                onChange={(event) =>
+                    setQuery(event.target.value)
+                }
+            />
+        </div>
+    )
+}

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>
+    )
+}