@dataif/cli 0.1.0

package/templates/dataif/services/web/src/components/AppHeader.jsx

@@ -0,0 +1,233 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Moon01, Sun } from "@untitledui/icons";
+
+import avatarPlaceholder from "@/assets/avatar_placeholder.png";
+import githubLogo from "@/assets/github_logo_icon_229278.svg";
+import ifLogo from "@/assets/if-logo.png";
+import { useTheme } from "@/providers/theme-provider";
+
+function routeToHref(path) {
+  return `#${path}`;
+}
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const isDark = theme === "dark";
+  const Icon = isDark ? Sun : Moon01;
+
+  return (
+    <button
+      type="button"
+      className="icon-button"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      title={isDark ? "Ativar modo claro" : "Ativar modo escuro"}
+      aria-label={isDark ? "Ativar modo claro" : "Ativar modo escuro"}
+    >
+      <Icon className="size-5" />
+    </button>
+  );
+}
+
+function HeaderLogo() {
+  return (
+    <a className="app-brand" href={routeToHref("/")}>
+      <span className="app-brand-mark">
+        <img src={ifLogo} alt="Instituto Federal" />
+      </span>
+      <span className="app-brand-label">DataIF</span>
+    </a>
+  );
+}
+
+function NavLink({ item, active }) {
+  return (
+    <a className={`nav-link${active ? " active" : ""}`} href={routeToHref(item.path)}>
+      {item.label}
+    </a>
+  );
+}
+
+function AccountMenu({ adminNavItems, auth, onAdminSettings, onLogout, onRequestLogin, onSelectRoute }) {
+  const accountLabel =
+    auth.claims?.preferred_username ||
+    auth.claims?.email ||
+    (auth.status === "authenticated" ? "Administrador" : "Convidado");
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    function handlePointerDown(event) {
+      if (!menuRef.current?.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    window.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("keydown", handleEscape);
+
+    return () => {
+      window.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, []);
+
+  return (
+    <div className="account-menu" ref={menuRef}>
+      <button
+        type="button"
+        className="icon-button avatar-button"
+        onClick={() => setIsOpen((current) => !current)}
+        aria-label="Abrir menu do usuario"
+        aria-expanded={isOpen}
+      >
+        <img src={avatarPlaceholder} alt="" />
+      </button>
+
+      {isOpen ? (
+        <div className="account-dropdown">
+          <div className="account-dropdown-head">
+            <strong>{accountLabel}</strong>
+            <span>{auth.status === "authenticated" ? "Sessão ativa" : "Acesso visitante"}</span>
+          </div>
+
+          {auth.status === "authenticated" ? (
+            <>
+              <div className="account-dropdown-group">
+                <button
+                  type="button"
+                  className="account-dropdown-item"
+                  onClick={() => {
+                    setIsOpen(false);
+                    onSelectRoute("/configurações");
+                  }}
+                >
+                  Conta
+                </button>
+                {adminNavItems.map((item) => (
+                  <button
+                    key={item.path}
+                    type="button"
+                    className="account-dropdown-item"
+                    onClick={() => {
+                      setIsOpen(false);
+                      onSelectRoute(item.path);
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  className="account-dropdown-item"
+                  onClick={() => {
+                    setIsOpen(false);
+                    onAdminSettings();
+                  }}
+                >
+                  Configurações Admin
+                </button>
+              </div>
+
+              <button
+                type="button"
+                className="account-dropdown-item account-dropdown-item-danger"
+                onClick={() => {
+                  setIsOpen(false);
+                  onLogout();
+                }}
+              >
+                Sair
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              className="account-dropdown-item"
+              onClick={() => {
+                setIsOpen(false);
+                onRequestLogin();
+              }}
+              disabled={auth.status === "loading"}
+            >
+              {auth.status === "loading" ? "Verificando..." : "Login"}
+            </button>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function HeaderActions({ adminNavItems, auth, githubRepoUrl, onAdminSettings, onLogout, onRequestLogin, onSelectRoute }) {
+  return (
+    <>
+      <ThemeToggle />
+      <a
+        className="icon-button"
+        href={githubRepoUrl}
+        target="_blank"
+        rel="noreferrer"
+        aria-label="GitHub"
+        title="GitHub"
+      >
+        <img src={githubLogo} alt="" className="github-icon" />
+      </a>
+      <AccountMenu
+        adminNavItems={adminNavItems}
+        auth={auth}
+        onAdminSettings={onAdminSettings}
+        onLogout={onLogout}
+        onRequestLogin={onRequestLogin}
+        onSelectRoute={onSelectRoute}
+      />
+    </>
+  );
+}
+
+export default function AppHeader({
+  auth,
+  githubRepoUrl,
+  adminNavItems,
+  onAdminSettings,
+  onLogout,
+  onRequestLogin,
+  onSelectRoute,
+  publicNavItems,
+  route,
+}) {
+  return (
+    <header className="app-header">
+      <div className="app-header-inner">
+        <div className="app-header-top">
+          <HeaderLogo />
+          <div className="app-header-actions">
+            <HeaderActions
+              adminNavItems={adminNavItems}
+              auth={auth}
+              githubRepoUrl={githubRepoUrl}
+              onAdminSettings={onAdminSettings}
+              onLogout={onLogout}
+              onRequestLogin={onRequestLogin}
+              onSelectRoute={onSelectRoute}
+            />
+          </div>
+        </div>
+
+        <div className="app-header-navs">
+          <nav className="nav-row" aria-label="Navegacao principal">
+            {publicNavItems.map((item) => (
+              <NavLink key={item.path} item={item} active={route === item.path} />
+            ))}
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,56 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { X as CloseIcon, Menu02 } from "@untitledui/icons";
+import {
+    Button as AriaButton,
+    Dialog as AriaDialog,
+    DialogTrigger as AriaDialogTrigger,
+    Modal as AriaModal,
+    ModalOverlay as AriaModalOverlay,
+} from "react-aria-components";
+import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
+import { cx } from "@/utils/cx";
+
+export const MobileNavigationHeader = ({ children, logo }: PropsWithChildren<{ logo?: ReactNode }>) => {
+    return (
+        <AriaDialogTrigger>
+            <header className="flex h-16 items-center justify-between border-b border-secondary bg-primary py-3 pr-2 pl-4 lg:hidden">
+                {logo || <UntitledLogo />}
+
+                <AriaButton
+                    aria-label="Expand navigation menu"
+                    className="group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                    <Menu02 className="size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" />
+                    <CloseIcon className="absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" />
+                </AriaButton>
+            </header>
+
+            <AriaModalOverlay
+                isDismissable
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden",
+                        isEntering && "duration-300 ease-in-out animate-in fade-in",
+                        isExiting && "duration-200 ease-in-out animate-out fade-out",
+                    )
+                }
+            >
+                {({ state }) => (
+                    <>
+                        <AriaButton
+                            aria-label="Close navigation menu"
+                            onPress={() => state.close()}
+                            className="fixed top-3 right-2 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            <CloseIcon className="size-6" />
+                        </AriaButton>
+
+                        <AriaModal className="w-full cursor-auto will-change-transform">
+                            <AriaDialog className="h-dvh outline-hidden focus:outline-hidden">{children}</AriaDialog>
+                        </AriaModal>
+                    </>
+                )}
+            </AriaModalOverlay>
+        </AriaDialogTrigger>
+    );
+};

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

@@ -0,0 +1,209 @@
+import type { FC, HTMLAttributes } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import type { Placement } from "@react-types/overlays";
+import { BookOpen01, ChevronSelectorVertical, LogOut01, Plus, Settings01, User01 } from "@untitledui/icons";
+import { useFocusManager } from "react-aria";
+import type { DialogProps as AriaDialogProps } from "react-aria-components";
+import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
+import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
+import { Button } from "@/components/base/buttons/button";
+import { RadioButtonBase } from "@/components/base/radio-buttons/radio-buttons";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
+import { cx } from "@/utils/cx";
+
+type NavAccountType = {
+    /** Unique identifier for the nav item. */
+    id: string;
+    /** Name of the account holder. */
+    name: string;
+    /** Email address of the account holder. */
+    email: string;
+    /** Avatar image URL. */
+    avatar: string;
+    /** Online status of the account holder. This is used to display the online status indicator. */
+    status: "online" | "offline";
+};
+
+const placeholderAccounts: NavAccountType[] = [
+    {
+        id: "olivia",
+        name: "Olivia Rhye",
+        email: "olivia@untitledui.com",
+        avatar: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80",
+        status: "online",
+    },
+    {
+        id: "sienna",
+        name: "Sienna Hewitt",
+        email: "sienna@untitledui.com",
+        avatar: "https://www.untitledui.com/images/avatars/transparent/sienna-hewitt?bg=%23E0E0E0",
+        status: "online",
+    },
+];
+
+export const NavAccountMenu = ({
+    className,
+    selectedAccountId = "olivia",
+    ...dialogProps
+}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string }) => {
+    const focusManager = useFocusManager();
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    const onKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+            switch (e.key) {
+                case "ArrowDown":
+                    focusManager?.focusNext({ tabbable: true, wrap: true });
+                    break;
+                case "ArrowUp":
+                    focusManager?.focusPrevious({ tabbable: true, wrap: true });
+                    break;
+            }
+        },
+        [focusManager],
+    );
+
+    useEffect(() => {
+        const element = dialogRef.current;
+        if (element) {
+            element.addEventListener("keydown", onKeyDown);
+        }
+
+        return () => {
+            if (element) {
+                element.removeEventListener("keydown", onKeyDown);
+            }
+        };
+    }, [onKeyDown]);
+
+    return (
+        <AriaDialog
+            {...dialogProps}
+            ref={dialogRef}
+            className={cx("w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden", className)}
+        >
+            <div className="rounded-xl bg-primary ring-1 ring-secondary">
+                <div className="flex flex-col gap-0.5 py-1.5">
+                    <NavAccountCardMenuItem label="View profile" icon={User01} shortcut="⌘K->P" />
+                    <NavAccountCardMenuItem label="Account settings" icon={Settings01} shortcut="⌘S" />
+                    <NavAccountCardMenuItem label="Documentation" icon={BookOpen01} />
+                </div>
+                <div className="flex flex-col gap-0.5 border-t border-secondary py-1.5">
+                    <div className="px-3 pt-1.5 pb-1 text-xs font-semibold text-tertiary">Switch account</div>
+
+                    <div className="flex flex-col gap-0.5 px-1.5">
+                        {placeholderAccounts.map((account) => (
+                            <button
+                                key={account.id}
+                                className={cx(
+                                    "relative w-full cursor-pointer rounded-md px-2 py-1.5 text-left outline-focus-ring hover:bg-primary_hover focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+                                    account.id === selectedAccountId && "bg-primary_hover",
+                                )}
+                            >
+                                <AvatarLabelGroup status="online" size="md" src={account.avatar} title={account.name} subtitle={account.email} />
+
+                                <RadioButtonBase isSelected={account.id === selectedAccountId} className="absolute top-2 right-2" />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="flex flex-col gap-2 px-2 pt-0.5 pb-2">
+                    <Button iconLeading={Plus} color="secondary" size="sm">
+                        Add account
+                    </Button>
+                </div>
+            </div>
+
+            <div className="pt-1 pb-1.5">
+                <NavAccountCardMenuItem label="Sign out" icon={LogOut01} shortcut="⌥⇧Q" />
+            </div>
+        </AriaDialog>
+    );
+};
+
+const NavAccountCardMenuItem = ({
+    icon: Icon,
+    label,
+    shortcut,
+    ...buttonProps
+}: {
+    icon?: FC<{ className?: string }>;
+    label: string;
+    shortcut?: string;
+} & HTMLAttributes<HTMLButtonElement>) => {
+    return (
+        <button {...buttonProps} className={cx("group/item w-full cursor-pointer px-1.5 focus:outline-hidden", buttonProps.className)}>
+            <div
+                className={cx(
+                    "flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover",
+                    // Focus styles.
+                    "outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2",
+                )}
+            >
+                <div className="flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover">
+                    {Icon && <Icon className="size-5 text-fg-quaternary" />} {label}
+                </div>
+
+                {shortcut && (
+                    <kbd className="flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset">{shortcut}</kbd>
+                )}
+            </div>
+        </button>
+    );
+};
+
+export const NavAccountCard = ({
+    popoverPlacement,
+    selectedAccountId = "olivia",
+    items = placeholderAccounts,
+}: {
+    popoverPlacement?: Placement;
+    selectedAccountId?: string;
+    items?: NavAccountType[];
+}) => {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const isDesktop = useBreakpoint("lg");
+
+    const selectedAccount = placeholderAccounts.find((account) => account.id === selectedAccountId);
+
+    if (!selectedAccount) {
+        console.warn(`Account with ID ${selectedAccountId} not found in <NavAccountCard />`);
+        return null;
+    }
+
+    return (
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
+            <AvatarLabelGroup
+                size="md"
+                src={selectedAccount.avatar}
+                title={selectedAccount.name}
+                subtitle={selectedAccount.email}
+                status={selectedAccount.status}
+            />
+
+            <div className="absolute top-1.5 right-1.5">
+                <AriaDialogTrigger>
+                    <AriaButton className="flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover">
+                        <ChevronSelectorVertical className="size-4 shrink-0" />
+                    </AriaButton>
+                    <AriaPopover
+                        placement={popoverPlacement ?? (isDesktop ? "right bottom" : "top right")}
+                        triggerRef={triggerRef}
+                        offset={8}
+                        className={({ isEntering, isExiting }) =>
+                            cx(
+                                "origin-(--trigger-anchor-point) will-change-transform",
+                                isEntering &&
+                                    "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                                isExiting &&
+                                    "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                            )
+                        }
+                    >
+                        <NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} />
+                    </AriaPopover>
+                </AriaDialogTrigger>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,67 @@
+import type { FC, MouseEventHandler } from "react";
+import { Pressable } from "react-aria-components";
+import { Tooltip } from "@/components/base/tooltip/tooltip";
+import { cx } from "@/utils/cx";
+
+const styles = {
+    md: {
+        root: "size-10",
+        icon: "size-5",
+    },
+    lg: {
+        root: "size-12",
+        icon: "size-6",
+    },
+};
+
+interface NavItemButtonProps {
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the button is clicked. */
+    href?: string;
+    /** Label text for the button. */
+    label: string;
+    /** Icon component to display. */
+    icon: FC<{ className?: string }>;
+    /** Whether the button is currently active. */
+    current?: boolean;
+    /** Size of the button. */
+    size?: "md" | "lg";
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Additional CSS classes to apply to the button. */
+    className?: string;
+    /** Placement of the tooltip. */
+    tooltipPlacement?: "top" | "right" | "bottom" | "left";
+}
+
+export const NavItemButton = ({
+    current: current,
+    label,
+    href,
+    icon: Icon,
+    size = "md",
+    className,
+    tooltipPlacement = "right",
+    onClick,
+}: NavItemButtonProps) => {
+    return (
+        <Tooltip title={label} placement={tooltipPlacement}>
+            <Pressable>
+                <a
+                    href={href}
+                    aria-label={label}
+                    onClick={onClick}
+                    className={cx(
+                        "relative flex w-full cursor-pointer items-center justify-center rounded-md bg-primary p-2 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+                        current && "bg-active text-fg-quaternary_hover hover:bg-secondary_hover",
+                        styles[size].root,
+                        className,
+                    )}
+                >
+                    <Icon aria-hidden="true" className={cx("shrink-0 transition-inherit-all", styles[size].icon)} />
+                </a>
+            </Pressable>
+        </Tooltip>
+    );
+};

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

@@ -0,0 +1,108 @@
+import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { ChevronDown, Share04 } from "@untitledui/icons";
+import { Link as AriaLink } from "react-aria-components";
+import { Badge } from "@/components/base/badges/badges";
+import { cx, sortCx } from "@/utils/cx";
+
+const styles = sortCx({
+    root: "group relative flex w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+    rootSelected: "bg-active hover:bg-secondary_hover",
+});
+
+interface NavItemBaseProps {
+    /** Whether the nav item shows only an icon. */
+    iconOnly?: boolean;
+    /** Whether the collapsible nav item is open. */
+    open?: boolean;
+    /** URL to navigate to when the nav item is clicked. */
+    href?: string;
+    /** Type of the nav item. */
+    type: "link" | "collapsible" | "collapsible-child";
+    /** Icon component to display. */
+    icon?: FC<HTMLAttributes<HTMLOrSVGElement>>;
+    /** Badge to display. */
+    badge?: ReactNode;
+    /** Whether the nav item is currently active. */
+    current?: boolean;
+    /** Whether to truncate the label text. */
+    truncate?: boolean;
+    /** Handler for click events. */
+    onClick?: MouseEventHandler;
+    /** Content to display. */
+    children?: ReactNode;
+}
+
+export const NavItemBase = ({ current, type, badge, href, icon: Icon, children, truncate = true, onClick }: NavItemBaseProps) => {
+    const iconElement = Icon && <Icon aria-hidden="true" className="mr-2 size-5 shrink-0 text-fg-quaternary transition-inherit-all" />;
+
+    const badgeElement =
+        badge && (typeof badge === "string" || typeof badge === "number") ? (
+            <Badge className="ml-3" color="gray" type="pill-color" size="sm">
+                {badge}
+            </Badge>
+        ) : (
+            badge
+        );
+
+    const labelElement = (
+        <span
+            className={cx(
+                "flex-1 text-md font-semibold text-secondary transition-inherit-all group-hover:text-secondary_hover",
+                truncate && "truncate",
+                current && "text-secondary_hover",
+            )}
+        >
+            {children}
+        </span>
+    );
+
+    const isExternal = href && href.startsWith("http");
+    const externalIcon = isExternal && <Share04 className="size-4 stroke-[2.5px] text-fg-quaternary" />;
+
+    if (type === "collapsible") {
+        return (
+            <summary className={cx("px-3 py-2", styles.root, current && styles.rootSelected)} onClick={onClick}>
+                {iconElement}
+
+                {labelElement}
+
+                {badgeElement}
+
+                <ChevronDown aria-hidden="true" className="ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary in-open:-scale-y-100" />
+            </summary>
+        );
+    }
+
+    if (type === "collapsible-child") {
+        return (
+            <AriaLink
+                href={href!}
+                target={isExternal ? "_blank" : "_self"}
+                rel="noopener noreferrer"
+                className={cx("py-2 pr-3 pl-10", styles.root, current && styles.rootSelected)}
+                onClick={onClick}
+                aria-current={current ? "page" : undefined}
+            >
+                {labelElement}
+                {externalIcon}
+                {badgeElement}
+            </AriaLink>
+        );
+    }
+
+    return (
+        <AriaLink
+            href={href!}
+            target={isExternal ? "_blank" : "_self"}
+            rel="noopener noreferrer"
+            className={cx("px-3 py-2", styles.root, current && styles.rootSelected)}
+            onClick={onClick}
+            aria-current={current ? "page" : undefined}
+        >
+            {iconElement}
+            {labelElement}
+            {externalIcon}
+            {badgeElement}
+        </AriaLink>
+    );
+};