Repository navigation
feat/status-text - #249
Merged
Merged
feat/status-text#249
Conversation
Introduce a new StatusText atomic to display contextual validation/status messages with optional icons. Add Tailwind-variants configuration for status and size variants, an ICON_MAP for status->icon mapping, and a simple component API supporting showIcon, status, and size props. Expose variant classes via the tv utility and forward props/ref. Add theme tokens and component CSS for status text: - reference tokens for error/success/warning/default colors - derived tokens for text sizes and icon gap Import the new CSS into the components bundle. Add comprehensive Storybook stories demonstrating usage and variants (default, error, success, warning) and controls for status, size, and showIcon. This change provides standardized status messaging UI and theming so callers can consistently render validation and status feedback.
|
Review changes with Changed Files
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughAdds a new StatusText React atom with Tailwind Variant styling (status: default/error/success/warning; size: sm/md/lg), optional icons, CSS tokens/utilities, an import into component tokens, and Storybook stories demonstrating states, sizes and contexts. Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (4)libs/ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
libs/ui/src/{atoms,molecules}/**/*.tsx📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
libs/ui/src/tokens/components/{atoms,molecules}/_*.css📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
🧠 Learnings (32)📓 Common learnings📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-12-18T23:21:59.842ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-10T15:52:41.750ZApplied to files:
📚 Learning: 2025-10-03T08:38:48.431ZApplied to files:
📚 Learning: 2025-12-16T19:45:17.746ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-10-22T11:18:06.281ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-10-24T14:00:19.432ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-10T15:46:29.951ZApplied to files:
📚 Learning: 2025-09-10T15:27:28.826ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-10-27T07:13:36.526ZApplied to files:
🧬 Code graph analysis (1)libs/ui/src/atoms/status-text.tsx (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Mesa DescriptionTL;DRAdded a new What changed?
Description generated by Mesa. Update settings |
KaiUweCZE
marked this pull request as ready for review
December 27, 2025 10:35
|
You do not have enough credits to review this pull request. Please purchase more credits to continue. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
libs/ui/src/atoms/status-text.tsxlibs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.csslibs/ui/stories/atoms/status-text.stories.tsx
🧰 Additional context used
📓 Path-based instructions (5)
libs/ui/src/tokens/components/{atoms,molecules}/_*.css
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/tokens/components/{atoms,molecules}/_*.css: Define tokens in files named with a leading underscore under tokens/components/{atoms|molecules}
Token files must use @theme static blocks for definitions
Implement two-layer token strategy: reference layer then derived tokens
Token naming must follow --[prefix]-[component]-[part?]-[property]-[state?] with full words (no abbreviations)
All color tokens must end with -bg, -fg, or -border
Do not skip the reference layer in token architecture
Files:
libs/ui/src/tokens/components/atoms/_status-text.css
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
libs/ui/src/{atoms,molecules}/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/{atoms,molecules}/**/*.tsx: React 19 components must not use forwardRef; pass ref as a prop instead
Do not use useCallback in components
Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Exported React components should be PascalCase (e.g., ComponentName)
Do not use abbreviations in component names (e.g., btn, pc)
When using Zag.js, derive styles from data attributes (e.g., data-state) rather than imperative styling
Files:
libs/ui/src/atoms/status-text.tsx
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Files:
libs/ui/src/atoms/status-text.tsx
libs/ui/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/stories/**/*.stories.tsx: Storybook stories must exist for components and cover all variants and states
Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Files:
libs/ui/stories/atoms/status-text.stories.tsx
🧠 Learnings (32)
📓 Common learnings
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use tv() with slots for component styles; only add variants/sizes when necessary
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Token naming must follow --[prefix]-[component]-[part?]-[property]-[state?] with full words (no abbreviations)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Define tokens in files named with a leading underscore under tokens/components/{atoms|molecules}
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Token files must use theme static blocks for definitions
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-10-22T11:18:06.281Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/src/tokens/components/molecules/_product-card.css:1-1
Timestamp: 2025-10-22T11:18:06.281Z
Learning: Token files in libs/ui/src/tokens/components/{atoms,molecules}/_*.css do not require explicit imports of semantic token files; semantic token references via var() resolve correctly within the theme static block architecture used in this project.
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Implement two-layer token strategy: reference layer then derived tokens
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : All color tokens must end with -bg, -fg, or -border
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Token naming must follow --[prefix]-[component]-[part?]-[property]-[state?] with full words (no abbreviations)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-10-24T14:00:19.432Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 167
File: libs/ui/src/tokens/components/atoms/_input.css:52-52
Timestamp: 2025-10-24T14:00:19.432Z
Learning: For CSS custom properties in libs/ui/src/tokens/components/{atoms,molecules}/_*.css: token naming follows the pattern --color-{component}-{property}-{state}, where property comes before state. For example: --color-input-fg-placeholder (not --color-input-placeholder-fg).
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/components/@(atoms|molecules|organisms)/_*.css : Place app-specific component token files at apps/frontend-demo/src/tokens/components/[atoms|molecules|organisms]/_component-name.css
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Do not skip the reference layer in token architecture
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-10T15:46:29.951Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 126
File: libs/ui/src/tokens/components/molecules/_tree-view.css:6-8
Timestamp: 2025-09-10T15:46:29.951Z
Learning: Icon color tokens (like --color-tree-icon-hover, --color-component-icon-*) don't need -bg/-fg/-border suffixes as "-icon" represents a distinct semantic concept for icon styling, similar to how ring tokens work.
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Follow token naming: allowed prefixes (e.g., --color-, --spacing-) and avoid forbidden patterns (e.g., --layout-*, over-specific names)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : All component tokens must be defined inside theme static blocks
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Component token files should import semantic tokens (e.g., import "../../_semantic.css") and primarily reference variables from _semantic.css
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/tokens/components/components.css
📚 Learning: 2025-10-27T07:13:36.526Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 168
File: libs/ui/src/atoms/input.tsx:16-17
Timestamp: 2025-10-27T07:13:36.526Z
Learning: In Tailwind CSS v4, theme configuration is done using CSS files with the `theme` directive, not tailwind.config.js. Theme variables like `--color-input-ring` defined in `theme` blocks automatically generate corresponding utility classes (e.g., `ring-input-ring`).
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsxlibs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use tv() with slots for component styles; only add variants/sizes when necessary
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use abbreviations in component names (e.g., btn, pc)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Exported React components should be PascalCase (e.g., ComponentName)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx : Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-12-16T19:45:17.746Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 207
File: libs/ui/src/molecules/select.tsx:50-50
Timestamp: 2025-12-16T19:45:17.746Z
Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project.
Applied to files:
libs/ui/src/atoms/status-text.tsxlibs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-10-03T08:38:48.431Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Applied to files:
libs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Storybook stories must exist for components and cover all variants and states
Applied to files:
libs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Applied to files:
libs/ui/stories/atoms/status-text.stories.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/app-components.css : Always add new component token CSS imports to apps/frontend-demo/src/tokens/app-components.css
Applied to files:
libs/ui/src/tokens/components/components.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/components.css : If using the components token path, import new _component-name.css files into apps/frontend-demo/src/tokens/components.css
Applied to files:
libs/ui/src/tokens/components/components.css
🧬 Code graph analysis (1)
libs/ui/src/atoms/status-text.tsx (2)
libs/ui/src/utils.ts (1)
tv(11-17)libs/ui/src/atoms/icon.tsx (1)
Icon(41-49)
🔇 Additional comments (6)
libs/ui/src/tokens/components/components.css (1)
5-5: LGTM!The import is correctly placed and follows the established pattern for component token aggregation.
libs/ui/src/tokens/components/atoms/_status-text.css (1)
1-29: LGTM!The token definitions correctly follow the two-layer strategy and naming conventions:
- Status colour tokens reference semantic tokens (danger, success, warning, fg-secondary)
- Size tokens inherit from input sizing for consistency
- Icon gap spacing tokens map to the spacing scale
- Custom utilities properly delegate to existing token-icon-* classes
All tokens use full words and follow the required --[prefix]-[component]-[property]-[state?] pattern. Based on learnings, this architecture aligns with the project's token strategy.
libs/ui/src/atoms/status-text.tsx (3)
6-25: LGTM!The variant configuration correctly uses tv() with component-specific token classes (text-status-text-fg-, gap-status-text-icon-gap-, etc.) and avoids arbitrary values. All status and size variants are properly defined with sensible defaults.
42-67: LGTM!The component correctly implements React 19 patterns by accepting ref as a prop instead of using forwardRef. The conditional icon rendering logic properly checks both showIcon and icon existence, handling the default status (which has no icon) gracefully.
1-4: Import the component token CSS.The component file should import its token CSS to ensure styling is properly loaded. Based on learnings, component TSX files must import their corresponding token CSS.
🔎 Proposed fix
import type { HTMLAttributes, ReactNode, Ref } from "react" import type { VariantProps } from "tailwind-variants" +import "../tokens/components/atoms/_status-text.css" import { tv } from "../utils" import { Icon } from "./icon"⛔ Skipped due to learnings
Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Component token files should import semantic tokens (e.g., import "../../_semantic.css") and primarily reference variables from _semantic.cssLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/tokens/app-components.css : Always add new component token CSS imports to apps/frontend-demo/src/tokens/app-components.cssLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/tokens/components.css : If using the components token path, import new _component-name.css files into apps/frontend-demo/src/tokens/components.cssLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()Learnt from: KaiUweCZE Repo: NMIT-WR/new-engine PR: 151 File: libs/ui/src/tokens/components/molecules/_product-card.css:1-1 Timestamp: 2025-10-22T11:18:06.281Z Learning: Token files in libs/ui/src/tokens/components/{atoms,molecules}/_*.css do not require explicit imports of semantic token files; semantic token references via var() resolve correctly within the theme static block architecture used in this project.Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use tv() with slots for component styles; only add variants/sizes when necessaryLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : React 19 components must not use forwardRef; pass ref as a prop insteadLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-09-07T21:28:54.320Z Learning: Applies to libs/ui/**/*.{ts,tsx} : Implement UI library components using Zag.js for React and Tailwind CSS for stylingLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes insteadLearnt from: BleedingDev Repo: NMIT-WR/new-engine PR: 151 File: libs/ui/src/molecules/product-card.tsx:146-177 Timestamp: 2025-09-28T21:00:25.819Z Learning: In React 19, refs can be passed as regular props to function components without requiring forwardRef. The `ref` prop can be destructured from component props just like any other prop and will receive the actual ref value from the parent component.Learnt from: KaiUweCZE Repo: NMIT-WR/new-engine PR: 167 File: libs/ui/src/molecules/tabs.tsx:41-45 Timestamp: 2025-10-24T13:43:25.253Z Learning: In libs/ui/src/molecules/tabs.tsx, using Tailwind arbitrary value syntax to reference Zag.js CSS variables (e.g., w-(--width), h-(--height)) for the indicator element is the correct pattern. These CSS variables are dynamically set by getIndicatorProps() based on active tab dimensions and should not be removed.libs/ui/stories/atoms/status-text.stories.tsx (1)
1-255: LGTM!The Storybook stories are comprehensive and well-structured:
- Correctly uses "Atoms/StatusText" title hierarchy
- Covers all status variants (default, error, success, warning)
- Covers all size variants (sm, md, lg)
- Demonstrates icon toggle functionality
- Includes realistic form validation context
- Tests edge cases like long text wrapping
- Provides clear descriptions and controls
The story coverage meets the requirement to demonstrate all variants and states.
For long texts, align the icon with the first line of text.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
libs/ui/src/atoms/status-text.tsx (1)
54-54: Remove redundant null coalescing operator.The
?? "default"is unnecessary sincestatusalready defaults to"default"(line 48) anddefaultVariants.statusis also"default"(line 25).🔎 Proposed refactor
- const icon = ICON_MAP[status ?? "default"] + const icon = ICON_MAP[status]
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
libs/ui/src/atoms/status-text.tsxlibs/ui/src/tokens/components/atoms/_status-text.css
🧰 Additional context used
📓 Path-based instructions (4)
libs/ui/src/tokens/components/{atoms,molecules}/_*.css
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/tokens/components/{atoms,molecules}/_*.css: Define tokens in files named with a leading underscore under tokens/components/{atoms|molecules}
Token files must use @theme static blocks for definitions
Implement two-layer token strategy: reference layer then derived tokens
Token naming must follow --[prefix]-[component]-[part?]-[property]-[state?] with full words (no abbreviations)
All color tokens must end with -bg, -fg, or -border
Do not skip the reference layer in token architecture
Files:
libs/ui/src/tokens/components/atoms/_status-text.css
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/src/atoms/status-text.tsx
libs/ui/src/{atoms,molecules}/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/{atoms,molecules}/**/*.tsx: React 19 components must not use forwardRef; pass ref as a prop instead
Do not use useCallback in components
Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Exported React components should be PascalCase (e.g., ComponentName)
Do not use abbreviations in component names (e.g., btn, pc)
When using Zag.js, derive styles from data attributes (e.g., data-state) rather than imperative styling
Files:
libs/ui/src/atoms/status-text.tsx
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Files:
libs/ui/src/atoms/status-text.tsx
🧠 Learnings (28)
📓 Common learnings
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use tv() with slots for component styles; only add variants/sizes when necessary
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Define tokens in files named with a leading underscore under tokens/components/{atoms|molecules}
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Token files must use theme static blocks for definitions
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-10-22T11:18:06.281Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/src/tokens/components/molecules/_product-card.css:1-1
Timestamp: 2025-10-22T11:18:06.281Z
Learning: Token files in libs/ui/src/tokens/components/{atoms,molecules}/_*.css do not require explicit imports of semantic token files; semantic token references via var() resolve correctly within the theme static block architecture used in this project.
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Implement two-layer token strategy: reference layer then derived tokens
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : All color tokens must end with -bg, -fg, or -border
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/tokens/components/{atoms,molecules}/_*.css : Token naming must follow --[prefix]-[component]-[part?]-[property]-[state?] with full words (no abbreviations)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-10-24T14:00:19.432Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 167
File: libs/ui/src/tokens/components/atoms/_input.css:52-52
Timestamp: 2025-10-24T14:00:19.432Z
Learning: For CSS custom properties in libs/ui/src/tokens/components/{atoms,molecules}/_*.css: token naming follows the pattern --color-{component}-{property}-{state}, where property comes before state. For example: --color-input-fg-placeholder (not --color-input-placeholder-fg).
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.csslibs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/components/@(atoms|molecules|organisms)/_*.css : Place app-specific component token files at apps/frontend-demo/src/tokens/components/[atoms|molecules|organisms]/_component-name.css
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/app-components/@(atoms|molecules|organisms|templates|pages)/_*.css : Organize app component token CSS under apps/frontend-demo/src/tokens/app-components/{atoms,molecules,organisms,templates,pages}/_component-name.css
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-10T15:46:29.951Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 126
File: libs/ui/src/tokens/components/molecules/_tree-view.css:6-8
Timestamp: 2025-09-10T15:46:29.951Z
Learning: Icon color tokens (like --color-tree-icon-hover, --color-component-icon-*) don't need -bg/-fg/-border suffixes as "-icon" represents a distinct semantic concept for icon styling, similar to how ring tokens work.
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Follow token naming: allowed prefixes (e.g., --color-, --spacing-) and avoid forbidden patterns (e.g., --layout-*, over-specific names)
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : All component tokens must be defined inside theme static blocks
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Component token files should import semantic tokens (e.g., import "../../_semantic.css") and primarily reference variables from _semantic.css
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-10-27T07:13:36.526Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 168
File: libs/ui/src/atoms/input.tsx:16-17
Timestamp: 2025-10-27T07:13:36.526Z
Learning: In Tailwind CSS v4, theme configuration is done using CSS files with the `theme` directive, not tailwind.config.js. Theme variables like `--color-input-ring` defined in `theme` blocks automatically generate corresponding utility classes (e.g., `ring-input-ring`).
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]
Applied to files:
libs/ui/src/tokens/components/atoms/_status-text.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use tv() with slots for component styles; only add variants/sizes when necessary
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use abbreviations in component names (e.g., btn, pc)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Exported React components should be PascalCase (e.g., ComponentName)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx : Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/**/*.ts : Use nullish coalescing operator (`??`) for null/undefined checks, never use non-null assertions (`!`)
Applied to files:
libs/ui/src/atoms/status-text.tsx
📚 Learning: 2025-12-16T19:45:17.746Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 207
File: libs/ui/src/molecules/select.tsx:50-50
Timestamp: 2025-12-16T19:45:17.746Z
Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project.
Applied to files:
libs/ui/src/atoms/status-text.tsx
🧬 Code graph analysis (1)
libs/ui/src/atoms/status-text.tsx (2)
libs/ui/src/utils.ts (1)
tv(11-17)libs/ui/src/atoms/icon.tsx (1)
Icon(41-49)
🔇 Additional comments (1)
libs/ui/src/tokens/components/atoms/_status-text.css (1)
1-19: LGTM! Token definitions follow guidelines.The token definitions correctly implement the two-layer strategy, reference appropriate semantic tokens, and follow the naming convention. The reuse of input text sizing and semantic spacing tokens is appropriate.
…-specific margins
This was referenced Dec 29, 2025
BleedingDev
approved these changes
Dec 30, 2025
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Summary by CodeRabbit
New Features
Documentation
Style
✏️ Tip: You can customize this high-level summary in your review settings.