Skip to content

Commit 196500b

Browse files
hotlonghotlong
authored
Merge pull request #157 from objectstack-ai/copilot/fix-fumadocs-component-styles
2 parents 7fd5418 + bce7405 commit 196500b

File tree

5 files changed

+645
-0
lines changed

5 files changed

+645
-0
lines changed

‎apps/site/app/global.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,80 @@
22
@import 'fumadocs-ui/css/neutral.css';
33
@import 'fumadocs-ui/css/preset.css';
44

5+
/* Scan sources for Tailwind classes */
56
@source '../node_modules/fumadocs-ui/dist/**/*.js';
7+
@source '../../packages/components/src/**/*.{ts,tsx}';
8+
@source '../../packages/react/src/**/*.{ts,tsx}';
9+
@source '../../packages/plugin-*/src/**/*.{ts,tsx}';
10+
11+
/* ObjectUI component CSS custom properties */
12+
:root {
13+
--background: 0 0% 100%;
14+
--foreground: 222.2 84% 4.9%;
15+
16+
--card: 0 0% 100%;
17+
--card-foreground: 222.2 84% 4.9%;
18+
19+
--popover: 0 0% 100%;
20+
--popover-foreground: 222.2 84% 4.9%;
21+
22+
--primary: 222.2 47.4% 11.2%;
23+
--primary-foreground: 210 40% 98%;
24+
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
28+
--muted: 210 40% 96.1%;
29+
--muted-foreground: 215.4 16.3% 46.9%;
30+
31+
--accent: 210 40% 96.1%;
32+
--accent-foreground: 222.2 47.4% 11.2%;
33+
34+
--destructive: 0 84.2% 60.2%;
35+
--destructive-foreground: 210 40% 98%;
36+
37+
--border: 214.3 31.8% 91.4%;
38+
--input: 214.3 31.8% 91.4%;
39+
--ring: 222.2 84% 4.9%;
40+
41+
--radius: 0.5rem;
42+
}
43+
44+
.dark {
45+
--background: 222.2 84% 4.9%;
46+
--foreground: 210 40% 98%;
47+
48+
--card: 222.2 84% 4.9%;
49+
--card-foreground: 210 40% 98%;
50+
51+
--popover: 222.2 84% 4.9%;
52+
--popover-foreground: 210 40% 98%;
53+
54+
--primary: 210 40% 98%;
55+
--primary-foreground: 222.2 47.4% 11.2%;
56+
57+
--secondary: 217.2 32.6% 17.5%;
58+
--secondary-foreground: 210 40% 98%;
59+
60+
--muted: 217.2 32.6% 17.5%;
61+
--muted-foreground: 215 20.2% 65.1%;
62+
63+
--accent: 217.2 32.6% 17.5%;
64+
--accent-foreground: 210 40% 98%;
65+
66+
--destructive: 0 62.8% 30.6%;
67+
--destructive-foreground: 210 40% 98%;
68+
69+
--border: 217.2 32.6% 17.5%;
70+
--input: 217.2 32.6% 17.5%;
71+
--ring: 212.7 26.8% 83.9%;
72+
}
73+
74+
* {
75+
border-color: hsl(var(--border));
76+
}
77+
78+
body {
79+
background-color: hsl(var(--background));
80+
color: hsl(var(--foreground));
81+
}

‎apps/site/tailwind.config.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type { Config } from 'tailwindcss'
2+
3+
export default {
4+
darkMode: "class",
5+
content: [
6+
'./app/**/*.{ts,tsx}',
7+
'./components/**/*.{ts,tsx}',
8+
'./content/**/*.{md,mdx}',
9+
'../../packages/components/src/**/*.{ts,tsx}',
10+
'../../packages/react/src/**/*.{ts,tsx}',
11+
'../../packages/plugin-*/src/**/*.{ts,tsx}',
12+
],
13+
theme: {
14+
extend: {
15+
colors: {
16+
border: "hsl(var(--border))",
17+
input: "hsl(var(--input))",
18+
ring: "hsl(var(--ring))",
19+
background: "hsl(var(--background))",
20+
foreground: "hsl(var(--foreground))",
21+
primary: {
22+
DEFAULT: "hsl(var(--primary))",
23+
foreground: "hsl(var(--primary-foreground))",
24+
},
25+
secondary: {
26+
DEFAULT: "hsl(var(--secondary))",
27+
foreground: "hsl(var(--secondary-foreground))",
28+
},
29+
destructive: {
30+
DEFAULT: "hsl(var(--destructive))",
31+
foreground: "hsl(var(--destructive-foreground))",
32+
},
33+
muted: {
34+
DEFAULT: "hsl(var(--muted))",
35+
foreground: "hsl(var(--muted-foreground))",
36+
},
37+
accent: {
38+
DEFAULT: "hsl(var(--accent))",
39+
foreground: "hsl(var(--accent-foreground))",
40+
},
41+
popover: {
42+
DEFAULT: "hsl(var(--popover))",
43+
foreground: "hsl(var(--popover-foreground))",
44+
},
45+
card: {
46+
DEFAULT: "hsl(var(--card))",
47+
foreground: "hsl(var(--card-foreground))",
48+
},
49+
},
50+
borderRadius: {
51+
lg: "var(--radius)",
52+
md: "calc(var(--radius) - 2px)",
53+
sm: "calc(var(--radius) - 4px)",
54+
},
55+
},
56+
},
57+
} satisfies Config

‎scripts/README.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# Component Style Testing
2+
3+
This directory contains automated testing scripts for verifying that ObjectUI components render with proper styles in the fumadocs documentation site.
4+
5+
## Scripts
6+
7+
### 1. `test-component-styles.js` (Node.js)
8+
9+
A comprehensive automated test that:
10+
- Launches a headless browser
11+
- Navigates to all component documentation pages
12+
- Checks for proper CSS styling on components
13+
- Takes screenshots for visual verification
14+
- Reports errors and warnings
15+
16+
**Usage:**
17+
```bash
18+
# Requires dev server to be running on http://localhost:3000
19+
node scripts/test-component-styles.js
20+
```
21+
22+
**Features:**
23+
- ✅ Tests 15+ critical components
24+
- ✅ Validates background colors, borders, padding, etc.
25+
- ✅ Captures screenshots for manual review
26+
- ✅ Detects missing or invalid styles
27+
- ✅ Distinguishes between critical and non-critical failures
28+
29+
### 2. `test-component-styles.sh` (Bash)
30+
31+
A wrapper script that:
32+
- Automatically starts the dev/production server
33+
- Runs the Node.js test script
34+
- Cleans up the server after testing
35+
36+
**Usage:**
37+
```bash
38+
# Test with dev server (default)
39+
./scripts/test-component-styles.sh dev
40+
41+
# Test with production build
42+
./scripts/test-component-styles.sh build
43+
```
44+
45+
## Quick Start
46+
47+
1. **Install dependencies:**
48+
```bash
49+
pnpm install
50+
```
51+
52+
2. **Run the tests:**
53+
```bash
54+
# Option 1: Manual (requires server running)
55+
cd apps/site && pnpm dev &
56+
node scripts/test-component-styles.js
57+
58+
# Option 2: Automatic
59+
./scripts/test-component-styles.sh
60+
```
61+
62+
3. **Check results:**
63+
- Console output shows pass/fail for each component
64+
- Screenshots saved to `/tmp/*.png`
65+
- Exit code 0 = all tests passed, 1 = critical failures
66+
67+
## Adding New Components
68+
69+
To test a new component, edit `test-component-styles.js`:
70+
71+
```javascript
72+
const COMPONENT_PAGES = [
73+
// Add your component
74+
{
75+
path: '/docs/components/category/your-component',
76+
name: 'Your Component',
77+
critical: true // Set to true if it's a critical component
78+
},
79+
// ...
80+
];
81+
```
82+
83+
## Common Issues
84+
85+
### Calendar/Date Picker Styling
86+
87+
If calendar components show styling issues:
88+
89+
1. **Check CSS custom properties**: Ensure `global.css` includes all design tokens
90+
2. **Check Tailwind config**: Verify `tailwind.config.ts` maps CSS variables correctly
91+
3. **Check content paths**: Ensure Tailwind scans all component source files
92+
4. **Check for dynamic classes**: Some components use runtime-generated class names
93+
94+
### Fixing Style Issues
95+
96+
1. **Missing colors**: Add CSS custom property to `apps/site/app/global.css`
97+
2. **Missing mapping**: Add color mapping to `apps/site/tailwind.config.ts`
98+
3. **Classes not found**: Add path to `content` array in Tailwind config
99+
4. **Component-specific**: Check component UI source in `packages/components/src/ui/`
100+
101+
## CI Integration
102+
103+
Add to your CI pipeline:
104+
105+
```yaml
106+
- name: Test Component Styles
107+
run: |
108+
pnpm build
109+
pnpm start &
110+
sleep 10
111+
node scripts/test-component-styles.js
112+
```
113+
114+
## Output Format
115+
116+
```
117+
🚀 Starting Component Style Tests...
118+
119+
Testing: Button (/docs/components/form/button)
120+
✅ PASSED - Button
121+
122+
Testing: Calendar (/docs/components/data-display/calendar)
123+
❌ FAILED - Calendar (3 errors, 1 warnings)
124+
⚠️ CRITICAL COMPONENT
125+
126+
📊 TEST SUMMARY
127+
================================================================================
128+
129+
Total Tests: 15
130+
Passed: 14 ✅
131+
Failed: 1 ❌
132+
Critical Failures: 1 ⚠️
133+
134+
Failed Components:
135+
136+
⚠️ Calendar:
137+
Path: /docs/components/data-display/calendar
138+
Errors: 3, Warnings: 1
139+
Screenshot: /tmp/calendar.png
140+
- [ERROR] Missing or invalid background-color on button[class*="selected"]
141+
- [ERROR] Missing or invalid color on button[class*="selected"]
142+
- [ERROR] Missing or invalid border-color on [class*="border"]
143+
```
144+
145+
## Troubleshooting
146+
147+
**Server not starting:**
148+
- Check if port 3000 is available
149+
- Ensure all dependencies are installed (`pnpm install`)
150+
- Try building first (`pnpm build`)
151+
152+
**Tests timing out:**
153+
- Increase timeout in script (default: 30s)
154+
- Check for console errors in browser
155+
- Verify components are actually rendering
156+
157+
**False positives:**
158+
- Some components may have intentionally transparent backgrounds
159+
- Adjust `STYLE_CHECKS` in the script to match expected behavior
160+
- Add component-specific validation rules
161+
162+
## Maintenance
163+
164+
Update the test script when:
165+
- Adding new components to the documentation
166+
- Changing component styling approach
167+
- Modifying Tailwind configuration
168+
- Updating design tokens
169+
170+
Last updated: 2026-01-23

0 commit comments

Comments
 (0)