@dataif/cli 0.1.0

package/templates/dataif/services/web/src/components/application/app-navigation/base-components/nav-list.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { cx } from "@/utils/cx";
+import type { NavItemDividerType, NavItemType } from "../config";
+import { NavItemBase } from "./nav-item";
+
+interface NavListProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** Additional CSS classes to apply to the list. */
+    className?: string;
+    /** List of items to display. */
+    items: (NavItemType | NavItemDividerType)[];
+}
+
+export const NavList = ({ activeUrl, items, className }: NavListProps) => {
+    const [open, setOpen] = useState(false);
+    const activeItem = items.find((item) => item.href === activeUrl || item.items?.some((subItem) => subItem.href === activeUrl));
+    const [currentItem, setCurrentItem] = useState(activeItem);
+
+    return (
+        <ul className={cx("mt-4 flex flex-col px-2 lg:px-4", className)}>
+            {items.map((item, index) => {
+                if (item.divider) {
+                    return (
+                        <li key={index} className="w-full px-0.5 py-2">
+                            <hr className="h-px w-full border-none bg-border-secondary" />
+                        </li>
+                    );
+                }
+
+                if (item.items?.length) {
+                    return (
+                        <details
+                            key={item.label}
+                            open={activeItem?.href === item.href}
+                            className="appearance-none py-0.5"
+                            onToggle={(e) => {
+                                setOpen(e.currentTarget.open);
+                                setCurrentItem(item);
+                            }}
+                        >
+                            <NavItemBase href={item.href} badge={item.badge} icon={item.icon} type="collapsible">
+                                {item.label}
+                            </NavItemBase>
+
+                            <dd>
+                                <ul className="py-0.5">
+                                    {item.items.map((childItem) => (
+                                        <li key={childItem.label} className="py-0.5">
+                                            <NavItemBase
+                                                href={childItem.href}
+                                                badge={childItem.badge}
+                                                type="collapsible-child"
+                                                current={activeUrl === childItem.href}
+                                            >
+                                                {childItem.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </dd>
+                        </details>
+                    );
+                }
+
+                return (
+                    <li key={item.label} className="py-0.5">
+                        <NavItemBase
+                            type="link"
+                            badge={item.badge}
+                            icon={item.icon}
+                            href={item.href}
+                            current={currentItem?.href === item.href}
+                            open={open && currentItem?.href === item.href}
+                        >
+                            {item.label}
+                        </NavItemBase>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};

package/templates/dataif/services/web/src/components/application/app-navigation/config.ts

@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from "react";
+
+export type NavItemType = {
+    /** Label text for the nav item. */
+    label: string;
+    /** URL to navigate to when the nav item is clicked. */
+    href?: string;
+    /** Icon component to display. */
+    icon?: FC<{ className?: string }>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** List of sub-items to display. */
+    items?: { label: string; href: string; icon?: FC<{ className?: string }>; badge?: ReactNode }[];
+    /** Whether this nav item is a divider. */
+    divider?: boolean;
+};
+
+export type NavItemDividerType = Omit<NavItemType, "icon" | "label" | "divider"> & {
+    /** Label text for the divider. */
+    label?: string;
+    /** Whether this nav item is a divider. */
+    divider: true;
+};

package/templates/dataif/services/web/src/components/application/app-navigation/header-navigation.tsx

@@ -0,0 +1,240 @@
+import type { FC, ReactNode } from "react";
+import { Bell01, LifeBuoy01, SearchLg, Settings01 } from "@untitledui/icons";
+import { Button as AriaButton, DialogTrigger, Popover } from "react-aria-components";
+import { Avatar } from "@/components/base/avatar/avatar";
+import { BadgeWithDot } from "@/components/base/badges/badges";
+import { Input } from "@/components/base/input/input";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+import { MobileNavigationHeader } from "./base-components/mobile-header";
+import { NavAccountCard, NavAccountMenu } from "./base-components/nav-account-card";
+import { NavItemBase } from "./base-components/nav-item";
+import { NavItemButton } from "./base-components/nav-item-button";
+import { NavList } from "./base-components/nav-list";
+
+type NavItem = {
+    /** Label text for the nav item. */
+    label: string;
+    /** URL to navigate to when the nav item is clicked. */
+    href: string;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Icon component to display. */
+    icon?: FC<{ className?: string }>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** List of sub-items to display. */
+    items?: NavItem[];
+};
+
+interface HeaderNavigationBaseProps {
+    /** URL of the currently active item. */
+    activeUrl?: string;
+    /** List of items to display. */
+    items: NavItem[];
+    /** List of sub-items to display. */
+    subItems?: NavItem[];
+    /** Content to display in the trailing position. */
+    trailingContent?: ReactNode;
+    /** Logo to display in the leading position. */
+    logo?: ReactNode;
+    /** Logo to display in the mobile header. */
+    mobileLogo?: ReactNode;
+    /** Whether to show the avatar dropdown. */
+    showAvatarDropdown?: boolean;
+    /** Whether to show the default utility icon buttons. */
+    showDefaultUtilityButtons?: boolean;
+    /** Whether to hide the bottom border. */
+    hideBorder?: boolean;
+    /** Search slot rendered in the mobile drawer. Pass `null` to hide it. */
+    mobileSearchSlot?: ReactNode;
+    /** Search slot rendered in the secondary nav. Pass `null` to hide it. */
+    secondarySearchSlot?: ReactNode;
+    /** Content rendered at the bottom of the mobile drawer. */
+    mobileFooterContent?: ReactNode;
+    /** Custom avatar dropdown element. */
+    avatarDropdown?: ReactNode;
+}
+
+export const HeaderNavigationBase = ({
+    activeUrl,
+    items,
+    subItems,
+    trailingContent,
+    logo,
+    mobileLogo,
+    showAvatarDropdown = true,
+    showDefaultUtilityButtons = true,
+    hideBorder = false,
+    mobileSearchSlot,
+    secondarySearchSlot,
+    mobileFooterContent,
+    avatarDropdown,
+}: HeaderNavigationBaseProps) => {
+    const activeSubNavItems = subItems || items.find((item) => item.current && item.items && item.items.length > 0)?.items;
+
+    const showSecondaryNav = activeSubNavItems && activeSubNavItems.length > 0;
+
+    return (
+        <>
+            <MobileNavigationHeader logo={mobileLogo || logo}>
+                <aside className="flex h-full max-w-full flex-col justify-between overflow-auto border-r border-secondary bg-primary pt-4 lg:pt-6">
+                    <div className="flex flex-col gap-5 px-4 lg:px-5">
+                        {logo || <UntitledLogo className="h-8" />}
+                        {mobileSearchSlot === undefined ? (
+                            <Input shortcut size="sm" aria-label="Search" placeholder="Search" icon={SearchLg} />
+                        ) : (
+                            mobileSearchSlot
+                        )}
+                    </div>
+
+                    <NavList items={items} />
+
+                    {mobileFooterContent === undefined ? (
+                        <div className="mt-auto flex flex-col gap-4 px-2 py-4 lg:px-4 lg:py-6">
+                            <div className="flex flex-col gap-1">
+                                <NavItemBase type="link" href="#" icon={LifeBuoy01}>
+                                    Support
+                                </NavItemBase>
+                                <NavItemBase
+                                    type="link"
+                                    href="#"
+                                    icon={Settings01}
+                                    badge={
+                                        <BadgeWithDot color="success" type="modern" size="sm">
+                                            Online
+                                        </BadgeWithDot>
+                                    }
+                                >
+                                    Settings
+                                </NavItemBase>
+                                <NavItemBase type="link" href="https://www.untitledui.com/" icon={Settings01}>
+                                    Open in browser
+                                </NavItemBase>
+                            </div>
+
+                            <NavAccountCard />
+                        </div>
+                    ) : (
+                        mobileFooterContent
+                    )}
+                </aside>
+            </MobileNavigationHeader>
+
+            <header className="max-lg:hidden">
+                <section
+                    className={cx(
+                        "flex h-16 w-full items-center justify-center bg-primary md:h-18",
+                        (!hideBorder || showSecondaryNav) && "border-b border-secondary",
+                    )}
+                >
+                    <div className="flex w-full max-w-container justify-between pr-3 pl-4 md:px-8">
+                        <div className="flex flex-1 items-center gap-4">
+                            {logo || (
+                                <a
+                                    aria-label="Go to homepage"
+                                    href="/"
+                                    className="rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                                >
+                                    <UntitledLogo className="h-8" />
+                                </a>
+                            )}
+
+                            <nav>
+                                <ul className="flex items-center gap-0.5">
+                                    {items.map((item) => (
+                                        <li key={item.label} className="py-0.5">
+                                            <NavItemBase icon={item.icon} href={item.href} current={item.current} badge={item.badge} type="link">
+                                                {item.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </nav>
+                        </div>
+
+                        <div className="flex items-center gap-3">
+                            {trailingContent}
+
+                            {showDefaultUtilityButtons && (
+                                <div className="flex gap-0.5">
+                                    <NavItemButton
+                                        current={activeUrl === "/settings-01"}
+                                        size="md"
+                                        icon={Settings01}
+                                        label="Settings"
+                                        href="/settings-01"
+                                        tooltipPlacement="bottom"
+                                    />
+                                    <NavItemButton
+                                        current={activeUrl === "/notifications-01"}
+                                        size="md"
+                                        icon={Bell01}
+                                        label="Notifications"
+                                        href="/notifications-01"
+                                        tooltipPlacement="bottom"
+                                    />
+                                </div>
+                            )}
+
+                            {avatarDropdown ||
+                                (showAvatarDropdown && (
+                                    <DialogTrigger>
+                                        <AriaButton
+                                            className={({ isPressed, isFocused }) =>
+                                                cx(
+                                                    "group relative inline-flex cursor-pointer",
+                                                    (isPressed || isFocused) && "rounded-full outline-2 outline-offset-2 outline-focus-ring",
+                                                )
+                                            }
+                                        >
+                                            <Avatar alt="Olivia Rhye" src="https://www.untitledui.com/images/avatars/olivia-rhye?bg=%23E0E0E0" size="md" />
+                                        </AriaButton>
+                                        <Popover
+                                            placement="bottom right"
+                                            offset={8}
+                                            className={({ isEntering, isExiting }) =>
+                                                cx(
+                                                    "will-change-transform",
+                                                    isEntering &&
+                                                        "duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2",
+                                                    isExiting &&
+                                                        "duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2",
+                                                )
+                                            }
+                                        >
+                                            <NavAccountMenu />
+                                        </Popover>
+                                    </DialogTrigger>
+                                ))}
+                        </div>
+                    </div>
+                </section>
+
+                {showSecondaryNav && (
+                    <section className={cx("flex h-16 w-full items-center justify-center bg-primary", !hideBorder && "border-b border-secondary")}>
+                        <div className="flex w-full max-w-container items-center justify-between gap-8 px-8">
+                            <nav>
+                                <ul className="flex items-center gap-0.5">
+                                    {activeSubNavItems.map((item) => (
+                                        <li key={item.label} className="py-0.5">
+                                            <NavItemBase icon={item.icon} href={item.href} current={item.current} badge={item.badge} type="link">
+                                                {item.label}
+                                            </NavItemBase>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </nav>
+
+                            {secondarySearchSlot === undefined ? (
+                                <Input shortcut aria-label="Search" placeholder="Search" icon={SearchLg} size="sm" className="max-w-xs" />
+                            ) : (
+                                secondarySearchSlot
+                            )}
+                        </div>
+                    </section>
+                )}
+            </header>
+        </>
+    );
+};