@passui/react 0.0.0-stage → 0.1.14

package/src/components/search-list/search-list.tsx

@@ -0,0 +1,265 @@
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useId,
+    useRef,
+    useState,
+    useEffect,
+    type ComponentProps,
+} from "react"
+import { cn } from "../../lib/class-names"
+
+type SearchState = {
+    query: string
+    setQuery: (query: string) => void
+    active: string
+    listId: string
+    open: boolean
+    visible: number
+    register: (id: string, visible: boolean | null) => void
+}
+const SearchContext = createContext<SearchState | null>(null)
+function useSearch() {
+    const search = useContext(SearchContext)
+    if (!search)
+        throw new Error(
+            "Search list controls need a SearchList parent"
+        )
+    return search
+}
+
+export function SearchList({
+    loop: _loop,
+    open = true,
+    onKeyDown,
+    className,
+    ...props
+}: ComponentProps<"div"> & {
+    loop?: boolean
+    open?: boolean
+}) {
+    const [query, setQuery] = useState("")
+    const [active, setActive] = useState("")
+    const [results, setResults] = useState<
+        Record<string, boolean>
+    >({})
+    const listId = useId()
+    const ref = useRef<HTMLDivElement>(null)
+    const register = useCallback(
+        (id: string, visible: boolean | null) =>
+            setResults((previous) => {
+                if (visible === null) {
+                    const next = { ...previous }
+                    delete next[id]
+                    return next
+                }
+                if (previous[id] === visible) return previous
+                return { ...previous, [id]: visible }
+            }),
+        []
+    )
+    return (
+        <SearchContext
+            value={{
+                query,
+                setQuery: (next) => {
+                    setQuery(next)
+                    setActive("")
+                },
+                active,
+                listId,
+                open,
+                visible:
+                    Object.values(results).filter(Boolean)
+                        .length,
+                register,
+            }}
+        >
+            <div
+                {...props}
+                ref={ref}
+                className={cn("relative", className)}
+                onKeyDown={(event) => {
+                    onKeyDown?.(event)
+                    if (event.defaultPrevented || !open)
+                        return
+                    const items = Array.from(
+                        ref.current?.querySelectorAll<HTMLButtonElement>(
+                            "[data-search-result]:not([hidden]):not(:disabled)"
+                        ) ?? []
+                    )
+                    if (!items.length) return
+                    const index = items.findIndex(
+                        (item) => item.id === active
+                    )
+                    if (event.key === "Enter") {
+                        event.preventDefault()
+                        ;(items[index] ?? items[0])?.click()
+                        return
+                    }
+                    if (
+                        event.key !== "ArrowDown" &&
+                        event.key !== "ArrowUp"
+                    )
+                        return
+                    event.preventDefault()
+                    const next =
+                        index < 0
+                            ? event.key === "ArrowDown"
+                                ? 0
+                                : items.length - 1
+                            : (index +
+                                  (event.key === "ArrowDown"
+                                      ? 1
+                                      : -1) +
+                                  items.length) %
+                              items.length
+                    const item = items[next]
+                    if (!item) return
+                    setActive(item.id)
+                    item.scrollIntoView({
+                        block: "nearest",
+                    })
+                }}
+            />
+        </SearchContext>
+    )
+}
+export function SearchListField({
+    value,
+    onValueChange,
+    className,
+    ...props
+}: Omit<ComponentProps<"input">, "value" | "onChange"> & {
+    value?: string
+    onValueChange?: (value: string) => void
+}) {
+    const search = useSearch()
+    return (
+        <input
+            {...props}
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={search.open}
+            aria-controls={search.listId}
+            aria-activedescendant={
+                search.open && search.active
+                    ? search.active
+                    : undefined
+            }
+            aria-label={
+                props["aria-label"] ?? props.placeholder
+            }
+            value={value ?? search.query}
+            onChange={(event) => {
+                search.setQuery(event.target.value)
+                onValueChange?.(event.target.value)
+            }}
+            className={cn(
+                "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+                className
+            )}
+        />
+    )
+}
+export function SearchListResults({
+    className,
+    ...props
+}: ComponentProps<"div">) {
+    const search = useSearch()
+    return (
+        <div
+            {...props}
+            id={search.listId}
+            role="listbox"
+            hidden={!search.open}
+            className={cn("overflow-y-auto p-1", className)}
+        />
+    )
+}
+export function SearchListEmpty(
+    props: ComponentProps<"div">
+) {
+    const search = useSearch()
+    return search.visible ? null : (
+        <div {...props} role="status" />
+    )
+}
+export function SearchListGroup({
+    heading,
+    children,
+    className,
+    ...props
+}: ComponentProps<"fieldset"> & {
+    heading?: React.ReactNode
+}) {
+    const id = useId()
+    return (
+        <fieldset
+            {...props}
+            className={cn(
+                "not-has-[[data-search-result]:not([hidden])]:hidden",
+                className
+            )}
+            aria-labelledby={heading ? id : undefined}
+        >
+            {heading && (
+                <legend
+                    id={id}
+                    className="px-2 py-2 text-caption font-medium text-label-tertiary"
+                >
+                    {heading}
+                </legend>
+            )}
+            {children}
+        </fieldset>
+    )
+}
+export function SearchListItem({
+    value,
+    keywords = [],
+    onSelect,
+    className,
+    ...props
+}: Omit<ComponentProps<"button">, "value" | "onSelect"> & {
+    value: string
+    keywords?: string[]
+    onSelect?: (value: string) => void
+}) {
+    const search = useSearch()
+    const id = useId()
+    const haystack = [value, ...keywords]
+        .join(" ")
+        .toLocaleLowerCase()
+    const visible = search.query
+        .toLocaleLowerCase()
+        .trim()
+        .split(/\s+/)
+        .every((word) => haystack.includes(word))
+    useEffect(() => {
+        search.register(id, visible)
+        return () => search.register(id, null)
+    }, [id, visible, search.register])
+    return (
+        <button
+            {...props}
+            type="button"
+            id={id}
+            role="option"
+            tabIndex={-1}
+            hidden={!visible}
+            data-search-result=""
+            aria-selected={search.active === id}
+            data-selected={
+                search.active === id ? "true" : undefined
+            }
+            className={cn(
+                "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left hover:bg-fill aria-selected:bg-accent-soft",
+                className
+            )}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => onSelect?.(value)}
+        />
+    )
+}

package/src/components/section/examples/section-actions.tsx

@@ -0,0 +1,35 @@
+import { Section, toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+
+export function SectionActions() {
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-6">
+            <Section title="Data">
+                <Button
+                    variant="ghost"
+                    className="w-full justify-start rounded-none"
+                    onClick={() =>
+                        toast("Preparing your export")
+                    }
+                >
+                    Export my data
+                </Button>
+                <Button
+                    variant="ghost"
+                    className="w-full justify-start rounded-none"
+                    onClick={() => toast("Cache cleared")}
+                >
+                    Clear cache
+                </Button>
+            </Section>
+            <Section footer="This can't be undone.">
+                <Button
+                    variant="ghost"
+                    className="w-full justify-start rounded-none text-danger"
+                >
+                    Delete account
+                </Button>
+            </Section>
+        </div>
+    )
+}

package/src/components/section/examples/section-groups.tsx

@@ -0,0 +1,41 @@
+import { LabeledContent, Section } from "@passui/react"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function SectionGroups() {
+    const [passkeys, setPasskeys] = useState(true)
+    const [twoStep, setTwoStep] = useState(true)
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-6">
+            <Section title="Sign in">
+                <LabeledContent label="Passkeys">
+                    <Toggle
+                        label="Passkeys"
+                        labelHidden
+                        checked={passkeys}
+                        onChange={setPasskeys}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Two-step verification">
+                    <Toggle
+                        label="Two-step verification"
+                        labelHidden
+                        checked={twoStep}
+                        onChange={setTwoStep}
+                    />
+                </LabeledContent>
+            </Section>
+            <Section
+                title="Recovery"
+                footer="Used only if you lose access to every device."
+            >
+                <LabeledContent label="Recovery email">
+                    <span className="text-subheadline text-label-secondary">
+                        a•••@example.com
+                    </span>
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

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

@@ -0,0 +1,63 @@
+import {
+    LabeledContent,
+    Picker,
+    Section,
+} from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function SectionShowcase() {
+    const [backup, setBackup] = useState(true)
+    const [quality, setQuality] = useState("high")
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-6">
+            <Section
+                title="Storage"
+                footer="Backups run at night while charging."
+            >
+                <LabeledContent label="Back up automatically">
+                    <Toggle
+                        label="Back up automatically"
+                        labelHidden
+                        checked={backup}
+                        onChange={setBackup}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Photo quality">
+                    <Picker
+                        label="Photo quality"
+                        value={quality}
+                        onChange={setQuality}
+                        options={[
+                            { value: "high", label: "High" },
+                            {
+                                value: "saver",
+                                label: "Space saver",
+                            },
+                        ]}
+                    />
+                </LabeledContent>
+                <LabeledContent
+                    label="Used"
+                    description="12.4 GB of 50 GB"
+                >
+                    <span className="text-subheadline text-label-secondary">
+                        25%
+                    </span>
+                </LabeledContent>
+            </Section>
+            <Section>
+                <LabeledContent
+                    label="Free up space"
+                    description="Removes copies already backed up."
+                >
+                    <Button size="sm" variant="secondary">
+                        Review
+                    </Button>
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

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

@@ -0,0 +1,19 @@
+import { LabeledContent, Section } from "@passui/react"
+
+export function SectionUsage() {
+    return (
+        <div className="w-full max-w-sm">
+            <Section
+                title="Account"
+                footer="Your name appears on shared notes."
+            >
+                <LabeledContent label="Name">
+                    Aiko Kamado
+                </LabeledContent>
+                <LabeledContent label="Email">
+                    aiko@example.com
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/section/section.docs.tsx

@@ -0,0 +1,51 @@
+import { SectionActions } from "./examples/section-actions"
+import { SectionGroups } from "./examples/section-groups"
+import { defineDocs } from "../../docs/types"
+import { LabeledContent } from "../labeled-content/labeled-content"
+import { SectionShowcase } from "./examples/section-showcase"
+import { SectionUsage } from "./examples/section-usage"
+import { Section } from "./section"
+
+type DemoProps = { title?: string; footer?: string }
+
+export const sectionDocs = defineDocs<DemoProps>()({
+    slug: "section",
+    name: "Section",
+    importPath: "@passui/react",
+    controls: {
+        title: { kind: "text", default: "Account" },
+        footer: {
+            kind: "text",
+            default: "Your name appears on shared notes.",
+        },
+    },
+    render: (values) => (
+        <div className="w-full max-w-sm">
+            <Section {...values}>
+                <LabeledContent label="Name">
+                    <span className="text-subheadline text-label-secondary">
+                        Aiko Kamado
+                    </span>
+                </LabeledContent>
+                <LabeledContent label="Email">
+                    <span className="text-subheadline text-label-secondary">
+                        aiko@example.com
+                    </span>
+                </LabeledContent>
+            </Section>
+        </div>
+    ),
+    childrenSnippet: () => ({
+        imports: [
+            'import { LabeledContent } from "@passui/react"',
+        ],
+        children:
+            '<LabeledContent label="Name">Aiko Kamado</LabeledContent>',
+    }),
+    usage: SectionUsage,
+    showcase: SectionShowcase,
+    examples: [
+        { id: "groups", component: SectionGroups },
+        { id: "actions", component: SectionActions },
+    ],
+})

package/src/components/section/section.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react"
+
+/**
+ * A titled, inset group of rows with an optional footer, as in iOS Settings
+ * and SwiftUI's grouped `List` with `Section(header:footer:)`. Rows are
+ * usually `LabeledContent`; dividers between them come for free.
+ */
+export function Section({
+    title,
+    footer,
+    children,
+}: {
+    /** iOS groups can stand without a header. */
+    title?: string
+    footer?: ReactNode
+    children?: ReactNode
+}) {
+    return (
+        <section
+            aria-label={title}
+            className="flex flex-col gap-2"
+        >
+            {title && (
+                <h2 className="px-4 text-footnote font-medium text-label-tertiary">
+                    {title}
+                </h2>
+            )}
+            {/* A group can be only a note, e.g. where to find something on this device. */}
+            {children ? (
+                <div className="flex flex-col divide-y divide-separator/60 overflow-hidden rounded-3xl border border-separator/60 bg-elevated">
+                    {children}
+                </div>
+            ) : null}
+            {footer && (
+                <p className="px-4 text-caption leading-snug text-label-tertiary">
+                    {footer}
+                </p>
+            )}
+        </section>
+    )
+}

package/src/components/secure-field/examples/secure-field-new-password.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@passui/react/button"
+import { SecureField } from "@passui/react/secure-field"
+import { toast } from "@passui/react"
+import { useState } from "react"
+
+export function SecureFieldNewPassword() {
+    const [next, setNext] = useState("")
+    const [again, setAgain] = useState("")
+    const short = next.length > 0 && next.length < 12
+    const differs = again.length > 0 && again !== next
+
+    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("Password changed")
+            }}
+        >
+            <SecureField
+                label="New password"
+                autoComplete="new-password"
+                description="At least 12 characters."
+                errors={
+                    short
+                        ? ["Use at least 12 characters."]
+                        : []
+                }
+                value={next}
+                onChange={(event) =>
+                    setNext(event.target.value)
+                }
+            />
+            <SecureField
+                label="Confirm password"
+                autoComplete="new-password"
+                errors={
+                    differs
+                        ? ["The passwords don't match."]
+                        : []
+                }
+                value={again}
+                onChange={(event) =>
+                    setAgain(event.target.value)
+                }
+            />
+            <Button
+                type="submit"
+                variant="accent"
+                disabled={!next || short || differs || !again}
+            >
+                Change password
+            </Button>
+        </form>
+    )
+}

package/src/components/secure-field/examples/secure-field-reveal.tsx

@@ -0,0 +1,20 @@
+import { SecureField } from "@passui/react/secure-field"
+import { useState } from "react"
+
+export function SecureFieldReveal() {
+    const [password, setPassword] = useState("correct-horse")
+
+    return (
+        <div className="w-full max-w-xs">
+            <SecureField
+                label="Password"
+                autoComplete="current-password"
+                revealLabels={{ show: "Show", hide: "Hide" }}
+                value={password}
+                onChange={(event) =>
+                    setPassword(event.target.value)
+                }
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,62 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { SecureField } from "@passui/react/secure-field"
+import { useState } from "react"
+
+export function SecureFieldShowcase() {
+    const [current, setCurrent] = useState("")
+    const [next, setNext] = useState("")
+    const tooShort = next.length > 0 && next.length < 8
+    const reveal = { show: "Show", hide: "Hide" }
+
+    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("Password changed")
+            }}
+        >
+            <div className="flex flex-col gap-1">
+                <h2 className="text-headline font-semibold text-label">
+                    Change password
+                </h2>
+                <p className="text-footnote text-label-secondary">
+                    You stay signed in on this device.
+                </p>
+            </div>
+            <SecureField
+                label="Current password"
+                autoComplete="current-password"
+                revealLabels={reveal}
+                value={current}
+                onChange={(event) =>
+                    setCurrent(event.target.value)
+                }
+            />
+            <SecureField
+                label="New password"
+                autoComplete="new-password"
+                description="At least 8 characters."
+                revealLabels={reveal}
+                aria-invalid={tooShort}
+                errors={
+                    tooShort
+                        ? ["Use 8 characters or more."]
+                        : []
+                }
+                value={next}
+                onChange={(event) =>
+                    setNext(event.target.value)
+                }
+            />
+            <Button
+                type="submit"
+                variant="accent"
+                disabled={!current || next.length < 8}
+            >
+                Change password
+            </Button>
+        </form>
+    )
+}

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

@@ -0,0 +1,19 @@
+import { SecureField } from "@passui/react/secure-field"
+import { useState } from "react"
+
+export function SecureFieldUsage() {
+    const [password, setPassword] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <SecureField
+                label="Password"
+                autoComplete="current-password"
+                revealLabels={{ show: "Show", hide: "Hide" }}
+                value={password}
+                onChange={(event) =>
+                    setPassword(event.target.value)
+                }
+            />
+        </div>
+    )
+}