robodev 0.12.0 → 0.13.0

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

@@ -0,0 +1,91 @@
+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>
+        </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/auth-chat/apps/fe/src/components/layout/app-header/MobileNavigation.tsx

@@ -0,0 +1,51 @@
+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>
+      </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>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/layout/app-header/NavLink.tsx

@@ -0,0 +1,29 @@
+import { Link, type LinkProps, Typography } from "@povio/ui";
+import { useMatchRoute } from "@tanstack/react-router";
+import clsx from "clsx";
+
+export function NavLink({ to, children, ...props }: LinkProps) {
+  const matchRoute = useMatchRoute();
+  const isActive = Boolean(matchRoute({ to, fuzzy: true }));
+
+  return (
+    <Link
+      to={to}
+      className={clsx(
+        "no-underline! flex min-h-auto items-center rounded-xs px-button-side-xs py-button-height-xs font-medium transition-colors",
+        isActive
+          ? "bg-elevation-fill-default-4 font-semibold text-interactive-text-primary-idle"
+          : "text-text-default-2 hover:bg-elevation-fill-default-2 hover:text-text-default-1",
+      )}
+      {...props}
+    >
+      <Typography
+        className="relative whitespace-nowrap no-underline! after:invisible after:block after:h-0 after:overflow-hidden after:font-semibold after:content-[attr(data-text)]"
+        size="label-2"
+        data-text={children}
+      >
+        {children}
+      </Typography>
+    </Link>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/branding/BrandLogo.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+
+export function BrandLogo({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={clsx("inline-flex h-[34px] items-center font-semibold text-xl tracking-tight", className)}
+      {...props}
+    >
+      Tiny
+    </span>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/error/ErrorFallback.tsx

@@ -0,0 +1,43 @@
+import { ErrorHandler } from "@povio/openapi-codegen-cli";
+import { Button, Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { ThinPageWrapper } from "@/components/shared/layout/ThinPageWrapper";
+
+export interface ErrorFallbackProps {
+  error: unknown;
+  resetError: () => void;
+}
+
+export const ErrorFallback = ({ error, resetError }: ErrorFallbackProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <ThinPageWrapper>
+      <main className="flex flex-col items-center justify-center gap-2 p-8">
+        <Typography
+          size="headline-1"
+          variant="prominent-1"
+          as="h2"
+        >
+          {t(($) => $.shared.errorFallback.heading)}
+        </Typography>
+        <Typography
+          size="title-2"
+          className="text-center text-text-error-1"
+        >
+          {t(($) => $.shared.errorFallback.subheading, {
+            error: ErrorHandler.getErrorMessage(error),
+          })}
+        </Typography>
+        <Button
+          size="s"
+          type="button"
+          onPress={resetError}
+        >
+          {t(($) => $.shared.errorFallback.retryBtn)}
+        </Button>
+      </main>
+    </ThinPageWrapper>
+  );
+};

package/templates/auth-chat/apps/fe/src/components/shared/error/ErrorText.tsx

@@ -0,0 +1,20 @@
+import { Typography } from "@povio/ui";
+import { clsx } from "clsx";
+
+interface Props {
+  error?: string;
+  isDisabled?: boolean;
+  isHidden?: boolean;
+  className?: string;
+}
+
+export const ErrorText = ({ error, isDisabled, isHidden, className }: Props) => {
+  return (
+    <Typography
+      className={clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className)}
+      size="label-3"
+    >
+      {error}
+    </Typography>
+  );
+};

package/templates/auth-chat/apps/fe/src/components/shared/error/NotFound.tsx

@@ -0,0 +1,36 @@
+import { Button, Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { ThinPageWrapper } from "@/components/shared/layout/ThinPageWrapper";
+
+export const NotFound = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ThinPageWrapper>
+      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
+        <Typography
+          size="title-1"
+          variant="prominent-1"
+          as="h2"
+        >
+          {t(($) => $.shared.notFound.heading)}
+        </Typography>
+
+        <Typography
+          size="body-2"
+          className="text-center text-text-error-1"
+        >
+          {t(($) => $.shared.notFound.subheading)}
+        </Typography>
+
+        <Button
+          size="s"
+          link={{ to: "/" }}
+        >
+          {t(($) => $.shared.notFound.homeBtn)}
+        </Button>
+      </div>
+    </ThinPageWrapper>
+  );
+};

package/templates/auth-chat/apps/fe/src/components/shared/forms/RequiredLabel.tsx

@@ -0,0 +1,21 @@
+import { Typography, type TypographyProps } from "@povio/ui";
+
+interface RequiredLabelProps extends Omit<TypographyProps, "size" | "variant"> {
+  size?: TypographyProps["size"];
+  variant?: TypographyProps["variant"];
+}
+
+export function RequiredLabel({ variant = "prominent-1", size = "label-1", children, ...props }: RequiredLabelProps) {
+  return (
+    <div className="flex items-center">
+      <Typography
+        variant={variant}
+        size={size}
+        {...props}
+      >
+        {children}
+        <span className="ml-1 text-text-error-3">*</span>
+      </Typography>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/forms/RowInputWrapper.tsx

@@ -0,0 +1,50 @@
+import { Typography, type TypographyProps } from "@povio/ui";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+import { RequiredLabel } from "@/components/shared/forms/RequiredLabel";
+
+interface RowInputWrapperProps {
+  label: string;
+  children: ReactNode;
+  isRequired?: boolean;
+  labelClassName?: string;
+  labelSize?: TypographyProps["size"];
+  variant?: TypographyProps["variant"];
+  className?: string;
+  fieldClassName?: string;
+}
+
+export function RowInputWrapper({
+  label,
+  children,
+  isRequired = false,
+  labelClassName = "w-[140px] sm:w-[180px]",
+  labelSize = "label-2",
+  variant = "default",
+  className = "flex min-w-0 items-start",
+  fieldClassName,
+}: RowInputWrapperProps) {
+  return (
+    <div className={className}>
+      <div className={clsx("flex h-[30px] shrink-0 items-center", labelClassName)}>
+        {isRequired ? (
+          <RequiredLabel
+            size={labelSize}
+            variant={variant}
+          >
+            {label}
+          </RequiredLabel>
+        ) : (
+          <Typography
+            size={labelSize}
+            variant={variant}
+          >
+            {label}
+          </Typography>
+        )}
+      </div>
+      <div className={clsx("min-w-0 flex-1", fieldClassName)}>{children}</div>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/head/AppHead.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+
+interface IProps {
+  title?: string;
+  description?: string;
+  omitSuffix?: boolean;
+}
+
+export const AppHead = ({ title: titleProp, description: descriptionProp, omitSuffix }: IProps) => {
+  const { t } = useTranslation();
+
+  const titleParts: string[] = [];
+  if (titleProp) {
+    titleParts.push(titleProp);
+  }
+  if (!omitSuffix) {
+    titleParts.push(t(($) => $.appName));
+  }
+
+  const title = titleParts.join(" | ");
+  const description = descriptionProp ?? t(($) => $.appDescription);
+
+  return (
+    <>
+      <title>{title}</title>
+      <meta
+        name="description"
+        content={description}
+      />
+    </>
+  );
+};

package/templates/auth-chat/apps/fe/src/components/shared/head/DefaultAppHead.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+
+export const DefaultAppHead = () => {
+  const { t } = useTranslation();
+
+  const title = t(($) => $.appName);
+  const description = t(($) => $.appDescription);
+
+  return (
+    <>
+      <title>{title}</title>
+      <meta
+        name="description"
+        content={description}
+      />
+      <meta
+        property="og:title"
+        content={title}
+      />
+      <meta
+        property="og:description"
+        content={description}
+      />
+      <meta
+        name="twitter:title"
+        content={title}
+      />
+      <meta
+        name="twitter:description"
+        content={description}
+      />
+    </>
+  );
+};

package/templates/auth-chat/apps/fe/src/components/shared/layout/LoadingState.tsx

@@ -0,0 +1,9 @@
+import { Loader } from "@povio/ui";
+
+export function LoadingState() {
+  return (
+    <div className="flex items-center justify-center p-10 text-text-default-1">
+      <Loader size="l" />
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/layout/ThinPageWrapper.tsx

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from "react";
+
+export const ThinPageWrapper = ({ children }: PropsWithChildren) => {
+  return <div className="mx-auto my-10 w-full max-w-xl">{children}</div>;
+};

package/templates/auth-chat/apps/fe/src/components/shared/page/PageHeader.tsx

@@ -0,0 +1,69 @@
+import { InlineIconButton, Typography } from "@povio/ui";
+import { type LinkProps, useRouter } from "@tanstack/react-router";
+import { ChevronLeft } from "lucide-react";
+import type { ReactNode } from "react";
+
+type PageHeaderBackProps =
+  | {
+      backLink: LinkProps;
+      onBack?: never;
+    }
+  | {
+      backLink?: never;
+      onBack: () => void;
+    };
+
+interface PageHeaderProps {
+  title: ReactNode;
+  actions?: ReactNode;
+  enableBack?: boolean;
+  backProps?: PageHeaderBackProps;
+}
+
+export function PageHeader({ title, actions, enableBack = false, backProps }: PageHeaderProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    if (backProps?.onBack) {
+      backProps.onBack();
+      return;
+    }
+
+    if (window.history.length > 1) {
+      router.history.back();
+      return;
+    }
+
+    if (backProps?.backLink) {
+      router.navigate(backProps.backLink);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex min-w-0 items-center gap-2">
+          {enableBack && (
+            <InlineIconButton
+              label="Back"
+              icon={ChevronLeft}
+              color="secondary"
+              onPress={handleBack}
+            />
+          )}
+
+          <Typography
+            as="h1"
+            size="title-4"
+            variant="prominent-1"
+            className="min-w-0 text-text-default-1"
+          >
+            {title}
+          </Typography>
+        </div>
+
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/ui/Card.tsx

@@ -0,0 +1,60 @@
+import { Typography, type TypographyProps } from "@povio/ui";
+import { type VariantProps, cva } from "class-variance-authority";
+
+const cardVariants = cva(
+  "flex flex-1 flex-col gap-5 rounded-sm border-elevation-outline-default-1 border-b bg-elevation-fill-default-1 shadow-1",
+  {
+    variants: {
+      padding: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-5",
+      },
+    },
+    defaultVariants: {
+      padding: "md",
+    },
+  },
+);
+
+interface CardVariantProps extends VariantProps<typeof cardVariants>, React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardProps extends CardVariantProps {
+  children: React.ReactNode;
+  title?: string;
+  titleSize?: TypographyProps["size"];
+  titleVariant?: TypographyProps["variant"];
+  isDisabled?: boolean;
+}
+
+export function Card({
+  children,
+  className,
+  padding,
+  title,
+  titleSize = "title-5",
+  titleVariant = "prominent-1",
+  isDisabled = false,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={cardVariants({
+        padding,
+        className: [className, isDisabled && "pointer-events-none opacity-50"],
+      })}
+    >
+      {title && (
+        <Typography
+          size={titleSize}
+          variant={titleVariant}
+          {...props}
+        >
+          {title}
+        </Typography>
+      )}
+
+      {children}
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/ui/GoogleLoginButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@povio/ui";
+
+import { AppConfig } from "@/config/app.config";
+
+export function GoogleLoginButton() {
+  const handleGoogleLogin = () => {
+    window.location.href = AppConfig.auth.googleRedirectUrl;
+  };
+
+  return (
+    <Button
+      size="s"
+      width="hug"
+      onPress={handleGoogleLogin}
+    >
+      Continue with Google
+    </Button>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/ui/RequiredLabel.tsx

@@ -0,0 +1,22 @@
+import { Typography, type TypographyProps } from "@povio/ui";
+import type { ComponentProps } from "react";
+
+interface RequiredLabelProps extends Omit<TypographyProps, "variant" | "size"> {
+  variant?: ComponentProps<typeof Typography>["variant"];
+  size?: ComponentProps<typeof Typography>["size"];
+}
+
+export function RequiredLabel({ variant = "prominent-1", size = "label-1", children, ...props }: RequiredLabelProps) {
+  return (
+    <div className="flex items-center">
+      <Typography
+        variant={variant}
+        size={size}
+        {...props}
+      >
+        {children}
+        <span className="text-text-error-3">*</span>
+      </Typography>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/shared/ui/TableActions.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+
+export function TableActions({ children, className, onClick, onKeyDown, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      role="presentation"
+      className={clsx("flex items-center justify-end gap-1", className)}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick?.(event);
+      }}
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        onKeyDown?.(event);
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/config/app.config.ts

@@ -0,0 +1,35 @@
+const authCustomJWT = {
+  enableMagicLink: import.meta.env.VITE_PUBLIC_AUTH_CUSTOM_JWT_ENABLE_MAGIC_LINK === "true",
+};
+
+const apiUrl = import.meta.env.VITE_PUBLIC_API_URL ?? "http://localhost:4000";
+const apiOrigin = apiUrl.replace(/\/+$/, "") || "/";
+const apiMode = import.meta.env.VITE_PUBLIC_API_MODE ?? "real";
+export const AppConfig = {
+  isProduction: import.meta.env.NODE_ENV === "production",
+  enableWebVitals: import.meta.env.VITE_PUBLIC_ENABLE_WEB_VITALS === "true",
+  release: import.meta.env.VITE_PUBLIC_RELEASE,
+  stage: import.meta.env.VITE_PUBLIC_STAGE,
+  api: {
+    url: apiOrigin,
+    mode: apiMode,
+  },
+  log: {
+    level: import.meta.env.VITE_PUBLIC_LOG_LEVEL ?? "error",
+  },
+  sentry: {
+    enabled: import.meta.env.VITE_PUBLIC_SENTRY_DSN ? true : false,
+    dsn: import.meta.env.VITE_PUBLIC_SENTRY_DSN,
+    environment: import.meta.env.VITE_PUBLIC_SENTRY_ENVIRONMENT,
+    tracesSampleRate: parseFloat(import.meta.env.VITE_PUBLIC_SENTRY_TRACES_SAMPLE_RATE ?? "0"),
+    replaysSessionSampleRate: parseFloat(import.meta.env.VITE_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE ?? "0"),
+    replaysOnErrorSampleRate: parseFloat(import.meta.env.VITE_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE ?? "0"),
+  },
+  auth: {
+    customJWT: authCustomJWT,
+    googleRedirectUrl: `${apiOrigin}/api/user/auth/google`,
+  },
+  googleAnalytics: {
+    measurementId: import.meta.env.VITE_PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID,
+  },
+};