-
Notifications
You must be signed in to change notification settings - Fork 0
feat(apollo-wind): Getting Started section with templates, theming, and AI prototyping #208
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
- Add UiPath branding (logo and text) to Storybook sidebar - Reorganize sidebar structure: Introduction, Theme, Components, Templates, Forms - Rename 'Getting Started' section to 'Introduction' - Add 'Getting Started' and 'Prototyping' pages under Introduction - Reorganize Theme section: add Current and Future folders - Reorganize Templates section: add Current and Future folders, move Form Builder to Forms - Rename 'examples' folder to 'templates' to match sidebar structure - Update story file names to match sidebar display names - Configure sidebar sections to collapse by default (Theme, Forms) - Set Storybook to default dark theme - Add custom CSS for brand logo sizing and text styling - Update storySort order for consistent navigation Co-authored-by: Cursor <[email protected]>
…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 <[email protected]>
| const observer = new ResizeObserver((entries) => { | ||
| for (const entry of entries) { | ||
| const w = | ||
| entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width; | ||
| setNarrow(w > 0 && w < AUTO_COLLAPSE_BREAKPOINT); | ||
| } | ||
| }); |
| @@ -0,0 +1,45 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import { FlowNode } from './flow-node'; | |||
| import { Bot, FileText, Mail } from 'lucide-react'; | |||
| @@ -0,0 +1,84 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import { cn } from '@/lib'; | |||
| @@ -0,0 +1,78 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import { DelegatePanel } from './panel-delegate'; | |||
| import { MessageCirclePlus, History, Folder, Settings, SquareMenu } from 'lucide-react'; | |||
| @@ -0,0 +1,59 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import { cn } from '@/lib'; | |||
| import { cn } from '@/lib'; | ||
| import { fontFamily } from '@/foundation/Future/typography'; | ||
| import { MaestroHeader } from '@/components/custom/global-header'; | ||
| import { Button } from '@/components/ui/button'; |
| SelectTrigger, | ||
| SelectValue, | ||
| } from '@/components/ui/select'; | ||
| import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; |
| import { | ||
| SquareMenu, | ||
| ChevronDown, | ||
| DollarSign, | ||
| Users, | ||
| CreditCard, | ||
| Activity, | ||
| ArrowUpRight, | ||
| Download, | ||
| Filter, | ||
| ChevronRight, | ||
| } from 'lucide-react'; |
| Filter, | ||
| ChevronRight, | ||
| } from 'lucide-react'; | ||
| import { Avatar, AvatarFallback } from '@/components/ui/avatar'; |
| } | ||
|
|
||
| /** Full sample page content */ | ||
| function SamplePageContent() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR expands apollo-wind’s Storybook “Getting Started” and prototyping experience by introducing a template catalog (Maestro/Delegate/Flow), a dual Future/Legacy theme architecture based on CSS custom properties + Tailwind 4 tokens, and Storybook UX/addon updates to support AI prototyping (MCP) and accessibility auditing (a11y).
Changes:
- Added new full-page templates (Maestro/Delegate/Flow) and multiple custom UI building blocks (panels, toolbars, properties, canvas, chat UI).
- Introduced Future token modules + theme CSS (Future + Legacy) and wired them into Tailwind’s build entry.
- Updated Storybook configuration (theme toolbar, custom viewports, addons MCP/a11y, sidebar reorg) and reorganized story categories; removed deprecated “Examples” stories.
Reviewed changes
Copilot reviewed 150 out of 156 changed files in this pull request and generated 19 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-wind/src/templates/Maestro/template-maestro.tsx | Adds Maestro full-page template with header + collapsible side panels + canvas/grid. |
| packages/apollo-wind/src/templates/Flow/template-flow.tsx | Adds Flow full-page template with FlowPanel + canvas + properties/toolbar surfaces. |
| packages/apollo-wind/src/templates/Flow/flow.stories.tsx | Storybook stories for Flow template scenarios (blank/chat/properties). |
| packages/apollo-wind/src/templates/Delegate/template-delegate.tsx | Adds Delegate full-page template wrapper around DelegatePanel + Canvas + ViewportGuard. |
| packages/apollo-wind/src/templates/Forms/form-builder-example.stories.tsx | Re-categorizes Form Builder story under Forms. |
| packages/apollo-wind/src/templates/Current/vscode-example.stories.tsx | Moves VSCode story under Templates/Xrchive. |
| packages/apollo-wind/src/templates/Current/new-project-example.stories.tsx | Moves New Project story under Templates/Xrchive. |
| packages/apollo-wind/src/styles/tailwind.css | Imports Future + Legacy theme CSS into Tailwind build entry. |
| packages/apollo-wind/src/getting-started/getting-started.stories.tsx | Adds “Introduction/Getting Started” Storybook page. |
| packages/apollo-wind/src/foundation/Legacy/typography.stories.tsx | Moves Legacy typography story under Theme/Legacy. |
| packages/apollo-wind/src/foundation/Legacy/spacing.stories.tsx | Moves Legacy spacing story under Theme/Legacy. |
| packages/apollo-wind/src/foundation/Legacy/icons.stories.tsx | Moves Legacy icons story under Theme/Legacy. |
| packages/apollo-wind/src/foundation/Legacy/colors.stories.tsx | Moves Legacy colors story under Theme/Legacy. |
| packages/apollo-wind/src/foundation/Future/typography.ts | Adds Future typography tokens (font families/sizes/weights/etc.). |
| packages/apollo-wind/src/foundation/Future/typography.stories.tsx | Adds Future typography token documentation story. |
| packages/apollo-wind/src/foundation/Future/strokes.ts | Adds Future stroke/border tokens. |
| packages/apollo-wind/src/foundation/Future/strokes.stories.tsx | Adds Future stroke token documentation story. |
| packages/apollo-wind/src/foundation/Future/spacing.ts | Adds Future spacing tokens. |
| packages/apollo-wind/src/foundation/Future/spacing.stories.tsx | Adds Future spacing token documentation story. |
| packages/apollo-wind/src/foundation/Future/shadows.ts | Adds Future shadow tokens. |
| packages/apollo-wind/src/foundation/Future/shadows.stories.tsx | Adds Future shadow token documentation story. |
| packages/apollo-wind/src/foundation/Future/responsive.ts | Adds Future responsive breakpoint + viewport token definitions. |
| packages/apollo-wind/src/foundation/Future/responsive.stories.tsx | Adds Future responsive token documentation story. |
| packages/apollo-wind/src/foundation/Future/radius.ts | Adds Future border radius tokens. |
| packages/apollo-wind/src/foundation/Future/radius.stories.tsx | Adds Future radius token documentation story. |
| packages/apollo-wind/src/foundation/Future/icons.stories.tsx | Placeholder Future icons story entry. |
| packages/apollo-wind/src/foundation/Future/future-theme.css | Introduces Future theme CSS variables + Tailwind @theme registration + shadcn bridge. |
| packages/apollo-wind/src/foundation/Future/colors.ts | Adds semantic Future color token class references. |
| packages/apollo-wind/src/foundation/Future/colors.stories.tsx | Adds Future color token documentation story. |
| packages/apollo-wind/src/examples/settings-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/flow-start-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/flow-editor-layout-example.tsx | Removes deprecated Examples component. |
| packages/apollo-wind/src/examples/flow-editor-layout-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/data-management-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/dashboard-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/app-shell-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/examples/admin-layout-example.stories.tsx | Removes deprecated Examples story. |
| packages/apollo-wind/src/components/ui/viewport-guard.tsx | Adds ViewportGuard + viewport hooks for min-width gating. |
| packages/apollo-wind/src/components/ui/index.ts | Exports ViewportGuard from UI barrel. |
| packages/apollo-wind/src/components/ui/*.stories.tsx | Re-categorizes UI component stories under Components/* hierarchy. |
| packages/apollo-wind/src/components/ui/layout/*.stories.tsx | Re-categorizes layout primitive stories under Components/Layout. |
| packages/apollo-wind/src/components/custom/toolbar-view.tsx | Adds Flow bottom-right view toolbar component. |
| packages/apollo-wind/src/components/custom/toolbar-view.stories.tsx | Story for FlowViewToolbar. |
| packages/apollo-wind/src/components/custom/toolbar-canvas.tsx | Adds Flow bottom-center canvas toolbar component. |
| packages/apollo-wind/src/components/custom/toolbar-canvas.stories.tsx | Story for FlowCanvasToolbar. |
| packages/apollo-wind/src/components/custom/panel-maestro.tsx | Adds Maestro side panel component. |
| packages/apollo-wind/src/components/custom/panel-maestro.stories.tsx | Story for Maestro Panel. |
| packages/apollo-wind/src/components/custom/panel-flow.tsx | Adds Flow left rail + expandable chat panel component. |
| packages/apollo-wind/src/components/custom/panel-flow.stories.tsx | Story for FlowPanel. |
| packages/apollo-wind/src/components/custom/panel-delegate.stories.tsx | Story for DelegatePanel. |
| packages/apollo-wind/src/components/custom/grid-maestro.tsx | Adds Maestro canvas + grid primitives. |
| packages/apollo-wind/src/components/custom/grid-maestro.stories.tsx | Story for Maestro grid primitives. |
| packages/apollo-wind/src/components/custom/global-header.stories.tsx | Story for MaestroHeader. |
| packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx | Adds Flow expanded properties panel UI. |
| packages/apollo-wind/src/components/custom/flow-properties-expanded.stories.tsx | Story for expanded properties panel. |
| packages/apollo-wind/src/components/custom/flow-properties-bar.tsx | Adds Flow collapsed properties bar UI. |
| packages/apollo-wind/src/components/custom/flow-properties-bar.stories.tsx | Story for properties bar. |
| packages/apollo-wind/src/components/custom/flow-node.tsx | Adds Flow node card component. |
| packages/apollo-wind/src/components/custom/flow-node.stories.tsx | Story for Flow node. |
| packages/apollo-wind/src/components/custom/chat-steps-view.tsx | Adds StepsView canvas content component. |
| packages/apollo-wind/src/components/custom/chat-steps-view.stories.tsx | Story for StepsView. |
| packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx | Adds PromptSuggestions component. |
| packages/apollo-wind/src/components/custom/chat-prompt-suggestions.stories.tsx | Story for prompt suggestions. |
| packages/apollo-wind/src/components/custom/chat-first-experience.tsx | Adds initial chat “first experience” component. |
| packages/apollo-wind/src/components/custom/chat-first-experience.stories.tsx | Story for chat first experience. |
| packages/apollo-wind/src/components/custom/chat-composer.tsx | Adds chat composer input component. |
| packages/apollo-wind/src/components/custom/chat-composer.stories.tsx | Story for chat composer. |
| packages/apollo-wind/src/components/custom/canvas.tsx | Adds shared Canvas surface component. |
| packages/apollo-wind/src/components/custom/canvas.stories.tsx | Story for Canvas. |
| packages/apollo-wind/rslib.config.ts | Excludes templates from library build input set (vs prior examples exclusion). |
| packages/apollo-wind/public/ui-path.svg | Adds UiPath brand SVG for Storybook theming. |
| packages/apollo-wind/public/archived-ui-path.svg | Adds archived logo asset. |
| packages/apollo-wind/package.json | Adds Storybook addons: a11y + MCP. |
| packages/apollo-wind/biome.json | Updates Biome ignore patterns from examples → templates. |
| packages/apollo-wind/apollo-ai-context.md | Adds portable AI context markdown for consistent prototyping output. |
| packages/apollo-wind/.storybook/main.ts | Adds addons + MCP manifest feature + staticDirs; makes react-scan hook optional. |
| packages/apollo-wind/.storybook/preview.tsx | Adds futureTheme toolbar + custom viewports; removes global body/html theme application. |
| packages/apollo-wind/.storybook/preview-head.html | Loads Inter + JetBrains Mono fonts for Future theme. |
| packages/apollo-wind/.storybook/manager.ts | Sets Storybook manager theme, hides addons panel by default, tweaks sidebar. |
| packages/apollo-wind/.storybook/manager-head.html | Tweaks sidebar branding sizing via CSS. |
| packages/apollo-wind/.storybook/theme.ts | Adds Storybook theming configuration (brand title/image). |
| packages/apollo-wind/.storybook/manager.js | JS variant of manager config (duplicates TS). |
| packages/apollo-wind/.storybook/theme.js | JS variant of theme config (duplicates TS). |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| ]; | ||
|
|
||
| const outputJsonLines = [ | ||
| '{', | ||
| ' ""isValid": true,', | ||
| ' "confidence": 0.96', |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The sample JSON shown in the Output section has a typo (""isValid") and the Input JSON snippet is missing closing braces, so the default view renders invalid JSON. Fix the sample strings so they’re syntactically correct (helps users copy/paste and avoids confusing docs).
| ]; | |
| const outputJsonLines = [ | |
| '{', | |
| ' ""isValid": true,', | |
| ' "confidence": 0.96', | |
| '}', | |
| ]; | |
| const outputJsonLines = [ | |
| '{', | |
| ' "isValid": true,', | |
| ' "confidence": 0.96', |
| <div className="flex items-center gap-1"> | ||
| <button className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"> | ||
| <Plus className="h-5 w-5 text-future-foreground-inverse" /> | ||
| </button> | ||
| <button className="flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80"> | ||
| <Workflow className="h-5 w-5 text-future-foreground-inverse" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| {/* Submit button */} | ||
| <button | ||
| className="flex h-8 w-8 items-center justify-center rounded-2xl bg-future-accent transition-opacity hover:opacity-90" | ||
| onClick={handleSubmit} | ||
| > | ||
| <CornerDownLeft className="h-5 w-5 -scale-y-100 rotate-90 text-future-foreground-on-accent" /> | ||
| </button> |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Icon-only buttons in the composer toolbar don’t have accessible names. Add aria-label (and consider type="button") for the Plus / Workflow / Submit buttons so screen readers can describe their purpose and to avoid accidental form submission when embedded in a <form>.
| return ( | ||
| <div className={cn('fixed inset-0 z-50 flex items-center justify-center', className)}> | ||
| <div | ||
| className="absolute inset-0 bg-zinc-950 backdrop-blur-xl" | ||
| aria-hidden="true" | ||
| /> | ||
| <div | ||
| className="relative mx-4 max-w-sm rounded-2xl border border-zinc-700 bg-zinc-900 px-6 py-5 text-center shadow-xl" | ||
| role="status" | ||
| aria-live="polite" | ||
| > | ||
| <p className="text-sm font-medium leading-5 text-zinc-100">{message}</p> | ||
| </div> |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The overlay uses raw Tailwind palette colors (bg-zinc-*, text-zinc-*). Given the repo’s new theme/token approach, this will look out of place under Future/Legacy themes and bypasses the semantic token system. Prefer token-based classes (e.g. bg-future-surface, bg-future-surface-raised, border-future-border, text-future-foreground, etc.) so the guard is theme-aware.
| <span className="font-semibold text-future-foreground">Github repository</span> | ||
| <br /> |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The label "Github repository" should be capitalized as "GitHub" (brand spelling).
| export interface MaestroTemplateProps { | ||
| className?: string; | ||
| /** Color theme for the template */ | ||
| theme?: 'dark' | 'light'; | ||
| /** Application title shown in the header */ |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
theme prop type is declared as 'dark' | 'light', but the component logic (and Storybook globals) also uses 'legacy-dark' / 'legacy-light'. With the current type, the theme === 'legacy-*' branches are flagged as unreachable by TypeScript (and can fail builds). Expand the union type (or introduce a shared Theme type) to match the supported values.
| import { | ||
| SquareMenu, | ||
| ChevronDown, | ||
| DollarSign, | ||
| Users, | ||
| CreditCard, | ||
| Activity, | ||
| ArrowUpRight, | ||
| Download, | ||
| Filter, | ||
| ChevronRight, | ||
| } from 'lucide-react'; |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused imports ArrowUpRight, ChevronRight, Filter.
| Filter, | ||
| ChevronRight, | ||
| } from 'lucide-react'; | ||
| import { Avatar, AvatarFallback } from '@/components/ui/avatar'; |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused imports Avatar, AvatarFallback.
| } | ||
|
|
||
| /** Full sample page content */ | ||
| function SamplePageContent() { |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused function SamplePageContent.
| // Image placeholder | ||
| // ============================================================================ | ||
|
|
||
| function ImagePlaceholder({ |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused function ImagePlaceholder.
| const observer = new ResizeObserver((entries) => { | ||
| for (const entry of entries) { | ||
| const w = | ||
| entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width; | ||
| setNarrow(w > 0 && w < AUTO_COLLAPSE_BREAKPOINT); | ||
| } | ||
| }); |
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Superfluous argument passed to default constructor of class ResizeObserver.
Summary
apollo-ai-context.md— a portable markdown file with the full design system reference for feeding to AI coding tools. Installed@storybook/addon-mcpwith component manifest for live MCP endpoint.@storybook/addon-a11yfor accessibility auditing.Test plan
pnpm storybookinpackages/apollo-windand verify Storybook loadshttp://localhost:6006/mcprespondsAto toggle addons panel — verify a11y tab runs audits