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

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

@@ -1,272 +0,0 @@
-'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/templates/app/dashboard/settings/teams/permissions/page.tsx

@@ -1,92 +0,0 @@
-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/templates/app/devtools/blocks/[slug]/page.tsx

@@ -1,39 +0,0 @@
-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/templates/app/devtools/blocks/page.tsx

@@ -1,31 +0,0 @@
-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/templates/app/devtools/config/page.tsx

@@ -1,31 +0,0 @@
-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/templates/app/devtools/features/page.tsx

@@ -1,31 +0,0 @@
-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/templates/app/devtools/flows/page.tsx

@@ -1,31 +0,0 @@
-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/templates/app/devtools/layout.tsx

@@ -1,58 +0,0 @@
-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)