chore: add .planning to gitignore and update dependencies
- Add .planning/ directory to gitignore - Add postcss-import as explicit dev dependency for CSS imports
This commit is contained in:
Kevin Turcios
parent
db8da32bef
commit
25ab6c0142
4 changed files with 25 additions and 104 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -163,6 +163,7 @@ cython_debug/
|
|||
#.idea/
|
||||
.aider*
|
||||
.serena/
|
||||
.planning/
|
||||
/js/common/node_modules/
|
||||
/node_modules/
|
||||
*.xml
|
||||
|
|
|
|||
27
js/cf-webapp/package-lock.json
generated
27
js/cf-webapp/package-lock.json
generated
|
|
@ -88,6 +88,7 @@
|
|||
"eslint-plugin-react": "^7.33.2",
|
||||
"jsdom": "^24.1.0",
|
||||
"lint-staged": "^15.4.3",
|
||||
"postcss-import": "^16.1.1",
|
||||
"prettier": "3.2.5",
|
||||
"prisma": "^6.7.0",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
|
|
@ -13585,9 +13586,10 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss-import": {
|
||||
"version": "15.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
|
||||
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
|
||||
"version": "16.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.1.tgz",
|
||||
"integrity": "sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
|
|
@ -13595,7 +13597,7 @@
|
|||
"resolve": "^1.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
|
|
@ -15930,6 +15932,23 @@
|
|||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/node_modules/postcss-import": {
|
||||
"version": "15.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
|
||||
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
"read-cache": "^1.0.0",
|
||||
"resolve": "^1.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
"eslint-plugin-react": "^7.33.2",
|
||||
"jsdom": "^24.1.0",
|
||||
"lint-staged": "^15.4.3",
|
||||
"postcss-import": "^16.1.1",
|
||||
"prettier": "3.2.5",
|
||||
"prisma": "^6.7.0",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
# Icon Standards - Observability2
|
||||
|
||||
## Library
|
||||
|
||||
- Use **lucide-react** exclusively
|
||||
- Prefer outlined style (default)
|
||||
- No mixed icon libraries (no heroicons, no custom SVGs)
|
||||
|
||||
## Sizing Convention
|
||||
|
||||
### 16px (h-4 w-4) - Inline Icons
|
||||
Used for icons within text, tables, lists, and navigation
|
||||
|
||||
**Examples:**
|
||||
- Copy buttons (`Copy`)
|
||||
- Navigation chevrons (`ChevronDown`, `ChevronRight`)
|
||||
- Code/file type indicators (`Code`, `FileText`, `Hash`)
|
||||
- Search icons (`Search`)
|
||||
- Content type icons (`FolderTree`, `Github`, `Terminal`)
|
||||
|
||||
### 20px (h-5 w-5) - Status and Severity Indicators
|
||||
Used for icons that communicate state or importance
|
||||
|
||||
**Examples:**
|
||||
- Error/warning badges (`AlertCircle`, `XCircle`, `AlertTriangle`)
|
||||
- Success indicators (`CheckCircle`)
|
||||
- Loading states (`Loader2`)
|
||||
- Status badges in timeline
|
||||
|
||||
### Smaller Sizes (h-3 w-3, h-3.5 w-3.5)
|
||||
Used sparingly for compact UI elements
|
||||
|
||||
**Examples:**
|
||||
- Nested file icons in code sections
|
||||
- Small indicators in dense layouts
|
||||
|
||||
## Implementation Examples
|
||||
|
||||
```tsx
|
||||
// Inline icon (16px)
|
||||
<Copy className="h-4 w-4" />
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<Code className="h-4 w-4 text-zinc-400" />
|
||||
|
||||
// Status icon (20px)
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
|
||||
// Compact icon (12-14px)
|
||||
<FileText className="h-3.5 w-3.5 text-zinc-400" />
|
||||
```
|
||||
|
||||
## Color Usage
|
||||
|
||||
- **Default**: Inherit from text color (`currentColor`)
|
||||
- **Semantic colors for status:**
|
||||
- `text-green-400`: Success states
|
||||
- `text-red-400`: Error states
|
||||
- `text-yellow-400`: Warning states
|
||||
- `text-zinc-400`: Neutral/inactive states
|
||||
- `text-blue-400`: Information/active states
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Always include proper ARIA labels for icon-only buttons
|
||||
- Use `sr-only` text for screen readers when icons convey meaning
|
||||
- Ensure sufficient color contrast (WCAG AA minimum)
|
||||
|
||||
## Import Pattern
|
||||
|
||||
```tsx
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Code,
|
||||
AlertCircle
|
||||
} from "lucide-react"
|
||||
```
|
||||
|
||||
## Verification
|
||||
|
||||
Run these checks to ensure compliance:
|
||||
|
||||
```bash
|
||||
# Check for non-lucide imports
|
||||
grep -r "from.*icon" src/components/observability2/ | grep -v "lucide-react"
|
||||
|
||||
# Check for non-standard sizes
|
||||
grep -r 'className="[^"]*h-[0-9] w-[0-9]' src/components/observability2/ | \
|
||||
grep -v "h-4 w-4" | grep -v "h-5 w-5" | grep -v "h-3"
|
||||
|
||||
# Count lucide usage
|
||||
grep -r "lucide-react" src/components/observability2/ | wc -l
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2026-01-30*
|
||||
*Maintained by: Engineering Team*
|
||||
Loading…
Reference in a new issue