feat(portal): migrate to @trycompai/ui-shadcn and update UI components

Author: Marfuen

apps/portal/agents.md

@@ -1,7 +1,14 @@
 # Portal AGENTS.md
 
-## Component usage
+## UI rules (hard)
 
-- Only use components from the `packages/ui-v2` package.
-- Import components from `@trycompai/ui-v2` (or the appropriate package name).
-- Do not use components from `packages/ui` or other UI packages.
+- **Only use existing components from `@trycompai/ui-shadcn`.**
+- **Do not add new UI components** (no new primitives/wrappers in the Portal app).
+- **Do not add new components to `packages/ui-shadcn`** as part of Portal work.
+- If a needed UI component doesn't exist in `@trycompai/ui-shadcn`, **stop and ask** instead of building an ad-hoc replacement.
+
+## Forbidden UI packages
+
+- `@comp/ui`
+- `@trycompai/ui`
+- `@trycompai/ui-v2`

apps/portal/next.config.ts

@@ -4,11 +4,7 @@ import './src/env.mjs';
 const isStandalone = process.env.NEXT_OUTPUT_STANDALONE === 'true';
 
 const config = {
-  transpilePackages: ['@trycompai/db', '@trycompai/ui-v2'],
-  serverExternalPackages: ['@ark-ui/react', '@zag-js/anatomy'],
-  experimental: {
-    optimizePackageImports: ['@chakra-ui/react'],
-  },
+  transpilePackages: ['@trycompai/db', '@trycompai/ui-shadcn'],
   images: {
     remotePatterns: [
       {

apps/portal/package.json

@@ -13,7 +13,7 @@
     "@trycompai/db": "1.3.19",
     "@trycompai/email": "workspace:*",
     "@trycompai/kv": "workspace:*",
-    "@trycompai/ui-v2": "workspace:*",
+    "@trycompai/ui-shadcn": "workspace:*",
     "@types/jszip": "^3.4.1",
     "@upstash/ratelimit": "^2.0.5",
     "archiver": "^7.0.1",

apps/portal/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

apps/portal/src/app/(app)/(home)/[orgId]/components/EmployeeTasksList.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { trainingVideos } from '@/lib/data/training-videos';
-import { Accordion, Card, Progress, Text, VStack } from '@trycompai/ui-v2';
-import { useState } from 'react';
+import { Card, CardContent, CardHeader } from '@trycompai/ui-shadcn';
 import type { EmployeePortalDashboard } from '../types/employee-portal';
 import { DeviceAgentAccordionItem } from './tasks/DeviceAgentAccordionItem';
 import { GeneralTrainingAccordionItem } from './tasks/GeneralTrainingAccordionItem';
@@ -23,8 +22,6 @@ export const EmployeeTasksList = ({
   fleetPolicies,
   host,
 }: EmployeeTasksListProps) => {
-  const [accordionValue, setAccordionValue] = useState<string[]>([]);
-
   // Check completion status
   const hasAcceptedPolicies =
     policies.length === 0 || policies.every((p) => p.signedBy.includes(member.id));
@@ -56,41 +53,39 @@ export const EmployeeTasksList = ({
   const progressPercent = (completedCount / totalCount) * 100;
 
   return (
-    <VStack align="stretch" gap="4">
-      <Card.Root>
-        <Card.Header>
-          <Card.Title>Overview</Card.Title>
-          <Card.Description>
-            Please complete the following tasks to stay compliant and secure.
-          </Card.Description>
-        </Card.Header>
+    <div className="flex flex-col gap-4">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-1">
+            <h2 className="text-base font-semibold">Overview</h2>
+            <p className="text-sm text-muted-foreground">
+              Please complete the following tasks to stay compliant and secure.
+            </p>
+          </div>
+        </CardHeader>
 
-        <Card.Body>
-          <VStack align="stretch" gap="4">
-            <VStack align="stretch" gap="2">
-              <Text fontSize="sm" color="fg.muted">
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <p className="text-sm text-muted-foreground">
                 {completedCount} of {totalCount} tasks completed
-              </Text>
-              <Progress.Root value={progressPercent} colorPalette="primary">
-                <Progress.Track>
-                  <Progress.Range />
-                </Progress.Track>
-              </Progress.Root>
-            </VStack>
+              </p>
+              <div className="h-2 w-full rounded-full bg-muted">
+                <div
+                  className="h-2 rounded-full bg-primary transition-[width]"
+                  style={{ width: `${progressPercent}%` }}
+                />
+              </div>
+            </div>
 
-            <Accordion.Root
-              multiple={false}
-              collapsible
-              value={accordionValue}
-              onValueChange={({ value }) => setAccordionValue(value)}
-            >
+            <div className="divide-y divide-border rounded-md border border-border">
               <PoliciesAccordionItem policies={policies} member={member} />
               <DeviceAgentAccordionItem member={member} host={host} fleetPolicies={fleetPolicies} />
               <GeneralTrainingAccordionItem trainingVideoCompletions={trainingVideoCompletions} />
-            </Accordion.Root>
-          </VStack>
-        </Card.Body>
-      </Card.Root>
-    </VStack>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/AdvancedEditor.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Editor, type JSONContent } from '@comp/ui/editor';
+import type { JSONContent } from '@tiptap/react';
 
 interface AdvancedEditorProps {
   initialContent?: JSONContent | JSONContent[];
@@ -9,19 +9,43 @@ interface AdvancedEditorProps {
   saveDebounceMs?: number;
 }
 
+const getPlainText = (node: JSONContent): string => {
+  if (!node) return '';
+
+  if (node.type === 'text') {
+    return node.text ?? '';
+  }
+
+  if (Array.isArray(node.content)) {
+    return node.content.map((child) => getPlainText(child)).join('');
+  }
+
+  return '';
+};
+
 const AdvancedEditor = ({ initialContent }: AdvancedEditorProps) => {
   if (!initialContent) return null;
 
+  const doc: JSONContent = Array.isArray(initialContent)
+    ? { type: 'doc', content: initialContent }
+    : initialContent;
+
+  const blocks = Array.isArray(doc.content) ? doc.content : [];
+
   return (
-    <Editor
-      initialContent={initialContent}
-      readOnly={true}
-      showSaveStatus={false}
-      showWordCount={false}
-      showToolbar={false}
-      minHeight="500px"
-      className="max-w-screen-lg mx-auto sm:mb-[calc(20vh)]"
-    />
+    <div className="mx-auto max-w-screen-lg sm:mb-[calc(20vh)]">
+      <div className="space-y-3 text-sm leading-6">
+        {blocks.map((block, index) => {
+          const text = getPlainText(block).trim();
+          if (!text) return null;
+          return (
+            <p key={index} className="whitespace-pre-wrap">
+              {text}
+            </p>
+          );
+        })}
+      </div>
+    </div>
   );
 };
 

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/PolicyCard.tsx

@@ -1,16 +1,8 @@
 'use client';
 
-import { Button } from '@comp/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@comp/ui/card';
 import type { Member, Policy } from '@db';
 import type { JSONContent } from '@tiptap/react';
+import { Button, Card, CardContent, CardFooter, CardHeader } from '@trycompai/ui-shadcn';
 import { ArrowRight, Check } from 'lucide-react';
 import { useState } from 'react';
 import { PolicyEditor } from './PolicyEditor';
@@ -36,60 +28,68 @@ export function PolicyCard({ policy, onNext, onComplete, member, isLastPolicy }:
   const isPdfPolicy = policy.displayFormat === 'PDF';
 
   return (
-    <Card className="relative flex max-h-[calc(100vh-450px)] w-full flex-col shadow-md">
-      {isAccepted && (
-        <div className="bg-background/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-xs">
-          <div className="space-y-4 text-center">
-            <Check className="text-primary mx-auto h-12 w-12" />
-            <h3 className="text-xl font-semibold">Policy Accepted</h3>
-            <p className="text-muted-foreground">You have accepted this policy</p>
-            <div className="flex justify-center gap-2">
-              <Button variant="outline" onClick={() => setIsAccepted(false)} className="gap-2">
-                View Again
-              </Button>
-              {!isLastPolicy && (
-                <Button onClick={onNext} className="gap-2">
-                  Next Policy
-                  <ArrowRight className="h-4 w-4" />
+    <div className="relative max-h-[calc(100vh-450px)] w-full">
+      <Card>
+        {isAccepted && (
+          <div className="bg-background/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-xs">
+            <div className="space-y-4 text-center">
+              <Check className="text-primary mx-auto h-12 w-12" />
+              <h3 className="text-xl font-semibold">Policy Accepted</h3>
+              <p className="text-muted-foreground">You have accepted this policy</p>
+              <div className="flex justify-center gap-2">
+                <Button variant="outline" onClick={() => setIsAccepted(false)}>
+                  View Again
                 </Button>
-              )}
+                {!isLastPolicy && (
+                  <Button onClick={onNext}>
+                    <span className="inline-flex items-center gap-2">
+                      Next Policy
+                      <ArrowRight className="h-4 w-4" />
+                    </span>
+                  </Button>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      )}
-      <CardHeader>
-        <CardTitle className="text-2xl">{policy.name}</CardTitle>
-        <CardDescription className="text-muted-foreground">{policy.description}</CardDescription>
-      </CardHeader>
-      <CardContent className="w-full flex-1 overflow-y-auto">
-        <div className="w-full border-t pt-6">
-          <div className="max-w-none">
-            {isPdfPolicy ? (
-              <PortalPdfViewer policyId={policy.id} s3Key={policy.pdfUrl} />
-            ) : (
-              <PolicyEditor content={policy.content as JSONContent[]} />
-            )}
+        )}
+        <CardHeader>
+          <div className="flex flex-col gap-1">
+            <h2 className="text-xl font-semibold">{policy.name}</h2>
+            {policy.description ? (
+              <p className="text-sm text-muted-foreground">{policy.description}</p>
+            ) : null}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="w-full border-t pt-6">
+            <div className="max-w-none">
+              {isPdfPolicy ? (
+                <PortalPdfViewer policyId={policy.id} s3Key={policy.pdfUrl} />
+              ) : (
+                <PolicyEditor content={policy.content as JSONContent[]} />
+              )}
+            </div>
+            <div className="mt-4 text-sm text-muted-foreground">
+              <span>Status: {policy.status}</span>
+              {policy.updatedAt ? (
+                <span> (Last updated: {new Date(policy.updatedAt).toLocaleDateString()})</span>
+              ) : null}
+            </div>
           </div>
-          <p className="text-muted-foreground mt-4 text-sm">
-            Status: {policy.status}{' '}
+        </CardContent>
+        <CardFooter>
+          <div className="flex items-center gap-2">
             {policy.updatedAt && (
-              <span>(Last updated: {new Date(policy.updatedAt).toLocaleDateString()})</span>
+              <p className="text-muted-foreground text-sm">
+                Last updated: {new Date(policy.updatedAt).toLocaleDateString()}
+              </p>
             )}
-          </p>
-        </div>
-      </CardContent>
-      <CardFooter className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          {policy.updatedAt && (
-            <p className="text-muted-foreground text-sm">
-              Last updated: {new Date(policy.updatedAt).toLocaleDateString()}
-            </p>
-          )}
-        </div>
-        <div className="flex gap-2">
-          <Button onClick={handleAccept}>Accept Policy</Button>
-        </div>
-      </CardFooter>
-    </Card>
+          </div>
+          <div className="flex gap-2">
+            <Button onClick={handleAccept}>Accept Policy</Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
   );
 }

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/PolicyCarousel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@comp/ui/button';
 import type { Member, Policy } from '@db';
+import { Button } from '@trycompai/ui-shadcn';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useAction } from 'next-safe-action/hooks';
 import { useEffect, useRef, useState } from 'react';

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/PolicyContainer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@comp/ui/button';
 import type { Member, Policy } from '@db';
+import { Button } from '@trycompai/ui-shadcn';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { PolicyCarousel } from './PolicyCarousel';
@@ -31,9 +31,11 @@ export function PolicyContainer({ policies, member }: PolicyContainerProps) {
     return (
       <div className="space-y-4">
         <div className="flex items-center gap-4">
-          <Button variant="outline" size="sm" className="gap-2" onClick={handleBackToGrid}>
-            <ArrowLeft className="h-4 w-4" />
-            Back to Policies
+          <Button variant="outline" size="sm" onClick={handleBackToGrid}>
+            <span className="inline-flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Policies
+            </span>
           </Button>
           <p className="text-muted-foreground text-sm">
             Policy {selectedPolicyIndex + 1} of {policies.length}