chore: www packages page#542
Merged
softmarshmallow merged 2 commits intomainfrom Feb 17, 2026
Merged
Conversation
- Introduced the @grida/refig package, a headless Figma renderer for generating images and PDFs from Figma documents. - Updated the packages list and sitemap to include the new package. - Created a dedicated page for @grida/refig with detailed features, usage examples, and a demo video for user engagement.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
WalkthroughThe PR introduces a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
editor/app/(tools)/(packages)/packages/[%40grida]/refig/page.tsx (2)
64-88: Features list is duplicated fromdata.ts.These features are hardcoded here but already defined in
data.ts. Consider importing from the shared data source to keep them in sync.♻️ Suggested approach
import { packages } from "../../../data"; const refigPkg = packages.find((p) => p.name === "@grida/refig")!;Then render
refigPkg.features.map(...)instead of the hardcoded list.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@editor/app/`(tools)/(packages)/packages/[%40grida]/refig/page.tsx around lines 64 - 88, The hardcoded "Key Features" list is duplicated from data.ts; import the shared packages array (packages) from the data module, find the package entry for "@grida/refig" (e.g., const refigPkg = packages.find(p => p.name === "@grida/refig")!), and render the list by mapping refigPkg.features (refigPkg.features.map(...)) instead of the hardcoded <li> elements so the UI stays in sync with data.ts.
49-61: Use Tailwind utilities instead of inline styles and deprecated attributes.
- The inline
style={{ paddingBottom: "56.25%", position: "relative" }}can be replaced with Tailwind'saspect-videoutility (orrelative pb-[56.25%]).frameBorder="0"is a deprecated HTML attribute; use theborder-0class instead.♻️ Proposed fix
- <div - className="rounded-lg overflow-hidden border bg-muted" - style={{ paddingBottom: "56.25%", position: "relative" }} - > + <div className="rounded-lg overflow-hidden border bg-muted relative aspect-video"> <iframe src="https://player.vimeo.com/video/1165652748?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=0&muted=0&loop=0" className="absolute top-0 left-0 w-full h-full" - frameBorder="0" + className="absolute top-0 left-0 w-full h-full border-0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerPolicy="strict-origin-when-cross-origin" title="refig (headless figma renderer) demo" /> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@editor/app/`(tools)/(packages)/packages/[%40grida]/refig/page.tsx around lines 49 - 61, The JSX block rendering the video uses inline styles and a deprecated iframe attribute; replace the outer div's style={{ paddingBottom: "56.25%", position: "relative" }} with Tailwind utilities (e.g., use className="rounded-lg overflow-hidden border bg-muted relative aspect-video" or className="rounded-lg overflow-hidden border bg-muted relative pb-[56.25%]") and remove the deprecated frameBorder="0" on the iframe, instead add the Tailwind class border-0 to the iframe's className; update the iframe and outer div in the page.tsx component (the div wrapping the iframe and the iframe element with title "refig (headless figma renderer) demo") accordingly.editor/components/ui/navigation-menu.tsx (1)
8-23: Note:NavigationMenuViewportis always rendered insideNavigationMenu.
NavigationMenuViewportis rendered at line 21 inside theNavigationMenuwrapper, but it's also exported separately (line 127). This is the standard shadcn/ui pattern, but consumers should be aware that using theNavigationMenuwrapper already includes a viewport — rendering an additionalNavigationMenuViewportoutside would be redundant.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@editor/components/ui/navigation-menu.tsx` around lines 8 - 23, The NavigationMenu always renders NavigationMenuViewport internally which makes rendering a separate exported NavigationMenuViewport redundant; add an optional boolean prop (e.g. disableViewport or hideViewport) to the NavigationMenu component's props and use it to conditionally render NavigationMenuViewport inside NavigationMenu (update the forwardRef generic/type to include this prop and check it where NavigationMenuViewport is currently rendered), and add a short JSDoc comment near NavigationMenu and the exported NavigationMenuViewport explaining that the viewport is included by default and consumers should set disableViewport to true if they intend to render the viewport separately.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@editor/app/`(tools)/(packages)/packages/[%40grida]/refig/page.tsx:
- Around line 96-106: The code block inside the JSX <pre> / <code> is using an
indented template literal which preserves leading whitespace; hoist the template
literal out of the JSX into a top-level constant (e.g., nodeSnippet) and pass it
into <code>{nodeSnippet}</code> to remove the JSX indentation, or run a dedent
utility on the existing template literal before rendering (target the template
literal currently inside the <code> element and the <pre
className="bg-muted..."> wrapper).
---
Nitpick comments:
In `@editor/app/`(tools)/(packages)/packages/[%40grida]/refig/page.tsx:
- Around line 64-88: The hardcoded "Key Features" list is duplicated from
data.ts; import the shared packages array (packages) from the data module, find
the package entry for "@grida/refig" (e.g., const refigPkg = packages.find(p =>
p.name === "@grida/refig")!), and render the list by mapping refigPkg.features
(refigPkg.features.map(...)) instead of the hardcoded <li> elements so the UI
stays in sync with data.ts.
- Around line 49-61: The JSX block rendering the video uses inline styles and a
deprecated iframe attribute; replace the outer div's style={{ paddingBottom:
"56.25%", position: "relative" }} with Tailwind utilities (e.g., use
className="rounded-lg overflow-hidden border bg-muted relative aspect-video" or
className="rounded-lg overflow-hidden border bg-muted relative pb-[56.25%]") and
remove the deprecated frameBorder="0" on the iframe, instead add the Tailwind
class border-0 to the iframe's className; update the iframe and outer div in the
page.tsx component (the div wrapping the iframe and the iframe element with
title "refig (headless figma renderer) demo") accordingly.
In `@editor/components/ui/navigation-menu.tsx`:
- Around line 8-23: The NavigationMenu always renders NavigationMenuViewport
internally which makes rendering a separate exported NavigationMenuViewport
redundant; add an optional boolean prop (e.g. disableViewport or hideViewport)
to the NavigationMenu component's props and use it to conditionally render
NavigationMenuViewport inside NavigationMenu (update the forwardRef generic/type
to include this prop and check it where NavigationMenuViewport is currently
rendered), and add a short JSDoc comment near NavigationMenu and the exported
NavigationMenuViewport explaining that the viewport is included by default and
consumers should set disableViewport to true if they intend to render the
viewport separately.
Comment on lines
+96
to
+106
| <pre className="bg-muted rounded-lg p-4 text-sm overflow-x-auto"> | ||
| <code>{`import { writeFileSync } from "node:fs"; | ||
| import { FigmaDocument, FigmaRenderer } from "@grida/refig"; | ||
|
|
||
| const doc = FigmaDocument.fromFile("./design.fig"); | ||
| const renderer = new FigmaRenderer(doc); | ||
|
|
||
| const { data } = await renderer.render("1:23", { format: "png", scale: 2 }); | ||
| writeFileSync("out.png", data); | ||
| renderer.dispose();`}</code> | ||
| </pre> |
There was a problem hiding this comment.
Code blocks render with extra leading whitespace due to JSX indentation.
Template literals inside JSX <code> elements preserve all whitespace, including the indentation from the surrounding JSX. Each line of the code sample will have leading spaces matching the JSX nesting level, which renders poorly. Consider dedenting the template literal or using a separate constant.
🛠️ One approach — hoist to a constant
const nodeSnippet = `import { writeFileSync } from "node:fs";
import { FigmaDocument, FigmaRenderer } from "@grida/refig";
const doc = FigmaDocument.fromFile("./design.fig");
const renderer = new FigmaRenderer(doc);
const { data } = await renderer.render("1:23", { format: "png", scale: 2 });
writeFileSync("out.png", data);
renderer.dispose();`;Then use <code>{nodeSnippet}</code> without additional indentation.
Also applies to: 111-117
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@editor/app/`(tools)/(packages)/packages/[%40grida]/refig/page.tsx around
lines 96 - 106, The code block inside the JSX <pre> / <code> is using an
indented template literal which preserves leading whitespace; hoist the template
literal out of the JSX into a top-level constant (e.g., nodeSnippet) and pass it
into <code>{nodeSnippet}</code> to remove the JSX indentation, or run a dedent
utility on the existing template literal before rendering (target the template
literal currently inside the <code> element and the <pre
className="bg-muted..."> wrapper).
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
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 by CodeRabbit