Skip to content

Commit 2da0cd0

Browse files
claudfuenclaudfuen
authored
Merge pull request #862 from trycompai/main
[comp] Production Deploy
2 parents c3b4e6b + b577aa9 commit 2da0cd0

File tree

122 files changed

+1454
-1475
lines changed

Some content is hidden

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

122 files changed

+1454
-1475
lines changed

‎.cursor/rules/design-system.mdc‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
description:
3+
globs: *.tsx
4+
alwaysApply: false
5+
---
6+
7+
Rule Name: design-system
8+
Description:
9+
Design System & Component Guidelines
10+
11+
## Design Philosophy
12+
13+
- **B2B, Modern, Flat, Minimal, Elegant**: All UI should follow a clean, professional aesthetic suitable for business applications
14+
- **Sleek & Minimal**: Avoid visual clutter, use whitespace effectively, keep interfaces clean
15+
- **Dark Mode First**: Always ensure components work seamlessly in both light and dark modes
16+
17+
## Component Usage
18+
19+
- **Adhere to Base Components**: Minimize custom overrides and stick to shadcn/ui base components whenever possible
20+
- **Semantic Color Classes**: Use semantic classes like `text-muted-foreground`, `bg-muted/50` instead of hardcoded colors
21+
- **Dark Mode Support**: Always use dark mode variants like `bg-green-50 dark:bg-green-950/20`, `text-green-600 dark:text-green-400`
22+
23+
## Typography & Sizing
24+
25+
- **Moderate Text Sizes**: Avoid overly large text - prefer `text-base`, `text-sm`, `text-xs` over `text-xl+`
26+
- **Consistent Hierarchy**: Use `font-medium`, `font-semibold` sparingly, prefer `font-normal` with size differentiation
27+
- **Tabular Numbers**: Use `tabular-nums` class for numeric data to ensure proper alignment
28+
29+
## Layout & Spacing
30+
31+
- **Consistent Spacing**: Use standard Tailwind spacing scale (`space-y-4`, `gap-6`, etc.)
32+
- **Card-Based Layouts**: Prefer Card components for content organization
33+
- **Minimal Padding**: Use conservative padding - `p-3`, `p-4` rather than larger values
34+
- **Clean Separators**: Use subtle borders (`border-t`, `border-muted`) instead of heavy dividers
35+
36+
## Color & Visual Elements
37+
38+
- **Status Colors**:
39+
- Green for completed/success states
40+
- Blue for in-progress/info states
41+
- Yellow for warnings
42+
- Red for errors/destructive actions
43+
- **Subtle Indicators**: Use small colored dots (`w-2 h-2 rounded-full`) instead of large icons for status
44+
- **Minimal Shadows**: Prefer `hover:shadow-sm` over heavy shadow effects
45+
- **Progress Bars**: Keep thin (`h-1`, `h-2`) for minimal visual weight
46+
47+
## Interactive Elements
48+
49+
- **Subtle Hover States**: Use gentle transitions (`transition-shadow`, `hover:shadow-sm`)
50+
- **Consistent Button Sizing**: Prefer `size="sm"` for most buttons, `size="icon"` for icon-only
51+
- **Badge Usage**: Keep badges minimal with essential info only (percentages, short status)
52+
53+
## Data Display
54+
55+
- **Shared Design Language**: Ensure related components (cards, overviews, details) use consistent patterns
56+
- **Minimal Stats**: Present data cleanly without excessive decoration
57+
- **Contextual Icons**: Use small, relevant icons (`h-3 w-3`, `h-4 w-4`) sparingly for context
58+
59+
## Anti-Patterns to Avoid
60+
61+
- Large text sizes (`text-2xl+` except for main headings)
62+
- Heavy shadows or borders
63+
- Excessive use of colored backgrounds
64+
- Redundant badges or status indicators
65+
- Complex custom styling overrides
66+
- Non-semantic color usage (hardcoded hex values)
67+
- Cluttered layouts with too many visual elements

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

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22

33
import { DataTable } from "@/components/data-table/data-table";
44
import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
5-
import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
65
import { StatusIndicator } from "@/components/status-indicator";
76
import { useDataTable } from "@/hooks/use-data-table";
87
import { Policy } from "@comp/db/types";
9-
import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
108
import { Input } from "@comp/ui/input";
9+
import { Icons } from "@comp/ui/icons";
1110
import { ColumnDef } from "@tanstack/react-table";
1211
import { useMemo, useState } from "react";
1312

@@ -106,35 +105,23 @@ export function PoliciesTable({
106105
});
107106

108107
return (
109-
<Card>
110-
<CardHeader>
111-
<CardTitle>
112-
{"Linked Policies"} ({filteredPolicies.length})
113-
</CardTitle>
114-
</CardHeader>
115-
<CardContent>
116-
<div className="flex items-center mb-4">
117-
<Input
118-
placeholder={"Search..."}
119-
value={searchTerm}
120-
onChange={(e) => setSearchTerm(e.target.value)}
121-
className="max-w-sm"
122-
/>
123-
{/* <div className="ml-auto">
124-
<DataTableSortList
125-
table={table.table}
126-
align="end"
127-
tableId="policiesTable"
128-
/>
129-
</div> */}
130-
</div>
131-
<DataTable
132-
table={table.table}
133-
rowClickBasePath={`/${orgId}/policies/`}
134-
getRowId={(row) => row.id}
135-
tableId={"policiesTable"}
108+
<div className="space-y-4">
109+
<div className="flex items-center">
110+
<Input
111+
placeholder="Search policies..."
112+
value={searchTerm}
113+
onChange={(e) => setSearchTerm(e.target.value)}
114+
className="max-w-sm"
115+
leftIcon={<Icons.Search size={16} />}
136116
/>
137-
</CardContent>
138-
</Card>
117+
</div>
118+
119+
<DataTable
120+
table={table.table}
121+
rowClickBasePath={`/${orgId}/policies/`}
122+
getRowId={(row) => row.id}
123+
tableId={"policiesTable"}
124+
/>
125+
</div>
139126
);
140127
}

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

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22

33
import { DataTable } from "@/components/data-table/data-table";
44
import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
5-
import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
65
import { useDataTable } from "@/hooks/use-data-table";
76
import type {
87
FrameworkEditorFramework,
98
FrameworkEditorRequirement,
109
FrameworkInstance,
1110
RequirementMap,
1211
} from "@comp/db/types";
13-
import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
1412
import { Input } from "@comp/ui/input";
13+
import { Icons } from "@comp/ui/icons";
1514
import { ColumnDef } from "@tanstack/react-table";
1615
import { useMemo, useState } from "react";
1716

@@ -21,8 +20,8 @@ interface RequirementsTableProps {
2120
orgId: string;
2221
}
2322

24-
export function RequirementsTable({
25-
requirements,
23+
export function RequirementsTable({
24+
requirements,
2625
orgId,
2726
}: RequirementsTableProps) {
2827
const [searchTerm, setSearchTerm] = useState("");
@@ -41,9 +40,10 @@ interface RequirementsTableProps {
4140
title={"Name"}
4241
/>
4342
),
43+
4444
cell: ({ row }) => {
4545
return (
46-
<span>
46+
<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
4747
{row.original.requirement.name}
4848
</span>
4949
);
@@ -67,7 +67,7 @@ interface RequirementsTableProps {
6767
),
6868
cell: ({ row }) => {
6969
return (
70-
<span className="text-muted-foreground">
70+
<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
7171
{row.original.requirement.description}
7272
</span>
7373
);
@@ -115,41 +115,28 @@ interface RequirementsTableProps {
115115
});
116116

117117
return (
118-
<Card>
119-
<CardHeader>
120-
<CardTitle>
121-
{"Linked Requirements"} (
122-
{filteredRequirements.length})
123-
</CardTitle>
124-
</CardHeader>
125-
<CardContent>
126-
<div className="flex items-center mb-4">
127-
<Input
128-
placeholder={"Search..."}
129-
value={searchTerm}
130-
onChange={(e) => setSearchTerm(e.target.value)}
131-
className="max-w-sm"
132-
/>
133-
{/* <div className="ml-auto">
134-
<DataTableSortList
135-
table={table.table}
136-
align="end"
137-
tableId="r"
138-
/>
139-
</div> */}
140-
</div>
141-
<DataTable
142-
table={table.table}
143-
rowClickBasePath={`/${orgId}/frameworks`}
144-
getRowId={(row) => {
145-
// This constructs the path to the specific requirement page
146-
// row.requirementId is the FrameworkEditorRequirement.id (e.g. frk_rq_...)
147-
// row.frameworkInstanceId is the ID of the FrameworkInstance
148-
return `${row.frameworkInstanceId}/requirements/${row.requirementId}`;
149-
}}
150-
tableId={"r"}
118+
<div className="space-y-4">
119+
<div className="flex items-center">
120+
<Input
121+
placeholder="Search requirements..."
122+
value={searchTerm}
123+
onChange={(e) => setSearchTerm(e.target.value)}
124+
className="max-w-sm"
125+
leftIcon={<Icons.Search size={16} />}
151126
/>
152-
</CardContent>
153-
</Card>
127+
</div>
128+
129+
<DataTable
130+
table={table.table}
131+
rowClickBasePath={`/${orgId}/frameworks`}
132+
getRowId={(row) => {
133+
// This constructs the path to the specific requirement page
134+
// row.requirementId is the FrameworkEditorRequirement.id (e.g. frk_rq_...)
135+
// row.frameworkInstanceId is the ID of the FrameworkInstance
136+
return `${row.frameworkInstanceId}/requirements/${row.requirementId}`;
137+
}}
138+
tableId={"r"}
139+
/>
140+
</div>
154141
);
155142
}

0 commit comments

Comments
 (0)