mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-08 22:48:14 -05:00
0083c89fa5
* feat(kb): emcn alignment; sidebar: popover primary; settings-modal: expand * feat: EMCN breadcrumb; improvement(KB): UI * fix: hydration error * improvement(KB): UI * feat: emcn modal sizing, KB tags; refactor: deleted old sidebar * feat(logs): UI * fix: add documents modal name * feat: logs, emcn, cursorrules; refactor: logs * feat: dashboard * feat: notifications; improvement: logs details * fixed random rectangle on canvas * fixed the name of the file to align * fix build --------- Co-authored-by: waleed <walif6@gmail.com>
46 lines
1.0 KiB
Plaintext
46 lines
1.0 KiB
Plaintext
---
|
|
description: EMCN component library patterns with CVA
|
|
globs: ["apps/sim/components/emcn/**"]
|
|
---
|
|
|
|
# EMCN Component Guidelines
|
|
|
|
## When to Use CVA vs Direct Styles
|
|
|
|
**Use CVA (class-variance-authority) when:**
|
|
- 2+ visual variants (primary, secondary, outline)
|
|
- Multiple sizes or state variations
|
|
- Example: Button with variants
|
|
|
|
**Use direct className when:**
|
|
- Single consistent style
|
|
- No variations needed
|
|
- Example: Label with one style
|
|
|
|
## Patterns
|
|
|
|
**With CVA:**
|
|
```tsx
|
|
const buttonVariants = cva('base-classes', {
|
|
variants: {
|
|
variant: { default: '...', primary: '...' },
|
|
size: { sm: '...', md: '...' }
|
|
}
|
|
})
|
|
export { Button, buttonVariants }
|
|
```
|
|
|
|
**Without CVA:**
|
|
```tsx
|
|
function Label({ className, ...props }) {
|
|
return <Primitive className={cn('single-style-classes', className)} {...props} />
|
|
}
|
|
```
|
|
|
|
## Rules
|
|
- Use Radix UI primitives for accessibility
|
|
- Export component and variants (if using CVA)
|
|
- TSDoc with usage examples
|
|
- Consistent tokens: `font-medium`, `text-[12px]`, `rounded-[4px]`
|
|
- Always use `transition-colors` for hover states
|