feat(apollo-wind): comprehensive component stories update and cleanup#219
feat(apollo-wind): comprehensive component stories update and cleanup#2191980computer wants to merge 8 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency ReviewThe following issues were found:
License Issuespackages/apollo-wind/package.json
pnpm-lock.yaml
OpenSSF ScorecardScorecard details
Scanned Files
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
CalinaCristian
left a comment
CalinaCristian
left a comment
There was a problem hiding this comment.
Please split changes into smaller PR's. This is very hard to review with those many changes.
CalinaCristian
left a comment
CalinaCristian
left a comment
There was a problem hiding this comment.
not ready for merge.
CalinaCristian
changed the base branch from
main
to
feature/getting-started-only
CalinaCristian
changed the base branch from
feature/getting-started-only
to
main
CalinaCristian
force-pushed
the
feature/improve-templates-and-components
branch
2 times, most recently
from
b143a40 to
20331ca
Compare
1980computer
force-pushed
the
feature/improve-templates-and-components
branch
from
20331ca to
871eedb
Compare
CalinaCristian
force-pushed
the
feature/improve-templates-and-components
branch
from
871eedb to
0e62f23
Compare
1980computer
force-pushed
the
feature/improve-templates-and-components
branch
4 times, most recently
from
0c4b6e7 to
6007acc
Compare
1980computer
force-pushed
the
feature/improve-templates-and-components
branch
4 times, most recently
from
96d36de to
f2e1dfe
Compare
CalinaCristian
added
the
dev-packages
…g, and AI prototyping - Add Maestro, Delegate, Admin, and Flow template systems with multiple page variants (Landing, Dashboard, Settings, Data Management, Properties) - Implement dual-theme architecture: Future (dark/light) and Legacy (dark/light) with CSS custom properties and shadcn bridge pattern - Add custom components: MaestroHeader, FlowPanel, PropertiesSimple, PropertiesExpanded, Canvas, ChatComposer, and more - Create Prototyping documentation page with 5 tabs: Overview, Use Cases, Use Figma, Use AI, and Best Practices - Add apollo-ai-context.md — portable AI context file for consistent prototyping with LLMs (components, tokens, patterns, rules) - Install and configure @storybook/addon-mcp for live component metadata exposure to AI coding agents - Install and configure @storybook/addon-a11y for accessibility auditing - Hide addons panel by default, remove background switcher from toolbar - Reorganize Storybook sidebar: flatten Templates (remove Future folder), rename Current to Xrchive, rename Theme/Current to Theme/Legacy - Move legacy-theme.css to foundation/Future/ alongside future-theme.css - Upgrade all component stories to use Storybook categories - Delete deprecated example files and consolidate into new template system Co-authored-by: Cursor <cursoragent@cursor.com> feat(apollo-wind): add Getting Started section with templates, theming, and AI prototyping - Add Getting Started landing page and AI prototyping documentation - Implement Future theme system (dark/light) with CSS custom properties - Add gradient tokens (6 theme-aware gradients) to foundation - Create shared FutureTheme type for consistent theme prop typing - Add Onboarding, Agentic Process, and Empty & Errors template sections - Implement Flow template responsive panel behavior and properties panels - Add global theme sync for Radix portal components via preview decorator - Add aria-label and type="button" to all icon-only buttons for accessibility - Remove unused imports, functions, and dead code across story files - Delete legacy Xrchive templates (New Project, VSCode) Co-authored-by: Cursor <cursoragent@cursor.com>
Expand Storybook documentation with rich, structured stories for 20+ components following a consistent format (Basic, Variants, Examples). Reorganize component categories, remove unused components, and fix theme issues. Components updated: - Alert, Alert Dialog, Accordion, Badge, Breadcrumb, Combobox, Command, Context Menu, Data Table, Dialog, Dropdown, Empty State, Hover Card, Pagination, Popover, Progress, Sheet, Skeleton, Sonner/Toast, Spinner, Tabs, Tooltip Components removed: - Menubar, Navigation Menu (unused, not needed for design system) - Drawer (consolidated into Sheet/Drawer component) - Table stories (covered by Data Table) - Pattern Drawer/Modal experiments Reorganization: - Move Search, Calendar, Collapsible to UiPath-review folder - Move Alert, Spinner to Feedback category - Move Context Menu to Navigation category - Rename Sonner to Toast (Sonner), Dropdown Menu to Dropdown - Rename Sheet to Drawer (Sheet) Fixes: - Add --color-destructive-foreground to future-theme.css - Fix Context Menu forwardRef for right-click support - Enhance EmptyState with code prop and children support Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com> Made-with: Cursor
CalinaCristian
force-pushed
the
feature/improve-templates-and-components
branch
from
f2e1dfe to
f59e7b3
Compare
📦 Dev Packages
|
1980computer
force-pushed
the
feature/improve-templates-and-components
branch
from
e106daa to
e84c0fa
Compare
…e files - Rename CSS tokens from future-*/legacy-* prefixed to bare names (e.g. --color-future-surface → --surface) scoped by class selectors - Adopt shadcn convention: bare vars for definitions, --color-* via @theme - Add shadcn aliases in each theme for component compatibility - Rename "accent" token to "brand" to avoid shadcn naming conflict - Consolidate legacy-theme.css into themes.css (renamed from future-theme.css) - Rename demo theme classes: future-wireframe → wireframe, etc. - Rename legacy-dark/legacy-light → core-dark/core-light - Move legacy storybook files to top-level foundation folder - Reformat all theme comments to inline for improved readability - Update all components, templates, stories, and docs to match Made-with: Cursor
1980computer
force-pushed
the
feature/improve-templates-and-components
branch
from
e84c0fa to
5a04b5f
Compare
There was a problem hiding this comment.
Pull request overview
Updates Apollo Wind’s Storybook documentation structure and expands component examples, while cleaning up unused example pages/components and adding several new UiPath-specific template building blocks.
Changes:
- Removed legacy “Examples/*” stories and unused UI components (e.g., Menubar, Navigation Menu, old Drawer) plus their exports/tests.
- Reorganized Storybook sidebar categories and refreshed many stories to a consistent “Basic / Variants / Examples” format.
- Added new UI/template utilities (e.g., Chart, TreeView stories, ViewportGuard, UiPath panels/toolbars) and enhanced existing components (EmptyState, DataTable).
Reviewed changes
Copilot reviewed 119 out of 202 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-wind/src/examples/flow-start-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/examples/flow-editor-layout-example.tsx | Removed legacy example component |
| packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/examples/data-management-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/examples/dashboard-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/examples/app-shell-example.tsx | Removed legacy example component |
| packages/apollo-wind/src/examples/app-shell-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/examples/admin-layout-example.stories.tsx | Removed legacy example story |
| packages/apollo-wind/src/components/ui/tree-view.stories.tsx | Added comprehensive TreeView stories |
| packages/apollo-wind/src/components/ui/toggle.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/toggle-group.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/textarea.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/switch.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/stepper.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/stats-card.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/spinner.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/slider.stories.tsx | Expanded Slider stories and examples |
| packages/apollo-wind/src/components/ui/sheet.stories.tsx | Renamed/reframed Sheet as Drawer (Sheet) + richer stories |
| packages/apollo-wind/src/components/ui/separator.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/select.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/search.stories.tsx | Moved Search under Navigation |
| packages/apollo-wind/src/components/ui/scroll-area.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/resizable.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/radio-group.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/popover.stories.tsx | Expanded Popover stories and examples |
| packages/apollo-wind/src/components/ui/multi-select.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/table.stories.tsx | Removed Table stories (covered elsewhere) |
| packages/apollo-wind/src/components/ui/navigation-menu.tsx | Removed unused Navigation Menu component |
| packages/apollo-wind/src/components/ui/navigation-menu.test.tsx | Removed tests for deleted component |
| packages/apollo-wind/src/components/ui/navigation-menu.stories.tsx | Removed stories for deleted component |
| packages/apollo-wind/src/components/ui/menubar.tsx | Removed unused Menubar component |
| packages/apollo-wind/src/components/ui/menubar.test.tsx | Removed tests for deleted component |
| packages/apollo-wind/src/components/ui/menubar.stories.tsx | Removed stories for deleted component |
| packages/apollo-wind/src/components/ui/drawer.test.tsx | Removed tests for deleted Drawer (Vaul) |
| packages/apollo-wind/src/components/ui/drawer.stories.tsx | Removed stories for deleted Drawer (Vaul) |
| packages/apollo-wind/src/components/ui/collapsible.stories.tsx | Removed Collapsible story (moved to review) |
| packages/apollo-wind/src/components/ui/layout/row.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/layout/grid.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/layout/column.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/label.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/input.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/file-upload.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/empty-state.tsx | Enhanced EmptyState API (code + children) |
| packages/apollo-wind/src/components/ui/empty-state.stories.tsx | Expanded EmptyState stories |
| packages/apollo-wind/src/components/ui/data-table.tsx | Added controlled rowSelection + toolbarContent slot |
| packages/apollo-wind/src/components/ui/chart.tsx | Added reusable Chart primitives and theming |
| packages/apollo-wind/src/components/ui/button.tsx | Updated button rounding defaults |
| packages/apollo-wind/src/components/ui/button.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/button-group.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/breadcrumb.stories.tsx | Expanded Breadcrumb stories + dropdown patterns |
| packages/apollo-wind/src/components/ui/badge.stories.tsx | Expanded Badge stories + examples |
| packages/apollo-wind/src/components/ui/datetime-picker.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/date-picker.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/checkbox.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/card.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/calendar.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/aspect-ratio.stories.tsx | Storybook category reorg |
| packages/apollo-wind/src/components/ui/index.ts | Removed deleted exports; added TreeView export/types |
| packages/apollo-wind/src/components/custom/viewport-guard.tsx | Added viewport guard utility + hook |
| packages/apollo-wind/src/components/custom/toolbar-view.tsx | Added Flow view toolbar component |
| packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx | Added Flow view toolbar story |
| packages/apollo-wind/src/components/custom/toolbar-canvas.tsx | Added Flow canvas toolbar component |
| packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx | Added Flow canvas toolbar story |
| packages/apollo-wind/src/components/custom/panel-maestro.tsx | Added Maestro-style collapsible panel |
| packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx | Added Maestro panel stories |
| packages/apollo-wind/src/components/custom/panel-flow.tsx | Added Flow left rail + expanded chat panel |
| packages/apollo-wind/src/components/custom/panel-flow.stories.tsx | Added Flow panel stories |
| packages/apollo-wind/src/components/custom/panel-delegate.tsx | Added Delegate collapsible navigation panel |
| packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx | Added Delegate panel stories |
| packages/apollo-wind/src/components/custom/grid-maestro.tsx | Added Maestro grid/canvas primitives |
| packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx | Added Maestro grid stories |
| packages/apollo-wind/src/components/custom/global-header.stories.tsx | Added Global Header stories |
| packages/apollo-wind/src/components/custom/flow-properties.tsx | Added Flow properties wrapper (bar/expanded) |
| packages/apollo-wind/src/components/custom/flow-properties.stories.tsx | Added Flow properties stories |
| packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx | Added expanded Flow properties UI |
| packages/apollo-wind/src/components/custom/flow-properties-bar.tsx | Added collapsed Flow properties bar |
| packages/apollo-wind/src/components/custom/flow-node.tsx | Added Flow node card component |
| packages/apollo-wind/src/components/custom/flow-node.stories.tsx | Added Flow node stories |
| packages/apollo-wind/src/components/custom/chat-steps-view.tsx | Added Delegate “Steps” view content |
| packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx | Added Steps view story |
| packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx | Added prompt suggestions list component |
| packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx | Added prompt suggestions story |
| packages/apollo-wind/src/components/custom/chat-first-experience.tsx | Added Delegate first-run chat experience |
| packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx | Added first-run chat story |
| packages/apollo-wind/src/components/custom/chat-composer.tsx | Added reusable chat composer |
| packages/apollo-wind/src/components/custom/chat-composer.stories.tsx | Added chat composer story |
| packages/apollo-wind/src/components/custom/canvas.tsx | Added Delegate canvas surface component |
| packages/apollo-wind/src/components/custom/canvas.stories.tsx | Added canvas story |
| packages/apollo-wind/package.json | Added Storybook addons + new UI deps |
| packages/apollo-wind/.storybook/theme.js | Removed Storybook theme module |
| packages/apollo-wind/.storybook/preview.tsx | Added viewport presets + new theme toolbar + layout wrapper |
| packages/apollo-wind/.storybook/preview-head.html | Added external font loading for Storybook |
| packages/apollo-wind/.storybook/manager.ts | Updated manager config (sidebar collapse roots, hide panel) |
| packages/apollo-wind/.storybook/manager.js | Removed legacy manager config |
| packages/apollo-wind/.storybook/main.ts | Added a11y + MCP addons; enabled manifest; adjusted Vite envDir |
| import theme from './theme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme, |
There was a problem hiding this comment.
The PR deletes .storybook/theme.js, but manager.ts still imports ./theme. If there isn’t a new theme.ts/tsx/js added elsewhere, this will break Storybook’s manager build. Consider either restoring the theme module (as TS/JS) or updating manager.ts to use an inline theme (or remove the import if not needed).
| rowSelection?: Record<string, boolean>; | ||
| onRowSelectionChange?: (selection: Record<string, boolean>) => void; | ||
| toolbarContent?: React.ReactNode; |
There was a problem hiding this comment.
internalRowSelection is initialized with React.useState({}) without a type, which typically infers {} and can lead to type mismatches once you treat it as Record<string, boolean>. Recommend typing the state explicitly (and, ideally, aligning the prop types with TanStack’s RowSelectionState / OnChangeFn<RowSelectionState> to match what useReactTable expects).
| const [internalRowSelection, setInternalRowSelection] = React.useState({}); | ||
|
|
||
| const isControlled = controlledRowSelection !== undefined; | ||
| const rowSelection = isControlled ? controlledRowSelection : internalRowSelection; | ||
| const setRowSelection = React.useCallback( | ||
| (updater: React.SetStateAction<Record<string, boolean>>) => { | ||
| const next = typeof updater === 'function' ? updater(rowSelection) : updater; | ||
| if (!isControlled) setInternalRowSelection(next); | ||
| controlledOnRowSelectionChange?.(next); | ||
| }, | ||
| [isControlled, rowSelection, controlledOnRowSelectionChange], | ||
| ); |
There was a problem hiding this comment.
internalRowSelection is initialized with React.useState({}) without a type, which typically infers {} and can lead to type mismatches once you treat it as Record<string, boolean>. Recommend typing the state explicitly (and, ideally, aligning the prop types with TanStack’s RowSelectionState / OnChangeFn<RowSelectionState> to match what useReactTable expects).
| const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { | ||
| const colorConfig = Object.entries(config).filter( | ||
| ([, config]) => config.theme || config.color, | ||
| ); | ||
|
|
||
| if (!colorConfig.length) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <style | ||
| dangerouslySetInnerHTML={{ | ||
| __html: Object.entries(THEMES) | ||
| .map( | ||
| ([theme, prefix]) => ` | ||
| ${prefix} [data-chart=${id}] { | ||
| ${colorConfig | ||
| .map(([key, itemConfig]) => { | ||
| const color = | ||
| itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || | ||
| itemConfig.color; | ||
| return color ? ` --color-${key}: ${color};` : null; | ||
| }) | ||
| .join('\n')} | ||
| } | ||
| `, | ||
| ) | ||
| .join('\n'), | ||
| }} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
dangerouslySetInnerHTML is building CSS from config keys/values and from id. In runtime/library code, this creates a clear injection risk if any of these inputs ever comes from untrusted data (e.g., malicious id, series keys, or color strings containing </style> or CSS-breaking tokens). Safer options include: (1) avoiding dangerouslySetInnerHTML by setting CSS variables directly on the container via style/inline variables, and/or (2) strictly validating/escaping id and config keys (e.g., allowlist ^[a-z0-9-]+$) and quoting attribute selectors ([data-chart="..."]).
| const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { | |
| const colorConfig = Object.entries(config).filter( | |
| ([, config]) => config.theme || config.color, | |
| ); | |
| if (!colorConfig.length) { | |
| return null; | |
| } | |
| return ( | |
| <style | |
| dangerouslySetInnerHTML={{ | |
| __html: Object.entries(THEMES) | |
| .map( | |
| ([theme, prefix]) => ` | |
| ${prefix} [data-chart=${id}] { | |
| ${colorConfig | |
| .map(([key, itemConfig]) => { | |
| const color = | |
| itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || | |
| itemConfig.color; | |
| return color ? ` --color-${key}: ${color};` : null; | |
| }) | |
| .join('\n')} | |
| } | |
| `, | |
| ) | |
| .join('\n'), | |
| }} | |
| /> | |
| ); | |
| const sanitizeCssToken = (value: string): string => | |
| value.replace(/[^a-z0-9-]/gi, ''); | |
| const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { | |
| const colorConfig = Object.entries(config).filter( | |
| ([, itemConfig]) => itemConfig.theme || itemConfig.color, | |
| ); | |
| if (!colorConfig.length) { | |
| return null; | |
| } | |
| const safeId = sanitizeCssToken(id); | |
| const css = Object.entries(THEMES) | |
| .map(([theme, prefix]) => { | |
| const lines = colorConfig | |
| .map(([key, itemConfig]) => { | |
| const color = | |
| itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || | |
| itemConfig.color; | |
| const safeKey = sanitizeCssToken(key); | |
| if (!color || !safeKey) { | |
| return null; | |
| } | |
| return ` --color-${safeKey}: ${color};`; | |
| }) | |
| .filter(Boolean) | |
| .join('\n'); | |
| if (!lines) { | |
| return ''; | |
| } | |
| return `${prefix} [data-chart="${safeId}"] {\n${lines}\n}`; | |
| }) | |
| .filter(Boolean) | |
| .join('\n'); | |
| if (!css) { | |
| return null; | |
| } | |
| return <style>{css}</style>; |
| {item.value && ( | ||
| <span className="text-foreground font-mono font-medium tabular-nums"> | ||
| {item.value.toLocaleString()} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
This conditional hides legitimate values like 0 because it relies on truthiness. Use an explicit null/undefined check instead (e.g., item.value !== undefined && item.value !== null) so zero values render correctly.
| <button | ||
| className={cn( | ||
| 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', | ||
| activeTab === 'properties' | ||
| ? 'border border-border bg-surface text-foreground' | ||
| : 'text-foreground-subtle' | ||
| )} | ||
| > |
There was a problem hiding this comment.
PropertiesExpanded exposes activeTab and renders two tab-like buttons, but there’s no onTabChange prop and the buttons don’t have onClick handlers. This makes the “tabs” non-functional and can confuse consumers of the component API. Consider either adding onTabChange and wiring the buttons, or rendering them as non-interactive (e.g., div / aria-disabled) until switching is supported.
| <button | ||
| className={cn( | ||
| 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', | ||
| activeTab === 'variables' | ||
| ? 'border border-border bg-surface text-foreground' | ||
| : 'text-foreground-subtle' | ||
| )} | ||
| > |
There was a problem hiding this comment.
PropertiesExpanded exposes activeTab and renders two tab-like buttons, but there’s no onTabChange prop and the buttons don’t have onClick handlers. This makes the “tabs” non-functional and can confuse consumers of the component API. Consider either adding onTabChange and wiring the buttons, or rendering them as non-interactive (e.g., div / aria-disabled) until switching is supported.
| export function Panel({ | ||
| side, | ||
| children, | ||
| className, | ||
| isCollapsed = false, | ||
| onToggle, | ||
| }: PanelProps) { |
There was a problem hiding this comment.
The exported component name Panel is extremely generic and likely to collide/confuse when imported alongside other panels (especially since this is in a shared component package). Consider renaming to something specific like MaestroPanel, CollapsibleSidePanel, or MaestroSidePanel.
| <button | ||
| className={cn( | ||
| 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', | ||
| activeMode === 'build' | ||
| ? 'border border-border bg-surface text-foreground' | ||
| : 'text-foreground-subtle hover:text-foreground-hover' | ||
| )} | ||
| onClick={() => onModeChange?.('build')} | ||
| > |
There was a problem hiding this comment.
Several newly added reusable components use <button> without setting type="button" (e.g., toolbars/panels). In a library component, this can cause unintended form submissions when used inside a <form> (default type is "submit"). Recommend adding type="button" to non-submit buttons throughout these custom components.
| export { | ||
| ChartContainer, | ||
| ChartTooltip, | ||
| ChartTooltipContent, | ||
| ChartLegend, | ||
| ChartLegendContent, | ||
| ChartStyle, | ||
| }; |
There was a problem hiding this comment.
chart.tsx introduces a sizable runtime API surface (container/context, tooltip rendering, legend rendering, CSS theming). Given this package already uses component/unit tests elsewhere, it would be good to add tests covering at least: (1) ChartContainer context wiring, (2) ChartTooltipContent rendering with 0 values / multiple payload entries, and (3) ChartStyle output behavior for theme/color configs.
- Type internalRowSelection state as Record<string, boolean> (data-table) - Sanitize CSS tokens and remove dangerouslySetInnerHTML (chart) - Fix zero-value hidden by truthiness check in chart tooltip - Add onTabChange prop and wire tab buttons (flow-properties-expanded) - Add type="button" to all <button> elements in custom components - Rename Panel → MaestroPanel to avoid generic naming collisions - Remove unused imports (Input, FileText, MoreHorizontal, CreditCard, Settings) Made-with: Cursor
| <div className="flex items-center justify-between"> | ||
| {/* Left actions */} | ||
| <div className="flex items-center gap-1"> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, duplicate HTML attributes should be resolved by keeping a single, correct instance of the attribute and removing the others. When all duplicates have the same value, you can safely delete the extras without changing behavior.
For this file, each <button> currently declares type="button" twice. The best fix that preserves existing functionality is to keep one type="button" per button and remove the redundant one on the following elements: the "Add attachment" button (lines 71–75), the "Add workflow" button (lines 78–82), and the "Submit message" button (lines 88–93). No imports or new functions are needed; only attribute lists on these three <button> tags should be edited.
| @@ -68,14 +68,14 @@ | ||
| <div className="flex items-center justify-between"> | ||
| {/* Left actions */} | ||
| <div className="flex items-center gap-1"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5 text-foreground-inverse" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add workflow" | ||
| @@ -85,7 +79,7 @@ | ||
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90" | ||
| onClick={handleSubmit} |
| > | ||
| <Plus className="h-5 w-5 text-foreground-inverse" /> | ||
| </button> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, to fix duplicate HTML/JSX attributes, you remove all but one occurrence of each attribute on the element, keeping the intended value. If the values differ, you must decide which value is correct; if they are the same (as here), you can keep either occurrence.
For this file, the best fix that preserves existing functionality is to remove the extra type="button" attributes and leave a single type="button" prop for each <button> element. Specifically:
- In the first left‑actions button (around line 71–73), remove the second
type="button"line and keep onetype="button"attribute. - In the second left‑actions button (around line 78–80), remove the second
type="button"line and keep onetype="button"attribute. - In the submit button (around line 88–90), remove the second
type="button"line and keep onetype="button"attribute.
No new methods, imports, or definitions are needed; we are only cleaning up JSX attributes.
| @@ -68,14 +68,14 @@ | ||
| <div className="flex items-center justify-between"> | ||
| {/* Left actions */} | ||
| <div className="flex items-center gap-1"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5 text-foreground-inverse" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add workflow" | ||
| @@ -85,7 +79,7 @@ | ||
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90" | ||
| onClick={handleSubmit} |
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, to fix duplicate HTML/JSX attributes, keep a single instance of the attribute with the intended value and remove all others from the same element. This preserves behaviour while making the markup valid.
Here, each <button> element has type="button" repeated twice on consecutive lines. The best fix without changing functionality is to delete the second type="button" attribute from each button, leaving just one type="button" per element. No new imports, methods, or definitions are needed.
Concretely in packages/apollo-wind/src/components/custom/chat-composer.tsx:
- For the "Add attachment" button (lines 71–75), remove the second
type="button"on line 72. - For the "Add workflow" button (lines 78–82), remove the second
type="button"on line 79. - For the "Submit message" button (lines 88–93), remove the second
type="button"on line 89.
| @@ -68,14 +68,14 @@ | ||
| <div className="flex items-center justify-between"> | ||
| {/* Left actions */} | ||
| <div className="flex items-center gap-1"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5 text-foreground-inverse" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80" | ||
| aria-label="Add workflow" | ||
| @@ -85,7 +79,7 @@ | ||
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90" | ||
| onClick={handleSubmit} |
| <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5"> | ||
| {/* Back + Title */} | ||
| <div className="flex shrink-0 items-center gap-4"> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, duplicate HTML/JSX attributes should be resolved by keeping exactly one instance of the attribute with the correct value and deleting the others. For a <button> in React/TSX, a single type="button" is sufficient to ensure the button does not default to submit behavior inside forms.
In this specific case, the best fix without changing functionality is to remove one of the duplicate type="button" attributes on the <button> element at lines 234–235 in packages/apollo-wind/src/components/custom/chat-steps-view.tsx. We should keep a single type="button" attribute (for example, on line 234) and delete the redundant one (line 235), leaving the rest of the button’s props (className, onClick, aria-label) untouched. No imports, methods, or additional definitions are required.
| @@ -231,7 +231,7 @@ | ||
| <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5"> | ||
| {/* Back + Title */} | ||
| <div className="flex shrink-0 items-center gap-4"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="shrink-0 text-foreground transition-colors hover:text-foreground" | ||
| onClick={onBack} |
| placeholder={field.placeholder} | ||
| className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0" | ||
| /> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, duplicate HTML/JSX attributes should be resolved by retaining a single, correct instance of the attribute and removing the extras. When multiple attributes have different values, you must determine which value is actually intended; here they are the same ("button"), so the fix is straightforward.
For this file, in the <button> inside the field.type === 'url' branch (around lines 151–157), remove one of the type="button" attributes and keep exactly one. No imports, new methods, or other definitions are required; this is a purely local JSX cleanup that preserves existing behavior.
Concretely:
- In
packages/apollo-wind/src/components/custom/flow-properties-simple.tsx, locate the<button>that currently has:<button type="button" type="button" className="..."
- Replace it so it only has a single
type="button"attribute:<button type="button" className="..."
| @@ -148,7 +148,7 @@ | ||
| placeholder={field.placeholder} | ||
| className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0" | ||
| /> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground" | ||
| aria-label="Browse files" |
| > | ||
| <MessageCirclePlus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, to fix duplicate HTML/JSX attributes, keep only one instance of the attribute per element, ensuring that the remaining value is the intended one. When duplicates share the same value, you can safely delete the extra copies.
Here, each button has type="button" written twice. The correct, non‑breaking fix is to remove the redundant type="button" from each affected button, leaving a single type="button" attribute. No new imports or helper functions are needed. Concretely:
- At lines 250–251, remove the second
type="button"line. - At lines 257–258, remove the second
type="button"line. - At lines 265–266, remove the second
type="button"line.
The remaining attributes (className, aria-label, onClick) remain unchanged, preserving existing behavior and accessibility.
| @@ -247,14 +247,14 @@ | ||
| {panelOpen && ( | ||
| <div className="flex flex-1 items-center justify-between"> | ||
| <div className="flex items-center gap-[18px]"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| aria-label="New conversation" | ||
| > | ||
| <MessageCirclePlus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| aria-label="Picture in picture" | ||
| @@ -262,7 +256,7 @@ | ||
| <PictureInPicture2 className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| onClick={() => setPanelOpen(false)} |
| <PictureInPicture2 className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
Generally, to fix duplicate HTML/JSX attributes, keep only one instance of the attribute per element, ensuring it has the intended value, and delete all redundant duplicates.
Here, the correct behavior is clearly that each of these <button> elements should have a single type="button" attribute. To fix without changing functionality, for each affected <button> tag in packages/apollo-wind/src/components/custom/panel-delegate.tsx, remove the second type="button" so each button declares type only once. No imports, new methods, or other code changes are required; the only edits are to the JSX for the three buttons within the header actions section (the "New conversation", "Picture in picture", and "Collapse panel" buttons).
| @@ -247,14 +247,14 @@ | ||
| {panelOpen && ( | ||
| <div className="flex flex-1 items-center justify-between"> | ||
| <div className="flex items-center gap-[18px]"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| aria-label="New conversation" | ||
| > | ||
| <MessageCirclePlus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| aria-label="Picture in picture" | ||
| @@ -262,7 +256,7 @@ | ||
| <PictureInPicture2 className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="text-foreground-muted transition-colors hover:text-foreground" | ||
| onClick={() => setPanelOpen(false)} |
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, to fix duplicate HTML/JSX attributes, keep only one instance of the attribute and remove the redundant copies, especially when the values are identical. This preserves behavior while making the markup standards-compliant and clearer.
For this specific file, packages/apollo-wind/src/components/custom/panel-flow.tsx, within the ChatInput function, there are three <button> elements that each declare type="button" twice on adjacent lines. The fix is to remove the extra type="button" on lines 165, 172, and 180, leaving a single type="button" per <button>. No new imports, methods, or definitions are required; this is a simple JSX cleanup that does not alter existing functionality.
| @@ -161,14 +161,14 @@ | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add workflow" | ||
| @@ -176,7 +170,7 @@ | ||
| <Workflow className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent" | ||
| aria-label="Submit message" |
| > | ||
| <Plus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, to fix duplicate HTML/JSX attributes, keep only a single occurrence of each attribute on a given element, preserving the correct/desired value, and delete the redundant duplicates.
Here, each affected <button> already has type="button" twice with the same value. The safest fix that does not change functionality is to remove the second occurrence in each case and leave one type="button" on each button. Specifically, in packages/apollo-wind/src/components/custom/panel-flow.tsx inside the ChatInput function:
- For the first small icon button (
aria-label="Add attachment"), delete the secondtype="button"line (line 165). - For the second small icon button (
aria-label="Add workflow"), delete the secondtype="button"line (line 172). - For the large round submit button (
aria-label="Submit message"), delete the secondtype="button"line (line 180).
No new imports, methods, or other definitions are required; we only remove redundant attributes from existing JSX.
| @@ -161,14 +161,14 @@ | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add workflow" | ||
| @@ -176,7 +170,7 @@ | ||
| <Workflow className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent" | ||
| aria-label="Submit message" |
| <Workflow className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" |
Check warning
Code scanning / CodeQL
Duplicate HTML element attributes Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
In general, the fix is to ensure each JSX/HTML element has at most one instance of any given attribute. When duplicates exist with the same value, you can safely remove all but one of them without changing behavior.
Specifically here, in packages/apollo-wind/src/components/custom/panel-flow.tsx, inside the ChatInput function, there are three <button> elements (for "Add attachment", "Add workflow", and "Submit message") that each specify type="button" twice on consecutive lines. To fix this without changing functionality, delete the second type="button" from each <button> so that each has a single type="button" prop. No new imports, methods, or definitions are required; this is a pure JSX cleanup.
| @@ -161,14 +161,14 @@ | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add attachment" | ||
| > | ||
| <Plus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground" | ||
| aria-label="Add workflow" | ||
| @@ -176,7 +170,7 @@ | ||
| <Workflow className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" | ||
| <button | ||
| type="button" | ||
| className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent" | ||
| aria-label="Submit message" |
| <div className="flex items-center justify-between"> | ||
| {/* Left actions */} | ||
| <div className="flex items-center gap-1"> | ||
| <button type="button" |
| > | ||
| <Plus className="h-5 w-5 text-foreground-inverse" /> | ||
| </button> | ||
| <button type="button" |
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button type="button" |
| <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5"> | ||
| {/* Back + Title */} | ||
| <div className="flex shrink-0 items-center gap-4"> | ||
| <button type="button" |
| placeholder={field.placeholder} | ||
| className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0" | ||
| /> | ||
| <button type="button" |
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <button type="button" |
| > | ||
| <Plus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" |
| <Workflow className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| <button type="button" |
| {panelOpen && ( | ||
| <div className="flex flex-1 items-center justify-between"> | ||
| <div className="flex items-center gap-[18px]"> | ||
| <button type="button" |
| > | ||
| <MessageCirclePlus className="h-5 w-5" /> | ||
| </button> | ||
| <button type="button" |
Summary
Details
Components Updated
Alert, Alert Dialog, Accordion, Badge, Breadcrumb, Combobox, Command, Context Menu, Data Table, Dialog, Dropdown, Empty State, Hover Card, Pagination, Popover, Progress, Sheet (Drawer), Skeleton, Sonner (Toast), Spinner, Tabs, Tooltip
Components Removed
Reorganization
UiPath-reviewfolder for later evaluationFeedbackcategoryNavigationcategoryToast (Sonner)DropdownDrawer (Sheet)Fixes
--color-destructive-foregroundto future-theme.css (dark + light)forwardReffor right-click supportcodeprop andchildrensupport for flexible actionsTest plan
Made with Cursor