robodev 0.10.0 → 0.12.0

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsViewTabs.tsx

@@ -0,0 +1,79 @@
+import { Button, Menu } from "@povio/ui";
+import { ChevronDown } from "lucide-react";
+import { type Key, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export type PlanetsView = "grid" | "table" | "infinite";
+
+interface PlanetsViewTabsProps {
+  value: PlanetsView;
+  onChange: (view: PlanetsView) => void;
+}
+
+export function PlanetsViewTabs({ value, onChange }: PlanetsViewTabsProps) {
+  const { t } = useTranslation();
+  const [isCompact, setIsCompact] = useState(false);
+  const items: { value: PlanetsView; label: string }[] = [
+    { value: "grid", label: t(($) => $.planets.views.grid) },
+    { value: "table", label: t(($) => $.planets.views.table) },
+    { value: "infinite", label: t(($) => $.planets.views.infinite) },
+  ];
+  const activeItem = items.find((item) => item.value === value) ?? items[0];
+
+  useEffect(() => {
+    const update = () => setIsCompact(window.innerWidth < 850);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  if (isCompact) {
+    return (
+      <Menu
+        items={items.map((item) => ({ id: item.value, label: item.label }))}
+        onAction={(key: Key) => onChange(key as PlanetsView)}
+        trigger={
+          <Button
+            type="button"
+            color="primary"
+            variant="ghost"
+            size="xs"
+            toggle
+            isSelected
+            icon={ChevronDown}
+            iconPosition="right"
+          >
+            {activeItem.label}
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div
+      aria-label={t(($) => $.planets.views.label)}
+      className="flex shrink-0 gap-1"
+      role="group"
+    >
+      {items.map((item) => {
+        const isActive = item.value === value;
+
+        return (
+          <Button
+            key={item.value}
+            type="button"
+            color="primary"
+            variant="ghost"
+            size="xs"
+            toggle
+            isSelected={isActive}
+            onPress={() => onChange(item.value)}
+          >
+            {item.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTable.tsx

@@ -0,0 +1,30 @@
+import { Table } from "@povio/ui";
+import type { TableWrapperProps } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { getPlanetsTableColumns } from "./planetsTableColumns";
+
+type PlanetTableItem = PlanetModels.PlanetsGetResponseDto;
+interface PlanetsTableProps extends TableWrapperProps<PlanetTableItem> {
+  onEdit: (planet: PlanetTableItem) => void;
+}
+
+export function PlanetsTable({ className, onEdit, onRowClick, showCellBorder = false, ...props }: PlanetsTableProps) {
+  const { t } = useTranslation();
+
+  const columns = getPlanetsTableColumns(t, onEdit);
+
+  return (
+    <div className="-mx-4 overflow-x-auto">
+      <Table
+        {...props}
+        className={className}
+        columns={columns}
+        onRowClick={onRowClick}
+        showCellBorder={showCellBorder}
+      />
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTableActions.tsx

@@ -0,0 +1,64 @@
+import { Confirmation, InlineIconButton, useToast } from "@povio/ui";
+import { Pencil, Trash } from "lucide-react";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TableActions } from "@/components/shared/ui/TableActions";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+
+interface PlanetsTableActionsProps {
+  onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void;
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetsTableActions({ onEdit, planet }: PlanetsTableActionsProps) {
+  const { t } = useTranslation();
+
+  const { successToast, errorToast } = useToast();
+  const { confirm } = Confirmation.useConfirmation();
+
+  const deletePlanet = PlanetQueries.useDeleteApiPlanetsById();
+
+  const handleRemove = useCallback(async () => {
+    // Row actions should stop propagation in TableActions so the row click does not also open details.
+    const confirmed = await confirm({
+      heading: t(($) => $.planets.removeConfirm.heading),
+      description: t(($) => $.planets.removeConfirm.description, { name: planet.name }),
+      confirmLabel: t(($) => $.planets.removeConfirm.confirm),
+      cancelLabel: t(($) => $.planets.removeConfirm.cancel),
+      confirmColor: "error",
+      cancelVariant: "subtle",
+      textAlign: "center",
+      buttonSize: "s",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deletePlanet.mutateAsync({ id: planet.id });
+      successToast({ text: t(($) => $.planets.removeConfirm.success) });
+    } catch {
+      errorToast({ text: t(($) => $.planets.removeConfirm.error) });
+    }
+  }, [confirm, deletePlanet, errorToast, planet, successToast, t]);
+
+  return (
+    <TableActions>
+      <InlineIconButton
+        label={t(($) => $.planets.actions.edit)}
+        icon={Pencil}
+        color="secondary"
+        onPress={() => onEdit(planet)}
+      />
+      <InlineIconButton
+        label={t(($) => $.planets.actions.remove)}
+        icon={Trash}
+        color="error"
+        onPress={handleRemove}
+      />
+    </TableActions>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTableInfinite.tsx

@@ -0,0 +1,36 @@
+import { InfiniteTable } from "@povio/ui";
+import type { InfiniteTableWrapperProps } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { getPlanetsTableColumns } from "./planetsTableColumns";
+
+type PlanetInfiniteTableItem = PlanetModels.PlanetsGetResponseDto;
+interface PlanetsTableInfiniteProps extends InfiniteTableWrapperProps<PlanetInfiniteTableItem> {
+  onEdit: (planet: PlanetInfiniteTableItem) => void;
+}
+
+export function PlanetsTableInfinite({
+  className,
+  onEdit,
+  onRowClick,
+  showCellBorder = false,
+  ...props
+}: PlanetsTableInfiniteProps) {
+  const { t } = useTranslation();
+
+  const columns = getPlanetsTableColumns(t, onEdit);
+
+  return (
+    <div className="-mx-4 overflow-x-auto">
+      <InfiniteTable
+        {...props}
+        className={className}
+        columns={columns}
+        onRowClick={onRowClick}
+        showCellBorder={showCellBorder}
+      />
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/planetsTableColumns.tsx

@@ -0,0 +1,72 @@
+import { dynamicColumns } from "@povio/ui";
+import type { TFunction } from "i18next";
+import { z } from "zod";
+
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+
+import { PlanetsTableActions } from "./PlanetsTableActions";
+
+const PLANET_SORTABLE_COLUMN_SCHEMA = z.enum(["name", "discoveryDate"]);
+
+export function getPlanetsTableColumns(t: TFunction, onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void) {
+  return dynamicColumns({
+    schema: PlanetModels.PlanetsGetResponseDtoSchema,
+    options: {
+      // dynamicColumns keeps table columns aligned with generated OpenAPI models and sortable enum metadata.
+      columns: {
+        name: {
+          header: t(($) => $.planets.table.name),
+          meta: { filterKey: "search" },
+          size: 224,
+          minSize: 180,
+          maxSize: 320,
+        },
+        description: {
+          header: t(($) => $.planets.table.description),
+          size: 360,
+          minSize: 280,
+        },
+        alienName: {
+          header: t(($) => $.planets.table.alien),
+          meta: { filterKey: "alienId" },
+          size: 192,
+          minSize: 160,
+          maxSize: 260,
+        },
+        discoveryDate: {
+          header: t(($) => $.planets.table.discoveryDate),
+          size: 176,
+          minSize: 140,
+          maxSize: 220,
+          cell: ({ value }) => (value ? DateUtils.formatDate(value) : null),
+        },
+        creatorName: {
+          header: t(($) => $.planets.table.creator),
+          size: 160,
+          minSize: 128,
+          maxSize: 220,
+        },
+      },
+      sortable: PLANET_SORTABLE_COLUMN_SCHEMA,
+      customColumns: {
+        // Keep per-row actions as a custom column so generated data columns stay declarative.
+        actions: {
+          header: t(($) => $.planets.table.actions),
+          meta: { filterKey: "clear", headerClass: "[&>*]:ml-auto" },
+          size: 112,
+          minSize: 96,
+          maxSize: 140,
+          cell: ({ row }) => (
+            <PlanetsTableActions
+              planet={row.original}
+              onEdit={onEdit}
+            />
+          ),
+        },
+      },
+      order: ["name", "description", "alienName", "discoveryDate", "creatorName", "actions"],
+      emptyValue: "-",
+    },
+  });
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/usePlanetTableFilters.tsx

@@ -0,0 +1,102 @@
+import { Button, DateRangePicker, QueryAutocomplete, TextInput, useFilters } from "@povio/ui/tanstack";
+import { Search } from "lucide-react";
+import { type Key, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+
+import "../PlanetsFilters.css";
+
+export type PlanetTableFilterValues = NonNullable<PlanetModels.PlanetPaginateFilterParam>;
+
+export function usePlanetTableFilters() {
+  const { t } = useTranslation();
+  const { clearAllFilters, filterData, setFilterValue } = useFilters<PlanetTableFilterValues>(
+    {},
+    "",
+    PlanetModels.PlanetPaginateFilterParamSchema,
+  );
+  const handleSearchChange = useCallback(
+    (search: string) => setFilterValue({ search: search || undefined }),
+    [setFilterValue],
+  );
+  const handleAlienChange = useCallback(
+    (alienId: Key | null) => setFilterValue({ alienId: alienId ? String(alienId) : undefined }),
+    [setFilterValue],
+  );
+  const handleDiscoveryDateChange = useCallback(
+    (discoveryDate: PlanetTableFilterValues["discoveryDate"] | null) =>
+      setFilterValue({ discoveryDate: discoveryDate ?? undefined }),
+    [setFilterValue],
+  );
+  const handleClearAllFilters = useCallback(() => clearAllFilters(), [clearAllFilters]);
+
+  const discoveryDateValue = filterData.discoveryDate
+    ? {
+        start: filterData.discoveryDate.start ?? null,
+        end: filterData.discoveryDate.end ?? null,
+      }
+    : null;
+
+  const filterControls = (
+    <div className="flex flex-wrap items-end gap-1">
+      <div className="min-w-48 flex-1">
+        <TextInput
+          value={filterData.search ?? ""}
+          onChange={handleSearchChange}
+          label={t(($) => $.planets.filters.search)}
+          leadingIcon={Search}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          hideLabel
+          isClearable
+        />
+      </div>
+      <div className="planets-filters__control-without-label min-w-48 flex-1">
+        <QueryAutocomplete
+          key={filterData.alienId ?? "empty"}
+          value={filterData.alienId ?? null}
+          onChange={handleAlienChange}
+          query={AlienQueries.useGetLabels}
+          label={t(($) => $.planets.filters.alien)}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          isClearable
+        />
+      </div>
+      <div className="planets-filters__control-without-label min-w-48 flex-1">
+        <DateRangePicker
+          value={discoveryDateValue}
+          onChange={handleDiscoveryDateChange}
+          label={t(($) => $.planets.filters.discoveryDate)}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          isClearable
+          fullIso
+        />
+      </div>
+      <Button
+        variant="subtle"
+        color="secondary"
+        size="xs"
+        onPress={handleClearAllFilters}
+      >
+        {t(($) => $.planets.filters.clearAll)}
+      </Button>
+    </div>
+  );
+
+  const apiFilters: PlanetModels.PlanetPaginateFilterParam = {
+    search: filterData.search || undefined,
+    alienId: filterData.alienId || undefined,
+    discoveryDate: filterData.discoveryDate || undefined,
+  };
+  return {
+    apiFilters,
+    filterControls,
+  };
+}

package/templates/space/apps/fe/src/components/features/profile/ProfilePage.tsx

@@ -0,0 +1,96 @@
+import { Button, TextInput, Typography, useForm, useToast } from "@povio/ui/tanstack";
+import { Check } from "lucide-react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import { UserModels } from "@/openapi/user/user.models";
+import { UserQueries } from "@/openapi/user/user.queries";
+
+export function ProfilePage() {
+  const { t } = useTranslation();
+  const { isAuthenticated, user } = useAuth();
+  const { successToast, errorToast } = useToast();
+
+  const { data: fetchedUser, isLoading } = UserQueries.useGet({ enabled: isAuthenticated });
+  const fullUser = fetchedUser ?? user;
+  const updateProfile = UserQueries.useUpdate();
+
+  const form = useForm({
+    zodSchema: UserModels.UserMeUpdateRequestSchema,
+    defaultValues: {
+      name: "",
+      email: "",
+    },
+  });
+
+  useEffect(() => {
+    if (fullUser) {
+      form.reset({
+        name: fullUser.name ?? "",
+        email: fullUser.email ?? "",
+      });
+    }
+  }, [form, fullUser]);
+
+  const onSubmit = async (data: UserModels.UserMeUpdateRequest) => {
+    try {
+      await updateProfile.mutateAsync({ data });
+      successToast({ text: t(($) => $.profile.form.notifications.success) });
+    } catch {
+      errorToast({ text: t(($) => $.profile.form.notifications.error) });
+    }
+  };
+
+  if (isLoading && !fullUser) {
+    return <LoadingState />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.profile.form.title)} />
+
+      <Card>
+        <div className="flex flex-col gap-4">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.profile.form.description)}
+          </Typography>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-6"
+          >
+            <TextInput
+              field={{ form, name: "email" }}
+              label={t(($) => $.profile.form.email)}
+              placeholder={t(($) => $.profile.form.emailPlaceholder)}
+            />
+            <TextInput
+              field={{ form, name: "name" }}
+              label={t(($) => $.profile.form.name)}
+              placeholder={t(($) => $.profile.form.namePlaceholder)}
+            />
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                size="s"
+                icon={Check}
+                isDisabled={updateProfile.isPending}
+                isLoading={updateProfile.isPending}
+              >
+                {updateProfile.isPending ? t(($) => $.profile.form.submitLoading) : t(($) => $.profile.form.submit)}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/googleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+import { AppConfig } from "@/config/app.config";
+
+const { measurementId } = AppConfig.googleAnalytics;
+
+const GoogleAnalytics = () => {
+  const isInitializedRef = useRef(false);
+
+  useEffect(() => {
+    if (isInitializedRef.current || !measurementId || (window as any).gtag) {
+      return;
+    }
+    isInitializedRef.current = true;
+
+    const script1 = document.createElement("script");
+    script1.async = true;
+    script1.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+
+    const script2 = document.createElement("script");
+    script2.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${measurementId}');
+    `;
+
+    document.head.appendChild(script1);
+    document.head.appendChild(script2);
+  }, []);
+
+  return null;
+};
+
+export default GoogleAnalytics;

package/templates/space/apps/fe/src/components/layout/AppLayout.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+import { AppHeader } from "./app-header/AppHeader";
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="flex min-h-dvh w-full flex-col">
+      <AppHeader />
+
+      <main className="flex w-full flex-1 flex-col">
+        <div className="w-full flex-1 px-4 py-4">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/layout/app-header/AppHeader.tsx

@@ -0,0 +1,93 @@
+import { Button, IconButton, Link, Menu } from "@povio/ui";
+import { useNavigate } from "@tanstack/react-router";
+import clsx from "clsx";
+import { ChevronDown, MenuIcon, X } from "lucide-react";
+import { type Key, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { BrandLogo } from "@/components/shared/branding/BrandLogo";
+import { useAuth } from "@/hooks/useAuth";
+
+import { MobileNavigation } from "./MobileNavigation";
+import { NavLink } from "./NavLink";
+
+export function AppHeader() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isAuthenticated, user, logout } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const menuItems = [
+    { label: t(($) => $.layout.header.profile), id: "profile" },
+    { label: t(($) => $.layout.header.logout), id: "logout" },
+  ];
+
+  const accountLabel = user?.name || user?.email || t(($) => $.layout.header.profile);
+
+  const handleMenuAction = (key: Key) => {
+    if (key === "profile") {
+      navigate({ to: "/profile" });
+    } else if (key === "logout") {
+      logout();
+    }
+  };
+
+  return (
+    <header
+      className={clsx(
+        "relative z-11 flex shrink-0 items-center gap-4 border-elevation-outline-default-1 border-b bg-elevation-fill-default-1 px-4",
+        isMobileMenuOpen && "flex-wrap",
+      )}
+    >
+      <Link
+        to="/"
+        aria-label={t(($) => $.layout.header.logo)}
+        className="flex shrink-0 items-center no-underline!"
+      >
+        <BrandLogo className="text-interactive-contained-primary-idle" />
+      </Link>
+
+      <div className="hidden min-w-0 lg:block">
+        <nav className="flex flex-row items-center gap-1 overflow-visible border-elevation-outline-default-1 px-0">
+          <NavLink to="/">{t(($) => $.layout.header.nav.home)}</NavLink>
+          <NavLink to="/planets">{t(($) => $.layout.header.nav.planets)}</NavLink>
+          <NavLink to="/planets-feed">{t(($) => $.layout.header.nav.planetsFeed)}</NavLink>
+        </nav>
+      </div>
+
+      {isAuthenticated && (
+        <div className="ml-auto hidden shrink-0 items-center gap-2 lg:flex">
+          <Menu
+            trigger={
+              <div className="flex cursor-pointer items-center gap-1">
+                <Button
+                  type="button"
+                  color="secondary"
+                  variant="text"
+                  size="xs"
+                  className="items-center gap-1 overflow-hidden whitespace-nowrap text-text-default-1 [&>span]:font-labels-default!"
+                >
+                  {accountLabel}
+                </Button>
+                <ChevronDown className="size-5 shrink-0" />
+              </div>
+            }
+            items={menuItems}
+            onAction={handleMenuAction}
+          />
+        </div>
+      )}
+
+      <IconButton
+        className="ml-auto lg:hidden"
+        color="primary"
+        icon={isMobileMenuOpen ? X : MenuIcon}
+        label={t(($) => (isMobileMenuOpen ? $.layout.header.closeMenu : $.layout.header.openMenu))}
+        size="xs"
+        variant="ghost"
+        onPress={() => setIsMobileMenuOpen((isOpen) => !isOpen)}
+      />
+      {isMobileMenuOpen ? <MobileNavigation /> : null}
+    </header>
+  );
+}

package/templates/space/apps/fe/src/components/layout/app-header/MobileNavigation.tsx

@@ -0,0 +1,53 @@
+import { Menu, TextButton } from "@povio/ui";
+import { useNavigate } from "@tanstack/react-router";
+import { User } from "lucide-react";
+import type { Key } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useAuth } from "@/hooks/useAuth";
+
+import { NavLink } from "./NavLink";
+
+export function MobileNavigation() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isAuthenticated, user, logout } = useAuth();
+  const accountLabel = user?.name || user?.email || t(($) => $.layout.header.profile);
+
+  const handleMenuAction = (key: Key) => {
+    if (key === "profile") {
+      navigate({ to: "/profile" });
+    } else if (key === "logout") {
+      logout();
+    }
+  };
+
+  return (
+    <div className="-mx-4 flex w-[calc(100%+2rem)] basis-full flex-col gap-2 border-elevation-outline-default-1 border-t px-4 py-3 lg:hidden">
+      <nav className="flex flex-col gap-1">
+        <NavLink to="/">{t(($) => $.layout.header.nav.home)}</NavLink>
+        <NavLink to="/planets">{t(($) => $.layout.header.nav.planets)}</NavLink>
+        <NavLink to="/planets-feed">{t(($) => $.layout.header.nav.planetsFeed)}</NavLink>
+      </nav>
+
+      {isAuthenticated ? (
+        <Menu
+          items={[
+            { id: "profile", label: t(($) => $.layout.header.profile) },
+            { id: "logout", label: t(($) => $.layout.header.logout) },
+          ]}
+          trigger={
+            <TextButton
+              className="mr-auto"
+              color="secondary"
+              icon={User}
+            >
+              {accountLabel}
+            </TextButton>
+          }
+          onAction={handleMenuAction}
+        />
+      ) : null}
+    </div>
+  );
+}