robodev 0.12.0 → 0.14.0

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,
+  },
+};

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

@@ -0,0 +1,43 @@
+import { resources as uiResources } from "@povio/ui";
+import {
+  configureTranslations as configureOpenApiTranslations,
+  resources as openApiResources,
+} from "@povio/openapi-codegen-cli";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import translationEN from "@/assets/locales/en/translation.json";
+import translationSL from "@/assets/locales/sl/translation.json";
+
+export const defaultLanguage = "en";
+export const defaultNS = "main";
+export const resources = {
+  en: {
+    ...openApiResources.en,
+    ...uiResources.en,
+    [defaultNS]: translationEN,
+  },
+  sl: {
+    ...openApiResources.sl,
+    ...uiResources.sl,
+    [defaultNS]: translationSL,
+  },
+} as const;
+
+i18n.use(initReactI18next).init({
+  compatibilityJSON: "v4",
+  fallbackLng: defaultLanguage,
+  resources,
+  ns: Object.keys(resources.en),
+  defaultNS,
+  lng: defaultLanguage,
+  returnNull: false,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+});
+
+configureOpenApiTranslations(() => i18n.t);

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { AppConfig } from "@/config/app.config";
+
+export async function initA11y() {
+  if (typeof window !== "undefined" && !AppConfig.isProduction) {
+    const ReactDOM = await import("react-dom");
+
+    // oxlint-disable-next-line import/no-extraneous-dependencies
+    const axe = await import("@axe-core/react");
+
+    axe.default(React, ReactDOM, 1000);
+  }
+}

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

@@ -0,0 +1,7 @@
+import log from "loglevel";
+
+import { AppConfig } from "@/config/app.config";
+
+export function initLogger() {
+  log.setLevel(AppConfig.log.level as log.LogLevelDesc);
+}

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

@@ -0,0 +1,21 @@
+// oxlint-disable-next-line import/no-namespace
+import * as Sentry from "@sentry/react";
+
+import { AppConfig } from "@/config/app.config";
+
+export function initSentry() {
+  Sentry.init({
+    enabled: AppConfig.sentry.enabled,
+    dsn: AppConfig.sentry.dsn,
+    release: AppConfig.release,
+    integrations: [
+      ...(AppConfig.sentry.tracesSampleRate > 0 ? [] : []),
+      ...(AppConfig.sentry.replaysOnErrorSampleRate > 0 ? [Sentry.replayIntegration()] : []),
+    ],
+
+    tracesSampleRate: AppConfig.sentry.tracesSampleRate,
+
+    replaysSessionSampleRate: AppConfig.sentry.replaysSessionSampleRate,
+    replaysOnErrorSampleRate: AppConfig.sentry.replaysOnErrorSampleRate,
+  });
+}

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

@@ -0,0 +1,2 @@
+export const ACCESS_TOKEN_KEY = "auth-custom-jwt:access-token";
+export const REFRESH_TOKEN_KEY = "auth-custom-jwt:refresh-token";

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

@@ -0,0 +1,20 @@
+import type { ApplicationException, GeneralErrorCodes } from "@povio/openapi-codegen-cli";
+import { QueryClient, type QueryClientConfig } from "@tanstack/react-query";
+
+export const QueryConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 2 * 60 * 1000,
+    },
+  },
+};
+
+export const queryClient = new QueryClient(QueryConfig);
+
+declare module "@tanstack/react-query" {
+  interface Register {
+    defaultError: ApplicationException<GeneralErrorCodes> | null;
+  }
+}

package/templates/auth-chat/apps/fe/src/hooks/useAuth.ts

@@ -0,0 +1,5 @@
+import { AuthContext } from "@povio/openapi-codegen-cli";
+
+import type { UserModels } from "@/openapi/user/user.models";
+
+export const useAuth = () => AuthContext.useAuth<UserModels.UserMeResponse>();

package/templates/auth-chat/apps/fe/src/main.tsx

@@ -0,0 +1,52 @@
+import { AbilityContext } from "@povio/openapi-codegen-cli/acl";
+import { LinkContext, type LinkNavigationProps } from "@povio/ui";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createLink, createRouter } from "@tanstack/react-router";
+import { type ComponentType, StrictMode } from "react";
+import { Link as AriaLink } from "react-aria-components";
+import { createRoot } from "react-dom/client";
+
+import { queryClient } from "@/config/query.config";
+import Providers from "@/providers";
+import { JWTProvider } from "@/providers/jwt.provider";
+import "@/styles/globals.css";
+
+import { routeTree } from "./routeTree.gen";
+
+const LinkComponent = createLink(AriaLink) as unknown as ComponentType<LinkNavigationProps>;
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+  // basepath: import.meta.env.BASE_URL, // Uncomment in monorepo
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app");
+
+if (rootElement && !rootElement.innerHTML) {
+  const root = createRoot(rootElement);
+
+  root.render(
+    <StrictMode>
+      <Providers
+        providers={[
+          { provider: LinkContext.LinkContextProvider, props: { LinkComponent } },
+          { provider: QueryClientProvider, props: { client: queryClient } },
+          { provider: JWTProvider },
+          { provider: AbilityContext.Provider },
+        ]}
+      >
+        <RouterProvider router={router} />
+      </Providers>
+    </StrictMode>,
+  );
+}

package/templates/auth-chat/apps/fe/src/pages/(guest)/login.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { LoginPage } from "@/components/features/auth/LoginPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+
+function PageComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppHead
+        title={t(($) => $.auth.login.head.title)}
+        description={t(($) => $.auth.login.head.description)}
+      />
+      <LoginPage />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(guest)/login")({
+  component: PageComponent,
+});

package/templates/auth-chat/apps/fe/src/pages/(guest)/register.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { RegisterPage } from "@/components/features/auth/RegisterPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+
+function PageComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppHead
+        title={t(($) => $.auth.register.head.title)}
+        description={t(($) => $.auth.register.head.description)}
+      />
+      <RegisterPage />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(guest)/register")({
+  component: PageComponent,
+});

package/templates/auth-chat/apps/fe/src/pages/(guest)/route.tsx

@@ -0,0 +1,18 @@
+import { AuthGuard } from "@povio/openapi-codegen-cli";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+import { AuthLayout } from "@/components/features/auth/AuthLayout";
+
+function GuestLayout() {
+  return (
+    <AuthGuard type="public-only">
+      <AuthLayout>
+        <Outlet />
+      </AuthLayout>
+    </AuthGuard>
+  );
+}
+
+export const Route = createFileRoute("/(guest)")({
+  component: GuestLayout,
+});

package/templates/auth-chat/apps/fe/src/pages/(private)/index.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { ChatPage } from "@/components/features/chat/ChatPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+
+function PageComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppHead
+        title={t(($) => $.chat.head.title)}
+        description={t(($) => $.chat.head.description)}
+      />
+      <ChatPage />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(private)/")({
+  component: PageComponent,
+});

package/templates/auth-chat/apps/fe/src/pages/(private)/profile.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { ProfilePage } from "@/components/features/profile/ProfilePage";
+import { AppHead } from "@/components/shared/head/AppHead";
+
+function PageComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppHead
+        title={t(($) => $.profile.head.title)}
+        description={t(($) => $.profile.head.description)}
+      />
+      <ProfilePage />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(private)/profile")({
+  component: PageComponent,
+});

package/templates/auth-chat/apps/fe/src/pages/(private)/route.tsx

@@ -0,0 +1,18 @@
+import { AuthGuard } from "@povio/openapi-codegen-cli";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+import { AppLayout } from "@/components/layout/AppLayout";
+
+function PrivateLayout() {
+  return (
+    <AuthGuard type="private">
+      <AppLayout>
+        <Outlet />
+      </AppLayout>
+    </AuthGuard>
+  );
+}
+
+export const Route = createFileRoute("/(private)")({
+  component: PrivateLayout,
+});

package/templates/auth-chat/apps/fe/src/pages/(public)/auth.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+import z from "zod";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { useAuth } from "@/hooks/useAuth";
+
+const authSearchSchema = z.object({
+  type: z.string().optional(),
+  accessToken: z.string().optional(),
+  refreshToken: z.string().optional(),
+});
+
+function AuthCallbackPage() {
+  const navigate = useNavigate();
+  const { accessToken, refreshToken } = Route.useSearch();
+  const { updateTokens } = useAuth();
+
+  useEffect(() => {
+    if (accessToken) {
+      const decodedAccessToken = decodeURIComponent(accessToken);
+      const decodedRefreshToken = refreshToken ? decodeURIComponent(refreshToken) : undefined;
+      updateTokens?.(decodedAccessToken, decodedRefreshToken);
+
+      navigate({ to: "/" });
+    } else {
+      navigate({ to: "/login" });
+    }
+  }, [accessToken, refreshToken, navigate, updateTokens]);
+
+  return <LoadingState />;
+}
+
+export const Route = createFileRoute("/(public)/auth")({
+  component: AuthCallbackPage,
+  validateSearch: authSearchSchema,
+});

package/templates/auth-chat/apps/fe/src/pages/(public)/route.tsx

@@ -0,0 +1,9 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+function PublicLayout() {
+  return <Outlet />;
+}
+
+export const Route = createFileRoute("/(public)")({
+  component: PublicLayout,
+});