salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final section 10 -- and lgoabl styles adn compoeents plan

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 10:41:16 +00:00
parent 41e124d8e8
commit d389576634
18 changed files with 1918 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
frontend/FRONTEND-AUDIT-PLAN.md Normal file
View File

@@ -0,0 +1,305 @@
# Frontend Standardization Audit Plan
## Objective
Systematically audit every page and component to ensure 100% consistency with the design system defined in `DESIGN_SYSTEM.md` and eliminate all non-standard code patterns.
---
## Phase 1: Automated Detection Scripts
### 1.1 Run These Detection Commands
```bash
# Save all results to audit-results/ folder
mkdir -p /data/app/igny8/frontend/audit-results
# 1. Find ALL inline styles (style={{ }})
grep -rn "style={{" src/pages/ src/components/ --include="*.tsx" > audit-results/inline-styles.txt
# 2. Find ALL sx={{ }} (MUI-style inline)
grep -rn "sx={{" src/pages/ src/components/ --include="*.tsx" > audit-results/sx-styles.txt
# 3. Find ALL hardcoded hex colors
grep -rn "#[0-9a-fA-F]\{3,6\}" src/pages/ src/components/ --include="*.tsx" > audit-results/hardcoded-hex.txt
# 4. Find ALL rgb/rgba colors
grep -rn "rgb\|rgba" src/pages/ src/components/ --include="*.tsx" > audit-results/rgb-colors.txt
# 5. Find ALL non-standard gray classes (should use design tokens)
grep -rn "gray-[0-9]\{2,3\}" src/pages/ src/components/ --include="*.tsx" > audit-results/gray-classes.txt
# 6. Find ALL blue/red/green direct Tailwind (should use brand/success/error)
grep -rn "bg-blue-\|text-blue-\|border-blue-\|bg-red-\|text-red-\|bg-green-\|text-green-" src/pages/ src/components/ --include="*.tsx" > audit-results/direct-colors.txt
# 7. Find ALL external UI library imports
grep -rn "from '@mui\|from 'lucide-react\|from '@chakra\|from 'antd" src/pages/ src/components/ --include="*.tsx" > audit-results/external-imports.txt
# 8. Find ALL inline component definitions (const Component = () => inside pages)
grep -rn "const [A-Z][a-zA-Z]* = \(\)" src/pages/ --include="*.tsx" > audit-results/inline-components.txt
# 9. Find files NOT importing from ui/ folder
grep -L "from.*components/ui" src/pages/**/*.tsx > audit-results/missing-ui-imports.txt
# 10. Find duplicate button patterns (custom buttons instead of Button component)
grep -rn "<button\|<Button " src/pages/ --include="*.tsx" > audit-results/button-usage.txt
```
---
## Phase 2: Manual Page-by-Page Audit Checklist
### 2.1 Page Groups to Audit (in order)
| Priority | Group | Folder | Est. Files |
|----------|-------|--------|------------|
| 1 | Account | `pages/account/` | ~6 |
| 2 | Settings | `pages/Settings/` | ~10 |
| 3 | Sites | `pages/Sites/` | ~8 |
| 4 | Writer | `pages/Writer/` | ~5 |
| 5 | Planner | `pages/Planner/` | ~3 |
| 6 | Automation | `pages/Automation/` | ~2 |
| 7 | Optimizer | `pages/Optimizer/` | ~3 |
| 8 | Billing | `pages/Billing/` | ~4 |
| 9 | Other | Remaining pages | ~10+ |
### 2.2 Per-Page Audit Checklist
For EACH `.tsx` file, check:
#### A. IMPORTS (Lines 1-30)
- [ ] No imports from `@mui/material` or `@mui/icons-material`
- [ ] No imports from `lucide-react` (use `../../icons` instead)
- [ ] No imports from `@chakra-ui`, `antd`, or other UI libraries
- [ ] Uses `Button` from `components/ui/button/Button`
- [ ] Uses `Modal` from `components/ui/modal`
- [ ] Uses `Alert` from `components/ui/alert/Alert`
- [ ] Uses `Badge` from `components/ui/badge/Badge`
- [ ] Uses `Dropdown` from `components/ui/dropdown/Dropdown`
- [ ] Uses `Spinner` from `components/ui/spinner/Spinner`
- [ ] Uses `Tooltip` from `components/ui/tooltip/Tooltip`
- [ ] Uses icons from `../../icons` or `@/icons`
#### B. INLINE STYLES (Search entire file)
- [ ] No `style={{` patterns
- [ ] No `sx={{` patterns
- [ ] No inline `className` with hardcoded hex (e.g., `text-[#xxx]`)
#### C. COLOR USAGE (Search entire file)
- [ ] No hardcoded hex colors (`#XXXXXX`)
- [ ] No `rgb()` or `rgba()` values
- [ ] No direct Tailwind colors: `blue-500`, `red-500`, `green-500`
- [ ] Uses design tokens: `brand-500`, `success-500`, `error-500`, `warning-500`
- [ ] Gray scale uses: `gray-50` through `gray-900` (these ARE allowed)
#### D. COMPONENT PATTERNS
- [ ] No inline component definitions (components defined inside the page file)
- [ ] No duplicate code that exists in `components/ui/`
- [ ] No custom button implementations (use `Button` component)
- [ ] No custom modal implementations (use `Modal` component)
- [ ] No custom alert/toast implementations (use `Alert` component)
- [ ] No custom dropdown implementations (use `Dropdown` component)
#### E. DARK MODE SUPPORT
- [ ] All backgrounds have dark mode variant: `bg-white dark:bg-gray-900`
- [ ] All text colors have dark mode: `text-gray-900 dark:text-white`
- [ ] All borders have dark mode: `border-gray-200 dark:border-gray-700`
#### F. FORM ELEMENTS
- [ ] Input fields use consistent styling pattern
- [ ] Select dropdowns use consistent styling pattern
- [ ] Checkboxes/radios use consistent styling pattern
- [ ] Form labels use consistent styling pattern
---
## Phase 3: Component Audit
### 3.1 Standard Components Inventory
These are the ONLY allowed UI component sources:
| Component | Import Path | Usage |
|-----------|------------|-------|
| Button | `components/ui/button/Button` | All buttons |
| Modal | `components/ui/modal` | All modals/dialogs |
| Alert | `components/ui/alert/Alert` | All alerts/notifications |
| Badge | `components/ui/badge/Badge` | All badges/chips/tags |
| Dropdown | `components/ui/dropdown/Dropdown` | All dropdown menus |
| Spinner | `components/ui/spinner/Spinner` | All loading states |
| Tooltip | `components/ui/tooltip/Tooltip` | All tooltips |
| Card | `components/ui/card/*` | All card containers |
| Table | `components/ui/table/*` | All data tables |
| Tabs | `components/ui/tabs/*` | All tab interfaces |
| Progress | `components/ui/progress/*` | All progress bars |
### 3.2 Non-Standard Components to Find & Replace
| Pattern to Find | Replace With |
|----------------|--------------|
| `<button className=...>` | `<Button>` from ui/ |
| `<Dialog>` or `<dialog>` | `<Modal>` from ui/ |
| Custom alert divs | `<Alert>` from ui/ |
| `<Chip>` or chip patterns | `<Badge>` from ui/ |
| Custom loading spinners | `<Spinner>` from ui/ |
| `<Menu>` patterns | `<Dropdown>` from ui/ |
---
## Phase 4: Style Token Mapping
### 4.1 Color Replacements
| Wrong Pattern | Correct Pattern |
|---------------|-----------------|
| `bg-blue-500` | `bg-brand-500` |
| `text-blue-600` | `text-brand-600` |
| `border-blue-200` | `border-brand-200` |
| `bg-green-500` | `bg-success-500` |
| `text-green-600` | `text-success-600` |
| `bg-red-500` | `bg-error-500` |
| `text-red-600` | `text-error-600` |
| `bg-yellow-500` | `bg-warning-500` |
| `text-yellow-600` | `text-warning-600` |
| `#3B82F6` | Use `text-brand-500` or CSS var |
| `#10B981` | Use `text-success-500` or CSS var |
| `#EF4444` | Use `text-error-500` or CSS var |
### 4.2 Allowed Gray Scale (DO NOT REPLACE)
```
gray-25, gray-50, gray-100, gray-200, gray-300, gray-400,
gray-500, gray-600, gray-700, gray-800, gray-900, gray-950
```
---
## Phase 5: Execution Tracking
### 5.1 Audit Progress Tracker
| Page/Component | Audited | Issues Found | Fixed | Verified |
|----------------|---------|--------------|-------|----------|
| `pages/account/Profile.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Team.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Security.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Preferences.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Notifications.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/ApiKeys.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/General.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Integrations.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Notifications.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Publishing.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/ContentDefaults.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/AIModels.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/ImageGeneration.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/SEO.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Categories.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Tags.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SitesList.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteDetail.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteSettings.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteDashboard.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/CreateSite.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/ContentCategories.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/ContentTags.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/Authors.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Writer/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Planner/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Automation/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Optimizer/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Billing/*.tsx` | ☐ | - | ☐ | ☐ |
| _Add remaining pages..._ | | | | |
### 5.2 Component Folder Audit
| Component Folder | Audited | Issues | Fixed |
|------------------|---------|--------|-------|
| `components/ui/button/` | ☐ | - | ☐ |
| `components/ui/modal/` | ☐ | - | ☐ |
| `components/ui/alert/` | ☐ | - | ☐ |
| `components/ui/badge/` | ☐ | - | ☐ |
| `components/ui/dropdown/` | ☐ | - | ☐ |
| `components/ui/card/` | ☐ | - | ☐ |
| `components/ui/table/` | ☐ | - | ☐ |
| `components/ui/tabs/` | ☐ | - | ☐ |
| `components/common/` | ☐ | - | ☐ |
| `components/layout/` | ☐ | - | ☐ |
---
## Phase 6: Reference Pages
### 6.1 Gold Standard Pages (Use as Reference)
These pages are correctly styled and should be used as reference:
- `pages/Planner/Dashboard.tsx` - Correct card layouts
- `pages/Writer/Dashboard.tsx` - Correct table patterns
- `components/ui/*` - All standard components
### 6.2 Reference Patterns
**Correct Button Usage:**
```tsx
import { Button } from '../../components/ui/button/Button';
<Button variant="primary" tone="brand" size="md">
Save Changes
</Button>
```
**Correct Modal Usage:**
```tsx
import { Modal } from '../../components/ui/modal';
<Modal isOpen={isOpen} onClose={onClose} className="max-w-md p-6">
{/* content */}
</Modal>
```
**Correct Alert Usage:**
```tsx
import Alert from '../../components/ui/alert/Alert';
<Alert variant="success" title="Saved" message="Changes saved successfully" />
```
**Correct Icon Usage:**
```tsx
import { CheckCircleIcon, ErrorIcon } from '../../icons';
<CheckCircleIcon className="h-5 w-5 text-success-500" />
```
---
## Phase 7: Verification
### 7.1 Final Verification Checklist
After all fixes are applied, run:
```bash
# Should return 0 results for each:
grep -rn "from '@mui" src/pages/ src/components/ --include="*.tsx" | wc -l
grep -rn "from 'lucide-react" src/pages/ --include="*.tsx" | wc -l
grep -rn "style={{" src/pages/ --include="*.tsx" | wc -l
grep -rn "#[0-9a-fA-F]\{6\}" src/pages/ --include="*.tsx" | wc -l
grep -rn "bg-blue-\|bg-red-\|bg-green-" src/pages/ --include="*.tsx" | wc -l
```
### 7.2 Visual Verification
- [ ] Check each page in browser (light mode)
- [ ] Check each page in browser (dark mode)
- [ ] Verify all buttons look consistent
- [ ] Verify all modals look consistent
- [ ] Verify all forms look consistent
- [ ] Verify all colors match brand palette
---
## Notes
- **DO NOT** replace gray-* classes - these are part of the design system
- **DO** replace blue/red/green with brand/error/success
- **DO** replace all inline styles with Tailwind classes
- **DO** replace all hardcoded hex with CSS variables or Tailwind classes
- **DO** extract inline components to separate files
- **DO** use standard ui/ components instead of custom implementations