ui-syncup 0.3.13 → 0.4.0-beta.1

package/src/features/setup/types/index.ts

@@ -0,0 +1,69 @@
+/**
+ * Setup Feature Domain Types
+ * @description Types for the instance setup wizard
+ */
+
+export type ServiceStatus = 'connected' | 'not_configured' | 'error';
+
+export interface ServiceHealthItem {
+  status: ServiceStatus;
+  message: string;
+  degradedBehavior?: string;
+}
+
+export interface ServiceHealth {
+  database: ServiceHealthItem;
+  email: ServiceHealthItem;
+  storage: ServiceHealthItem;
+  redis: ServiceHealthItem;
+}
+
+export type DefaultMemberRole = 'WORKSPACE_VIEWER' | 'WORKSPACE_MEMBER' | 'WORKSPACE_EDITOR';
+
+export interface InstanceStatus {
+  isSetupComplete: boolean;
+  instanceName: string | null;
+  adminEmail: string | null;
+  defaultWorkspaceId: string | null;
+  defaultMemberRole: DefaultMemberRole;
+  isMultiWorkspaceMode: boolean;
+  skipEmailVerification: boolean;
+}
+
+export type SetupWizardStep =
+  | 'health-check'
+  | 'admin-account'
+  | 'instance-config'
+  | 'mail-config'
+  | 'first-workspace'
+  | 'sample-data'
+  | 'complete';
+
+export interface SetupWizardState {
+  currentStep: SetupWizardStep;
+  completedSteps: SetupWizardStep[];
+  adminData: { email: string; name: string } | null;
+  instanceData: { name: string } | null;
+  workspaceData: { id: string; name: string; slug: string } | null;
+  includeSampleData: boolean;
+}
+
+export interface AdminAccountData {
+  email: string;
+  password: string;
+  confirmPassword: string;
+  displayName: string;
+}
+
+export interface InstanceConfigData {
+  instanceName: string;
+}
+
+export interface FirstWorkspaceData {
+  workspaceName: string;
+}
+
+export interface SetupCompleteData {
+  workspaceId: string;
+  createSampleData: boolean;
+}

package/src/features/setup/utils/index.ts

@@ -0,0 +1,78 @@
+/**
+ * Setup Feature Utilities
+ * @description Helper functions for the setup wizard
+ */
+
+import type { SetupWizardStep } from '../types';
+
+/**
+ * Ordered list of setup wizard steps
+ */
+export const SETUP_WIZARD_STEPS: SetupWizardStep[] = [
+  'health-check',
+  'admin-account',
+  'instance-config',
+  'mail-config',
+  'first-workspace',
+  'sample-data',
+  'complete',
+];
+
+/**
+ * Get the next step in the wizard
+ */
+export function getNextStep(currentStep: SetupWizardStep): SetupWizardStep | null {
+  const currentIndex = SETUP_WIZARD_STEPS.indexOf(currentStep);
+  if (currentIndex === -1 || currentIndex >= SETUP_WIZARD_STEPS.length - 1) {
+    return null;
+  }
+  return SETUP_WIZARD_STEPS[currentIndex + 1];
+}
+
+/**
+ * Get the previous step in the wizard
+ */
+export function getPreviousStep(currentStep: SetupWizardStep): SetupWizardStep | null {
+  const currentIndex = SETUP_WIZARD_STEPS.indexOf(currentStep);
+  if (currentIndex <= 0) {
+    return null;
+  }
+  return SETUP_WIZARD_STEPS[currentIndex - 1];
+}
+
+/**
+ * Get the step number (1-indexed) for display
+ */
+export function getStepNumber(step: SetupWizardStep): number {
+  return SETUP_WIZARD_STEPS.indexOf(step) + 1;
+}
+
+/**
+ * Get total number of steps (excluding 'complete')
+ */
+export function getTotalSteps(): number {
+  return SETUP_WIZARD_STEPS.length - 1; // Exclude 'complete'
+}
+
+/**
+ * Check if a step is completed
+ */
+export function isStepCompleted(
+  step: SetupWizardStep,
+  completedSteps: SetupWizardStep[]
+): boolean {
+  return completedSteps.includes(step);
+}
+
+/**
+ * Generate a URL-safe slug from a workspace name
+ */
+export function generateSlug(name: string): string {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .substring(0, 50);
+}

package/src/features/team-settings/components/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Settings Feature Components
+ * Barrel export for all settings-related UI components
+ */
+
+// Core settings components
+export { default as TeamSettingsGeneral } from "./team-settings-general";
+export { SettingsSection } from "./settings-section";
+export { SettingsNavigation } from "./settings-navigation";
+
+// Team components
+export { TeamInformationForm } from "./team-information-form";
+export type { TeamInformationFormProps } from "./team-information-form";
+export { TeamDangerZone } from "./team-danger-zone";
+
+// Permission & access components
+export { PermissionGuard } from "./permission-guard";
+export { TeamPermissionGuard } from "./team-permission-guard";
+export { UnauthorizedAccess } from "./unauthorized-access";
+
+// Context providers
+export { SettingsContextProvider } from "./settings-context-provider";
+
+// Error handling
+export { SettingsErrorBoundary } from "./settings-error-boundary";
+
+// Loading states
+export {
+  LoadingSpinner,
+  LoadingButton,
+  SettingsPageSkeleton,
+  TeamSettingsLoadingSkeleton,
+  TeamMembersLoadingSkeleton,
+  PermissionLoadingSkeleton,
+  FormFieldSkeleton,
+  TableLoadingSkeleton,
+  ContentLoading,
+  InlineLoading,
+} from "./loading-states";

package/src/features/team-settings/components/loading-states.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import React from "react";
+import { Loader2, Settings, Users, Shield } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+// Generic loading spinner
+export function LoadingSpinner({ 
+  size = "default", 
+  className = "" 
+}: { 
+  size?: "sm" | "default" | "lg"; 
+  className?: string; 
+}) {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    default: "h-6 w-6",
+    lg: "h-8 w-8"
+  };
+
+  return (
+    <Loader2 className={`animate-spin ${sizeClasses[size]} ${className}`} />
+  );
+}
+
+// Loading button with spinner
+export function LoadingButton({
+  children,
+  isLoading,
+  disabled,
+  variant = "default",
+  size = "default",
+  className = "",
+  ...props
+}: {
+  children: React.ReactNode;
+  isLoading: boolean;
+  disabled?: boolean;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      disabled={disabled || isLoading}
+      className={`${isLoading ? 'cursor-not-allowed' : ''} ${className}`}
+      {...props}
+    >
+      {isLoading && <LoadingSpinner size="sm" className="mr-2" />}
+      {children}
+    </Button>
+  );
+}
+
+// Settings page loading skeleton
+export function SettingsPageSkeleton({ 
+  title = "Loading Settings...",
+  description = "Please wait while we load your settings."
+}: {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <Skeleton className="h-8 w-64 mb-2" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-48 mb-2" />
+          <Skeleton className="h-4 w-80" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+          <div className="flex justify-end space-x-2 pt-4">
+            <Skeleton className="h-10 w-20" />
+            <Skeleton className="h-10 w-28" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Team settings loading skeleton
+export function TeamSettingsLoadingSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center space-x-3">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div>
+          <Skeleton className="h-6 w-48 mb-1" />
+          <Skeleton className="h-4 w-32" />
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings className="h-5 w-5" />
+            Loading Team Settings...
+          </CardTitle>
+          <CardDescription>
+            Please wait while we load your team settings.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <div className="flex items-center space-x-4">
+                <Skeleton className="h-16 w-16 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-10 w-32" />
+                  <Skeleton className="h-4 w-48" />
+                </div>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Team members loading skeleton
+export function TeamMembersLoadingSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <Skeleton className="h-8 w-48 mb-2" />
+          <Skeleton className="h-4 w-64" />
+        </div>
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Loading Team Members...
+          </CardTitle>
+          <CardDescription>
+            Please wait while we load your team members.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+                <div className="flex items-center space-x-3">
+                  <Skeleton className="h-10 w-10 rounded-full" />
+                  <div>
+                    <Skeleton className="h-4 w-32 mb-1" />
+                    <Skeleton className="h-3 w-48" />
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Skeleton className="h-6 w-16" />
+                  <Skeleton className="h-8 w-8" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Permission loading skeleton
+export function PermissionLoadingSkeleton({
+  title = "Checking Permissions...",
+  description = "Please wait while we verify your access."
+}: {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Shield className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>
+          {description}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-center py-8">
+          <LoadingSpinner size="lg" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Form field loading skeleton
+export function FormFieldSkeleton({ 
+  label = true, 
+  input = true, 
+  description = false 
+}: {
+  label?: boolean;
+  input?: boolean;
+  description?: boolean;
+}) {
+  return (
+    <div className="space-y-2">
+      {label && <Skeleton className="h-4 w-24" />}
+      {input && <Skeleton className="h-10 w-full" />}
+      {description && <Skeleton className="h-3 w-64" />}
+    </div>
+  );
+}
+
+// Table loading skeleton
+export function TableLoadingSkeleton({ 
+  rows = 3, 
+  columns = 4 
+}: { 
+  rows?: number; 
+  columns?: number; 
+}) {
+  return (
+    <div className="rounded-md border">
+      <div className="border-b p-4">
+        <div className="flex space-x-4">
+          {Array.from({ length: columns }).map((_, i) => (
+            <Skeleton key={i} className="h-4 w-24" />
+          ))}
+        </div>
+      </div>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <div key={rowIndex} className="border-b p-4 last:border-b-0">
+          <div className="flex space-x-4">
+            {Array.from({ length: columns }).map((_, colIndex) => (
+              <Skeleton key={colIndex} className="h-4 w-24" />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Generic content loading
+export function ContentLoading({ 
+  message = "Loading...",
+  size = "default"
+}: {
+  message?: string;
+  size?: "sm" | "default" | "lg";
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 space-y-3">
+      <LoadingSpinner size={size} />
+      <p className="text-sm text-muted-foreground">{message}</p>
+    </div>
+  );
+}
+
+// Inline loading for small components
+export function InlineLoading({ 
+  message = "Loading...",
+  className = ""
+}: {
+  message?: string;
+  className?: string;
+}) {
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      <LoadingSpinner size="sm" />
+      <span className="text-sm text-muted-foreground">{message}</span>
+    </div>
+  );
+}

package/src/features/team-settings/components/permission-guard.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Permission Guard Component (Mockup)
+ * For UI mockup purposes - always allows access
+ * TODO: Implement real permission checking when backend is ready
+ */
+
+interface PermissionGuardProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  permission?: string; // Simplified for mockup
+  teamId?: string;
+}
+
+export function PermissionGuard({
+  children,
+}: PermissionGuardProps) {
+  // For mockup: always grant permission
+  return <>{children}</>;
+}

package/src/features/team-settings/components/settings-card.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface SettingsCardProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsCard({ title, description, children, className }: SettingsCardProps) {
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/src/features/team-settings/components/settings-context-provider.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
+import { usePathname } from "next/navigation";
+
+interface SettingsContextType {
+  isTeamSettingsPath: boolean;
+  isGlobalSettingsPath: boolean;
+  currentPathTeamId: string | null;
+}
+
+const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
+
+interface SettingsContextProviderProps {
+  children: ReactNode;
+}
+
+export function SettingsContextProvider({ children }: SettingsContextProviderProps) {
+  const pathname = usePathname();
+
+  // Check if current path is a team settings path
+  const isTeamSettingsPath = pathname.startsWith('/team/') && pathname.includes('/setting');
+
+  // Check if current path is global settings path
+  const isGlobalSettingsPath = pathname.startsWith('/setting') && !pathname.startsWith('/setting/team');
+
+  // Extract team ID from current path if it's a team settings path
+  const currentPathTeamId = isTeamSettingsPath
+    ? pathname.split('/')[2] // /team/[teamId]/setting/...
+    : null;
+
+  const contextValue: SettingsContextType = {
+    isTeamSettingsPath,
+    isGlobalSettingsPath,
+    currentPathTeamId
+  };
+
+  return (
+    <SettingsContext.Provider value={contextValue}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettingsContextProvider() {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error("useSettingsContextProvider must be used within SettingsContextProvider");
+  }
+  return context;
+}