@passui/react 0.0.0-stage → 0.1.14

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

@@ -0,0 +1,123 @@
+import {
+    Analytics01Icon,
+    Folder01Icon,
+    Home01Icon,
+    Settings01Icon,
+    UserIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import {
+    SidebarItemContent,
+    SidebarSection,
+    sidebarItemClass,
+} from "@passui/react/sidebar"
+import { useState } from "react"
+
+const sections = [
+    {
+        title: "Console",
+        items: [
+            {
+                id: "overview",
+                label: "Overview",
+                icon: Home01Icon,
+            },
+            {
+                id: "apps",
+                label: "Applications",
+                icon: Folder01Icon,
+                count: 6,
+            },
+            {
+                id: "users",
+                label: "Users",
+                icon: UserIcon,
+                count: 1284,
+            },
+            {
+                id: "activity",
+                label: "Activity",
+                icon: Analytics01Icon,
+            },
+        ],
+    },
+    {
+        title: "Project",
+        items: [
+            {
+                id: "settings",
+                label: "Settings",
+                icon: Settings01Icon,
+            },
+        ],
+    },
+]
+
+const titles: Record<string, string> = {
+    overview: "Overview",
+    apps: "Applications",
+    users: "Users",
+    activity: "Activity",
+    settings: "Settings",
+}
+
+export function SidebarShowcase() {
+    const [active, setActive] = useState("users")
+
+    return (
+        <div className="flex h-80 w-full max-w-2xl overflow-hidden rounded-5xl bg-background shadow-sm ring-1 ring-separator/60">
+            <nav
+                aria-label="Console"
+                className="glass-pane flex w-56 shrink-0 flex-col gap-5 p-3 max-sm:hidden"
+            >
+                {sections.map((section) => (
+                    <SidebarSection
+                        key={section.title}
+                        title={section.title}
+                    >
+                        {section.items.map((item) => (
+                            <a
+                                key={item.id}
+                                href={`#${item.id}`}
+                                aria-current={
+                                    item.id === active
+                                        ? "page"
+                                        : undefined
+                                }
+                                className={sidebarItemClass(
+                                    item.id === active
+                                )}
+                                onClick={(event) => {
+                                    event.preventDefault()
+                                    setActive(item.id)
+                                }}
+                            >
+                                <SidebarItemContent
+                                    active={
+                                        item.id === active
+                                    }
+                                    count={item.count}
+                                    icon={
+                                        <HugeiconsIcon
+                                            icon={item.icon}
+                                            size={18}
+                                        />
+                                    }
+                                >
+                                    {item.label}
+                                </SidebarItemContent>
+                            </a>
+                        ))}
+                    </SidebarSection>
+                ))}
+            </nav>
+            <div className="flex flex-1 flex-col gap-3 p-6">
+                <h2 className="text-title3 font-bold text-label">
+                    {titles[active]}
+                </h2>
+                <div className="h-16 rounded-3xl bg-fill/60" />
+                <div className="h-16 rounded-3xl bg-fill/60" />
+            </div>
+        </div>
+    )
+}

package/src/components/sidebar/examples/sidebar-unread.tsx

@@ -0,0 +1,66 @@
+import {
+    InboxIcon,
+    StarIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Button } from "@passui/react/button"
+import {
+    SidebarItemContent,
+    SidebarSection,
+    sidebarItemClass,
+} from "@passui/react/sidebar"
+import { useState } from "react"
+
+export function SidebarUnread() {
+    const [unread, setUnread] = useState(5)
+
+    return (
+        <div className="flex w-60 flex-col gap-4 rounded-4xl bg-sidebar p-3">
+            <nav aria-label="Mail">
+                <SidebarSection title="Mailboxes">
+                    <a
+                        href="#inbox"
+                        aria-current="page"
+                        className={sidebarItemClass(true)}
+                    >
+                        <SidebarItemContent
+                            active
+                            count={unread || undefined}
+                            icon={
+                                <HugeiconsIcon
+                                    icon={InboxIcon}
+                                    size={18}
+                                />
+                            }
+                        >
+                            Inbox
+                        </SidebarItemContent>
+                    </a>
+                    <a
+                        href="#starred"
+                        className={sidebarItemClass()}
+                    >
+                        <SidebarItemContent
+                            icon={
+                                <HugeiconsIcon
+                                    icon={StarIcon}
+                                    size={18}
+                                />
+                            }
+                        >
+                            Starred
+                        </SidebarItemContent>
+                    </a>
+                </SidebarSection>
+            </nav>
+            <Button
+                variant="secondary"
+                size="sm"
+                disabled={unread === 0}
+                onClick={() => setUnread(0)}
+            >
+                Mark all as read
+            </Button>
+        </div>
+    )
+}

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

@@ -0,0 +1,52 @@
+import {
+    Home01Icon,
+    Settings01Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import {
+    SidebarItemContent,
+    SidebarSection,
+    sidebarItemClass,
+} from "@passui/react/sidebar"
+
+export function SidebarUsage() {
+    // Use your router's link in place of <a>, passing it the class.
+    return (
+        <nav aria-label="Main" className="w-56">
+            <SidebarSection title="Workspace">
+                <a
+                    href="#home"
+                    aria-current="page"
+                    className={sidebarItemClass(true)}
+                >
+                    <SidebarItemContent
+                        active
+                        icon={
+                            <HugeiconsIcon
+                                icon={Home01Icon}
+                                size={18}
+                            />
+                        }
+                    >
+                        Home
+                    </SidebarItemContent>
+                </a>
+                <a
+                    href="#settings"
+                    className={sidebarItemClass()}
+                >
+                    <SidebarItemContent
+                        icon={
+                            <HugeiconsIcon
+                                icon={Settings01Icon}
+                                size={18}
+                            />
+                        }
+                    >
+                        Settings
+                    </SidebarItemContent>
+                </a>
+            </SidebarSection>
+        </nav>
+    )
+}

package/src/components/sidebar/sidebar.docs.tsx

@@ -0,0 +1,135 @@
+import { SidebarUnread } from "./examples/sidebar-unread"
+import {
+    InboxIcon,
+    SentIcon,
+    StarIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { SidebarGroups } from "./examples/sidebar-groups"
+import { SidebarShowcase } from "./examples/sidebar-showcase"
+import { SidebarUsage } from "./examples/sidebar-usage"
+import {
+    SidebarItemContent,
+    SidebarSection,
+    sidebarItemClass,
+} from "./sidebar"
+
+// Rows are the app's own links dressed by sidebarItemClass and
+// SidebarItemContent, so the playground switches counts on and the
+// snippet writes the rows.
+type DemoProps = {
+    title: string
+    counts: boolean
+}
+
+const items = [
+    {
+        id: "inbox",
+        label: "Inbox",
+        icon: InboxIcon,
+        count: 12,
+    },
+    {
+        id: "starred",
+        label: "Starred",
+        icon: StarIcon,
+        count: 3,
+    },
+    { id: "sent", label: "Sent", icon: SentIcon, count: 0 },
+]
+
+function SidebarDemo({ title, counts }: DemoProps) {
+    const [active, setActive] = useState("inbox")
+    return (
+        <nav aria-label="Mail" className="w-56">
+            <SidebarSection title={title}>
+                {items.map((item) => (
+                    <a
+                        key={item.id}
+                        href={`#${item.id}`}
+                        aria-current={
+                            item.id === active
+                                ? "page"
+                                : undefined
+                        }
+                        className={sidebarItemClass(
+                            item.id === active
+                        )}
+                        onClick={(event) => {
+                            event.preventDefault()
+                            setActive(item.id)
+                        }}
+                    >
+                        <SidebarItemContent
+                            active={item.id === active}
+                            count={
+                                counts
+                                    ? item.count
+                                    : undefined
+                            }
+                            icon={
+                                <HugeiconsIcon
+                                    icon={item.icon}
+                                    size={18}
+                                />
+                            }
+                        >
+                            {item.label}
+                        </SidebarItemContent>
+                    </a>
+                ))}
+            </SidebarSection>
+        </nav>
+    )
+}
+
+export const sidebarDocs = defineDocs<DemoProps>()({
+    slug: "sidebar",
+    name: "SidebarSection",
+    importPath: "@passui/react/sidebar",
+    controls: {
+        title: {
+            kind: "text",
+            default: "Mailboxes",
+            required: true,
+        },
+        counts: { kind: "boolean", default: true },
+    },
+    render: (values) => <SidebarDemo {...values} />,
+    childrenSnippet: ({ counts }) => ({
+        imports: [
+            'import { InboxIcon } from "@hugeicons/core-free-icons"',
+            'import { HugeiconsIcon } from "@hugeicons/react"',
+            'import { SidebarItemContent, sidebarItemClass } from "@passui/react/sidebar"',
+            'import { Link } from "@tanstack/react-router"',
+        ],
+        omit: ["counts"],
+        children: [
+            "",
+            '    <Link to="/inbox">',
+            "        {({ isActive }) => (",
+            "            <span className={sidebarItemClass(isActive)}>",
+            "                <SidebarItemContent",
+            "                    active={isActive}",
+            ...(counts
+                ? ["                    count={12}"]
+                : []),
+            "                    icon={<HugeiconsIcon icon={InboxIcon} size={18} />}",
+            "                >",
+            "                    Inbox",
+            "                </SidebarItemContent>",
+            "            </span>",
+            "        )}",
+            "    </Link>",
+            "",
+        ].join("\n"),
+    }),
+    usage: SidebarUsage,
+    showcase: SidebarShowcase,
+    examples: [
+        { id: "groups", component: SidebarGroups },
+        { id: "unread", component: SidebarUnread },
+    ],
+})

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export function SidebarSection({
+    title,
+    children,
+}: {
+    title: string
+    children: ReactNode
+}) {
+    return (
+        <div className="flex flex-col gap-0.5">
+            <span className="px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary">
+                {title}
+            </span>
+            {children}
+        </div>
+    )
+}
+
+/** Classes for a sidebar row; apply to the app's router link. */
+export function sidebarItemClass(active?: boolean): string {
+    return cn(
+        "group flex items-center gap-2.5 rounded-2xl px-2.5 py-[7px] text-subheadline text-label no-underline transition-colors duration-fast",
+        active
+            ? "bg-accent-soft font-medium text-label"
+            : "hover:bg-fill/70"
+    )
+}
+
+export function SidebarItemContent({
+    icon,
+    count,
+    active,
+    children,
+}: {
+    icon: ReactNode
+    count?: number
+    active?: boolean
+    children: ReactNode
+}) {
+    return (
+        <>
+            <span
+                className={cn(
+                    "flex transition-colors",
+                    active
+                        ? "text-accent-text"
+                        : "text-label-secondary"
+                )}
+            >
+                {icon}
+            </span>
+            <span className="grow truncate">{children}</span>
+            {count !== undefined && (
+                <span
+                    className={cn(
+                        "text-footnote tabular-nums",
+                        active
+                            ? "text-accent-text"
+                            : "text-label-tertiary"
+                    )}
+                >
+                    {count}
+                </span>
+            )}
+        </>
+    )
+}

package/src/components/stat-tile/examples/stat-tile-filters.tsx

@@ -0,0 +1,32 @@
+import { StatTile } from "@passui/react/stat-tile"
+import { useState } from "react"
+
+const filters = [
+    { id: "all", label: "All requests", value: 42 },
+    { id: "open", label: "Open", value: 7 },
+    { id: "waiting", label: "Waiting on you", value: 2 },
+]
+
+export function StatTileFilters() {
+    const [active, setActive] = useState("open")
+
+    return (
+        <div className="flex w-full max-w-xl flex-col gap-3">
+            <div className="grid grid-cols-3 gap-3">
+                {filters.map((filter) => (
+                    <StatTile
+                        key={filter.id}
+                        label={filter.label}
+                        value={filter.value}
+                        active={active === filter.id}
+                        onClick={() => setActive(filter.id)}
+                    />
+                ))}
+            </div>
+            <p className="text-center text-footnote text-label-secondary">
+                Showing:{" "}
+                {filters.find((f) => f.id === active)?.label}
+            </p>
+        </div>
+    )
+}

package/src/components/stat-tile/examples/stat-tile-grid.tsx

@@ -0,0 +1,21 @@
+import { StatTile } from "@passui/react/stat-tile"
+
+export function StatTileGrid() {
+    return (
+        <div className="grid w-full max-w-xl grid-cols-2 gap-3 sm:grid-cols-4">
+            <StatTile label="People" value={1284} />
+            <StatTile
+                label="Signed in now"
+                value={86}
+                caption="Across 3 apps"
+            />
+            <StatTile label="New today" value={12} />
+            <StatTile
+                label="Failed sign-ins"
+                value={3}
+                caption="In the last hour"
+                tone="critical"
+            />
+        </div>
+    )
+}

package/src/components/stat-tile/examples/stat-tile-showcase.tsx

@@ -0,0 +1,52 @@
+import { StatTile } from "@passui/react/stat-tile"
+import { useState } from "react"
+
+const tiles = [
+    {
+        id: "people",
+        label: "People",
+        value: 1284,
+        caption: "32 joined this week",
+    },
+    {
+        id: "sessions",
+        label: "Signed in now",
+        value: 86,
+        caption: "Across 41 devices",
+    },
+    {
+        id: "apps",
+        label: "Apps",
+        value: 12,
+        caption: "3 updated today",
+    },
+    {
+        id: "failures",
+        label: "Failed sign ins",
+        value: 3,
+        caption: "In the last hour",
+        critical: true,
+    },
+]
+
+export function StatTileShowcase() {
+    const [active, setActive] = useState("people")
+
+    return (
+        <div className="grid w-full max-w-lg grid-cols-2 gap-3">
+            {tiles.map((tile) => (
+                <StatTile
+                    key={tile.id}
+                    label={tile.label}
+                    value={tile.value}
+                    caption={tile.caption}
+                    tone={
+                        tile.critical ? "critical" : undefined
+                    }
+                    active={active === tile.id}
+                    onClick={() => setActive(tile.id)}
+                />
+            ))}
+        </div>
+    )
+}

package/src/components/stat-tile/examples/stat-tile-usage.tsx

@@ -0,0 +1,13 @@
+import { StatTile } from "@passui/react/stat-tile"
+
+export function StatTileUsage() {
+    return (
+        <div className="w-56">
+            <StatTile
+                label="Active people"
+                value={1284}
+                caption="This week"
+            />
+        </div>
+    )
+}

package/src/components/stat-tile/index.ts

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

package/src/components/stat-tile/stat-tile.docs.tsx

@@ -0,0 +1,60 @@
+import { StatTileFilters } from "./examples/stat-tile-filters"
+import { StatTileGrid } from "./examples/stat-tile-grid"
+import { defineDocs } from "../../docs/types"
+import { StatTileShowcase } from "./examples/stat-tile-showcase"
+import { StatTileUsage } from "./examples/stat-tile-usage"
+import { StatTile } from "./stat-tile"
+
+type DemoProps = {
+    label: string
+    caption?: string
+    critical?: boolean
+    active?: boolean
+}
+
+export const statTileDocs = defineDocs<DemoProps>()({
+    slug: "stat-tile",
+    name: "StatTile",
+    importPath: "@passui/react/stat-tile",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Failed sign ins",
+            required: true,
+        },
+        caption: {
+            kind: "text",
+            default: "In the last hour",
+        },
+        critical: { kind: "boolean", default: true },
+        active: { kind: "boolean", default: false },
+    },
+    render: ({ critical, ...values }) => (
+        <div className="w-56">
+            <StatTile
+                {...values}
+                value={3}
+                tone={critical ? "critical" : undefined}
+            />
+        </div>
+    ),
+    childrenSnippet: ({ critical }) => ({
+        imports: [],
+        children: "",
+        omit: ["critical"],
+        expressionProps: {
+            value: "3",
+            ...(critical ? { tone: '"critical"' } : {}),
+        },
+    }),
+    usage: StatTileUsage,
+    showcase: StatTileShowcase,
+    examples: [
+        { id: "grid", component: StatTileGrid },
+        {
+            id: "filters",
+            component: StatTileFilters,
+            playground: { active: true },
+        },
+    ],
+})