Conversation
Add statistic component Add doc for statistic component
WalkthroughThis PR introduces a new Statistic component to the Eclipse design system, including React component implementation with configurable props (title, value, measure, badge, badgeColor), comprehensive MDX documentation with usage examples, catalog registration, font assets setup with Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
🍈 Lychee Link Check Report3664 links: ✅ All links are working!Full Statistics Table
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
packages/eclipse/src/styles/globals.css (1)
74-76:--font-mona-sansis misplaced under the Blur section — move it to Typography.The variable belongs logically with
--font-family-displayand its siblings. As written, it sits directly under--blur-background-highwith no section comment separating it, making the@themeblock harder to scan.♻️ Proposed move
/* Blur */ --blur-background-low: 16px; --blur-background: 24px; --blur-background-high: 40px; - --font-mona-sans: - "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", - "Helvetica Neue", "Arial", sans-serif; /* Typography - Font Families */ + --font-mona-sans: + "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", + "Helvetica Neue", "Arial", sans-serif; --font-family-display: var(--font-mona-sans), Inter, sans-serif;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/globals.css` around lines 74 - 76, The CSS custom property --font-mona-sans is placed under the Blur section (near --blur-background-high) but logically belongs with the Typography variables; move the --font-mona-sans declaration out from beneath --blur-background-high into the Typography group alongside --font-family-display and related font variables so the `@theme` block remains organized and easy to scan. Ensure you preserve the exact variable name and value and keep any surrounding indentation and comments consistent with the Typography section.packages/eclipse/src/styles/fonts.css (1)
1-41: Consider adding WOFF2 format for better load performance.All declarations use only TTF, which is 2–4× larger than WOFF2. WOFF2 is supported across all browsers the design system targets (Chrome 111+, Safari 16.4+, Firefox 128+ per Tailwind v4's requirements). Adding WOFF2 with TTF as a fallback is the modern standard.
🚀 Proposed format additions (pattern for each weight)
`@font-face` { font-family: "Mona Sans"; - src: url("../static/fonts/MonaSans-Regular.ttf") format("truetype"); + src: url("../static/fonts/MonaSans-Regular.woff2") format("woff2"), + url("../static/fonts/MonaSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }Apply the same pattern to each of the remaining four weights.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/fonts.css` around lines 1 - 41, The font-face blocks for font-family "Mona Sans" currently only load TTFs which are large; add WOFF2 sources before the existing TTF sources in each `@font-face` so browsers load the smaller WOFF2 when supported and fall back to TTF otherwise, keeping the existing font-weight (400, 500, 600, 700, 800), font-style and font-display values; update each `@font-face` block (the ones that reference MonaSans-Regular.ttf, MonaSans-Medium.ttf, MonaSans-SemiBold.ttf, MonaSans-Bold.ttf, MonaSans-ExtraBold.ttf) to include a src entry for the corresponding .woff2 file (same basename) followed by the existing .ttf entry.packages/eclipse/src/components/statistic.tsx (1)
11-17: Prefer a named export to stay consistent with the rest of the component library.
Badge,badgeVariants, and every other component inpackages/eclipse/src/componentsuse named exports. A default export breaks the consistent pattern and makes tree-shaking and re-exporting slightly more cumbersome.♻️ Proposed change
-export default function Statistic({ +export function Statistic({🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/components/statistic.tsx` around lines 11 - 17, The component is currently exported as a default export; change it to a named export to match the library pattern by replacing "export default function Statistic(...)" with "export function Statistic(...)" (keep the same Statistic function signature and props), and then update any local re-exports/consumers to import { Statistic } instead of default — ensure the named export is used consistently with other components like Badge and badgeVariants.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/eclipse/content/design-system/molecules/statistic.mdx`:
- Around line 187-252: The Typography & Spacing and Design Tokens sections in
statistic.mdx are inconsistent with the shipped Statistic component; update the
MDX to reflect the actual classes used in the implementation (check the
Statistic React component in statistic.tsx) — change Title to text-2xs with
tracking-[1.1px] and the appropriate Eclipse token (e.g.,
text-foreground-neutral-weak), Value to text-2xl font-bold with its token,
Measure to text-sm with its token, remove any px-6 py-5 and border-2
border-dashed rounded-lg entries (document "no padding" and "no border"), and
replace the doc color names (text-gray-*) with the actual token names used by
the component so consumers can rely on correct tokens and sizes.
- Around line 133-138: The MDX checklist incorrectly claims a "Dashed border
design" feature that doesn't exist; remove the "✅ Dashed border design for
visual emphasis" line from
apps/eclipse/content/design-system/molecules/statistic.mdx, or if the dashed
border is intended, add appropriate border classes (e.g., border, border-dashed,
rounded-*) to the Statistic component in statistic.tsx (the Statistic component)
and update its docs to reflect the new prop/styling—pick one action and apply it
so the docs and the Statistic implementation stay in sync.
- Around line 205-232: Update the three section headings that are compound
adjectives by adding hyphens: change the strings "Two Column Grid", "Three
Column Grid", and "Four Column Grid" to "Two-Column Grid", "Three-Column Grid",
and "Four-Column Grid" respectively in the statistic.mdx file so static analysis
no longer flags them.
In `@packages/eclipse/src/components/badge.tsx`:
- Around line 38-42: The prop type for label is currently declared as any;
change it to React.ReactNode in the badge props interface so the label can
accept text, elements, or fragments safely (replace the type for the label
property from any to React.ReactNode). Update the JSDoc above label (and any
description that says "label text") to reflect that it can be any renderable
React node. Ensure you import React types if needed (e.g., add React import or
use the global JSX namespace) and keep the prop name label in the Badge
component signature unchanged.
In `@packages/eclipse/src/components/statistic.tsx`:
- Around line 1-9: The file uses React.ReactNode in the StatisticProps interface
but never imports React, causing a TypeScript error; add an import for React (or
import the React type only) at the top of the component file so the React
namespace is in scope; update the imports in
packages/eclipse/src/components/statistic.tsx so the StatisticProps interface
(which references React.ReactNode) compiles correctly (mirror how other
components like badge.tsx import React).
In `@packages/eclipse/src/styles/globals.css`:
- Around line 74-76: The CSS custom property --font-mona-sans contains unquoted
font family identifiers that fail Stylelint (BlinkMacSystemFont, Roboto, Arial);
update the value of --font-mona-sans so those font names are quoted (e.g.,
"BlinkMacSystemFont", "Roboto", "Arial") to match the existing quoted entries
("Segoe UI", "Helvetica Neue") and satisfy the value-keyword-case rule in the
styles/globals.css declaration.
---
Nitpick comments:
In `@packages/eclipse/src/components/statistic.tsx`:
- Around line 11-17: The component is currently exported as a default export;
change it to a named export to match the library pattern by replacing "export
default function Statistic(...)" with "export function Statistic(...)" (keep the
same Statistic function signature and props), and then update any local
re-exports/consumers to import { Statistic } instead of default — ensure the
named export is used consistently with other components like Badge and
badgeVariants.
In `@packages/eclipse/src/styles/fonts.css`:
- Around line 1-41: The font-face blocks for font-family "Mona Sans" currently
only load TTFs which are large; add WOFF2 sources before the existing TTF
sources in each `@font-face` so browsers load the smaller WOFF2 when supported and
fall back to TTF otherwise, keeping the existing font-weight (400, 500, 600,
700, 800), font-style and font-display values; update each `@font-face` block (the
ones that reference MonaSans-Regular.ttf, MonaSans-Medium.ttf,
MonaSans-SemiBold.ttf, MonaSans-Bold.ttf, MonaSans-ExtraBold.ttf) to include a
src entry for the corresponding .woff2 file (same basename) followed by the
existing .ttf entry.
In `@packages/eclipse/src/styles/globals.css`:
- Around line 74-76: The CSS custom property --font-mona-sans is placed under
the Blur section (near --blur-background-high) but logically belongs with the
Typography variables; move the --font-mona-sans declaration out from beneath
--blur-background-high into the Typography group alongside --font-family-display
and related font variables so the `@theme` block remains organized and easy to
scan. Ensure you preserve the exact variable name and value and keep any
surrounding indentation and comments consistent with the Typography section.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
packages/eclipse/src/static/fonts/MonaSans-Bold.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-Medium.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-Regular.ttfis excluded by!**/*.ttfpackages/eclipse/src/static/fonts/MonaSans-SemiBold.ttfis excluded by!**/*.ttf
📒 Files selected for processing (7)
apps/eclipse/content/design-system/molecules/meta.jsonapps/eclipse/content/design-system/molecules/statistic.mdxpackages/eclipse/package.jsonpackages/eclipse/src/components/badge.tsxpackages/eclipse/src/components/statistic.tsxpackages/eclipse/src/styles/fonts.csspackages/eclipse/src/styles/globals.css
| - ✅ Optional measurement units | ||
| - ✅ Integrated badge support with color variants | ||
| - ✅ Dashed border design for visual emphasis | ||
| - ✅ Responsive and flexible layout | ||
| - ✅ Eclipse design system tokens | ||
| - ✅ Supports both numeric and string values |
There was a problem hiding this comment.
"Dashed border design" feature doesn't exist in the component.
Line 135 lists ✅ Dashed border design for visual emphasis as a feature. The actual Statistic component (statistic.tsx) has no border styling whatsoever — no border-*, border-dashed, or rounded-* classes. This appears to be a leftover from an earlier design iteration.
🔧 Proposed fix
- - ✅ Dashed border design for visual emphasis📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - ✅ Optional measurement units | |
| - ✅ Integrated badge support with color variants | |
| - ✅ Dashed border design for visual emphasis | |
| - ✅ Responsive and flexible layout | |
| - ✅ Eclipse design system tokens | |
| - ✅ Supports both numeric and string values | |
| - ✅ Optional measurement units | |
| - ✅ Integrated badge support with color variants | |
| - ✅ Responsive and flexible layout | |
| - ✅ Eclipse design system tokens | |
| - ✅ Supports both numeric and string values |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 133
- 138, The MDX checklist incorrectly claims a "Dashed border design" feature
that doesn't exist; remove the "✅ Dashed border design for visual emphasis" line
from apps/eclipse/content/design-system/molecules/statistic.mdx, or if the
dashed border is intended, add appropriate border classes (e.g., border,
border-dashed, rounded-*) to the Statistic component in statistic.tsx (the
Statistic component) and update its docs to reflect the new prop/styling—pick
one action and apply it so the docs and the Statistic implementation stay in
sync.
| ### Typography & Spacing | ||
|
|
||
| The Statistic component uses: | ||
| - **Title**: Uppercase, extra-small font (text-xs), gray-400 color | ||
| - **Value**: Extra-large, bold font (text-4xl font-black) | ||
| - **Measure**: Large font (text-lg), gray-500 color | ||
| - **Spacing**: 6px horizontal, 5px vertical padding | ||
| - **Border**: 2px dashed purple-400 border with rounded corners | ||
|
|
||
| ### Layout Tips | ||
|
|
||
| **Single Column (Mobile)** | ||
| ```tsx | ||
| <div className="space-y-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| **Two Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| <Statistic title="Metric 4" value={400} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| **Three Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| **Four Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| <Statistic title="Metric 4" value={400} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Accessibility | ||
|
|
||
| - Clear visual hierarchy with distinct typography sizes | ||
| - High contrast text colors for readability | ||
| - Semantic HTML structure | ||
| - Badge colors provide both visual and textual information | ||
| - Responsive design works across all screen sizes | ||
| - Title text is uppercase with tracking for improved legibility | ||
|
|
||
| ### Design Tokens | ||
|
|
||
| The component uses Eclipse design tokens: | ||
| - Border: `border-purple-400` with `border-2 border-dashed` | ||
| - Radius: `rounded-lg` | ||
| - Title: `text-xs font-semibold tracking-widest text-gray-400 uppercase` | ||
| - Value: `text-4xl font-black text-gray-900` | ||
| - Measure: `text-lg text-gray-500` | ||
| - Spacing: `px-6 py-5` |
There was a problem hiding this comment.
Typography & Spacing and Design Tokens sections don't match the actual component.
These sections describe a component that was never shipped. The actual statistic.tsx is simpler — no border, no padding, and different font sizes. Key mismatches:
| Doc says | Actual |
|---|---|
text-xs (title) |
text-2xs |
text-4xl font-black (value) |
text-2xl font-bold |
text-lg (measure) |
text-sm |
px-6 py-5 spacing |
no padding |
border-2 border-dashed border-purple-400 rounded-lg |
no border |
tracking-widest |
tracking-[1.1px] |
text-gray-400 / text-gray-500 / text-gray-900 |
Eclipse tokens (text-foreground-neutral-weak, etc.) |
Consumers who rely on the Design Tokens section to customise or override the component will be working from incorrect information.
🧰 Tools
🪛 LanguageTool
[grammar] ~206-~206: Use a hyphen to join words.
Context: ...tric 2" value={200} /> **Two Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
[grammar] ~216-~216: Use a hyphen to join words.
Context: ...ic 4" value={400} /> **Three Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
[grammar] ~225-~225: Use a hyphen to join words.
Context: ...ric 3" value={300} /> **Four Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 187
- 252, The Typography & Spacing and Design Tokens sections in statistic.mdx are
inconsistent with the shipped Statistic component; update the MDX to reflect the
actual classes used in the implementation (check the Statistic React component
in statistic.tsx) — change Title to text-2xs with tracking-[1.1px] and the
appropriate Eclipse token (e.g., text-foreground-neutral-weak), Value to
text-2xl font-bold with its token, Measure to text-sm with its token, remove any
px-6 py-5 and border-2 border-dashed rounded-lg entries (document "no padding"
and "no border"), and replace the doc color names (text-gray-*) with the actual
token names used by the component so consumers can rely on correct tokens and
sizes.
|
|
||
| **Two Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| <Statistic title="Metric 4" value={400} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| **Three Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| </div> | ||
| ``` | ||
|
|
||
| **Four Column Grid** | ||
| ```tsx | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | ||
| <Statistic title="Metric 1" value={100} /> | ||
| <Statistic title="Metric 2" value={200} /> | ||
| <Statistic title="Metric 3" value={300} /> | ||
| <Statistic title="Metric 4" value={400} /> | ||
| </div> |
There was a problem hiding this comment.
Hyphenate the compound-adjective section headings.
Static analysis flags "Two Column Grid", "Three Column Grid", and "Four Column Grid" as needing hyphens when used as compound adjectives modifying a noun.
🔧 Proposed fix
-**Two Column Grid**
+**Two-Column Grid**
...
-**Three Column Grid**
+**Three-Column Grid**
...
-**Four Column Grid**
+**Four-Column Grid**📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| **Two Column Grid** | |
| ```tsx | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <Statistic title="Metric 1" value={100} /> | |
| <Statistic title="Metric 2" value={200} /> | |
| <Statistic title="Metric 3" value={300} /> | |
| <Statistic title="Metric 4" value={400} /> | |
| </div> | |
| ``` | |
| **Three Column Grid** | |
| ```tsx | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <Statistic title="Metric 1" value={100} /> | |
| <Statistic title="Metric 2" value={200} /> | |
| <Statistic title="Metric 3" value={300} /> | |
| </div> | |
| ``` | |
| **Four Column Grid** | |
| ```tsx | |
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <Statistic title="Metric 1" value={100} /> | |
| <Statistic title="Metric 2" value={200} /> | |
| <Statistic title="Metric 3" value={300} /> | |
| <Statistic title="Metric 4" value={400} /> | |
| </div> | |
| **Two-Column Grid** |
🧰 Tools
🪛 LanguageTool
[grammar] ~206-~206: Use a hyphen to join words.
Context: ...tric 2" value={200} /> **Two Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
[grammar] ~216-~216: Use a hyphen to join words.
Context: ...ic 4" value={400} /> **Three Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
[grammar] ~225-~225: Use a hyphen to join words.
Context: ...ric 3" value={300} /> **Four Column Grid**tsx <div className="gri...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/eclipse/content/design-system/molecules/statistic.mdx` around lines 205
- 232, Update the three section headings that are compound adjectives by adding
hyphens: change the strings "Two Column Grid", "Three Column Grid", and "Four
Column Grid" to "Two-Column Grid", "Three-Column Grid", and "Four-Column Grid"
respectively in the statistic.mdx file so static analysis no longer flags them.
| /** | ||
| * The label text to display inside the badge | ||
| */ | ||
| label: string; | ||
| label: any; | ||
| } |
There was a problem hiding this comment.
Replace any with React.ReactNode for label.
Using any bypasses TypeScript entirely — at this call site the label renders inside a <span>, so React.ReactNode is the accurate, safe type. The JSDoc comment still says "label text", which is now doubly misleading.
🔧 Proposed fix
/**
- * The label text to display inside the badge
+ * The content to display inside the badge
*/
- label: any;
+ label: React.ReactNode;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** | |
| * The label text to display inside the badge | |
| */ | |
| label: string; | |
| label: any; | |
| } | |
| /** | |
| * The content to display inside the badge | |
| */ | |
| label: React.ReactNode; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/eclipse/src/components/badge.tsx` around lines 38 - 42, The prop
type for label is currently declared as any; change it to React.ReactNode in the
badge props interface so the label can accept text, elements, or fragments
safely (replace the type for the label property from any to React.ReactNode).
Update the JSDoc above label (and any description that says "label text") to
reflect that it can be any renderable React node. Ensure you import React types
if needed (e.g., add React import or use the global JSX namespace) and keep the
prop name label in the Badge component signature unchanged.
| import { Badge } from "./badge"; | ||
|
|
||
| interface StatisticProps { | ||
| title?: string; | ||
| value?: string | number; | ||
| measure?: string; | ||
| badge?: React.ReactNode; | ||
| badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning"; | ||
| } |
There was a problem hiding this comment.
Missing React import — React.ReactNode will fail TypeScript compilation.
React is not in scope. React.ReactNode on line 7 references the React namespace, which is not automatically available even with the new JSX transform (it only removes the JSX runtime import, not the namespace). Every other component in this package (e.g., badge.tsx) explicitly imports React. This will cause a Cannot find name 'React' compile error.
🐛 Proposed fix
+import * as React from "react";
import { Badge } from "./badge";Alternatively, import only the type you need:
+import type { ReactNode } from "react";
import { Badge } from "./badge";
interface StatisticProps {
...
- badge?: React.ReactNode;
+ badge?: ReactNode;
...
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { Badge } from "./badge"; | |
| interface StatisticProps { | |
| title?: string; | |
| value?: string | number; | |
| measure?: string; | |
| badge?: React.ReactNode; | |
| badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning"; | |
| } | |
| import * as React from "react"; | |
| import { Badge } from "./badge"; | |
| interface StatisticProps { | |
| title?: string; | |
| value?: string | number; | |
| measure?: string; | |
| badge?: React.ReactNode; | |
| badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning"; | |
| } |
| import { Badge } from "./badge"; | |
| interface StatisticProps { | |
| title?: string; | |
| value?: string | number; | |
| measure?: string; | |
| badge?: React.ReactNode; | |
| badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning"; | |
| } | |
| import type { ReactNode } from "react"; | |
| import { Badge } from "./badge"; | |
| interface StatisticProps { | |
| title?: string; | |
| value?: string | number; | |
| measure?: string; | |
| badge?: ReactNode; | |
| badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning"; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/eclipse/src/components/statistic.tsx` around lines 1 - 9, The file
uses React.ReactNode in the StatisticProps interface but never imports React,
causing a TypeScript error; add an import for React (or import the React type
only) at the top of the component file so the React namespace is in scope;
update the imports in packages/eclipse/src/components/statistic.tsx so the
StatisticProps interface (which references React.ReactNode) compiles correctly
(mirror how other components like badge.tsx import React).
| --font-mona-sans: | ||
| "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | ||
| "Helvetica Neue", Arial, sans-serif; |
There was a problem hiding this comment.
Unquoted font names will fail Stylelint — quote BlinkMacSystemFont, Roboto, and Arial.
Stylelint's value-keyword-case rule treats unquoted font-family identifiers as CSS keywords and requires lowercase. The simple fix is quoting them — note that "Segoe UI" and "Helvetica Neue" in the same line are already quoted. The rule flags these as hard errors, which will fail linting in CI.
🔧 Proposed fix
- --font-mona-sans:
- "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, sans-serif;
+ --font-mona-sans:
+ "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
+ "Helvetica Neue", "Arial", sans-serif;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --font-mona-sans: | |
| "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| "Helvetica Neue", Arial, sans-serif; | |
| --font-mona-sans: | |
| "Mona Sans", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", | |
| "Helvetica Neue", "Arial", sans-serif; |
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 75-75: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 75-75: Expected "Roboto" to be "roboto" (value-keyword-case)
(value-keyword-case)
[error] 76-76: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/eclipse/src/styles/globals.css` around lines 74 - 76, The CSS custom
property --font-mona-sans contains unquoted font family identifiers that fail
Stylelint (BlinkMacSystemFont, Roboto, Arial); update the value of
--font-mona-sans so those font names are quoted (e.g., "BlinkMacSystemFont",
"Roboto", "Arial") to match the existing quoted entries ("Segoe UI", "Helvetica
Neue") and satisfy the value-keyword-case rule in the styles/globals.css
declaration.
carlagn
requested review from
AmanVarshney01,
ArthurGamby,
aidankmcalister,
ankur-arch,
mhartington and
mhessdev
2 participants
Add statistic component
Add doc for statistic component
Summary by CodeRabbit
Release Notes
New Features
Documentation