@passui/react 0.0.0-stage → 0.1.15

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

@@ -0,0 +1,67 @@
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@passui/react/table"
+
+const members = [
+    {
+        name: "Aiko Kamado",
+        initials: "AK",
+        src: "/avatars/aiko.svg",
+        role: "Owner",
+    },
+    {
+        name: "Kenji Mori",
+        initials: "KM",
+        src: "/avatars/kenji.svg",
+        role: "Admin",
+    },
+]
+
+export function TableUsage() {
+    return (
+        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Member</TableHead>
+                        <TableHead>Role</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {members.map((member) => (
+                        <TableRow key={member.name}>
+                            <TableCell>
+                                <div className="flex items-center gap-3">
+                                    <ProfileImage className="size-8">
+                                        <ProfileImageContent
+                                            src={member.src}
+                                        />
+                                        <ProfileImageFallback>
+                                            {member.initials}
+                                        </ProfileImageFallback>
+                                    </ProfileImage>
+                                    <span className="text-subheadline font-medium text-label">
+                                        {member.name}
+                                    </span>
+                                </div>
+                            </TableCell>
+                            <TableCell>
+                                {member.role}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

package/src/components/table/examples/table-wide.tsx

@@ -0,0 +1,75 @@
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@passui/react/table"
+
+const events = [
+    {
+        time: "09:41",
+        event: "Signed in",
+        person: "aiko@example.com",
+        app: "Pass console",
+        device: "MacBook Air",
+        place: "Lisbon, PT",
+    },
+    {
+        time: "09:12",
+        event: "Passkey added",
+        person: "kenji@example.com",
+        app: "Accounts",
+        device: "iPhone 16",
+        place: "Porto, PT",
+    },
+    {
+        time: "08:57",
+        event: "Password changed",
+        person: "mira@example.com",
+        app: "Accounts",
+        device: "Pixel 9",
+        place: "Madrid, ES",
+    },
+]
+
+export function TableWide() {
+    // Table scrolls sideways inside its card when it's too wide
+    return (
+        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Time</TableHead>
+                        <TableHead>Event</TableHead>
+                        <TableHead>Person</TableHead>
+                        <TableHead>App</TableHead>
+                        <TableHead>Device</TableHead>
+                        <TableHead>Location</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {events.map((row) => (
+                        <TableRow key={row.time}>
+                            <TableCell className="tabular-nums text-label-secondary">
+                                {row.time}
+                            </TableCell>
+                            <TableCell className="font-medium text-label">
+                                {row.event}
+                            </TableCell>
+                            <TableCell>
+                                {row.person}
+                            </TableCell>
+                            <TableCell>{row.app}</TableCell>
+                            <TableCell>
+                                {row.device}
+                            </TableCell>
+                            <TableCell>{row.place}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

package/src/components/table/table.docs.tsx

@@ -0,0 +1,131 @@
+import { jsxText } from "../../docs/snippet"
+import { defineDocs } from "../../docs/types"
+import { TableEmpty } from "./examples/table-empty"
+import { TableInvoices } from "./examples/table-invoices"
+import { TableSelection } from "./examples/table-selection"
+import { TableWide } from "./examples/table-wide"
+import { TableShowcase } from "./examples/table-showcase"
+import { TableUsage } from "./examples/table-usage"
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableFooter,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./table"
+
+// The caption and footer are parts inside Table, so the snippet writes
+// them into the children.
+type DemoProps = {
+    caption: string
+    footer: boolean
+}
+
+const invoices = [
+    { id: "INV-104", status: "Paid", amount: "€120.00" },
+    { id: "INV-105", status: "Pending", amount: "€48.50" },
+    { id: "INV-106", status: "Paid", amount: "€310.00" },
+]
+
+export const tableDocs = defineDocs<DemoProps>()({
+    slug: "table",
+    name: "Table",
+    importPath: "@passui/react/table",
+    controls: {
+        caption: { kind: "text", default: "Recent invoices" },
+        footer: { kind: "boolean", default: true },
+    },
+    render: ({ caption, footer }) => (
+        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <Table>
+                {caption && (
+                    <TableCaption>{caption}</TableCaption>
+                )}
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Invoice</TableHead>
+                        <TableHead>Status</TableHead>
+                        <TableHead className="text-right">
+                            Amount
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {invoices.map((invoice) => (
+                        <TableRow key={invoice.id}>
+                            <TableCell>
+                                {invoice.id}
+                            </TableCell>
+                            <TableCell>
+                                {invoice.status}
+                            </TableCell>
+                            <TableCell className="text-right tabular-nums">
+                                {invoice.amount}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+                {footer && (
+                    <TableFooter>
+                        <TableRow>
+                            <TableCell colSpan={2}>
+                                Total
+                            </TableCell>
+                            <TableCell className="text-right tabular-nums">
+                                €478.50
+                            </TableCell>
+                        </TableRow>
+                    </TableFooter>
+                )}
+            </Table>
+        </div>
+    ),
+    childrenSnippet: ({ caption, footer }) => ({
+        imports: [
+            `import { TableBody, ${caption ? "TableCaption, " : ""}TableCell, ${footer ? "TableFooter, " : ""}TableHead, TableHeader, TableRow } from "@passui/react/table"`,
+        ],
+        omit: ["caption", "footer"],
+        children: [
+            "",
+            ...(caption
+                ? [
+                      `    <TableCaption>${jsxText(caption)}</TableCaption>`,
+                  ]
+                : []),
+            "    <TableHeader>",
+            "        <TableRow>",
+            "            <TableHead>Invoice</TableHead>",
+            '            <TableHead className="text-right">Amount</TableHead>',
+            "        </TableRow>",
+            "    </TableHeader>",
+            "    <TableBody>",
+            "        <TableRow>",
+            "            <TableCell>INV-104</TableCell>",
+            '            <TableCell className="text-right">€120.00</TableCell>',
+            "        </TableRow>",
+            "    </TableBody>",
+            ...(footer
+                ? [
+                      "    <TableFooter>",
+                      "        <TableRow>",
+                      "            <TableCell>Total</TableCell>",
+                      '            <TableCell className="text-right">€120.00</TableCell>',
+                      "        </TableRow>",
+                      "    </TableFooter>",
+                  ]
+                : []),
+            "",
+        ].join("\n"),
+    }),
+    usage: TableUsage,
+    showcase: TableShowcase,
+    examples: [
+        { id: "invoices", component: TableInvoices },
+        { id: "selection", component: TableSelection },
+        { id: "wide", component: TableWide },
+        { id: "empty", component: TableEmpty },
+    ],
+})

package/src/components/table/table.tsx

@@ -0,0 +1,149 @@
+import type * as React from "react"
+
+import { cn } from "../../lib/class-names"
+
+function Table({
+    className,
+    ...props
+}: React.ComponentProps<"table">) {
+    return (
+        <div
+            data-slot="table-container"
+            className="relative w-full overflow-x-auto"
+        >
+            <table
+                data-slot="table"
+                className={cn(
+                    "w-full caption-bottom text-subheadline text-label",
+                    className
+                )}
+                {...props}
+            />
+        </div>
+    )
+}
+
+function TableHeader({
+    className,
+    ...props
+}: React.ComponentProps<"thead">) {
+    return (
+        <thead
+            data-slot="table-header"
+            className={cn(
+                "[&_tr]:border-separator [&_tr]:border-b",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableBody({
+    className,
+    ...props
+}: React.ComponentProps<"tbody">) {
+    return (
+        <tbody
+            data-slot="table-body"
+            className={cn(
+                "[&_tr:last-child]:border-0",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableFooter({
+    className,
+    ...props
+}: React.ComponentProps<"tfoot">) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn(
+                "border-separator border-t bg-fill/50 font-semibold [&>tr]:last:border-b-0",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableRow({
+    className,
+    ...props
+}: React.ComponentProps<"tr">) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                "border-separator border-b transition-colors duration-fast hover:bg-fill/50 has-aria-expanded:bg-fill/50",
+                "data-[state=selected]:bg-accent-soft/60",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableHead({
+    className,
+    ...props
+}: React.ComponentProps<"th">) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "h-10 px-3 text-start align-middle text-footnote font-semibold whitespace-nowrap",
+                "text-label-secondary has-[[role=checkbox]]:pe-0",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableCell({
+    className,
+    ...props
+}: React.ComponentProps<"td">) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                "px-3 py-2.5 align-middle whitespace-nowrap has-[[role=checkbox]]:pe-0",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function TableCaption({
+    className,
+    ...props
+}: React.ComponentProps<"caption">) {
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn(
+                "mt-4 text-footnote text-label-secondary",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableFooter,
+    TableHead,
+    TableHeader,
+    TableRow,
+}

package/src/components/text-editor/examples/text-editor-comment.tsx

@@ -0,0 +1,48 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { TextEditor } from "@passui/react/text-editor"
+import { useId, useState } from "react"
+
+export function TextEditorComment() {
+    const commentId = useId()
+    const [comment, setComment] = useState("")
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-3 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
+            <label
+                htmlFor={commentId}
+                className="text-subheadline font-semibold"
+            >
+                Add a comment
+            </label>
+            <TextEditor
+                id={commentId}
+                placeholder="Share your thoughts"
+                value={comment}
+                onChange={(event) =>
+                    setComment(event.target.value)
+                }
+            />
+            <div className="flex justify-end gap-2">
+                <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => setComment("")}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="accent"
+                    size="sm"
+                    disabled={!comment.trim()}
+                    onClick={() => {
+                        setComment("")
+                        toast.success("Comment posted")
+                    }}
+                >
+                    Post
+                </Button>
+            </div>
+        </div>
+    )
+}

package/src/components/text-editor/examples/text-editor-count.tsx

@@ -0,0 +1,38 @@
+import { TextEditor } from "@passui/react/text-editor"
+import { useId, useState } from "react"
+
+const limit = 160
+
+export function TextEditorCount() {
+    const statusId = useId()
+    const [status, setStatus] = useState(
+        "Out hiking until Sunday."
+    )
+    const countId = useId()
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-2">
+            <label
+                htmlFor={statusId}
+                className="text-subheadline font-semibold"
+            >
+                Status
+            </label>
+            <TextEditor
+                id={statusId}
+                maxLength={limit}
+                aria-describedby={countId}
+                value={status}
+                onChange={(event) =>
+                    setStatus(event.target.value)
+                }
+            />
+            <span
+                id={countId}
+                className="self-end text-caption text-label-tertiary tabular-nums"
+            >
+                {status.length} / {limit}
+            </span>
+        </div>
+    )
+}

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

@@ -0,0 +1,58 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { TextEditor } from "@passui/react/text-editor"
+import { TextField } from "@passui/react/text-field"
+import { useId, useState } from "react"
+
+export function TextEditorShowcase() {
+    const messageId = useId()
+    const [subject, setSubject] = useState("")
+    const [message, setMessage] = 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("Thanks, we got your message")
+                setSubject("")
+                setMessage("")
+            }}
+        >
+            <h2 className="text-headline font-semibold text-label">
+                Contact support
+            </h2>
+            <TextField
+                label="Subject"
+                placeholder="I can't sign in on my tablet"
+                value={subject}
+                onChange={(event) =>
+                    setSubject(event.target.value)
+                }
+            />
+            <div className="flex flex-col gap-2">
+                <label
+                    htmlFor={messageId}
+                    className="text-subheadline font-semibold"
+                >
+                    Message
+                </label>
+                <TextEditor
+                    id={messageId}
+                    placeholder="What happened, and what did you expect?"
+                    value={message}
+                    onChange={(event) =>
+                        setMessage(event.target.value)
+                    }
+                />
+            </div>
+            <Button
+                type="submit"
+                variant="accent"
+                disabled={!subject || !message}
+            >
+                Send
+            </Button>
+        </form>
+    )
+}

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

@@ -0,0 +1,25 @@
+import { TextEditor } from "@passui/react/text-editor"
+import { useId, useState } from "react"
+
+export function TextEditorUsage() {
+    const bioId = useId()
+    const [bio, setBio] = useState("")
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-2">
+            <label
+                htmlFor={bioId}
+                className="text-subheadline font-semibold"
+            >
+                Bio
+            </label>
+            <TextEditor
+                id={bioId}
+                placeholder="A few words about you"
+                value={bio}
+                onChange={(event) =>
+                    setBio(event.target.value)
+                }
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,61 @@
+import { TextEditorComment } from "./examples/text-editor-comment"
+import type { ComponentProps } from "react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { TextEditorCount } from "./examples/text-editor-count"
+import { TextEditorShowcase } from "./examples/text-editor-showcase"
+import { TextEditorUsage } from "./examples/text-editor-usage"
+import { TextEditor } from "./text-editor"
+
+type TextEditorProps = ComponentProps<typeof TextEditor>
+type DemoProps = Pick<
+    TextEditorProps,
+    "placeholder" | "disabled" | "readOnly"
+>
+
+function TextEditorDemo(props: DemoProps) {
+    const [bio, setBio] = useState("")
+    return (
+        <div className="w-full max-w-sm">
+            <TextEditor
+                {...props}
+                aria-label="Bio"
+                value={bio}
+                onChange={(event) =>
+                    setBio(event.target.value)
+                }
+            />
+        </div>
+    )
+}
+
+export const textEditorDocs = defineDocs<TextEditorProps>()({
+    slug: "text-editor",
+    name: "TextEditor",
+    importPath: "@passui/react/text-editor",
+    controls: {
+        placeholder: {
+            kind: "text",
+            default: "A few words about you",
+        },
+        disabled: { kind: "boolean", default: false },
+        readOnly: { kind: "boolean", default: false },
+    },
+    render: (values) => <TextEditorDemo {...values} />,
+    childrenSnippet: () => ({
+        imports: ['import { useState } from "react"'],
+        setup: ['const [bio, setBio] = useState("")'],
+        children: "",
+        extraProps: { "aria-label": "Bio" },
+        expressionProps: {
+            value: "bio",
+            onChange: "(event) => setBio(event.target.value)",
+        },
+    }),
+    usage: TextEditorUsage,
+    showcase: TextEditorShowcase,
+    examples: [
+        { id: "count", component: TextEditorCount },
+        { id: "comment", component: TextEditorComment },
+    ],
+})

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react"
+import { cn } from "../../lib/class-names"
+import { textControlClasses } from "../text-field/text-field"
+
+export function TextEditor({
+    className,
+    ...props
+}: ComponentProps<"textarea">) {
+    return (
+        <textarea
+            {...props}
+            className={cn(
+                textControlClasses,
+                "min-h-28 resize-y",
+                className
+            )}
+        />
+    )
+}