robodev 0.47.2 → 0.48.0

package/templates/povio/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/povio/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,
+});

package/templates/povio/apps/fe/src/pages/__root.tsx

@@ -0,0 +1,133 @@
+import { OpenApiRouter } from "@povio/openapi-codegen-cli";
+import { Confirmation, ToastContainer, UIConfig, UIOverrides, UIRouter } from "@povio/ui";
+import { Outlet, createRootRoute, useNavigate, useRouterState } from "@tanstack/react-router";
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { NotFoundPage } from "@/components/404";
+import { DefaultAppHead } from "@/components/shared/head/DefaultAppHead";
+import { initLogger } from "@/config/inits/logger";
+import Providers from "@/providers";
+import { AppErrorBoundary } from "@/providers/AppErrorBoundary";
+import { OpenApiRuntimeProvider } from "@/providers/OpenApiRuntimeProvider";
+import { Fonts } from "@/styles/fonts/fonts";
+import { uiOverrides } from "@/styles/overrides/uiOverrides.override";
+
+import "@/config/i18n";
+initLogger();
+
+const Root = () => {
+  const { i18n } = useTranslation();
+
+  const navigate = useNavigate();
+  const searchString = useRouterState({
+    select: (state) => state.location.searchStr,
+  });
+
+  const push = useCallback(
+    async (to: string, params?: Record<string, unknown>) => {
+      await navigate({ to, search: params });
+      return true;
+    },
+    [navigate],
+  );
+
+  const replace = useCallback(
+    async (to: string, params?: Record<string, unknown>) => {
+      await navigate({ to, replace: true, search: params });
+      return true;
+    },
+    [navigate],
+  );
+
+  useEffect(() => {
+    const handler = (lng: string) => {
+      if (typeof document !== "undefined") {
+        document.documentElement.setAttribute("lang", lng);
+      }
+    };
+    i18n.on("languageChanged", handler);
+    return () => {
+      i18n.off("languageChanged", handler);
+    };
+  }, [i18n]);
+
+  return (
+    <>
+      <AppErrorBoundary>
+        <Providers
+          providers={[
+            // { provider: ThemeContext.ThemeContextProvider }, // Uncomment for dark theme support
+            { provider: UIRouter.UIRouterProvider, props: { push, replace, searchString } },
+            { provider: OpenApiRouter.Provider, props: { replace } },
+            {
+              provider: UIConfig.Provider,
+              props: {
+                config: {
+                  input: {
+                    size: "small",
+                  },
+                  tableCellText: {
+                    size: "label-2",
+                    variant: "default",
+                  },
+                  tableHeaderText: {
+                    size: "label-2",
+                    variant: "prominent-1",
+                  },
+                  tag: {
+                    textSize: "label-3",
+                  },
+                },
+              },
+            },
+            {
+              provider: UIOverrides.Provider,
+              props: {
+                config: uiOverrides,
+              },
+            },
+            { provider: OpenApiRuntimeProvider },
+            { provider: Confirmation.Provider },
+          ]}
+        >
+          <Fonts />
+          <DefaultAppHead />
+
+          <RootLayout />
+
+          <ToastContainer />
+        </Providers>
+      </AppErrorBoundary>
+    </>
+  );
+};
+
+function RootLayout() {
+  return (
+    <main className="font-primary">
+      <Outlet />
+    </main>
+  );
+}
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { name: "theme-color", content: "#ffffff" },
+      { title: "Tiny Template" },
+      { name: "msapplication-TileColor", content: "#da532c" },
+    ],
+    links: [
+      { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },
+      { rel: "icon", type: "image/png", sizes: "96x96", href: "/favicon-96x96.png" },
+      { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
+      { rel: "shortcut icon", href: "/favicon.ico" },
+      { rel: "manifest", href: "/site.webmanifest" },
+    ],
+  }),
+  component: Root,
+  notFoundComponent: NotFoundPage,
+});

package/templates/povio/apps/fe/src/providers/AppErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import { Component, type ErrorInfo, type PropsWithChildren } from "react";
+
+import { ErrorFallback } from "@/components/shared/error/ErrorFallback";
+
+interface AppErrorBoundaryState {
+  error: unknown;
+}
+
+/**
+ * Catches render errors below it and shows `ErrorFallback` with a retry that remounts the tree.
+ * React only exposes error boundaries as class components, so this is the one class in the seed.
+ * No error-reporting SDK is wired in.
+ */
+export class AppErrorBoundary extends Component<PropsWithChildren, AppErrorBoundaryState> {
+  constructor(props: PropsWithChildren) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: unknown): AppErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: unknown, info: ErrorInfo) {
+    console.error(error, info.componentStack);
+  }
+
+  resetError = () => {
+    // oxlint-disable-next-line react/no-set-state -- the only way to clear a boundary's error
+    this.setState({ error: null });
+  };
+
+  render() {
+    if (this.state.error !== null) {
+      return (
+        <ErrorFallback
+          error={this.state.error}
+          resetError={this.resetError}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}

package/templates/povio/apps/fe/src/providers/OpenApiRuntimeProvider.tsx

@@ -0,0 +1,31 @@
+import { ErrorHandler, OpenApiQueryConfig } from "@povio/openapi-codegen-cli";
+import { useToast } from "@povio/ui";
+import type { PropsWithChildren } from "react";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+export function OpenApiRuntimeProvider({ children }: PropsWithChildren) {
+  const { t } = useTranslation();
+  const { errorToast } = useToast();
+
+  const handleError = useCallback(
+    (error: unknown) => {
+      console.error(error);
+      errorToast({
+        text: t(($) => $.shared.apiErrors.requestFailed, {
+          error: ErrorHandler.getErrorMessage(error) ?? t(($) => $.shared.apiErrors.unknown),
+        }),
+      });
+    },
+    [errorToast, t],
+  );
+
+  return (
+    <OpenApiQueryConfig.Provider
+      allowInvalidResponseData={import.meta.env.DEV}
+      onError={handleError}
+    >
+      {children}
+    </OpenApiQueryConfig.Provider>
+  );
+}

package/templates/povio/apps/fe/src/providers/index.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps, JSX, ReactNode } from "react";
+
+type HasRequiredProperty<T> = {
+  [K in keyof T]-?: Record<string, never> extends Pick<T, K> ? never : K;
+}[keyof T];
+
+interface ProviderBase<T> {
+  provider: T;
+}
+
+interface ProviderProps<T extends keyof JSX.IntrinsicElements> {
+  props: Omit<ComponentProps<T>, "children">;
+}
+
+// oxlint-disable-next-line no-explicit-any
+type ProvidersArray<T extends any[]> = [
+  ...{
+    [K in keyof T]: HasRequiredProperty<Omit<ComponentProps<T[K]>, "children">> extends never
+      ? ProviderBase<T[K]> & Partial<ProviderProps<T[K]>>
+      : ProviderBase<T[K]> & ProviderProps<T[K]>;
+  },
+];
+
+// oxlint-disable-next-line no-explicit-any
+interface Props<T extends any[]> {
+  providers: ProvidersArray<T>;
+  children: ReactNode;
+}
+
+// oxlint-disable-next-line no-explicit-any
+function Providers<T extends any[]>({ providers, children }: Props<T>) {
+  return (
+    <>
+      {providers.reduceRight(
+        (child, { provider: Provider, props }) => (
+          <Provider {...props}>{child}</Provider>
+        ),
+        children,
+      )}
+    </>
+  );
+}
+
+export default Providers;

package/templates/povio/apps/fe/src/providers/jwt.provider.tsx

@@ -0,0 +1,95 @@
+import { AuthContext } from "@povio/openapi-codegen-cli";
+import { useQueryClient } from "@tanstack/react-query";
+import { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+
+import { authTokenStore } from "@/clients/auth-token-store";
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { UserApi } from "@/openapi/user/user.api";
+import type { UserModels } from "@/openapi/user/user.models";
+import { UserQueries } from "@/openapi/user/user.queries";
+
+const routes: AuthContext.Routes = {
+  authenticated: "/",
+  unauthenticated: "/login",
+};
+
+export const JWTProvider = ({ children }: PropsWithChildren) => {
+  const queryClient = useQueryClient();
+
+  const previousAccessToken = useRef<string | null>(null);
+  const accessToken = useSyncExternalStore(
+    authTokenStore.subscribe,
+    authTokenStore.getAccessToken,
+    authTokenStore.getServerSnapshot,
+  );
+
+  const authenticated = !!accessToken;
+  const isInitializing = false;
+
+  const { data: user } = UserQueries.useGet({
+    enabled: authenticated,
+    staleTime: 10 * 60 * 1000,
+  });
+
+  const onAccessTokenChange = useCallback((token: string | null) => {
+    authTokenStore.setAccessToken(token);
+  }, []);
+
+  const onRefreshTokenChange = useCallback((token: string | null) => {
+    authTokenStore.setRefreshToken(token);
+  }, []);
+
+  const logout = useCallback(() => {
+    authTokenStore.clear();
+    queryClient.clear();
+  }, [queryClient]);
+
+  useEffect(() => {
+    if (previousAccessToken.current && !accessToken) {
+      queryClient.clear();
+    }
+
+    previousAccessToken.current = accessToken;
+  }, [accessToken, queryClient]);
+
+  const userPromise = useCallback(async () => {
+    try {
+      const user = await UserApi.get();
+      queryClient.setQueryData<UserModels.UserMeResponse>(UserQueries.keys.get(), user);
+      return user;
+    } catch {
+      logout();
+      return null;
+    }
+  }, [logout, queryClient]);
+
+  const updateTokens = useCallback(
+    (accessToken: string | null, refreshToken?: string | null) => {
+      if (accessToken !== null) {
+        onAccessTokenChange(accessToken);
+      }
+      if (refreshToken !== null && refreshToken !== undefined) {
+        onRefreshTokenChange(refreshToken);
+      }
+    },
+    [onAccessTokenChange, onRefreshTokenChange],
+  );
+
+  const loadingState = useMemo(() => <LoadingState />, []);
+
+  return (
+    <AuthContext.Provider
+      isAuthenticated={authenticated}
+      isInitializing={isInitializing}
+      logout={logout}
+      updateTokens={updateTokens}
+      accessToken={accessToken}
+      user={user}
+      userPromise={userPromise}
+      routes={routes}
+      loadingState={loadingState}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};

package/templates/povio/apps/fe/src/routeTree.gen.ts

@@ -0,0 +1,225 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './pages/__root'
+import { Route as publicRouteRouteImport } from './pages/(public)/route'
+import { Route as privateRouteRouteImport } from './pages/(private)/route'
+import { Route as guestRouteRouteImport } from './pages/(guest)/route'
+import { Route as privateIndexRouteImport } from './pages/(private)/index'
+import { Route as publicAuthRouteImport } from './pages/(public)/auth'
+import { Route as privateProfileRouteImport } from './pages/(private)/profile'
+import { Route as guestRegisterRouteImport } from './pages/(guest)/register'
+import { Route as guestLoginRouteImport } from './pages/(guest)/login'
+
+const publicRouteRoute = publicRouteRouteImport.update({
+  id: '/(public)',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const privateRouteRoute = privateRouteRouteImport.update({
+  id: '/(private)',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const guestRouteRoute = guestRouteRouteImport.update({
+  id: '/(guest)',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const privateIndexRoute = privateIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => privateRouteRoute,
+} as any)
+const publicAuthRoute = publicAuthRouteImport.update({
+  id: '/auth',
+  path: '/auth',
+  getParentRoute: () => publicRouteRoute,
+} as any)
+const privateProfileRoute = privateProfileRouteImport.update({
+  id: '/profile',
+  path: '/profile',
+  getParentRoute: () => privateRouteRoute,
+} as any)
+const guestRegisterRoute = guestRegisterRouteImport.update({
+  id: '/register',
+  path: '/register',
+  getParentRoute: () => guestRouteRoute,
+} as any)
+const guestLoginRoute = guestLoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => guestRouteRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/login': typeof guestLoginRoute
+  '/register': typeof guestRegisterRoute
+  '/profile': typeof privateProfileRoute
+  '/auth': typeof publicAuthRoute
+  '/': typeof privateIndexRoute
+}
+export interface FileRoutesByTo {
+  '/login': typeof guestLoginRoute
+  '/register': typeof guestRegisterRoute
+  '/profile': typeof privateProfileRoute
+  '/auth': typeof publicAuthRoute
+  '/': typeof privateIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/(guest)': typeof guestRouteRouteWithChildren
+  '/(private)': typeof privateRouteRouteWithChildren
+  '/(public)': typeof publicRouteRouteWithChildren
+  '/(guest)/login': typeof guestLoginRoute
+  '/(guest)/register': typeof guestRegisterRoute
+  '/(private)/profile': typeof privateProfileRoute
+  '/(public)/auth': typeof publicAuthRoute
+  '/(private)/': typeof privateIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/login'
+    | '/register'
+    | '/profile'
+    | '/auth'
+    | '/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/login'
+    | '/register'
+    | '/profile'
+    | '/auth'
+    | '/'
+  id:
+    | '__root__'
+    | '/(guest)'
+    | '/(private)'
+    | '/(public)'
+    | '/(guest)/login'
+    | '/(guest)/register'
+    | '/(private)/profile'
+    | '/(public)/auth'
+    | '/(private)/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  guestRouteRoute: typeof guestRouteRouteWithChildren
+  privateRouteRoute: typeof privateRouteRouteWithChildren
+  publicRouteRoute: typeof publicRouteRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/(public)': {
+      id: '/(public)'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof publicRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(private)': {
+      id: '/(private)'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof privateRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(guest)': {
+      id: '/(guest)'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof guestRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(private)/': {
+      id: '/(private)/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof privateIndexRouteImport
+      parentRoute: typeof privateRouteRoute
+    }
+    '/(public)/auth': {
+      id: '/(public)/auth'
+      path: '/auth'
+      fullPath: '/auth'
+      preLoaderRoute: typeof publicAuthRouteImport
+      parentRoute: typeof publicRouteRoute
+    }
+    '/(private)/profile': {
+      id: '/(private)/profile'
+      path: '/profile'
+      fullPath: '/profile'
+      preLoaderRoute: typeof privateProfileRouteImport
+      parentRoute: typeof privateRouteRoute
+    }
+    '/(guest)/register': {
+      id: '/(guest)/register'
+      path: '/register'
+      fullPath: '/register'
+      preLoaderRoute: typeof guestRegisterRouteImport
+      parentRoute: typeof guestRouteRoute
+    }
+    '/(guest)/login': {
+      id: '/(guest)/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof guestLoginRouteImport
+      parentRoute: typeof guestRouteRoute
+    }
+  }
+}
+
+interface guestRouteRouteChildren {
+  guestLoginRoute: typeof guestLoginRoute
+  guestRegisterRoute: typeof guestRegisterRoute
+}
+
+const guestRouteRouteChildren: guestRouteRouteChildren = {
+  guestLoginRoute: guestLoginRoute,
+  guestRegisterRoute: guestRegisterRoute,
+}
+
+const guestRouteRouteWithChildren = guestRouteRoute._addFileChildren(
+  guestRouteRouteChildren,
+)
+
+interface privateRouteRouteChildren {
+  privateProfileRoute: typeof privateProfileRoute
+  privateIndexRoute: typeof privateIndexRoute
+}
+
+const privateRouteRouteChildren: privateRouteRouteChildren = {
+  privateProfileRoute: privateProfileRoute,
+  privateIndexRoute: privateIndexRoute,
+}
+
+const privateRouteRouteWithChildren = privateRouteRoute._addFileChildren(
+  privateRouteRouteChildren,
+)
+
+interface publicRouteRouteChildren {
+  publicAuthRoute: typeof publicAuthRoute
+}
+
+const publicRouteRouteChildren: publicRouteRouteChildren = {
+  publicAuthRoute: publicAuthRoute,
+}
+
+const publicRouteRouteWithChildren = publicRouteRoute._addFileChildren(
+  publicRouteRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  guestRouteRoute: guestRouteRouteWithChildren,
+  privateRouteRoute: privateRouteRouteWithChildren,
+  publicRouteRoute: publicRouteRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()