@carlonicora/nextjs-jsonapi 1.15.0 → 1.16.0

package/scripts/generate-web-module/generator.ts

@@ -38,6 +38,14 @@ import {
   generateModuleTemplate,
   generateListPageTemplate,
   generateDetailPageTemplate,
+  generateBootstrapperTemplate,
+  generateEnvTemplate,
+  generateMiddlewareEnvTemplate,
+  generateMainLayoutTemplate,
+  generateSettingsContextTemplate,
+  generateSettingsContainerTemplate,
+  generateSettingsPageTemplate,
+  generateSettingsModulePageTemplate,
 } from "./templates";
 import { writeFiles, printResults, updateBootstrapper, updateI18n } from "./utils";
 
@@ -323,6 +331,81 @@ function generateAllFiles(data: FrontendTemplateData, schema: JsonModuleDefiniti
     type: "page",
   });
 
+  // Project setup files (only if they don't exist)
+  const webBasePath = findWebBasePath("");
+
+  const bootstrapper = generateBootstrapperTemplate(webBasePath);
+  if (bootstrapper) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/config/Bootstrapper.ts"),
+      content: bootstrapper,
+      type: "project-setup",
+    });
+  }
+
+  const env = generateEnvTemplate(webBasePath);
+  if (env) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/config/env.ts"),
+      content: env,
+      type: "project-setup",
+    });
+  }
+
+  const middlewareEnv = generateMiddlewareEnvTemplate(webBasePath);
+  if (middlewareEnv) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/config/middleware-env.ts"),
+      content: middlewareEnv,
+      type: "project-setup",
+    });
+  }
+
+  const mainLayout = generateMainLayoutTemplate(webBasePath);
+  if (mainLayout) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/app/[locale]/(main)/layout.tsx"),
+      content: mainLayout,
+      type: "project-setup",
+    });
+  }
+
+  const settingsContext = generateSettingsContextTemplate(webBasePath);
+  if (settingsContext) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/features/common/contexts/SettingsContext.tsx"),
+      content: settingsContext,
+      type: "project-setup",
+    });
+  }
+
+  const settingsContainer = generateSettingsContainerTemplate(webBasePath);
+  if (settingsContainer) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/features/common/components/containers/SettingsContainer.tsx"),
+      content: settingsContainer,
+      type: "project-setup",
+    });
+  }
+
+  const settingsPage = generateSettingsPageTemplate(webBasePath);
+  if (settingsPage) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/app/[locale]/(main)/(features)/settings/page.tsx"),
+      content: settingsPage,
+      type: "project-setup",
+    });
+  }
+
+  const settingsModulePage = generateSettingsModulePageTemplate(webBasePath);
+  if (settingsModulePage) {
+    files.push({
+      path: path.join(webBasePath, "apps/web/src/app/[locale]/(main)/(features)/settings/[module]/page.tsx"),
+      content: settingsModulePage,
+      type: "project-setup",
+    });
+  }
+
   return files;
 }
 

package/scripts/generate-web-module/templates/index.ts

@@ -32,3 +32,13 @@ export { generateModuleTemplate } from "./module.template";
 
 // Page templates
 export { generateListPageTemplate, generateDetailPageTemplate } from "./pages";
+
+// Project setup templates
+export { generateBootstrapperTemplate } from "./project/bootstrapper.template";
+export { generateEnvTemplate } from "./project/env.template";
+export { generateMiddlewareEnvTemplate } from "./project/middleware-env.template";
+export { generateMainLayoutTemplate } from "./project/main-layout.template";
+export { generateSettingsContextTemplate } from "./project/settings-context.template";
+export { generateSettingsContainerTemplate } from "./project/settings-container.template";
+export { generateSettingsPageTemplate } from "./project/settings-page.template";
+export { generateSettingsModulePageTemplate } from "./project/settings-module-page.template";

package/scripts/generate-web-module/templates/project/bootstrapper.template.ts

@@ -0,0 +1,108 @@
+/**
+ * Bootstrapper Template
+ *
+ * Generates initial Bootstrapper.ts with all foundation and Stripe modules
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export function generateBootstrapperTemplate(webBasePath: string): string | null {
+  const outputPath = path.join(webBasePath, "apps/web/src/config/Bootstrapper.ts");
+
+  if (fs.existsSync(outputPath)) {
+    return null; // Skip if exists
+  }
+
+  return `import { FeatureIds } from "@/enums/feature.ids";
+import {
+  AuthModule,
+  AuthorModule,
+  BillingModule,
+  CompanyModule,
+  ContentModule,
+  DataClassRegistry,
+  FeatureModule,
+  FieldSelector,
+  ModuleModule,
+  ModuleRegistry,
+  ModuleWithPermissions,
+  NotificationModule,
+  PushModule,
+  RoleModule,
+  S3Module,
+  setBootstrapper,
+  StripeCustomerModule,
+  StripeInvoiceModule,
+  StripePaymentMethodModule,
+  StripePriceModule,
+  StripeProductModule,
+  StripeSubscriptionModule,
+  StripeUsageModule,
+  UserModule,
+} from "@carlonicora/nextjs-jsonapi/core";
+import { LucideIcon } from "lucide-react";
+
+const moduleFactory = (params: {
+  pageUrl?: string;
+  name: string;
+  cache?: string;
+  model: any;
+  feature?: FeatureIds;
+  moduleId?: string;
+  icon?: LucideIcon;
+  inclusions?: Record<string, { types?: string[]; fields?: FieldSelector<any>[] }>;
+}): ModuleWithPermissions => ({
+  pageUrl: params.pageUrl,
+  name: params.name,
+  model: params.model,
+  feature: params.feature,
+  moduleId: params.moduleId,
+  cache: params.cache,
+  icon: params.icon,
+  inclusions: params.inclusions ?? {},
+});
+
+const allModules = {
+  // Foundation modules
+  Auth: AuthModule(moduleFactory),
+  Company: CompanyModule(moduleFactory),
+  Feature: FeatureModule(moduleFactory),
+  Module: ModuleModule(moduleFactory),
+  Notification: NotificationModule(moduleFactory),
+  Push: PushModule(moduleFactory),
+  Role: RoleModule(moduleFactory),
+  S3: S3Module(moduleFactory),
+  User: UserModule(moduleFactory),
+  Author: AuthorModule(moduleFactory),
+  Content: ContentModule(moduleFactory),
+  // Billing modules (Stripe)
+  Billing: BillingModule(moduleFactory),
+  StripeCustomer: StripeCustomerModule(moduleFactory),
+  StripePaymentMethod: StripePaymentMethodModule(moduleFactory),
+  StripeSubscription: StripeSubscriptionModule(moduleFactory),
+  StripeInvoice: StripeInvoiceModule(moduleFactory),
+  StripeProduct: StripeProductModule(moduleFactory),
+  StripePrice: StripePriceModule(moduleFactory),
+  StripeUsage: StripeUsageModule(moduleFactory),
+} satisfies Record<string, ModuleWithPermissions>;
+
+export type AllModuleDefinitions = typeof allModules;
+
+let bootstrapped = false;
+
+export function bootstrap(): void {
+  if (bootstrapped) return;
+
+  Object.entries(allModules).forEach(([name, module]) => {
+    ModuleRegistry.register(name, module);
+  });
+
+  DataClassRegistry.bootstrap(allModules);
+
+  bootstrapped = true;
+}
+
+setBootstrapper(bootstrap);
+`;
+}

package/scripts/generate-web-module/templates/project/env.template.ts

@@ -0,0 +1,77 @@
+/**
+ * Environment Configuration Template
+ *
+ * Generates env.ts with JSON:API and Stripe configuration
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export function generateEnvTemplate(webBasePath: string): string | null {
+  const outputPath = path.join(webBasePath, "apps/web/src/config/env.ts");
+
+  if (fs.existsSync(outputPath)) {
+    return null; // Skip if exists
+  }
+
+  return `import { bootstrap } from "@/config/Bootstrapper";
+import { ENV } from "@/config/middleware-env";
+import { Link, usePathname, useRouter } from "@/i18n/routing";
+import { useDateFnsLocale } from "@/i18n/useDateFnsLocale";
+import { removeToken, updateToken } from "@/server-actions/auth-cookies";
+import {
+  configureAuth,
+  configureI18n,
+  configureJsonApi,
+  configureRoles,
+} from "@carlonicora/nextjs-jsonapi";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
+import { RoleId } from "@only35/shared";
+import { useLocale, useTranslations } from "next-intl";
+
+// Re-export ENV for use by non-middleware code
+export { ENV };
+
+// Bootstrap modules immediately when this file is imported
+bootstrap();
+
+// Validate required env vars
+if (!ENV.API_URL) {
+  throw new Error("NEXT_PUBLIC_API_URL is required but not set");
+}
+
+if (!ENV.APP_URL) {
+  throw new Error("NEXT_PUBLIC_ADDRESS is required but not set");
+}
+
+// Configure JSON:API client
+configureJsonApi({
+  apiUrl: ENV.API_URL,
+  appUrl: ENV.APP_URL,
+  trackablePages: [Modules.Notification, Modules.Company, Modules.User],
+  bootstrapper: bootstrap,
+  stripePublishableKey: ENV.STRIPE_PUBLISHABLE_KEY,
+});
+
+// Configure auth token handling
+configureAuth({
+  updateToken,
+  removeToken,
+});
+
+// Configure i18n
+configureI18n({
+  useRouter,
+  useTranslations,
+  useLocale,
+  useDateFnsLocale,
+  Link,
+  usePathname,
+});
+
+// Configure role IDs
+configureRoles(RoleId);
+
+// Configure Discord if needed: configureDiscord({ useDiscord: true, useInternalAuth: false });
+`;
+}

package/scripts/generate-web-module/templates/project/main-layout.template.tsx

@@ -0,0 +1,68 @@
+/**
+ * Main Layout Template
+ *
+ * Generates main layout with all providers including Stripe
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export function generateMainLayoutTemplate(webBasePath: string): string | null {
+  const outputPath = path.join(webBasePath, "apps/web/src/app/[locale]/(main)/layout.tsx");
+
+  if (fs.existsSync(outputPath)) {
+    return null; // Skip if exists
+  }
+
+  return `import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
+import "react-horizontal-scrolling-menu/dist/styles.css";
+
+import LayoutDetails from "@/features/common/components/details/LayoutDetails";
+import { routing } from "@/i18n/routing";
+import { PushNotificationProvider, RefreshUser, SidebarProvider, StripeProvider } from "@carlonicora/nextjs-jsonapi/components";
+import { NotificationContextProvider, SocketProvider } from "@carlonicora/nextjs-jsonapi/contexts";
+import { hasLocale } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import { Inter } from "next/font/google";
+import { cookies } from "next/headers";
+import { notFound } from "next/navigation";
+import "../../globals.css";
+
+const fontSans = Inter({ subsets: ["latin"], weight: ["100", "300", "400", "700"], variable: "--font-sans" });
+
+export default async function MainLayout(props: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
+  const params = await props.params;
+
+  const { locale } = params;
+  const { children } = props;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  const cookieStore = await cookies();
+  const token = cookieStore.get("token")?.value;
+  setRequestLocale(locale);
+  const messages = await getMessages();
+  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
+
+  if (await ServerSession.isLogged())
+    return (
+      <StripeProvider>
+        <SocketProvider token={token}>
+          <PushNotificationProvider>
+            <NotificationContextProvider>
+              <SidebarProvider defaultOpen={defaultOpen}>
+                <RefreshUser />
+                <LayoutDetails>{children}</LayoutDetails>
+              </SidebarProvider>
+            </NotificationContextProvider>
+          </PushNotificationProvider>
+        </SocketProvider>
+      </StripeProvider>
+    );
+
+  return <div className="flex min-h-screen w-full flex-col items-center justify-center">{children}</div>;
+}
+`;
+}

package/scripts/generate-web-module/templates/project/middleware-env.template.ts

@@ -0,0 +1,33 @@
+/**
+ * Middleware Environment Template
+ *
+ * Generates middleware-safe environment configuration
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export function generateMiddlewareEnvTemplate(webBasePath: string): string | null {
+  const outputPath = path.join(webBasePath, "apps/web/src/config/middleware-env.ts");
+
+  if (fs.existsSync(outputPath)) {
+    return null; // Skip if exists
+  }
+
+  return `/**
+ * Middleware-safe environment configuration
+ * This file ONLY exports ENV constants without any library imports
+ * It's safe to use in Next.js middleware which has restricted module support
+ */
+
+export const ENV = {
+  API_URL:
+    (typeof window === "undefined" ? process.env.API_INTERNAL_URL : undefined) || process.env.NEXT_PUBLIC_API_URL!,
+  APP_URL: process.env.NEXT_PUBLIC_ADDRESS
+    ? process.env.NEXT_PUBLIC_ADDRESS.trim().replace(/\\/+$/, "") // Trim whitespace & remove trailing slashes
+    : "",
+  VAPID_PUBLIC_KEY: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
+  STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+} as const;
+`;
+}

package/scripts/generate-web-module/templates/project/settings-container.template.tsx

@@ -0,0 +1,224 @@
+/**
+ * Settings Container Template
+ *
+ * Generates SettingsContainer with company and billing sections (including Stripe)
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export function generateSettingsContainerTemplate(webBasePath: string): string | null {
+  const outputPath = path.join(webBasePath, "apps/web/src/features/common/components/containers/SettingsContainer.tsx");
+
+  if (fs.existsSync(outputPath)) {
+    return null; // Skip if exists
+  }
+
+  return `"use client";
+
+import { useSettingsContext } from "@/features/common/contexts/SettingsContext";
+import { cn } from "@/utils/cn";
+import { Action, ModuleWithPermissions, Modules, getRoleId } from "@carlonicora/nextjs-jsonapi";
+import { usePageUrlGenerator } from "@carlonicora/nextjs-jsonapi/client";
+import {
+  CompanyContainer,
+  ContentTitle,
+  InvoicesContainer,
+  PaymentMethodsContainer,
+  ProductsAdminContainer,
+  SubscriptionsContainer,
+  UsageContainer,
+  UsersListContainer,
+  isStripeConfigured,
+} from "@carlonicora/nextjs-jsonapi/components";
+import { useCurrentUserContext } from "@carlonicora/nextjs-jsonapi/contexts";
+
+import { Activity, Building2Icon, CreditCard, LucideIcon, Package, Receipt, UsersIcon, Wallet } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { ReactNode, useEffect, useState } from "react";
+
+type SidebarItem = {
+  id: string;
+  icon: LucideIcon;
+  label?: string;
+  container: ReactNode;
+  module: ModuleWithPermissions;
+  singleItem?: boolean;
+  requiredPermission?: Action;
+  requiredRole?: string;
+  hidden?: boolean;
+};
+
+export default function SettingsContainer() {
+  const { module, setModule } = useSettingsContext();
+  const t = useTranslations();
+  const locale = useLocale();
+  const { hasPermissionToModule, hasRole } = useCurrentUserContext();
+  const [selectedComponent, setSelectedComponent] = useState<SidebarItem | null>(null);
+  const [subscriptions, setSubscriptions] = useState<any[]>([]);
+  const generateUrl = usePageUrlGenerator();
+
+  // Helper function to check if company has metered subscriptions
+  const hasMeteredSubscriptions = (): boolean => {
+    return subscriptions.some((sub) => sub.price?.recurring?.usageType === "metered");
+  };
+
+  // Build sidebars array - only include billing if Stripe is configured
+  const billingSection = isStripeConfigured()
+    ? !hasRole(getRoleId().Administrator)
+      ? {
+          name: "billing",
+          label: t("billing.title"),
+          items: [
+            {
+              id: "billing-subscriptions",
+              icon: CreditCard,
+              label: t("billing.subscriptions.title"),
+              container: <SubscriptionsContainer />,
+              module: Modules.Billing,
+              requiredPermission: Action.Read,
+            },
+            {
+              id: "billing-payment-methods",
+              icon: Wallet,
+              label: t("billing.payment_methods.title"),
+              container: <PaymentMethodsContainer />,
+              module: Modules.Billing,
+              requiredPermission: Action.Read,
+            },
+            {
+              id: "billing-invoices",
+              icon: Receipt,
+              label: t("billing.invoices.title"),
+              container: <InvoicesContainer />,
+              module: Modules.Billing,
+              requiredPermission: Action.Read,
+            },
+            {
+              id: "billing-usage",
+              icon: Activity,
+              label: t("billing.usage.title"),
+              container: <UsageContainer />,
+              module: Modules.Billing,
+              requiredPermission: Action.Read,
+              hidden: !hasMeteredSubscriptions(),
+            },
+          ],
+        }
+      : {
+          name: \`billing\`,
+          label: t("billing.title"),
+          items: [
+            {
+              id: "billing-admin-products",
+              icon: Package,
+              label: t("billing.admin.products.title"),
+              container: <ProductsAdminContainer />,
+              module: Modules.Billing,
+              requiredRole: getRoleId().Administrator,
+            },
+          ],
+        }
+    : null;
+
+  const companySection = !hasRole(getRoleId().Administrator)
+    ? {
+        name: \`company\`,
+        items: [
+          {
+            id: "company",
+            icon: Building2Icon,
+            container: <CompanyContainer />,
+            module: Modules.Company,
+            singleItem: true,
+          },
+          { id: "user", icon: UsersIcon, container: <UsersListContainer />, module: Modules.User },
+        ],
+      }
+    : null;
+
+  const sidebars: {
+    name: string;
+    label?: string;
+    items: SidebarItem[];
+  }[] = [...(companySection ? [companySection] : []), ...(billingSection ? [billingSection] : [])];
+
+  useEffect(() => {
+    if (module) {
+      const found = sidebars
+        .map((sidebar) => sidebar.items.find((item) => item.module.name === module.name))
+        .find((item) => item !== undefined);
+      if (found) {
+        setSelectedComponent(found);
+      } else {
+        setSelectedComponent(null);
+        setModule(undefined);
+      }
+    } else {
+      setSelectedComponent(null);
+    }
+  }, [module]);
+
+  return (
+    <div className="flex w-full gap-x-4">
+      <div className="sticky top-16 flex h-[calc(100vh-theme(spacing.20))] w-2xl flex-col justify-between border-r pr-4">
+        <div className="flex min-h-0 flex-1 overflow-y-auto">
+          <div className="flex w-full flex-col">
+            <ContentTitle element={t(\`generic.settings\`)} />
+            <nav className="space-y-4">
+              {sidebars.map((sidebar) => (
+                <div key={sidebar.name} className="">
+                  <h3 className="text-muted-foreground mb-2 text-lg font-light">
+                    {sidebar.label || t(\`generic.settings_sidebar\`, { item: sidebar.name })}
+                  </h3>
+                  {sidebar.items.map((item) => {
+                    // Check if item is hidden
+                    if (item.hidden) return null;
+
+                    // Check permission-based access
+                    if (item.requiredPermission) {
+                      if (!hasPermissionToModule({ module: item.module, action: item.requiredPermission })) return null;
+                    } else if (!hasPermissionToModule({ module: item.module, action: Action.Read })) {
+                      return null;
+                    }
+
+                    // Check role-based access
+                    if (item.requiredRole && !hasRole(item.requiredRole)) return null;
+
+                    const Icon = item.icon;
+                    return (
+                      <button
+                        key={item.id}
+                        onClick={() => {
+                          setModule(item.module);
+                          setSelectedComponent(item);
+                          window.history.replaceState(
+                            null,
+                            "",
+                            generateUrl({ page: \`/settings\`, id: item.module.name, language: locale }),
+                          );
+                        }}
+                        className={cn(
+                          "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+                          selectedComponent?.id === item.id
+                            ? "bg-secondary text-secondary-foreground"
+                            : "text-muted-foreground hover:text-foreground hover:bg-secondary/50",
+                        )}
+                      >
+                        <Icon className="h-4 w-4" />
+                        {item.label || t(\`types.\${item.module.name}\`, { count: item.singleItem ? 1 : 2 })}
+                      </button>
+                    );
+                  })}
+                </div>
+              ))}
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="flex w-full flex-col gap-y-4 pb-20">{selectedComponent ? selectedComponent.container : null}</div>
+    </div>
+  );
+}
+`;
+}