feat: complete monorepo migration with documentation system and usage-meter components #4
Conversation
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
- Update registry layout with proper container and grid structure - Simplify home page to cleaner introduction with installation example - Refactor sidebar for improved navigation - Update docs layout with consistent spacing - Refresh tokens page styling
|
You have run out of free Bugbot PR reviews for this billing cycle. This will reset on February 23. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
3 issues found across 8 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/www/public/r/usage-meter-base.json">
<violation number="1" location="apps/www/public/r/usage-meter-base.json:7">
P2: Avoid self-referencing the registry entry in registryDependencies; it creates a circular dependency for installers.</violation>
</file>
<file name="apps/www/public/r/usage-meter.json">
<violation number="1" location="apps/www/public/r/usage-meter.json:7">
P2: Avoid making a registry entry depend on itself; this creates a circular dependency during installation.</violation>
<violation number="2" location="apps/www/public/r/usage-meter.json:12">
P1: This registry entry no longer installs the usage-meter component; it installs a layout file instead. That will break consumers expecting the usage-meter component to be added.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst meterVariants = {\n default: \"bg-primary\",\n success: \"bg-chart-2\",\n warning: \"bg-chart-4\",\n danger: \"bg-destructive\",\n} as const;\n\nconst meterSizes = {\n sm: \"h-2\",\n default: \"h-3\",\n lg: \"h-4\",\n} as const;\n\ninterface UsageMeterProps\n extends Omit<\n React.ComponentProps<typeof ProgressPrimitive.Root>,\n \"value\" | \"max\"\n > {\n /** Current value (required) */\n value: number;\n /** Maximum value (default: 100) */\n max?: number;\n /** Visual variant */\n variant?: keyof typeof meterVariants;\n /** Size variant */\n size?: keyof typeof meterSizes;\n /** Optional label text */\n label?: string;\n /** Show percentage (default: true) */\n showPercentage?: boolean;\n}\n\nconst UsageMeter = React.forwardRef<\n React.ComponentRef<typeof ProgressPrimitive.Root>,\n UsageMeterProps\n>(\n (\n {\n className,\n value,\n max = 100,\n variant = \"default\",\n size = \"default\",\n label,\n showPercentage = true,\n ...props\n },\n ref,\n ) => {\n // Guard against max <= 0 to prevent division by zero and invalid progress state\n const safeMax = Math.max(1, max);\n const percentage = Math.round((value / safeMax) * 100);\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n\n return (\n <div data-slot=\"usage-meter-root\" className=\"w-full\">\n {(label || showPercentage) && (\n <div\n data-slot=\"usage-meter-header\"\n className=\"mb-1.5 flex items-center justify-between text-sm\"\n >\n {label && (\n <span\n data-slot=\"usage-meter-label\"\n className=\"font-medium text-foreground\"\n >\n {label}\n </span>\n )}\n {showPercentage && (\n <span\n data-slot=\"usage-meter-percentage\"\n className=\"text-muted-foreground tabular-nums\"\n >\n {clampedPercentage}%\n </span>\n )}\n </div>\n )}\n <ProgressPrimitive.Root\n ref={ref}\n data-slot=\"usage-meter\"\n value={value}\n max={safeMax}\n className={cn(\n \"relative w-full overflow-hidden rounded-full bg-secondary\",\n meterSizes[size],\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n data-slot=\"usage-meter-indicator\"\n className={cn(\n \"h-full w-full flex-1 transition-all duration-300 ease-in-out\",\n meterVariants[variant],\n )}\n style={{ transform: `translateX(-${100 - clampedPercentage}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n );\n },\n);\nUsageMeter.displayName = \"UsageMeter\";\n\nexport { UsageMeter, meterVariants, meterSizes };\nexport type { UsageMeterProps };\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/usage-meter.tsx" | ||
| "path": "src/layouts/minimal-layout.tsx", |
There was a problem hiding this comment.
P1: This registry entry no longer installs the usage-meter component; it installs a layout file instead. That will break consumers expecting the usage-meter component to be added.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/www/public/r/usage-meter.json, line 12:
<comment>This registry entry no longer installs the usage-meter component; it installs a layout file instead. That will break consumers expecting the usage-meter component to be added.</comment>
<file context>
@@ -3,17 +3,17 @@
- "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst meterVariants = {\n default: \"bg-primary\",\n success: \"bg-chart-2\",\n warning: \"bg-chart-4\",\n danger: \"bg-destructive\",\n} as const;\n\nconst meterSizes = {\n sm: \"h-2\",\n default: \"h-3\",\n lg: \"h-4\",\n} as const;\n\ninterface UsageMeterProps\n extends Omit<\n React.ComponentProps<typeof ProgressPrimitive.Root>,\n \"value\" | \"max\"\n > {\n /** Current value (required) */\n value: number;\n /** Maximum value (default: 100) */\n max?: number;\n /** Visual variant */\n variant?: keyof typeof meterVariants;\n /** Size variant */\n size?: keyof typeof meterSizes;\n /** Optional label text */\n label?: string;\n /** Show percentage (default: true) */\n showPercentage?: boolean;\n}\n\nconst UsageMeter = React.forwardRef<\n React.ComponentRef<typeof ProgressPrimitive.Root>,\n UsageMeterProps\n>(\n (\n {\n className,\n value,\n max = 100,\n variant = \"default\",\n size = \"default\",\n label,\n showPercentage = true,\n ...props\n },\n ref,\n ) => {\n // Guard against max <= 0 to prevent division by zero and invalid progress state\n const safeMax = Math.max(1, max);\n const percentage = Math.round((value / safeMax) * 100);\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n\n return (\n <div data-slot=\"usage-meter-root\" className=\"w-full\">\n {(label || showPercentage) && (\n <div\n data-slot=\"usage-meter-header\"\n className=\"mb-1.5 flex items-center justify-between text-sm\"\n >\n {label && (\n <span\n data-slot=\"usage-meter-label\"\n className=\"font-medium text-foreground\"\n >\n {label}\n </span>\n )}\n {showPercentage && (\n <span\n data-slot=\"usage-meter-percentage\"\n className=\"text-muted-foreground tabular-nums\"\n >\n {clampedPercentage}%\n </span>\n )}\n </div>\n )}\n <ProgressPrimitive.Root\n ref={ref}\n data-slot=\"usage-meter\"\n value={value}\n max={safeMax}\n className={cn(\n \"relative w-full overflow-hidden rounded-full bg-secondary\",\n meterSizes[size],\n className,\n )}\n {...props}\n >\n <ProgressPrimitive.Indicator\n data-slot=\"usage-meter-indicator\"\n className={cn(\n \"h-full w-full flex-1 transition-all duration-300 ease-in-out\",\n meterVariants[variant],\n )}\n style={{ transform: `translateX(-${100 - clampedPercentage}%)` }}\n />\n </ProgressPrimitive.Root>\n </div>\n );\n },\n);\nUsageMeter.displayName = \"UsageMeter\";\n\nexport { UsageMeter, meterVariants, meterSizes };\nexport type { UsageMeterProps };\n",
- "type": "registry:component",
- "target": "components/ui/usage-meter.tsx"
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n <html\n lang=\"en\"\n className={cn(\n GeistSans.variable,\n GeistMono.variable,\n MontserratSerif.variable,\n \"bg-background text-foreground\",\n )}\n >\n <body>\n <main className=\"mt-16 flex w-full justify-center\">\n <div className=\"container\">{children}</div>\n </main>\n </body>\n </html>\n );\n}\n",
+ "type": "registry:file",
</file context>
| "dependencies": [], | ||
| "registryDependencies": [], | ||
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter-base.json", |
There was a problem hiding this comment.
P2: Avoid self-referencing the registry entry in registryDependencies; it creates a circular dependency for installers.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/www/public/r/usage-meter-base.json, line 7:
<comment>Avoid self-referencing the registry entry in registryDependencies; it creates a circular dependency for installers.</comment>
<file context>
@@ -3,15 +3,17 @@
- "dependencies": [],
- "registryDependencies": [],
+ "registryDependencies": [
+ "https://usage-ui.vercel.app/r/usage-meter-base.json",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
</file context>
| "dependencies": [ | ||
| "radix-ui" | ||
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter.json", |
There was a problem hiding this comment.
P2: Avoid making a registry entry depend on itself; this creates a circular dependency during installation.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/www/public/r/usage-meter.json, line 7:
<comment>Avoid making a registry entry depend on itself; this creates a circular dependency during installation.</comment>
<file context>
@@ -3,17 +3,17 @@
- "dependencies": [
- "radix-ui"
+ "registryDependencies": [
+ "https://usage-ui.vercel.app/r/usage-meter.json",
+ "https://registry-starter.vercel.app/r/theme.json"
],
</file context>
Greptile OverviewGreptile SummaryThis PR updates the documentation system layout and styling to follow shadcn/ui patterns, but has critical issues in the generated registry files that will break component installations. Key Changes
Critical IssuesRegistry Files (Breaking)The generated registry JSON files have severe problems that will prevent component installations:
These files are in TypeScript IssuesBoth layout files use Recommendations
Confidence Score: 1/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant DocsLayout
participant RegistryLayout
participant Sidebar
participant RegistryJSON
User->>Browser: Visit documentation site
Browser->>DocsLayout: Load /docs/[slug]
DocsLayout->>Sidebar: Render RegistrySidebar
Sidebar->>RegistryJSON: Fetch component registry
Note over RegistryJSON: Generated files in public/r/
RegistryJSON-->>Sidebar: Return registry items
Sidebar->>Sidebar: Generate navigation menu
Sidebar-->>DocsLayout: Display sidebar with components
DocsLayout-->>Browser: Render docs page with sidebar
User->>Browser: Navigate to home page
Browser->>RegistryLayout: Load / route
RegistryLayout->>Sidebar: Render RegistrySidebar
Sidebar->>RegistryJSON: Fetch component registry
RegistryJSON-->>Sidebar: Return registry items
RegistryLayout-->>Browser: Render home with introduction
User->>Browser: Install component via shadcn CLI
Browser->>RegistryJSON: GET /r/usage-meter.json
Note over RegistryJSON: Should contain component code<br/>Currently has layout template
RegistryJSON-->>Browser: Return component definition
Browser->>User: Install fails or installs wrong file
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+19
to
+24
| style={ | ||
| { | ||
| "--sidebar-width": "calc(var(--spacing) * 64)", | ||
| "--top-spacing": "0", | ||
| } as React.CSSProperties | ||
| } |
There was a problem hiding this comment.
React.CSSProperties requires importing React
Suggested change
| style={ | |
| { | |
| "--sidebar-width": "calc(var(--spacing) * 64)", | |
| "--top-spacing": "0", | |
| } as React.CSSProperties | |
| } | |
| style={ | |
| { | |
| "--sidebar-width": "calc(var(--spacing) * 64)", | |
| "--top-spacing": "0", | |
| } as import("react").CSSProperties | |
| } |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/src/app/(registry)/layout.tsx
Line: 19:24
Comment:
`React.CSSProperties` requires importing `React`
```suggestion
style={
{
"--sidebar-width": "calc(var(--spacing) * 64)",
"--top-spacing": "0",
} as import("react").CSSProperties
}
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+19
to
+24
| style={ | ||
| { | ||
| "--sidebar-width": "calc(var(--spacing) * 64)", | ||
| "--top-spacing": "0", | ||
| } as React.CSSProperties | ||
| } |
There was a problem hiding this comment.
React.CSSProperties requires importing React
Suggested change
| style={ | |
| { | |
| "--sidebar-width": "calc(var(--spacing) * 64)", | |
| "--top-spacing": "0", | |
| } as React.CSSProperties | |
| } | |
| style={ | |
| { | |
| "--sidebar-width": "calc(var(--spacing) * 64)", | |
| "--top-spacing": "0", | |
| } as import("react").CSSProperties | |
| } |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/src/app/docs/layout.tsx
Line: 19:24
Comment:
`React.CSSProperties` requires importing `React`
```suggestion
style={
{
"--sidebar-width": "calc(var(--spacing) * 64)",
"--top-spacing": "0",
} as import("react").CSSProperties
}
```
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+3
to
+4
| "name": "Registry Starter", | ||
| "homepage": "https://registry-starter.vercel.app", |
There was a problem hiding this comment.
Registry name and homepage don't match the Usage UI project - these appear to be leftover values from "Registry Starter"
Suggested change
| "name": "Registry Starter", | |
| "homepage": "https://registry-starter.vercel.app", | |
| "name": "usage-ui", | |
| "homepage": "https://usage-ui.vercel.app", |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/public/r/registry.json
Line: 3:4
Comment:
Registry name and homepage don't match the Usage UI project - these appear to be leftover values from "Registry Starter"
```suggestion
"name": "usage-ui",
"homepage": "https://usage-ui.vercel.app",
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+809
to
+811
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter.json", | ||
| "https://registry-starter.vercel.app/r/theme.json" |
There was a problem hiding this comment.
Circular dependency - usage-meter depends on itself via https://usage-ui.vercel.app/r/usage-meter.json
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/public/r/registry.json
Line: 809:811
Comment:
Circular dependency - `usage-meter` depends on itself via `https://usage-ui.vercel.app/r/usage-meter.json`
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+826
to
+828
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter-base.json", | ||
| "https://registry-starter.vercel.app/r/theme.json" |
There was a problem hiding this comment.
Circular dependency - usage-meter-base depends on itself via https://usage-ui.vercel.app/r/usage-meter-base.json
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/public/r/registry.json
Line: 826:828
Comment:
Circular dependency - `usage-meter-base` depends on itself via `https://usage-ui.vercel.app/r/usage-meter-base.json`
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+6
to
+8
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter.json", | ||
| "https://registry-starter.vercel.app/r/theme.json" |
There was a problem hiding this comment.
Circular dependency and wrong file provided - should contain actual usage-meter component code, not a layout template
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/public/r/usage-meter.json
Line: 6:8
Comment:
Circular dependency and wrong file provided - should contain actual `usage-meter` component code, not a layout template
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+6
to
+8
| "registryDependencies": [ | ||
| "https://usage-ui.vercel.app/r/usage-meter-base.json", | ||
| "https://registry-starter.vercel.app/r/theme.json" |
There was a problem hiding this comment.
Circular dependency and wrong file provided - should contain actual usage-meter-base component code, not a layout template
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/www/public/r/usage-meter-base.json
Line: 6:8
Comment:
Circular dependency and wrong file provided - should contain actual `usage-meter-base` component code, not a layout template
How can I resolve this? If you propose a fix, please make it concise.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
apps/www) from the component library (packages/ui)usage-meterandusage-meter-basecomponents to the registry with variants (default, success, warning, danger) and size optionsTest plan
pnpm installcompletes without errorspnpm buildsucceeds for all packagespnpm devstarts the docs sitenpx shadcn add https://usage-ui.vercel.app/r/usage-meter.json/docs/[slug]Summary by cubic
Migrates the project to a pnpm + Turborepo monorepo, rebuilds the docs to match shadcn patterns, and publishes Usage Meter components via the registry with a new theme and improved navigation. This makes installation easier, improves docs UX, and sets up CI for reliable builds.
New Features
Migration
Written for commit 84ed9de. Summary will update on new commits.