@passui/react 0.0.0-stage → 0.1.14

package/src/components/conversation/conversation.tsx

@@ -0,0 +1,279 @@
+import { IconButton } from "@passui/react/icon-button"
+import { ArrowUp02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import type { ReactNode } from "react"
+import { useState } from "react"
+import { formatTime } from "../../lib/date"
+import { cn } from "../../lib/class-names"
+
+export type ConversationMessage = {
+    id: string
+    body: string
+    /** Written by whoever is looking: drawn on the right. */
+    mine: boolean
+    author?: string
+    /** Shown beside the other side's messages, like their avatar. */
+    avatar?: ReactNode
+    createdAt: string
+}
+
+const GROUP_GAP_MS = 5 * 60 * 1000
+
+/**
+ * The day line: today and yesterday in the reader's own words, from
+ * Intl rather than built-in English, else the full date.
+ */
+function dayLabel(iso: string, locale?: string) {
+    const date = new Date(iso)
+    const today = new Date()
+    const yesterday = new Date()
+    yesterday.setDate(today.getDate() - 1)
+    const offset =
+        date.toDateString() === today.toDateString()
+            ? 0
+            : date.toDateString() === yesterday.toDateString()
+              ? -1
+              : null
+    if (offset === null)
+        return date.toLocaleDateString(locale, {
+            weekday: "long",
+            month: "long",
+            day: "numeric",
+        })
+    const word = new Intl.RelativeTimeFormat(locale, {
+        numeric: "auto",
+    }).format(offset, "day")
+    return (
+        word.charAt(0).toLocaleUpperCase(locale) +
+        word.slice(1)
+    )
+}
+
+const clock = (iso: string, locale?: string) =>
+    new Date(iso).toLocaleTimeString(locale, {
+        hour: "numeric",
+        minute: "2-digit",
+    })
+
+/**
+ * A thread of plain-text messages like Messages on iPhone: a day line when
+ * the date changes, back-to-back messages from one side grouped under one
+ * name, theirs on the left with an avatar, yours on the right.
+ */
+function Messages({
+    messages,
+    locale,
+}: {
+    messages: ConversationMessage[]
+    /** For day names and times; the reader's own by default. */
+    locale?: string
+}) {
+    return (
+        <ol data-not-typeset className="flex flex-col">
+            {messages.map((message, index) => {
+                const prev = messages[index - 1]
+                const next = messages[index + 1]
+                const newDay =
+                    !prev ||
+                    new Date(
+                        prev.createdAt
+                    ).toDateString() !==
+                        new Date(
+                            message.createdAt
+                        ).toDateString()
+                const startsGroup =
+                    newDay ||
+                    prev.mine !== message.mine ||
+                    new Date(message.createdAt).getTime() -
+                        new Date(prev.createdAt).getTime() >
+                        GROUP_GAP_MS
+                const endsGroup =
+                    !next ||
+                    next.mine !== message.mine ||
+                    new Date(next.createdAt).getTime() -
+                        new Date(
+                            message.createdAt
+                        ).getTime() >
+                        GROUP_GAP_MS
+
+                return (
+                    <li
+                        key={message.id}
+                        className="flex flex-col"
+                    >
+                        {newDay && (
+                            // the reader's own day and clock, which a server can't know
+                            <span
+                                suppressHydrationWarning
+                                className="my-4 text-center text-caption2 font-medium text-label-secondary"
+                            >
+                                {dayLabel(
+                                    message.createdAt,
+                                    locale
+                                )}
+                            </span>
+                        )}
+                        <div
+                            className={cn(
+                                "flex items-end gap-2",
+                                message.mine
+                                    ? "justify-end"
+                                    : "justify-start",
+                                startsGroup
+                                    ? "mt-3"
+                                    : "mt-0.5"
+                            )}
+                        >
+                            {!message.mine && (
+                                <span className="flex size-7 shrink-0 items-center justify-center">
+                                    {endsGroup &&
+                                        message.avatar}
+                                </span>
+                            )}
+                            <div
+                                className={cn(
+                                    "flex max-w-[78%] flex-col gap-1",
+                                    message.mine
+                                        ? "items-end"
+                                        : "items-start"
+                                )}
+                            >
+                                {startsGroup &&
+                                    message.author && (
+                                        <span className="px-3 text-caption2 text-label-secondary">
+                                            {message.author}
+                                        </span>
+                                    )}
+                                {/* text only: a message can never become markup */}
+                                <p
+                                    suppressHydrationWarning
+                                    title={formatTime(
+                                        message.createdAt
+                                    )}
+                                    className={cn(
+                                        "rounded-4xl px-3.5 py-2 text-subheadline leading-snug whitespace-pre-wrap wrap-break-word",
+                                        message.mine
+                                            ? "bg-inverse text-on-inverse"
+                                            : "bg-fill text-label",
+                                        endsGroup &&
+                                            (message.mine
+                                                ? "rounded-br-md"
+                                                : "rounded-bl-md")
+                                    )}
+                                >
+                                    {message.body}
+                                </p>
+                                {endsGroup && (
+                                    <time
+                                        suppressHydrationWarning
+                                        dateTime={
+                                            message.createdAt
+                                        }
+                                        className="px-3 text-caption2 text-label-secondary tabular-nums"
+                                    >
+                                        {clock(
+                                            message.createdAt,
+                                            locale
+                                        )}
+                                    </time>
+                                )}
+                            </div>
+                        </div>
+                    </li>
+                )
+            })}
+        </ol>
+    )
+}
+
+type ComposerProps = {
+    onSend: (body: string) => Promise<unknown>
+    pending?: boolean
+    maxLength: number
+    placeholder: string
+    /** Extra controls under the field, like a status picker. */
+    actions?: ReactNode
+    /** Names the round Send button for screen readers. */
+    sendLabel: string
+    /**
+     * Words for the characters left, shown near the limit, such as
+     * (count) => `${count} left`. Without it, just the number shows.
+     */
+    remaining?: (count: number) => string
+}
+
+/** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
+function Composer({
+    onSend,
+    pending = false,
+    maxLength,
+    placeholder,
+    actions,
+    sendLabel,
+    remaining,
+}: ComposerProps) {
+    const [body, setBody] = useState("")
+    const ready = body.trim().length > 0 && !pending
+    const send = async () => {
+        if (!ready) return
+        await onSend(body.trim())
+        setBody("")
+    }
+
+    return (
+        <form
+            data-not-typeset
+            className="flex flex-col gap-2"
+            onSubmit={(event) => {
+                event.preventDefault()
+                void send()
+            }}
+        >
+            <div className="flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-1.5 pr-1.5 pl-4 transition-colors focus-within:border-accent-text/60">
+                <textarea
+                    value={body}
+                    onChange={(event) =>
+                        setBody(event.target.value)
+                    }
+                    onKeyDown={(event) => {
+                        if (
+                            event.key === "Enter" &&
+                            (event.metaKey || event.ctrlKey)
+                        ) {
+                            event.preventDefault()
+                            void send()
+                        }
+                    }}
+                    maxLength={maxLength}
+                    placeholder={placeholder}
+                    rows={1}
+                    className="field-sizing-content max-h-48 min-h-9 flex-1 resize-none bg-transparent py-1.5 text-subheadline text-label outline-none placeholder:text-label-secondary"
+                />
+                <IconButton
+                    type="submit"
+                    size="icon-xs"
+                    disabled={!ready}
+                    label={sendLabel}
+                    className="size-8 shrink-0 rounded-full"
+                >
+                    <HugeiconsIcon
+                        icon={ArrowUp02Icon}
+                        strokeWidth={2.5}
+                    />
+                </IconButton>
+            </div>
+            <div className="flex min-h-6 items-center gap-2 px-1">
+                {actions}
+                <span className="ml-auto text-caption2 text-label-secondary tabular-nums">
+                    {body.length > maxLength * 0.8 &&
+                        (remaining?.(
+                            maxLength - body.length
+                        ) ??
+                            maxLength - body.length)}
+                </span>
+            </div>
+        </form>
+    )
+}
+
+export const Conversation = { Messages, Composer }

package/src/components/conversation/examples/conversation-composer.tsx

@@ -0,0 +1,36 @@
+import { Conversation } from "@passui/react/conversation"
+import { useState } from "react"
+
+export function ConversationComposer() {
+    const [sent, setSent] = useState<string[]>([])
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-3">
+            <ul className="m-0 flex list-none flex-col gap-1 p-0 text-footnote text-label-secondary">
+                {sent.length === 0 ? (
+                    <li>
+                        Type a reply, then press Send or
+                        Ctrl/Cmd+Enter.
+                    </li>
+                ) : (
+                    sent.map((body, index) => (
+                        <li key={index}>Sent: {body}</li>
+                    ))
+                )}
+            </ul>
+            <Conversation.Composer
+                placeholder="Write a reply"
+                maxLength={280}
+                sendLabel="Send"
+                remaining={(count) => `${count} left`}
+                onSend={async (body) => {
+                    // the field clears only once this resolves
+                    await new Promise((resolve) =>
+                        setTimeout(resolve, 400)
+                    )
+                    setSent((current) => [...current, body])
+                }}
+            />
+        </div>
+    )
+}

package/src/components/conversation/examples/conversation-days.tsx

@@ -0,0 +1,48 @@
+import { Conversation } from "@passui/react/conversation"
+
+const hoursAgo = (hours: number) =>
+    new Date(Date.now() - hours * 3_600_000).toISOString()
+
+export function ConversationDays() {
+    return (
+        <div className="w-full max-w-sm rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <Conversation.Messages
+                messages={[
+                    {
+                        id: "1",
+                        mine: false,
+                        author: "Mira",
+                        body: "Did the release go out?",
+                        createdAt: hoursAgo(26),
+                    },
+                    {
+                        id: "2",
+                        mine: true,
+                        body: "Not yet, tomorrow morning.",
+                        createdAt: hoursAgo(25.9),
+                    },
+                    {
+                        id: "3",
+                        mine: true,
+                        body: "It's live!",
+                        createdAt: hoursAgo(1),
+                    },
+                    {
+                        id: "4",
+                        mine: false,
+                        author: "Mira",
+                        body: "Amazing, well done.",
+                        createdAt: hoursAgo(0.9),
+                    },
+                    {
+                        id: "5",
+                        mine: false,
+                        author: "Mira",
+                        body: "Celebrating at lunch?",
+                        createdAt: hoursAgo(0.88),
+                    },
+                ]}
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,71 @@
+import { CustomerSupportIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import {
+    Conversation,
+    type ConversationMessage,
+} from "@passui/react/conversation"
+import { useState } from "react"
+
+const minutesAgo = (minutes: number) =>
+    new Date(Date.now() - minutes * 60_000).toISOString()
+
+const support = {
+    mine: false,
+    author: "Pass support",
+    avatar: (
+        <span className="flex size-7 items-center justify-center rounded-full bg-accent-soft text-accent-text">
+            <HugeiconsIcon
+                icon={CustomerSupportIcon}
+                size={16}
+            />
+        </span>
+    ),
+}
+
+export function ConversationShowcase() {
+    const [messages, setMessages] = useState<
+        ConversationMessage[]
+    >(() => [
+        {
+            id: "1",
+            mine: true,
+            body: "Hi, I lost my phone and can't get my sign-in codes.",
+            createdAt: minutesAgo(26),
+        },
+        {
+            id: "2",
+            ...support,
+            body: "We can help. Do you still have your recovery key?",
+            createdAt: minutesAgo(24),
+        },
+        {
+            id: "3",
+            ...support,
+            body: "It's the 24-letter key you saved when you turned on two-step verification.",
+            createdAt: minutesAgo(24),
+        },
+    ])
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <Conversation.Messages messages={messages} />
+            <Conversation.Composer
+                placeholder="Write a reply"
+                maxLength={500}
+                sendLabel="Send"
+                onSend={async (body) => {
+                    setMessages((current) => [
+                        ...current,
+                        {
+                            id: String(current.length + 1),
+                            mine: true,
+                            body,
+                            createdAt:
+                                new Date().toISOString(),
+                        },
+                    ])
+                }}
+            />
+        </div>
+    )
+}

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

@@ -0,0 +1,28 @@
+import { Conversation } from "@passui/react/conversation"
+
+const minutesAgo = (minutes: number) =>
+    new Date(Date.now() - minutes * 60_000).toISOString()
+
+export function ConversationUsage() {
+    return (
+        <div className="w-full max-w-sm">
+            <Conversation.Messages
+                messages={[
+                    {
+                        id: "1",
+                        mine: false,
+                        author: "Kenji",
+                        body: "Are we still on for lunch?",
+                        createdAt: minutesAgo(4),
+                    },
+                    {
+                        id: "2",
+                        mine: true,
+                        body: "Yes! 12:30 at the usual place.",
+                        createdAt: minutesAgo(2),
+                    },
+                ]}
+            />
+        </div>
+    )
+}

package/src/components/conversation/index.ts

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

package/src/components/date-picker/date-picker.docs.tsx

@@ -0,0 +1,88 @@
+import type { ComponentProps } from "react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { DatePicker } from "./date-picker"
+import { DatePickerLocales } from "./examples/date-picker-locales"
+import { DatePickerPastOnly } from "./examples/date-picker-past-only"
+import { DatePickerShowcase } from "./examples/date-picker-showcase"
+import { DatePickerUsage } from "./examples/date-picker-usage"
+
+type DatePickerProps = ComponentProps<typeof DatePicker>
+
+// A handful of locales whose field order differs, so the playground
+// shows the order following the locale.
+type DemoProps = Pick<DatePickerProps, "label"> & {
+    locale: "en-US" | "en-GB" | "fr-FR" | "zh-CN" | "ja-JP"
+}
+
+const labels = {
+    day: "Day",
+    month: "Month",
+    year: "Year",
+    invalid: "Enter a real date.",
+}
+
+function DatePickerDemo({ locale, label }: DemoProps) {
+    const [birthday, setBirthday] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <DatePicker
+                key={locale}
+                label={label}
+                labels={labels}
+                locale={locale}
+                value={birthday}
+                onChange={setBirthday}
+            />
+        </div>
+    )
+}
+
+export const datePickerDocs = defineDocs<DemoProps>()({
+    slug: "date-picker",
+    name: "DatePicker",
+    importPath: "@passui/react/date-picker",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Birthday",
+            required: true,
+        },
+        locale: {
+            kind: "select",
+            options: {
+                "en-US": true,
+                "en-GB": true,
+                "fr-FR": true,
+                "zh-CN": true,
+                "ja-JP": true,
+            },
+            default: "en-US",
+        },
+    },
+    render: (values) => <DatePickerDemo {...values} />,
+    childrenSnippet: ({ locale }) => ({
+        imports: ['import { useState } from "react"'],
+        setup: [
+            'const [birthday, setBirthday] = useState("")',
+        ],
+        children: "",
+        omit: ["locale"],
+        extraProps: { locale },
+        expressionProps: {
+            labels: '{ day: "Day", month: "Month", year: "Year", invalid: "Enter a real date." }',
+            value: "birthday",
+            onChange: "setBirthday",
+        },
+    }),
+    usage: DatePickerUsage,
+    showcase: DatePickerShowcase,
+    examples: [
+        {
+            id: "locales",
+            component: DatePickerLocales,
+            playground: { locale: "zh-CN" },
+        },
+        { id: "past-only", component: DatePickerPastOnly },
+    ],
+})

package/src/components/date-picker/date-picker.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react"
+import { TextField } from "../text-field/text-field"
+import { dateValue } from "./date-value"
+
+type DatePickerProps = {
+    value: string
+    onChange: (value: string) => void
+    label: string
+    labels: {
+        day: string
+        month: string
+        year: string
+        invalid: string
+    }
+    locale: string
+    max?: string
+}
+
+/** Segmented date entry suited to birthdays, without a native calendar dialog. */
+export function DatePicker({
+    value,
+    onChange,
+    label,
+    labels,
+    locale,
+    max,
+}: DatePickerProps) {
+    const [year, month, day] = value.split("-")
+    const [parts, setParts] = useState({
+        year: year ?? "",
+        month: month ?? "",
+        day: day ?? "",
+    })
+    const complete =
+        parts.year.length === 4 &&
+        Boolean(parts.month && parts.day)
+    const invalid =
+        complete &&
+        !dateValue(parts.year, parts.month, parts.day, max)
+    const order = new Intl.DateTimeFormat(locale, {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        timeZone: "UTC",
+    })
+        .formatToParts(new Date("2000-01-02T00:00:00Z"))
+        .filter(
+            (
+                part
+            ): part is Intl.DateTimeFormatPart & {
+                type: "year" | "month" | "day"
+            } =>
+                part.type === "year" ||
+                part.type === "month" ||
+                part.type === "day"
+        )
+    return (
+        <fieldset className="flex min-w-0 flex-col gap-3">
+            <legend className="mb-3 text-subheadline font-medium">
+                {label}
+            </legend>
+            <div className="grid grid-cols-3 gap-3">
+                {order.map(({ type }) => (
+                    <TextField
+                        key={type}
+                        label={labels[type]}
+                        inputMode="numeric"
+                        autoComplete={`bday-${type}`}
+                        maxLength={type === "year" ? 4 : 2}
+                        value={parts[type]}
+                        aria-invalid={invalid || undefined}
+                        onChange={(event) => {
+                            const next = {
+                                ...parts,
+                                [type]: event.target.value.replace(
+                                    /\D/g,
+                                    ""
+                                ),
+                            }
+                            setParts(next)
+                            onChange(
+                                dateValue(
+                                    next.year,
+                                    next.month,
+                                    next.day,
+                                    max
+                                )
+                            )
+                        }}
+                    />
+                ))}
+            </div>
+            {invalid && (
+                <p
+                    role="status"
+                    className="text-footnote text-danger"
+                >
+                    {labels.invalid}
+                </p>
+            )}
+        </fieldset>
+    )
+}