@nextsparkjs/core 0.1.0-beta.83 → 0.1.0-beta.85

package/dist/templates/app/dashboard/settings/teams/page.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { Users, Plus, Settings, ChevronRight, Crown, Shield, Eye, Loader2 } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '@nextsparkjs/core/components/ui/avatar'
+import { Separator } from '@nextsparkjs/core/components/ui/separator'
+import { useTeamContext } from '@nextsparkjs/core/contexts/TeamContext'
+import { useTeamsConfig } from '@nextsparkjs/core/hooks/useTeamsConfig'
+import { TeamMembersList } from '@nextsparkjs/core/components/teams/TeamMembersList'
+import { TeamPendingInvitations } from '@nextsparkjs/core/components/teams/TeamPendingInvitations'
+import { CreateTeamDialog } from '@nextsparkjs/core/components/teams/CreateTeamDialog'
+import { InlineEditableField } from '@nextsparkjs/core/components/teams/InlineEditableField'
+import { sel } from '@nextsparkjs/core/selectors'
+import { TeamRole } from '@nextsparkjs/core/lib/teams/types'
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+
+// Role icons map - core roles only, custom roles use fallback
+const roleIconsMap: Record<string, typeof Crown | null> = {
+  owner: Crown,
+  admin: Shield,
+  member: null,
+  viewer: Eye,
+}
+
+// Role colors map - core roles only, custom roles use fallback
+const roleColorsMap: Record<string, 'destructive' | 'default' | 'secondary' | 'outline'> = {
+  owner: 'destructive',
+  admin: 'default',
+  member: 'secondary',
+  viewer: 'outline',
+}
+
+// Type-safe helpers - fallback handles any custom theme roles
+const getRoleIcon = (role: TeamRole) => roleIconsMap[role] ?? Eye
+const getRoleColor = (role: TeamRole) => roleColorsMap[role] ?? 'outline'
+
+function TeamsSettingsPage() {
+  const t = useTranslations('settings')
+  const tTeams = useTranslations('teams')
+  const { userTeams, currentTeam, isLoading } = useTeamContext()
+  const { mode, canCreate, canSwitch } = useTeamsConfig()
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null)
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+
+  // In single-user mode, hide the teams settings page content
+  // since there's only one team and no collaboration features
+  const isSingleUserMode = mode === 'single-user'
+
+  // Find selected team membership
+  const selectedMembership = selectedTeamId
+    ? userTeams.find(m => m.team.id === selectedTeamId)
+    : null
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center py-12 gap-3"
+        role="status"
+        aria-label={tTeams('messages.loading')}
+        data-cy={sel('settings.teams.loading')}
+      >
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <div className="text-sm text-muted-foreground">
+          {tTeams('messages.loading')}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className="max-w-4xl space-y-6"
+        data-cy={sel('settings.teams.container')}
+      >
+        {/* Header */}
+        <header data-cy={sel('settings.teams.header')}>
+          <h1
+            className="text-2xl font-bold"
+            id="teams-settings-heading"
+          >
+            {t('teams.title')}
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            {t('teams.description')}
+          </p>
+        </header>
+
+        {/* Single-user mode: show simplified view */}
+        {isSingleUserMode && currentTeam && (
+          <Card data-cy={sel('settings.teams.singleUserMode')}>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Users className="h-5 w-5" aria-hidden="true" />
+                <CardTitle>{t('teams.yourTeam')}</CardTitle>
+              </div>
+              <CardDescription>
+                {t('teams.singleUserDescription', { fallback: 'Your personal workspace.' })}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center gap-3 p-4 rounded-lg border">
+                <Avatar className="h-10 w-10">
+                  <AvatarImage src={currentTeam.avatarUrl || undefined} alt={currentTeam.name} />
+                  <AvatarFallback>
+                    {currentTeam.name.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <div className="font-medium">{currentTeam.name}</div>
+                  <div className="text-sm text-muted-foreground">{currentTeam.slug}</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Teams List Card - only show if not single-user mode */}
+        {!isSingleUserMode && (
+        <Card data-cy={sel('settings.teams.list.container')}>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Users className="h-5 w-5" aria-hidden="true" />
+                <CardTitle>{canSwitch ? t('teams.yourTeams') : t('teams.yourTeam')}</CardTitle>
+              </div>
+              {/* Only show Create Team button if mode allows it */}
+              {canCreate && (
+                <Button
+                  onClick={() => setShowCreateDialog(true)}
+                  size="sm"
+                  data-cy="create-team-button"
+                >
+                  <Plus className="h-4 w-4 mr-2" aria-hidden="true" />
+                  {tTeams('actions.create')}
+                </Button>
+              )}
+            </div>
+            <CardDescription>
+              {t('teams.yourTeamsDescription')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {userTeams.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t('teams.noTeams')}
+                </div>
+              ) : (
+                userTeams.map((membership) => {
+                  const team = membership.team
+                  const role = membership.role as TeamRole
+                  const RoleIcon = getRoleIcon(role)
+                  const isSelected = selectedTeamId === team.id
+
+                  return (
+                    <button
+                      key={team.id}
+                      onClick={() => setSelectedTeamId(isSelected ? null : team.id)}
+                      className={`w-full flex items-center justify-between p-4 rounded-lg border transition-colors hover:bg-accent/50 ${
+                        isSelected ? 'bg-accent border-accent' : 'border-border'
+                      }`}
+                      data-cy={`team-item-${team.id}`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Avatar className="h-10 w-10">
+                          <AvatarImage src={team.avatarUrl || undefined} alt={team.name} />
+                          <AvatarFallback>
+                            {team.name.slice(0, 2).toUpperCase()}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="text-left">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{team.name}</span>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {team.slug}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <Badge variant={getRoleColor(role)}>
+                          {RoleIcon && <RoleIcon className="h-3 w-3 mr-1" aria-hidden="true" />}
+                          {tTeams(`roles.${role}`)}
+                        </Badge>
+                        <ChevronRight className={`h-4 w-4 text-muted-foreground transition-transform ${isSelected ? 'rotate-90' : ''}`} />
+                      </div>
+                    </button>
+                  )
+                })
+              )}
+            </div>
+          </CardContent>
+        </Card>
+        )}
+
+        {/* Selected Team Details - only show if not single-user mode */}
+        {!isSingleUserMode && selectedMembership && (
+          <Card data-cy={sel('settings.teams.list.details', { id: selectedMembership.team.id })}>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Settings className="h-5 w-5" aria-hidden="true" />
+                <CardTitle className="flex-1">
+                  <InlineEditableField
+                    value={selectedMembership.team.name}
+                    fieldType="name"
+                    teamId={selectedMembership.team.id}
+                    placeholder={tTeams('createTeam.namePlaceholder')}
+                    disabled={selectedMembership.role !== 'owner'}
+                  />
+                </CardTitle>
+              </div>
+              <CardDescription className="mt-2">
+                <InlineEditableField
+                  value={selectedMembership.team.description}
+                  fieldType="description"
+                  teamId={selectedMembership.team.id}
+                  placeholder={tTeams('createTeam.descriptionPlaceholder')}
+                  multiline={true}
+                  disabled={selectedMembership.role !== 'owner'}
+                />
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Team Info */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-muted-foreground">
+                    {tTeams('fields.slug')}
+                  </label>
+                  <p className="mt-1">{selectedMembership.team.slug}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-muted-foreground">
+                    {tTeams('fields.role')}
+                  </label>
+                  <div className="mt-1">
+                    <Badge variant={getRoleColor(selectedMembership.role as TeamRole)}>
+                      {tTeams(`roles.${selectedMembership.role}`)}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Team Members */}
+              <TeamMembersList teamId={selectedMembership.team.id} />
+
+              {/* Pending Invitations */}
+              <TeamPendingInvitations teamId={selectedMembership.team.id} />
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Create Team Dialog - only render if mode allows team creation */}
+      {canCreate && (
+        <CreateTeamDialog
+          open={showCreateDialog}
+          onOpenChange={setShowCreateDialog}
+        />
+      )}
+    </>
+  )
+}
+
+export default getTemplateOrDefaultClient('app/dashboard/settings/teams/page.tsx', TeamsSettingsPage)

package/dist/templates/app/dashboard/settings/teams/permissions/page.tsx

@@ -0,0 +1,92 @@
+import { useTranslations } from 'next-intl'
+import { PermissionsMatrix } from '@nextsparkjs/core/components/permissions'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@nextsparkjs/core/components/ui/tabs'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+// Use PermissionService which reads from the build-time generated registry
+import { PermissionService } from '@nextsparkjs/core/lib/services/permission.service'
+
+/**
+ * Team Permissions Page
+ *
+ * Displays a visual permissions matrix showing what each team role can do.
+ * Organized by categories with tabs for easy navigation.
+ */
+export default function TeamPermissionsPage() {
+  const t = useTranslations('permissions')
+
+  // Get all unique categories from registry
+  const categories = PermissionService.getCategories()
+
+  return (
+    <div className="space-y-6" data-cy="team-permissions-page">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
+        <p className="text-muted-foreground">{t('description')}</p>
+      </div>
+
+      {/* Info Card with Role Overview */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('rolesOverview')}</CardTitle>
+          <CardDescription>{t('rolesOverviewDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 md:grid-cols-4">
+            <RoleCard role="owner" />
+            <RoleCard role="admin" />
+            <RoleCard role="member" />
+            <RoleCard role="viewer" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Permissions Matrix with Tabs */}
+      <Tabs defaultValue="all" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="all" data-cy="tab-all">
+            {t('allPermissions')}
+          </TabsTrigger>
+          {categories.map(cat => (
+            <TabsTrigger key={cat} value={cat} data-cy={`tab-${cat.toLowerCase()}`}>
+              {cat}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContent value="all">
+          <PermissionsMatrix />
+        </TabsContent>
+
+        {categories.map(cat => (
+          <TabsContent key={cat} value={cat}>
+            <PermissionsMatrix category={cat} />
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+/**
+ * RoleCard component
+ *
+ * Displays a visual card for each team role with color coding
+ */
+function RoleCard({ role }: { role: 'owner' | 'admin' | 'member' | 'viewer' }) {
+  const t = useTranslations('permissions')
+
+  const roleColors = {
+    owner: 'border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-900/20',
+    admin: 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20',
+    member: 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20',
+    viewer: 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/20',
+  }
+
+  return (
+    <div className={`rounded-lg border p-4 ${roleColors[role]}`} data-cy={`role-card-${role}`}>
+      <h3 className="font-semibold">{t(`roles.${role}.title`)}</h3>
+      <p className="text-sm text-muted-foreground">{t(`roles.${role}.description`)}</p>
+    </div>
+  )
+}

package/dist/templates/app/devtools/blocks/[slug]/page.tsx

@@ -0,0 +1,39 @@
+import { BlockDetailViewer } from "@nextsparkjs/core/components/devtools/BlockDetailViewer";
+import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
+import { notFound } from "next/navigation";
+
+interface BlockDetailPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+/**
+ * Block Detail Page
+ *
+ * Displays detailed information about a specific page builder block.
+ * Shows fields, configuration, and test coverage.
+ */
+export default async function BlockDetailPage({ params }: BlockDetailPageProps) {
+  const { slug } = await params;
+
+  // Verify block exists
+  if (!BLOCK_REGISTRY[slug]) {
+    notFound();
+  }
+
+  return (
+    <div className="space-y-6" data-cy={`devtools-block-detail-${slug}`}>
+      <BlockDetailViewer slug={slug} />
+    </div>
+  );
+}
+
+/**
+ * Generate static params for all blocks
+ */
+export async function generateStaticParams() {
+  return Object.keys(BLOCK_REGISTRY).map((slug) => ({
+    slug,
+  }));
+}

package/dist/templates/app/devtools/blocks/page.tsx

@@ -0,0 +1,31 @@
+import { BlocksViewer } from "@nextsparkjs/core/components/devtools/BlocksViewer";
+import { LayoutGrid } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Blocks Registry Page
+ *
+ * Displays all page builder blocks with field definitions and coverage info.
+ * Provides filtering and search capabilities.
+ */
+export default async function DevBlocksPage() {
+  const t = await getTranslations("devtools.blocks");
+
+  return (
+    <div className="space-y-6" data-cy="devtools-blocks-page">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
+          <LayoutGrid className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold">{t("title")}</h1>
+          <p className="text-muted-foreground">{t("description")}</p>
+        </div>
+      </div>
+
+      {/* Blocks Viewer */}
+      <BlocksViewer />
+    </div>
+  );
+}

package/dist/templates/app/devtools/config/page.tsx

@@ -0,0 +1,31 @@
+import { ConfigViewer } from "@nextsparkjs/core/components/devtools";
+import { Settings } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Configuration Viewer Page
+ *
+ * Displays theme configuration and entity registry information.
+ * Provides read-only view with JSON formatting and copy functionality.
+ */
+export default async function DevConfigPage() {
+  const t = await getTranslations('dev.config');
+
+  return (
+    <div className="space-y-6" data-cy="devtools-config-page">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
+          <Settings className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold">{t('title')}</h1>
+          <p className="text-muted-foreground">{t('description')}</p>
+        </div>
+      </div>
+
+      {/* Config Viewer */}
+      <ConfigViewer />
+    </div>
+  );
+}

package/dist/templates/app/devtools/features/page.tsx

@@ -0,0 +1,31 @@
+import { FeaturesViewer } from "@nextsparkjs/core/components/devtools/FeaturesViewer";
+import { Layers } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Features Registry Page
+ *
+ * Displays all features from the testing registry with coverage information.
+ * Provides filtering and search capabilities.
+ */
+export default async function DevFeaturesPage() {
+  const t = await getTranslations("devtools.features");
+
+  return (
+    <div className="space-y-6" data-cy="devtools-features-page">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
+          <Layers className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold">{t("title")}</h1>
+          <p className="text-muted-foreground">{t("description")}</p>
+        </div>
+      </div>
+
+      {/* Features Viewer */}
+      <FeaturesViewer />
+    </div>
+  );
+}

package/dist/templates/app/devtools/flows/page.tsx

@@ -0,0 +1,31 @@
+import { FlowsViewer } from "@nextsparkjs/core/components/devtools/FlowsViewer";
+import { GitBranch } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Flows Registry Page
+ *
+ * Displays all user journey flows from the testing registry with coverage information.
+ * Provides filtering and search capabilities.
+ */
+export default async function DevFlowsPage() {
+  const t = await getTranslations("devtools.flows");
+
+  return (
+    <div className="space-y-6" data-cy="devtools-flows-page">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
+          <GitBranch className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold">{t("title")}</h1>
+          <p className="text-muted-foreground">{t("description")}</p>
+        </div>
+      </div>
+
+      {/* Flows Viewer */}
+      <FlowsViewer />
+    </div>
+  );
+}

package/dist/templates/app/devtools/layout.tsx

@@ -0,0 +1,58 @@
+import { DeveloperGuard } from "@nextsparkjs/core/components/app/guards/DeveloperGuard";
+import { DevtoolsSidebar, DevtoolsMobileHeader } from "@nextsparkjs/core/components/devtools";
+import { Metadata } from "next";
+import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+
+const defaultMetadata: Metadata = {
+  title: "DevTools",
+  description: "Development tools and documentation",
+  robots: "noindex, nofollow", // Prevent search engine indexing
+};
+
+export const metadata: Metadata = getMetadataOrDefault(
+  'app/devtools/layout.tsx',
+  defaultMetadata
+)
+
+interface DevLayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Developer Area Layout
+ *
+ * Protected layout for developer-only sections with dedicated sidebar navigation.
+ * Applies DeveloperGuard protection to all child routes.
+ * Includes responsive design for mobile and desktop.
+ * Uses purple/violet color scheme to differentiate from Admin Panel (red).
+ */
+function DevLayout({ children }: DevLayoutProps) {
+  return (
+    <DeveloperGuard>
+      <div className="flex h-screen bg-background">
+        {/* Sidebar - Hidden on mobile, visible on desktop */}
+        <div className="hidden lg:block">
+          <DevtoolsSidebar />
+        </div>
+
+        {/* Main content area */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Mobile header for DevTools - Only visible on mobile */}
+          <DevtoolsMobileHeader />
+
+          {/* Content area with scrolling */}
+          <main className="flex-1 overflow-y-auto overflow-x-hidden">
+            <div className="container mx-auto p-6 max-w-7xl">
+              {children}
+            </div>
+          </main>
+        </div>
+
+        {/* Mobile sidebar overlay (future enhancement) */}
+        {/* Could add a mobile drawer/overlay sidebar here if needed */}
+      </div>
+    </DeveloperGuard>
+  );
+}
+
+export default getTemplateOrDefault('app/devtools/layout.tsx', DevLayout)