feat: implement custom syntax-highlighted code block component and ad…#2
Conversation
…d language-specific API integration snippets
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
React Doctor found 27 new issues in 3 files · 27 warnings · score 49 / 100 (Critical) · 1 fixed · vs 27 warnings
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| } | ||
| }; | ||
|
|
||
| const exportWorkflow = async (id: string, name: string) => { |
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-pure-function (warning)
exportWorkflow inside FlowPage uses no local state but is rebuilt on every render, so it wastes work & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the function above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted work.
| } | ||
|
|
||
| function CodeBlock({ code, language }: CodeBlockProps) { | ||
| const highlight = (text: string, lang: string) => { |
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-pure-function (warning)
highlight inside CodeBlock uses no local state but is rebuilt on every render, so it wastes work & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the function above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted work.
| return parts.map((part, index) => { | ||
| if (part.startsWith("#") || part.startsWith('"""')) { | ||
| return ( | ||
| <span key={index} className="text-gray-400 font-mono italic"> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| (part.startsWith("'") && part.endsWith("'")) | ||
| ) { | ||
| return ( | ||
| <span key={index} className="text-emerald-600 font-mono"> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| ) | ||
| ) { | ||
| return ( | ||
| <span key={index} className="text-purple-600 font-mono font-semibold"> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| } | ||
| if (/^[0-9\.]+$/.test(part)) { | ||
| return ( | ||
| <span key={index} className="text-amber-600 font-mono"> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| ); | ||
| } | ||
| return ( | ||
| <span key={index} className="text-gray-800 font-mono"> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| else height = 18; | ||
|
|
||
| return ( | ||
| <button |
There was a problem hiding this comment.
React Doctor · react-doctor/control-has-associated-label (warning)
Blind users can't tell what this control does because screen readers find no label, so add visible text, aria-label, or aria-labelledby.
Fix → Give every interactive control a label screen readers can read.
| <SidebarMenu> | ||
| <SidebarMenuItem> | ||
| {collapsed ? ( | ||
| <button |
There was a problem hiding this comment.
React Doctor · react-doctor/button-has-type (warning)
Your users can submit the form by accident because a <button> with no type defaults to submit.
Fix → Set an explicit button type so plain buttons do not submit forms by accident: type="button", "submit", or "reset".
| )} | ||
| </SidebarMenuItem> | ||
| </SidebarMenu> | ||
| <ChevronUp className="size-4 text-gray-400 animate-bounce-subtle" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-inline-bounce-easing (warning)
Your users see a dated, tacky animate-bounce, so use a subtle ease-out transform for a smoother finish.
Fix → Use cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo) for a natural finish. Real objects don't bounce.
1 participant
…d language-specific API integration snippets