robodev 0.22.0 → 0.24.0

package/templates/marketplace/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/marketplace/apps/fe/src/pages/(private)/cart.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/checkout.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/index.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/listings/$id/index.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { ListingDetailsPage } from "@/components/features/marketplace/ListingDetailsPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { ListingQueries } from "@/openapi/listing/listing.queries";
+
+function PageComponent() {
+  const { id } = Route.useParams();
+  const { t } = useTranslation();
+  const { data: listing, isLoading } = ListingQueries.useGetById({ id }, { enabled: !!id });
+
+  if (isLoading) return <LoadingState />;
+  if (!listing) {
+    return (
+      <>
+        <AppHead title={t(($) => $.browse.head.title)} />
+        <p className="text-text-default-2">{t(($) => $.listing.notFound)}</p>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <AppHead
+        title={listing.title}
+        description={listing.description ?? undefined}
+      />
+      <ListingDetailsPage listing={listing} />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(private)/listings/$id/")({
+  component: PageComponent,
+});

package/templates/marketplace/apps/fe/src/pages/(private)/my-listings.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/orders/$id.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { OrderDetailPage } from "@/components/features/marketplace/OrdersPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { useAuth } from "@/hooks/useAuth";
+import { OrderQueries } from "@/openapi/order/order.queries";
+
+function PageComponent() {
+  const { id } = Route.useParams();
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const { data: order, isLoading } = OrderQueries.useGetById({ id }, { enabled: !!id });
+
+  if (isLoading) return <LoadingState />;
+  if (!order) {
+    return (
+      <>
+        <AppHead title={t(($) => $.orders.head.title)} />
+        <p className="text-text-default-2">{t(($) => $.orders.notFound)}</p>
+      </>
+    );
+  }
+
+  const role = user?.id === order.sellerId ? "seller" : "buyer";
+  return (
+    <>
+      <AppHead title={t(($) => $.orders.head.title)} />
+      <OrderDetailPage
+        order={order}
+        role={role}
+      />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(private)/orders/$id")({
+  component: PageComponent,
+});

package/templates/marketplace/apps/fe/src/pages/(private)/orders/index.tsx

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

package/templates/marketplace/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/marketplace/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/marketplace/apps/fe/src/pages/(private)/sales.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/sell/$id.tsx

@@ -0,0 +1,44 @@
+import { Navigate, createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+import { ListingFormPage } from "@/components/features/marketplace/ListingFormPage";
+import { AppHead } from "@/components/shared/head/AppHead";
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { useAuth } from "@/hooks/useAuth";
+import { ListingQueries } from "@/openapi/listing/listing.queries";
+
+function PageComponent() {
+  const { id } = Route.useParams();
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const { data: listing, isLoading } = ListingQueries.useGetById({ id }, { enabled: !!id });
+
+  if (isLoading) return <LoadingState />;
+  if (!listing) {
+    return (
+      <>
+        <AppHead title={t(($) => $.listingForm.editTitle)} />
+        <p className="text-text-default-2">{t(($) => $.listing.notFound)}</p>
+      </>
+    );
+  }
+  if (user?.id !== listing.sellerId) {
+    return (
+      <Navigate
+        to="/listings/$id"
+        params={{ id: listing.id }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <AppHead title={t(($) => $.listingForm.editTitle)} />
+      <ListingFormPage listing={listing} />
+    </>
+  );
+}
+
+export const Route = createFileRoute("/(private)/sell/$id")({
+  component: PageComponent,
+});

package/templates/marketplace/apps/fe/src/pages/(private)/sell/index.tsx

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

package/templates/marketplace/apps/fe/src/pages/(private)/watchlist.tsx

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

package/templates/marketplace/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/marketplace/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/marketplace/apps/fe/src/pages/__root.tsx

@@ -0,0 +1,164 @@
+import { OpenApiRouter } from "@povio/openapi-codegen-cli";
+import { Confirmation, ToastContainer, UIConfig, UIOverrides, UIRouter } from "@povio/ui";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import { Outlet, createRootRoute, useNavigate, useRouterState } from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { onCLS, onINP, onLCP } from "web-vitals";
+
+import { NotFoundPage } from "@/components/404";
+import GoogleAnalytics from "@/components/googleAnalytics/GoogleAnalytics";
+import { DefaultAppHead } from "@/components/shared/head/DefaultAppHead";
+import { AppConfig } from "@/config/app.config";
+import { initA11y } from "@/config/inits/a11y";
+import { initLogger } from "@/config/inits/logger";
+import { initSentry } from "@/config/inits/sentry";
+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();
+initSentry();
+initA11y();
+
+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]);
+
+  if (AppConfig.enableWebVitals) {
+    onCLS(console.log);
+    onINP(console.log);
+    onLCP(console.log);
+  }
+
+  return (
+    <>
+      <GoogleAnalytics />
+      <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 />
+          <TanStackDevtools
+            plugins={[
+              {
+                name: "TanStack Query",
+                render: <ReactQueryDevtoolsPanel />,
+                defaultOpen: true,
+              },
+              {
+                name: "TanStack Router",
+                render: <TanStackRouterDevtoolsPanel />,
+                defaultOpen: false,
+              },
+            ]}
+          />
+        </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: "Marketplace" },
+      { 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/marketplace/apps/fe/src/providers/AppErrorBoundary.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from "@sentry/react";
+import type { PropsWithChildren } from "react";
+
+import { ErrorFallback, type ErrorFallbackProps } from "@/components/shared/error/ErrorFallback";
+
+const Fallback = (props: ErrorFallbackProps) => <ErrorFallback {...props} />;
+
+export const AppErrorBoundary = ({ children }: PropsWithChildren) => {
+  return <ErrorBoundary fallback={Fallback}>{children}</ErrorBoundary>;
+};

package/templates/marketplace/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/marketplace/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;