@passui/react 0.0.0-stage → 0.1.14

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,200 @@
+import { Sheet } from "@passui/react/sheet"
+import {
+    AnimatePresence,
+    motion,
+    useReducedMotion,
+} from "motion/react"
+import { createPortal } from "react-dom"
+import { Button } from "@passui/react/button"
+import { cn } from "@passui/react/cn"
+import {
+    createContext,
+    useContext,
+    useId,
+    type FormEvent,
+    type ReactNode,
+} from "react"
+
+const CloseContext = createContext<() => void>(() => {})
+export type DialogPresentation =
+    | "drawer"
+    | "center"
+    | "inline"
+export type DialogTone = "default" | "destructive"
+
+type DialogProps = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    title: ReactNode
+    description?: ReactNode
+    children?: ReactNode
+    footer?: ReactNode
+    presentation?: DialogPresentation
+    className?: string
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => void
+}
+type ActionsProps = {
+    submitLabel: ReactNode
+    cancelLabel: ReactNode
+    pending?: boolean
+    disabled?: boolean
+    tone?: DialogTone
+    onConfirm?: () => void
+}
+
+export function Dialog({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    footer,
+    presentation = "drawer",
+    className,
+    onSubmit,
+}: DialogProps) {
+    const titleId = useId()
+    const reducedMotion = useReducedMotion()
+    const close = () => onOpenChange(false)
+    const content = (
+        <>
+            {presentation !== "inline" && (
+                <h2
+                    id={titleId}
+                    className="text-title3 font-semibold"
+                >
+                    {title}
+                </h2>
+            )}
+            {description && (
+                <p className="text-footnote text-label-secondary">
+                    {description}
+                </p>
+            )}
+            {children && (
+                <div className="flex flex-col gap-4">
+                    {children}
+                </div>
+            )}
+            {footer && (
+                <div className="flex flex-wrap justify-end gap-2 pt-3">
+                    {footer}
+                </div>
+            )}
+        </>
+    )
+    const body = (
+        <CloseContext value={close}>
+            {onSubmit ? (
+                <form
+                    onSubmit={onSubmit}
+                    className={cn(
+                        "flex min-h-0 flex-col gap-4 overflow-y-auto p-5",
+                        className
+                    )}
+                >
+                    {content}
+                </form>
+            ) : (
+                <div
+                    className={cn(
+                        "flex min-h-0 flex-col gap-4 overflow-y-auto p-5",
+                        className
+                    )}
+                >
+                    {content}
+                </div>
+            )}
+        </CloseContext>
+    )
+    if (presentation === "inline")
+        return (
+            <AnimatePresence initial={false}>
+                {open && (
+                    <motion.div
+                        key={titleId}
+                        initial={{
+                            height: reducedMotion
+                                ? "auto"
+                                : 0,
+                            opacity: 0,
+                        }}
+                        animate={{
+                            height: "auto",
+                            opacity: 1,
+                        }}
+                        exit={{
+                            height: reducedMotion
+                                ? "auto"
+                                : 0,
+                            opacity: 0,
+                        }}
+                        transition={{
+                            duration: reducedMotion
+                                ? 0
+                                : 0.28,
+                            ease: [0.22, 1, 0.36, 1],
+                        }}
+                        className="overflow-hidden"
+                    >
+                        {body}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        )
+    if (typeof document === "undefined") return null
+    return createPortal(
+        <Sheet
+            open={open}
+            onClose={close}
+            label=""
+            labelledBy={titleId}
+        >
+            {body}
+        </Sheet>,
+        document.body
+    )
+}
+
+/** The standard footer: a primary action and a cancel that closes the dialog. */
+function Actions({
+    submitLabel,
+    cancelLabel,
+    pending = false,
+    disabled = false,
+    tone = "default",
+    onConfirm,
+}: ActionsProps) {
+    const close = useContext(CloseContext)
+    return (
+        <>
+            <Button
+                type={onConfirm ? "button" : "submit"}
+                variant={
+                    tone === "destructive"
+                        ? "ghost"
+                        : "default"
+                }
+                className={
+                    tone === "destructive"
+                        ? "bg-danger/10 text-danger"
+                        : undefined
+                }
+                isPending={pending}
+                disabled={disabled}
+                onClick={onConfirm}
+            >
+                {submitLabel}
+            </Button>
+            <Button
+                type="button"
+                variant="secondary"
+                onClick={close}
+            >
+                {cancelLabel}
+            </Button>
+        </>
+    )
+}
+
+Dialog.Actions = Actions

package/src/components/dialog/examples/dialog-confirm.tsx

@@ -0,0 +1,24 @@
+import { confirmDialog, toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+
+export function DialogConfirm() {
+    return (
+        <Button
+            variant="destructive"
+            onClick={async () => {
+                // resolves true when confirmed; needs one <DialogHost />
+                const confirmed = await confirmDialog({
+                    title: "Delete this app?",
+                    message:
+                        "People signed in with it will be signed out.",
+                    confirmLabel: "Delete",
+                    cancelLabel: "Cancel",
+                    destructive: true,
+                })
+                if (confirmed) toast.success("App deleted")
+            }}
+        >
+            Delete app
+        </Button>
+    )
+}

package/src/components/dialog/examples/dialog-form.tsx

@@ -0,0 +1,46 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Dialog } from "@passui/react/dialog"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function DialogForm() {
+    const [open, setOpen] = useState(false)
+    const [name, setName] = useState("Pass console")
+
+    return (
+        <>
+            <Button
+                variant="secondary"
+                onClick={() => setOpen(true)}
+            >
+                Rename project
+            </Button>
+            <Dialog
+                open={open}
+                onOpenChange={setOpen}
+                title="Rename project"
+                onSubmit={(event) => {
+                    event.preventDefault()
+                    setOpen(false)
+                    toast.success(`Renamed to ${name}`)
+                }}
+                footer={
+                    <Dialog.Actions
+                        submitLabel="Rename"
+                        cancelLabel="Cancel"
+                        disabled={!name.trim()}
+                    />
+                }
+            >
+                <TextField
+                    label="Name"
+                    value={name}
+                    onChange={(event) =>
+                        setName(event.target.value)
+                    }
+                />
+            </Dialog>
+        </>
+    )
+}

package/src/components/dialog/examples/dialog-inline.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@passui/react/button"
+import { Dialog } from "@passui/react/dialog"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function DialogInline() {
+    const [open, setOpen] = useState(false)
+    const [email, setEmail] = useState("")
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-2 rounded-4xl bg-elevated p-2 ring-1 ring-separator/60">
+            <Button
+                variant="ghost"
+                className="self-start"
+                onClick={() => setOpen(!open)}
+            >
+                {open ? "Cancel" : "Add a recovery email"}
+            </Button>
+            <Dialog
+                open={open}
+                onOpenChange={setOpen}
+                presentation="inline"
+                title="Recovery email"
+                description="We only use it if you lose access."
+                onSubmit={(event) => {
+                    event.preventDefault()
+                    setOpen(false)
+                }}
+                footer={
+                    <Dialog.Actions
+                        submitLabel="Add"
+                        cancelLabel="Cancel"
+                        disabled={!email}
+                    />
+                }
+            >
+                <TextField
+                    label="Email"
+                    type="email"
+                    value={email}
+                    onChange={(event) =>
+                        setEmail(event.target.value)
+                    }
+                />
+            </Dialog>
+        </div>
+    )
+}

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

@@ -0,0 +1,53 @@
+import { LabeledContent, Section, toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Dialog } from "@passui/react/dialog"
+import { useState } from "react"
+
+export function DialogShowcase() {
+    const [open, setOpen] = useState(false)
+    const [pending, setPending] = useState(false)
+
+    return (
+        <div className="w-full max-w-sm">
+            <Section title="Devices">
+                <LabeledContent
+                    label="iPad mini"
+                    description="Last used 3 weeks ago"
+                >
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-danger"
+                        onClick={() => setOpen(true)}
+                    >
+                        Sign out
+                    </Button>
+                </LabeledContent>
+            </Section>
+            <Dialog
+                open={open}
+                onOpenChange={setOpen}
+                title="Sign out of iPad mini?"
+                description="It will need your password or a passkey to sign back in."
+                footer={
+                    <Dialog.Actions
+                        submitLabel="Sign out"
+                        cancelLabel="Cancel"
+                        tone="destructive"
+                        pending={pending}
+                        onConfirm={() => {
+                            setPending(true)
+                            setTimeout(() => {
+                                setPending(false)
+                                setOpen(false)
+                                toast.success(
+                                    "Signed out of iPad mini"
+                                )
+                            }, 900)
+                        }}
+                    />
+                }
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,31 @@
+import { Button } from "@passui/react/button"
+import { Dialog } from "@passui/react/dialog"
+import { useState } from "react"
+
+export function DialogUsage() {
+    const [open, setOpen] = useState(false)
+
+    return (
+        <>
+            <Button
+                variant="secondary"
+                onClick={() => setOpen(true)}
+            >
+                Sign out
+            </Button>
+            <Dialog
+                open={open}
+                onOpenChange={setOpen}
+                title="Sign out of Pass?"
+                description="You can sign back in at any time."
+                footer={
+                    <Dialog.Actions
+                        submitLabel="Sign out"
+                        cancelLabel="Cancel"
+                        onConfirm={() => setOpen(false)}
+                    />
+                }
+            />
+        </>
+    )
+}

package/src/components/dialog/index.ts

@@ -0,0 +1 @@
+export * from "./dialog"

package/src/components/labeled-content/examples/labeled-content-descriptions.tsx

@@ -0,0 +1,37 @@
+import { LabeledContent, Section } from "@passui/react"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function LabeledContentDescriptions() {
+    const [alerts, setAlerts] = useState(true)
+    const [digest, setDigest] = useState(false)
+
+    return (
+        <div className="w-full max-w-sm">
+            <Section title="Email">
+                <LabeledContent
+                    label="Sign-in alerts"
+                    description="When a new device signs in to your account."
+                >
+                    <Toggle
+                        label="Sign-in alerts"
+                        labelHidden
+                        checked={alerts}
+                        onChange={setAlerts}
+                    />
+                </LabeledContent>
+                <LabeledContent
+                    label="Weekly digest"
+                    description="A summary of activity every Monday."
+                >
+                    <Toggle
+                        label="Weekly digest"
+                        labelHidden
+                        checked={digest}
+                        onChange={setDigest}
+                    />
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/labeled-content/examples/labeled-content-showcase.tsx

@@ -0,0 +1,54 @@
+import {
+    LabeledContent,
+    Section,
+    SegmentedControl,
+} from "@passui/react"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function LabeledContentShowcase() {
+    const [density, setDensity] = useState("comfortable")
+    const [signature, setSignature] = useState(
+        "Sent from Passui"
+    )
+
+    return (
+        <div className="w-full max-w-md">
+            <Section title="Mail">
+                <LabeledContent
+                    label="Density"
+                    description="How much fits on screen."
+                    wide
+                >
+                    <SegmentedControl
+                        label="Density"
+                        value={density}
+                        onChange={setDensity}
+                        options={[
+                            {
+                                value: "compact",
+                                label: "Compact",
+                            },
+                            {
+                                value: "comfortable",
+                                label: "Comfortable",
+                            },
+                        ]}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Signature" stacked>
+                    <TextField
+                        label="Signature"
+                        value={signature}
+                        onChange={(event) =>
+                            setSignature(event.target.value)
+                        }
+                    />
+                </LabeledContent>
+                <LabeledContent label="Account">
+                    aiko@example.com
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/labeled-content/examples/labeled-content-usage.tsx

@@ -0,0 +1,22 @@
+import { LabeledContent } from "@passui/react"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function LabeledContentUsage() {
+    const [previews, setPreviews] = useState(true)
+    return (
+        <div className="w-full max-w-sm rounded-3xl border border-separator/60 bg-elevated">
+            <LabeledContent
+                label="Show previews"
+                description="Shows the first lines of each note."
+            >
+                <Toggle
+                    label="Show previews"
+                    labelHidden
+                    checked={previews}
+                    onChange={setPreviews}
+                />
+            </LabeledContent>
+        </div>
+    )
+}

package/src/components/labeled-content/examples/labeled-content-values.tsx

@@ -0,0 +1,26 @@
+import { Chip, LabeledContent, Section } from "@passui/react"
+
+export function LabeledContentValues() {
+    return (
+        <div className="w-full max-w-sm">
+            <Section
+                title="Account"
+                footer="Contact support to change your account ID."
+            >
+                <LabeledContent label="Account ID">
+                    <span className="font-mono text-footnote text-label-secondary">
+                        pass_7f3a9c
+                    </span>
+                </LabeledContent>
+                <LabeledContent label="Plan">
+                    <Chip tone="accent">Family</Chip>
+                </LabeledContent>
+                <LabeledContent label="Member since">
+                    <span className="text-subheadline text-label-secondary">
+                        March 2024
+                    </span>
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/labeled-content/examples/labeled-content-wide.tsx

@@ -0,0 +1,46 @@
+import {
+    LabeledContent,
+    Section,
+    SegmentedControl,
+} from "@passui/react"
+import { TextField } from "@passui/react/text-field"
+import { useState } from "react"
+
+export function LabeledContentWide() {
+    const [theme, setTheme] = useState("system")
+    const [nickname, setNickname] = useState("Aiko")
+
+    return (
+        <div className="w-full max-w-md">
+            <Section title="Profile">
+                <LabeledContent label="Appearance" wide>
+                    <SegmentedControl
+                        label="Appearance"
+                        value={theme}
+                        onChange={setTheme}
+                        options={[
+                            {
+                                value: "system",
+                                label: "System",
+                            },
+                            {
+                                value: "light",
+                                label: "Light",
+                            },
+                            { value: "dark", label: "Dark" },
+                        ]}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Nickname" stacked>
+                    <TextField
+                        label="Nickname"
+                        value={nickname}
+                        onChange={(event) =>
+                            setNickname(event.target.value)
+                        }
+                    />
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/labeled-content/labeled-content.docs.tsx

@@ -0,0 +1,69 @@
+import { LabeledContentValues } from "./examples/labeled-content-values"
+import { LabeledContentWide } from "./examples/labeled-content-wide"
+import { LabeledContentDescriptions } from "./examples/labeled-content-descriptions"
+import { defineDocs } from "../../docs/types"
+import { Toggle } from "../toggle/toggle"
+import { LabeledContentShowcase } from "./examples/labeled-content-showcase"
+import { LabeledContentUsage } from "./examples/labeled-content-usage"
+import { LabeledContent } from "./labeled-content"
+
+type DemoProps = {
+    label: string
+    description?: string
+    stacked?: boolean
+    wide?: boolean
+}
+
+export const labeledContentDocs = defineDocs<DemoProps>()({
+    slug: "labeled-content",
+    name: "LabeledContent",
+    importPath: "@passui/react",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Show previews",
+            required: true,
+        },
+        description: {
+            kind: "text",
+            default: "Shows the first lines of each note.",
+        },
+        stacked: { kind: "boolean", default: false },
+        wide: { kind: "boolean", default: false },
+    },
+    render: (values) => (
+        <div className="w-full max-w-sm rounded-3xl border border-separator/60 bg-elevated">
+            <LabeledContent {...values}>
+                <Toggle
+                    label={values.label}
+                    labelHidden
+                    checked
+                    onChange={() => {}}
+                />
+            </LabeledContent>
+        </div>
+    ),
+    childrenSnippet: () => ({
+        imports: [
+            'import { useState } from "react"',
+            'import { Toggle } from "@passui/react/toggle"',
+        ],
+        setup: ["const [on, setOn] = useState(true)"],
+        children:
+            '<Toggle label="Show previews" labelHidden checked={on} onChange={setOn} />',
+    }),
+    usage: LabeledContentUsage,
+    showcase: LabeledContentShowcase,
+    examples: [
+        {
+            id: "descriptions",
+            component: LabeledContentDescriptions,
+        },
+        {
+            id: "wide",
+            component: LabeledContentWide,
+            playground: { wide: true },
+        },
+        { id: "values", component: LabeledContentValues },
+    ],
+})