website refactor

apps/website/components/shared/state/PageWrapper.tsx

@@ -1,8 +1,7 @@
-import { EmptyState } from '@/components/shared/state/EmptyState';
-import { ErrorDisplay } from '@/components/shared/state/ErrorDisplay';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { ErrorDisplay } from '@/ui/ErrorDisplay';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { Box } from '@/ui/primitives/Box';
 import { Inbox, List, LucideIcon } from 'lucide-react';
 import React, { ReactNode } from 'react';
 
@@ -61,27 +60,6 @@ export interface PageWrapperProps<TData> {
  * - Empty states (with icon, title, description, and action)
  * - Success state (renders Template component with data)
  * - Flexible children support for custom content
- * 
- * Usage Example:
- * ```typescript
- * <PageWrapper
- *   data={data}
- *   isLoading={isLoading}
- *   error={error}
- *   retry={retry}
- *   Template={MyTemplateComponent}
- *   loading={{ variant: 'skeleton', message: 'Loading...' }}
- *   error={{ variant: 'full-screen' }}
- *   empty={{
- *     icon: Trophy,
- *     title: 'No data found',
- *     description: 'Try refreshing the page',
- *     action: { label: 'Refresh', onClick: retry }
- *   }}
- * >
- *   <AdditionalContent />
- * </PageWrapper>
- * ```
  */
 export function PageWrapper<TData>({
   data,
@@ -112,14 +90,14 @@ export function PageWrapper<TData>({
 
     // Default to skeleton
     return (
-      <Box>
+      <React.Fragment>
         <LoadingWrapper
           variant="skeleton"
           message={loadingMessage}
           skeletonCount={3}
         />
         {children}
-      </Box>
+      </React.Fragment>
     );
   }
 
@@ -129,14 +107,14 @@ export function PageWrapper<TData>({
 
     if (errorVariant === 'card') {
       return (
-        <Box>
+        <React.Fragment>
           <ErrorDisplay
             error={error as ApiError}
             onRetry={retry}
             variant="card"
           />
           {children}
-        </Box>
+        </React.Fragment>
       );
     }
 
@@ -157,7 +135,7 @@ export function PageWrapper<TData>({
       const hasAction = empty.action && retry;
 
       return (
-        <Box>
+        <React.Fragment>
           <EmptyState
             icon={Icon || Inbox}
             title={empty.title || 'No data available'}
@@ -169,24 +147,24 @@ export function PageWrapper<TData>({
             variant="default"
           />
           {children}
-        </Box>
+        </React.Fragment>
       );
     }
 
     // If no empty config provided but data is empty, show nothing
     return (
-      <Box>
+      <React.Fragment>
         {children}
-      </Box>
+      </React.Fragment>
     );
   }
 
   // 4. Success State - Render Template with data
   return (
-    <Box>
+    <React.Fragment>
       <Template data={data} />
       {children}
-    </Box>
+    </React.Fragment>
   );
 }
 
@@ -262,4 +240,4 @@ export function DetailPageWrapper<TData>({
       {children}
     </PageWrapper>
   );
-}
+}