Skip to content

Conversation

@1980computer
Copy link
Collaborator

Summary

  • Templates: Added Maestro, Delegate, Admin, and Flow template systems with multiple page variants (Landing, Dashboard, Settings, Data Management, Properties). Templates now display at the root of the Templates sidebar — the Future subfolder has been removed. Old templates moved to Xrchive.
  • Theming: Dual-theme architecture with Future (dark/light) and Legacy (dark/light) using CSS custom properties and a shadcn bridge pattern. All templates respond to the Storybook theme selector.
  • Custom components: GlobalHeader, FlowPanel, PropertiesSimple (interactive inputs/selects/accordions + JSON editor drawer), PropertiesExpanded, Canvas, ChatComposer, FlowNode, toolbars, and more — themed with Future design tokens.
  • Prototyping page: New 5-tab documentation page (Overview, Use Cases, Use Figma, Use AI, Best Practices) with persona-based use cases, copyable tech stack, AI context file reference, and Storybook MCP setup instructions.
  • AI context: Created apollo-ai-context.md — a portable markdown file with the full design system reference for feeding to AI coding tools. Installed @storybook/addon-mcp with component manifest for live MCP endpoint.
  • Accessibility: Installed @storybook/addon-a11y for accessibility auditing.
  • Storybook UX: Hidden addons panel by default, removed background switcher, reorganized sidebar categories, upgraded all component stories to consistent categories.
  • Cleanup: Deleted deprecated example files, consolidated into the new template system, renamed Theme/Current to Theme/Legacy.

Test plan

  • Run pnpm storybook in packages/apollo-wind and verify Storybook loads
  • Verify all 4 templates render: Admin, Delegate, Flow, Maestro (each with sub-pages)
  • Toggle between all 4 themes (Future Dark/Light, Legacy Dark/Light) on templates and Theme page
  • Check Introduction > Prototyping page — all 5 tabs render with content
  • Verify MCP endpoint at http://localhost:6006/mcp responds
  • Press A to toggle addons panel — verify a11y tab runs audits
  • Confirm component stories render under Components category
  • Verify Xrchive folder shows VSCode and New Project templates

1980computer and others added 2 commits February 5, 2026 07:15
- 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]>
@1980computer 1980computer changed the title Feature/getting started only feat(apollo-wind): Getting Started section with templates, theming, and AI prototyping Feb 11, 2026
Comment on lines +101 to +107
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';
Comment on lines +4 to +15
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() {
Copy link

Copilot AI left a 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

Comment on lines +135 to +140
];

const outputJsonLines = [
'{',
' ""isValid": true,',
' "confidence": 0.96',
Copy link

Copilot AI Feb 12, 2026

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).

Suggested change
];
const outputJsonLines = [
'{',
' ""isValid": true,',
' "confidence": 0.96',
'}',
];
const outputJsonLines = [
'{',
' "isValid": true,',
' "confidence": 0.96',

Copilot uses AI. Check for mistakes.
Comment on lines +70 to +85
<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>
Copy link

Copilot AI Feb 12, 2026

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>.

Copilot uses AI. Check for mistakes.
Comment on lines +80 to +92
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>
Copy link

Copilot AI Feb 12, 2026

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.

Copilot uses AI. Check for mistakes.
Comment on lines +35 to +36
<span className="font-semibold text-future-foreground">Github repository</span>
<br />
Copy link

Copilot AI Feb 12, 2026

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).

Copilot uses AI. Check for mistakes.
Comment on lines +26 to +30
export interface MaestroTemplateProps {
className?: string;
/** Color theme for the template */
theme?: 'dark' | 'light';
/** Application title shown in the header */
Copy link

Copilot AI Feb 12, 2026

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.

Copilot uses AI. Check for mistakes.
Comment on lines +4 to +15
import {
SquareMenu,
ChevronDown,
DollarSign,
Users,
CreditCard,
Activity,
ArrowUpRight,
Download,
Filter,
ChevronRight,
} from 'lucide-react';
Copy link

Copilot AI Feb 12, 2026

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.

Copilot uses AI. Check for mistakes.
Filter,
ChevronRight,
} from 'lucide-react';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused imports Avatar, AvatarFallback.

Copilot uses AI. Check for mistakes.
}

/** Full sample page content */
function SamplePageContent() {
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused function SamplePageContent.

Copilot uses AI. Check for mistakes.
// Image placeholder
// ============================================================================

function ImagePlaceholder({
Copy link

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused function ImagePlaceholder.

Copilot uses AI. Check for mistakes.
Comment on lines +101 to +107
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);
}
});
Copy link

Copilot AI Feb 12, 2026

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.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant