create-nextblock 0.2.78 → 0.8.1

package/templates/nextblock-template/context/AuthContext.tsx

@@ -1,10 +1,10 @@
 // context/AuthContext.tsx
-'use client';
-
-import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
-import { User, Subscription, SupabaseClient } from '@supabase/supabase-js';
-import { createClient as createSupabaseBrowserClient, getProfileWithRoleClientSide } from '@nextblock-cms/db';
-import { Database } from '@nextblock-cms/db';
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { User, SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
 
 type Profile = Database['public']['Tables']['profiles']['Row'];
 type UserRole = Database['public']['Enums']['user_role'];
@@ -28,84 +28,17 @@ interface AuthContextType {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
-  const [supabase] = useState(() => createSupabaseBrowserClient());
-  
-  const [user, setUser] = useState<User | null>(serverUser);
-  const [profile, setProfile] = useState<Profile | null>(serverProfile);
-  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
-  const [isLoading] = useState(false);
-  const [authSubscription, setAuthSubscription] = useState<Subscription | null>(null);
-
-  const handleAuthStateChange = useCallback(async (event: string, session: unknown) => {
-    const currentUser = (session && typeof session === 'object' && 'user' in session) ? (session as any).user : null;
-    setUser(currentUser);
-
-    if (currentUser) {
-      try {
-        const userProfileData = await getProfileWithRoleClientSide(supabase, currentUser.id);
-        setProfile(userProfileData);
-        setRole(userProfileData?.role ?? null);
-      } catch (e) {
-        console.error("AuthProvider: Error fetching profile on auth change", e);
-        setProfile(null);
-        setRole(null);
-      }
-    } else {
-      setProfile(null);
-      setRole(null);
-    }
-  }, [supabase]);
-
-  const subscribeToAuth = useCallback(() => {
-    if (authSubscription) return; // Already subscribed
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(handleAuthStateChange);
-    setAuthSubscription(subscription);
-  }, [supabase, handleAuthStateChange, authSubscription]);
-
-  const unsubscribeFromAuth = useCallback(() => {
-    if (authSubscription) {
-      authSubscription.unsubscribe();
-      setAuthSubscription(null);
-    }
-  }, [authSubscription]);
-
-  useEffect(() => {
-    subscribeToAuth();
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        subscribeToAuth();
-      } else {
-        unsubscribeFromAuth();
-      }
-    };
-
-    const handlePageHide = (event: PageTransitionEvent) => {
-      if (!event.persisted) {
-        unsubscribeFromAuth(); // This is crucial
-        supabase.removeAllChannels();
-      }
-    };
-
-    const handlePageShow = (event: PageTransitionEvent) => {
-      if (event.persisted) {
-        subscribeToAuth();
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    window.addEventListener('pagehide', handlePageHide);
-    window.addEventListener('pageshow', handlePageShow);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      window.removeEventListener('pagehide', handlePageHide);
-      window.removeEventListener('pageshow', handlePageShow);
-      unsubscribeFromAuth();
-      supabase.removeAllChannels();
-    };
-  }, [subscribeToAuth, unsubscribeFromAuth, supabase]);
+export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
+  const [user, setUser] = useState<User | null>(serverUser);
+  const [profile, setProfile] = useState<Profile | null>(serverProfile);
+  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
+  const [isLoading] = useState(false);
+
+  useEffect(() => {
+    setUser(serverUser);
+    setProfile(serverProfile);
+    setRole(serverProfile?.role ?? null);
+  }, [serverUser, serverProfile]);
 
   const isAdmin = role === 'ADMIN';
   const isWriter = role === 'WRITER';
@@ -116,11 +49,11 @@ export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProvid
     profile,
     role,
     isLoading,
-    isAdmin,
-    isWriter,
-    isUserRole,
-    supabase,
-  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole, supabase]);
+    isAdmin,
+    isWriter,
+    isUserRole,
+    supabase: null,
+  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole]);
 
   return (
     <AuthContext.Provider value={value}>
@@ -135,4 +68,4 @@ export const useAuth = () => {
     throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
-};
+};

package/templates/nextblock-template/context/CurrentContentContext.tsx

@@ -4,8 +4,9 @@ import React, { createContext, useContext, useState, ReactNode } from 'react';
 
 export interface CurrentContent {
   id: string | number | null;
-  type: 'page' | 'post' | null;
+  type: 'page' | 'post' | 'product' | null;
   slug: string | null;
+  translation_group_id?: string | null;
 }
 
 interface CurrentContentContextType {
@@ -22,12 +23,17 @@ export const CurrentContentProvider = ({ children }: { children: ReactNode }) =>
     slug: null,
   });
 
-  const setCurrentContent = (content: CurrentContent) => {
+  const setCurrentContent = React.useCallback((content: CurrentContent) => {
     setCurrentContentState(content);
-  };
+  }, []);
+
+  const value = React.useMemo(() => ({
+    currentContent,
+    setCurrentContent
+  }), [currentContent, setCurrentContent]);
 
   return (
-    <CurrentContentContext.Provider value={{ currentContent, setCurrentContent }}>
+    <CurrentContentContext.Provider value={value}>
       {children}
     </CurrentContentContext.Provider>
   );

package/templates/nextblock-template/context/LanguageContext.tsx

@@ -1,16 +1,16 @@
 // context/LanguageContext.tsx
 'use client'; // This directive applies to the rest of the file.
 
-import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
-import { Database } from '@nextblock-cms/db';
-import { getActiveLanguagesClientSide } from '@nextblock-cms/db';
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import type { Database } from '@nextblock-cms/db';
 
 type Language = Database['public']['Tables']['languages']['Row'];
 import Cookies from 'js-cookie';
 
-const LANGUAGE_STORAGE_KEY = 'preferred_locale_storage';
-const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
-const DEFAULT_FALLBACK_LOCALE = 'en'; // Your ultimate fallback
+const LANGUAGE_STORAGE_KEY = 'preferred_locale_storage';
+const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
+const DEFAULT_FALLBACK_LOCALE = 'en'; // Your ultimate fallback
 
 interface LanguageContextType {
   currentLocale: string;
@@ -64,16 +64,16 @@ export const LanguageProvider = ({
     let isMounted = true; // Track mount status
 
     const initializeLanguages = async () => {
-      setIsLoadingLanguages(true); // Set loading true at the start of initialization
-
-      let languagesToUse = initialAvailableLanguages;
-      let defaultLangToUse = initialDefaultLanguage;
-
-      // If server didn't provide languages, or they were empty, fetch client-side as a fallback.
-      if (!languagesToUse || languagesToUse.length === 0) {
-        try {
-          const fetchedLangs = await getActiveLanguagesClientSide();
-          if (isMounted) { // Check mount status before setting state
+      let languagesToUse = initialAvailableLanguages;
+      let defaultLangToUse = initialDefaultLanguage;
+
+      // If server didn't provide languages, or they were empty, fetch client-side as a fallback.
+      if (!languagesToUse || languagesToUse.length === 0) {
+        setIsLoadingLanguages(true); // Set loading true only when we need the client fallback.
+        try {
+          const { fetchActiveLanguagesFromRest } = await import('./language-rest-client');
+          const fetchedLangs = await fetchActiveLanguagesFromRest();
+          if (isMounted) { // Check mount status before setting state
             languagesToUse = fetchedLangs;
             setAvailableLanguages(fetchedLangs);
             defaultLangToUse = fetchedLangs.find(lang => lang.is_default) || fetchedLangs[0] || null;

package/templates/nextblock-template/context/language-rest-client.ts

@@ -0,0 +1,31 @@
+import type { Database } from '@nextblock-cms/db';
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+export async function fetchActiveLanguagesFromRest(): Promise<Language[]> {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey) {
+    return [];
+  }
+
+  const url = new URL('/rest/v1/languages', supabaseUrl);
+  url.searchParams.set('select', 'id, code, name, is_default, is_active, created_at, updated_at');
+  url.searchParams.set('is_active', 'eq.true');
+  url.searchParams.set('order', 'name.asc');
+
+  const response = await fetch(url.toString(), {
+    headers: {
+      apikey: supabaseAnonKey,
+      Authorization: `Bearer ${supabaseAnonKey}`,
+    },
+  });
+
+  if (!response.ok) {
+    return [];
+  }
+
+  const data = await response.json();
+  return Array.isArray(data) ? data : [];
+}

package/templates/nextblock-template/docs/01-PROJECT-OVERVIEW.md

@@ -0,0 +1,94 @@
+# 01 Project Overview
+
+## What NextBlock Is
+
+NextBlock is an Nx monorepo centered on a Next.js 16 application
+(`apps/nextblock`) backed by Supabase. The public site, authenticated CMS,
+shared editor, shared database helpers, shared UI primitives, and CLI scaffold
+all live in one workspace.
+
+The repository currently contains:
+
+- `apps/nextblock`: the canonical application. This is the runtime source of
+  truth for the public site, CMS, checkout routes, cron routes, and auth
+  callback behavior.
+- `apps/create-nextblock`: the CLI that copies a sanitized template from the
+  source app and rewrites it for package-based distribution.
+- `libs/db`: Supabase clients, package activation checks, generated database
+  types, and the migration tree under `libs/db/src/supabase/migrations`.
+- `libs/editor`: the reusable Tiptap-based editor package used by the CMS and
+  by scaffolded projects.
+- `libs/ecommerce`: the premium commerce package that provides storefront UI,
+  checkout providers, order handling, shipping, tax, currency, and CMS pages.
+- `libs/sdk`: the block authoring contract used for typed extensibility.
+- `libs/ui` and `libs/utils`: shared UI components, styles, and helper
+  utilities consumed throughout the workspace.
+
+## Runtime Model
+
+The `apps/nextblock/app` tree is split into a few clear surfaces:
+
+- Public routes: `app/[slug]`, `app/article/[slug]`, `app/product/*`,
+  `app/cart`, `app/checkout`, and the shared public `app/layout.tsx`.
+- Auth routes: `app/(auth-pages)/*` plus `app/auth/callback/route.ts`.
+- CMS routes: `app/cms/*`.
+- Operational routes: `app/api/checkout/route.ts`,
+  `app/api/webhooks/*`, `app/api/cron/*`, `robots.txt`, and `sitemap.xml`.
+
+The public root layout loads shared UI and editor styles, resolves cached
+layout data from Supabase, injects the storefront cart drawer, and reads the
+storefront currency cookie. The CMS layout checks whether the ecommerce package
+is active so the client-side CMS shell can show or hide store navigation.
+
+## CMS and Public Site Split
+
+The public application and CMS are not separate projects. They share the same
+Next.js app and database, but expose different route groups and different
+authorization requirements:
+
+- Public content is driven by published pages, posts, navigation, products, and
+  translations stored in Supabase.
+- CMS routes are guarded in the client layout and expect an authenticated user
+  whose profile role is `ADMIN` or `WRITER`.
+- Commerce CMS routes such as products, orders, shipping, taxes, and payments
+  are only meaningful when the ecommerce package is active.
+
+## Package Activation Gating
+
+Premium functionality is gated through `package_activations` and
+`verifyPackageOnline()` in `libs/db/src/lib/package-validation.ts`.
+
+Today that gate is used directly in the app for things like:
+
+- CMS ecommerce navigation visibility.
+- The checkout API.
+- Premium route wrappers and CLI module activation flows.
+
+If a package gate and the actual route behavior disagree, the route file wins.
+
+## Nx Workspace Shape
+
+Nx is used for project graph management, builds, linting, Vite-based library
+output, and Next.js app targets. A few practical notes matter when navigating
+the repo:
+
+- `nextblock` is the main application target.
+- Public libraries such as `db`, `editor`, `sdk`, `ui`, and `utils` are normal
+  Nx projects.
+- `ecommerce` is an Nx library tagged `scope:premium`.
+- The scaffold template under
+  `apps/create-nextblock/templates/nextblock-template` is intentionally copied
+  output, not a normal Nx project.
+
+## Where to Start
+
+- For overall architecture: read [04-DATABASE-AND-AUTH.md](./04-DATABASE-AND-AUTH.md)
+  after this file.
+- For day-to-day setup and commands: read
+  [05-DEVELOPER-GUIDE.md](./05-DEVELOPER-GUIDE.md).
+- For CLI behavior and template sync: read
+  [06-CLI-AND-SCAFFOLDING.md](./06-CLI-AND-SCAFFOLDING.md).
+- For editor and block work: read
+  [03-CMS-AND-EDITOR.md](./03-CMS-AND-EDITOR.md).
+- For commerce work: read
+  [02-ECOMMERCE-CAPABILITIES.md](./02-ECOMMERCE-CAPABILITIES.md).