Skip to content

Commit 32e6b10

Browse files
MarfuenMarfuen
authored
Merge pull request #828 from trycompai/chore/upgrade-tailwind-to-v4
[dev] [Marfuen] chore/upgrade-tailwind-to-v4
2 parents 7390cfe + b32ca33 commit 32e6b10

152 files changed

Lines changed: 7279 additions & 7283 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.cursor/rules/react-code.mdc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ When writing React code follow these standards:
88
- Always export a named component
99
- Always name components in PascalCase i.e (MyComponent)
1010
- Always name files that export components in PascalCase
11-
- Always round corners to rounded-sm
11+
- Always round corners to rounded-xs
1212
- Always try to keep components small and modular
1313
- Always use sonner instead of toast.

‎apps/app/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@prisma/instrumentation": "6.6.0",
4343
"@react-email/components": "^0.0.41",
4444
"@react-email/render": "^1.1.2",
45+
"@tailwindcss/postcss": "^4.1.8",
4546
"@tanstack/react-query": "^5.74.4",
4647
"@tanstack/react-table": "^8.21.3",
4748
"@tiptap/extension-table": "^2.11.7",
@@ -69,6 +70,7 @@
6970
"geist": "^1.3.1",
7071
"highlight.js": "^11.11.1",
7172
"immer": "^10.1.1",
73+
"install": "^0.13.0",
7274
"languine": "^3.1.4",
7375
"marked": "^15.0.11",
7476
"motion": "^12.9.2",
@@ -111,8 +113,8 @@
111113
"@types/node": "^22.15.2",
112114
"@types/react": "19.1.2",
113115
"@types/react-dom": "19.1.1",
114-
"postcss": "^8.5.3",
115-
"tailwindcss": "^3.4.17",
116+
"postcss": "^8.5.4",
117+
"tailwindcss": "^4.1.8",
116118
"typescript": "^5.8.3"
117119
},
118120
"resolutions": {

‎apps/app/postcss.config.mjs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
import uiConfig from "@comp/ui/postcss";
1+
const config = {
2+
plugins: {
3+
"@tailwindcss/postcss": {},
4+
},
5+
};
26

3-
export default uiConfig;
7+
export default config;

‎apps/app/src/app/(app)/(dashboard)/[orgId]/controls/[controlId]/components/SingleControlSkeleton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ export const SingleControlSkeleton = () => {
99
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
1010
<Card>
1111
<CardHeader>
12-
<div className="h-6 w-3/4 bg-muted animate-pulse rounded" />
12+
<div className="h-6 w-3/4 bg-muted animate-pulse rounded-sm" />
1313
</CardHeader>
1414
<CardContent>
15-
<div className="h-16 bg-muted animate-pulse rounded" />
15+
<div className="h-16 bg-muted animate-pulse rounded-sm" />
1616
</CardContent>
1717
</Card>
1818
<Card>
1919
<CardHeader>
2020
<CardTitle>Domain</CardTitle>
2121
</CardHeader>
2222
<CardContent>
23-
<div className="h-4 w-1/2 bg-muted animate-pulse rounded" />
23+
<div className="h-4 w-1/2 bg-muted animate-pulse rounded-sm" />
2424
</CardContent>
2525
</Card>
2626
</div>

‎apps/app/src/app/(app)/(dashboard)/[orgId]/frameworks/components/AddFrameworkModal.tsx‎

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -109,38 +109,26 @@ export function AddFrameworkModal({
109109
<fieldset className="flex flex-col gap-2 select-none">
110110
<div className="flex flex-col gap-2 overflow-y-auto max-h-[300px]">
111111
{availableFrameworks
112-
.filter(
113-
(framework) =>
114-
framework.visible,
115-
)
112+
.filter((framework) => framework.visible)
116113
.map((framework) => {
117-
const frameworkId =
118-
framework.id;
114+
const frameworkId = framework.id;
119115
return (
120116
<label
121-
key={
122-
frameworkId
123-
}
117+
key={frameworkId}
124118
htmlFor={`add-framework-${frameworkId}`}
125119
className={cn(
126-
"relative flex flex-col p-4 border rounded-sm cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
127-
field.value.includes(
128-
frameworkId,
129-
) &&
120+
"relative flex flex-col p-4 border rounded-xs cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
121+
field.value.includes(frameworkId) &&
130122
"border-primary bg-primary/5",
131123
)}
132124
>
133125
<div className="flex items-start justify-between">
134126
<div>
135127
<h3 className="font-semibold">
136-
{
137-
framework.name
138-
}
128+
{framework.name}
139129
</h3>
140130
<p className="text-sm text-muted-foreground mt-1">
141-
{
142-
framework.description
143-
}
131+
{framework.description}
144132
</p>
145133
<p className="text-xs text-muted-foreground/75 mt-2">
146134
{`${"Version"}: ${framework.version}`}
@@ -153,25 +141,13 @@ export function AddFrameworkModal({
153141
frameworkId,
154142
)}
155143
className="mt-1"
156-
onCheckedChange={(
157-
checked,
158-
) => {
159-
const newValue =
160-
checked
161-
? [
162-
...field.value,
163-
frameworkId,
164-
]
165-
: field.value.filter(
166-
(
167-
id,
168-
) =>
169-
id !==
170-
frameworkId,
171-
);
172-
field.onChange(
173-
newValue,
174-
);
144+
onCheckedChange={(checked) => {
145+
const newValue = checked
146+
? [...field.value, frameworkId]
147+
: field.value.filter(
148+
(id) => id !== frameworkId,
149+
);
150+
field.onChange(newValue);
175151
}}
176152
/>
177153
</div>
@@ -200,8 +176,7 @@ export function AddFrameworkModal({
200176
type="submit"
201177
disabled={
202178
isExecuting ||
203-
form.getValues("frameworkIds")
204-
.length === 0 ||
179+
form.getValues("frameworkIds").length === 0 ||
205180
availableFrameworks.length === 0
206181
}
207182
suppressHydrationWarning
@@ -237,9 +212,7 @@ export function AddFrameworkModal({
237212
{isExecuting && (
238213
<div className="flex items-center justify-center p-8">
239214
<Loader2 className="h-12 w-12 animate-spin text-primary" />
240-
<p className="ml-4 text-muted-foreground">
241-
{"Adding frameworks..."}
242-
</p>
215+
<p className="ml-4 text-muted-foreground">{"Adding frameworks..."}</p>
243216
</div>
244217
)}
245218
</DialogContent>

‎apps/app/src/app/(app)/(dashboard)/[orgId]/frameworks/components/FrameworkCard.tsx‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { Task, Control } from "@comp/db/types";
3+
import type { Task, Control } from "@comp/db/types";
44
import { Badge } from "@comp/ui/badge";
55
import {
66
Card,
@@ -14,7 +14,7 @@ import { cn } from "@comp/ui/cn";
1414
import { ClipboardCheck, ClipboardList, Clock } from "lucide-react";
1515
import Link from "next/link";
1616
import { useParams } from "next/navigation";
17-
import { FrameworkInstanceWithControls } from "../types";
17+
import type { FrameworkInstanceWithControls } from "../types";
1818

1919
interface FrameworkCardProps {
2020
frameworkInstance: FrameworkInstanceWithControls;
@@ -44,17 +44,20 @@ export function FrameworkCard({
4444
if (score >= 95)
4545
return {
4646
label: "Compliant",
47-
color: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
47+
color:
48+
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
4849
};
4950
if (score >= 80)
5051
return {
5152
label: "Nearly Compliant",
52-
color: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
53+
color:
54+
"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
5355
};
5456
if (score >= 50)
5557
return {
5658
label: "In Progress",
57-
color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
59+
color:
60+
"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
5861
};
5962
return {
6063
label: "Needs Attention",
@@ -116,13 +119,10 @@ export function FrameworkCard({
116119
className="block"
117120
>
118121
<Card className="select-none hover:bg-muted/40 transition-colors duration-200 overflow-hidden h-full flex flex-col">
119-
<CardHeader className="flex-shrink-0">
122+
<CardHeader className="shrink-0">
120123
<CardTitle className="flex items-center">
121124
{frameworkDetails.name}
122-
<Badge
123-
variant="outline"
124-
className="ml-2 text-xs font-normal"
125-
>
125+
<Badge variant="outline" className="ml-2 text-xs font-normal">
126126
{frameworkDetails.version}
127127
</Badge>
128128
</CardTitle>
@@ -131,12 +131,7 @@ export function FrameworkCard({
131131
<p className="text-sm text-muted-foreground line-clamp-2">
132132
{frameworkDetails.description}
133133
</p>
134-
<Badge
135-
className={cn(
136-
"hidden md:block",
137-
statusBadge.color,
138-
)}
139-
>
134+
<Badge className={cn("hidden md:block", statusBadge.color)}>
140135
{statusBadge.label}
141136
</Badge>
142137
</div>
@@ -146,9 +141,7 @@ export function FrameworkCard({
146141
<div className="flex flex-col gap-3">
147142
<div className="space-y-1.5">
148143
<div className="flex items-center justify-between text-sm">
149-
<span className="text-muted-foreground">
150-
{"Status"}
151-
</span>
144+
<span className="text-muted-foreground">{"Status"}</span>
152145
<span
153146
className={cn(
154147
"font-medium",
@@ -162,9 +155,7 @@ export function FrameworkCard({
162155
<div
163156
className={cn(
164157
"h-full transition-all",
165-
getComplianceProgressColor(
166-
complianceScore,
167-
),
158+
getComplianceProgressColor(complianceScore),
168159
)}
169160
style={{ width: `${complianceScore}%` }}
170161
/>
@@ -176,9 +167,7 @@ export function FrameworkCard({
176167
<div className="flex flex-col items-start gap-1 border-r pr-3">
177168
<div className="flex items-center text-muted-foreground">
178169
<ClipboardList className="h-3.5 w-3.5 mr-1" />
179-
<span className="text-xs">
180-
{"Controls"}
181-
</span>
170+
<span className="text-xs">{"Controls"}</span>
182171
</div>
183172
<p className="font-medium text-sm">
184173
{controlsCount} {"Tasks"}
@@ -187,9 +176,7 @@ export function FrameworkCard({
187176
<div className="flex flex-col items-start gap-1 border-r pr-3">
188177
<div className="flex items-center text-muted-foreground">
189178
<ClipboardCheck className="h-3.5 w-3.5 mr-1" />
190-
<span className="text-xs">
191-
{"Completed"}
192-
</span>
179+
<span className="text-xs">{"Completed"}</span>
193180
</div>
194181
<p className="font-medium text-sm">
195182
{compliantControlsCount} / {controlsCount}
@@ -198,17 +185,15 @@ export function FrameworkCard({
198185
<div className="flex flex-col items-start gap-1">
199186
<div className="flex items-center text-muted-foreground">
200187
<Clock className="h-3.5 w-3.5 mr-1" />
201-
<span className="text-xs">
202-
{"In Progress"}
203-
</span>
188+
<span className="text-xs">{"In Progress"}</span>
204189
</div>
205190
<p className="font-medium text-sm">
206191
{inProgressCount} / {controlsCount}
207192
</p>
208193
</div>
209194
</div>
210195
</CardContent>
211-
<CardFooter className="text-xs text-muted-foreground flex justify-between mt-auto flex-shrink-0">
196+
<CardFooter className="text-xs text-muted-foreground flex justify-between mt-auto shrink-0">
212197
<div className="flex items-center">
213198
<Clock className="h-3.5 w-3.5 mr-1.5" />
214199
{"Last Updated"}: {lastActivityDate}

0 commit comments

Comments
 (0)