Skip to content

chore(storybook): reorganise Canvas IA to mirror Wind structure#729

Merged
1980computer merged 2 commits into
mainfrom
organize-canvas-ia
May 26, 2026
Merged

chore(storybook): reorganise Canvas IA to mirror Wind structure#729
1980computer merged 2 commits into
mainfrom
organize-canvas-ia

Conversation

@1980computer
Copy link
Copy Markdown
Collaborator

@1980computer 1980computer commented May 21, 2026

Summary

  • Introduction/Getting Started — new page with three tabs (Overview, Quick Start, Component Reference) styled to match the Wind getting-started page; covers canvas modes, core concepts, UX principles, import paths, and story boilerplate
  • Components reorganised into categories matching Wind's Components/Category/Name pattern: Canvas, Controls, Edges, Layout, Nodes, Panels, Primitives
  • Templates section cleaned up — AgentFlow and CodedAgentFlow moved out of Components; all four templates renamed for clarity (Canvas Blank, Canvas with Panels, Canvas Agent Flow, Canvas Agent Flow Coded)
  • Theme section added — Core/Icons moved to Theme/Icons
  • Core section removed — Breadcrumb moved to Components/Controls, Layouts moved to Components/Layout
  • Sidebar sort order updated in preview.tsx to enforce: Introduction → Theme → Components → Templates

Before / After

Before After
Components/BaseNode Components/Nodes/BaseNode
Components/ButtonHandles Components/Controls/ButtonHandles
Components/Toolbox Components/Controls/Toolbox
Components/NodeInspector Components/Panels/NodeInspector
Components/ExecutionStatusIcon Components/Primitives/ExecutionStatusIcon
Components/AgentFlow Templates/Canvas Agent Flow
Core/Icons Theme/Icons
Core/Layouts/Column Components/Layout/Column
Flow (top-level) Templates/Canvas Blank

Test plan

  • Open Storybook → Canvas sidebar shows: Introduction, Theme, Components, Templates in that order
  • Introduction/Getting Started renders all three tabs (Overview, Quick Start, Components)
  • Components folder contains: All Components, Canvas, Controls, Edges, Layout, Nodes, Panels, Primitives
  • Templates folder contains: Canvas Blank, Canvas with Panels, Canvas Agent Flow, Canvas Agent Flow Coded
  • Theme/Icons renders correctly
  • No existing story content changed — titles only

🤖 Generated with Claude Code

@1980computer @claude
chore(repo): ignore generated artefacts and tool directories
13d5052 
- Ignore .codeviz/ (code visualisation tool output)
- Ignore apps/apollo-chat/ (uninitialised scaffold with no source)
- Ignore **/locales/*.js (compiled lingui output; *.ts was already ignored)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 21, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (PT)
apollo-design 🟢 Ready Preview, Logs May 26, 2026, 10:13:26 AM
apollo-docs 🟢 Ready Preview, Logs May 26, 2026, 10:13:26 AM
apollo-landing 🟢 Ready Preview, Logs May 26, 2026, 10:13:26 AM
apollo-ui-react 🟢 Ready Preview, Logs May 26, 2026, 10:13:26 AM
apollo-vertex 🟢 Ready Preview, Logs May 26, 2026, 10:13:26 AM

@github-actions github-actions Bot added the size:XL 500-999 changed lines. label May 21, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 21, 2026

Dependency License Review

  • ✅ 1901 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1671
ISC 89
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

BenGSchulz
BenGSchulz reviewed May 21, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@BenGSchulz BenGSchulz left a comment •
edited
Loading

Choose a reason for hiding this comment

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

It looks like the links in the "All Components" story (canvas-gallery.stories.tsx) have broken. If we want to keep that story around, we should probably update the links there. But I could see your new Intro section maybe superseding it (or could combine some features?)

Screen.Recording.2026-05-21.at.12.57.18.PM.mov

@1980computer @claude
feat(apollo-react): reorganise Canvas Storybook IA to mirror Wind str…
65ecb19 
…ucture

- Add Introduction/Getting Started page with Overview, Quick Start, and
  Component Reference tabs (styled to match Wind's getting-started page)
- Reorganise Components into categories: Canvas, Controls, Edges, Layout,
  Nodes, Panels, Primitives (replacing flat list)
- Move AgentFlow and CodedAgentFlow from Components to Templates
- Move Core/Controls/Breadcrumb → Components/Controls
- Move Core/Icons → Theme/Icons
- Move Core/Layouts → Components/Layout (Column, Grid, Row)
- Rename Templates: Canvas Blank, Canvas with Panels, Canvas Agent Flow,
  Canvas Agent Flow Coded
- Update storySort in preview.tsx to enforce order:
  Introduction → Theme → Components → Templates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@1980computer
Copy link
Copy Markdown
Collaborator Author

1980computer commented May 26, 2026

Good catch @BenGSchulz. Fixed all 25 storyPath IDs in canvas-gallery.stories.tsx pointing at the old flat paths. Updated them to match the reorganized structure.

On the superseding question: I'd keep both for now. The Getting Started intro covers concepts and quick-start guidance, while All Components is more of a navigable index with previews and search/filter, they serve different purposes. That said, the Component Reference tab in Getting Started already links out to individual stories, so there's some overlap worth revisiting. Happy to consolidate if you have a specific direction in mind.

@BenGSchulz
Copy link
Copy Markdown
Contributor

BenGSchulz commented May 26, 2026

On the superseding question: I'd keep both for now. The Getting Started intro covers concepts and quick-start guidance, while All Components is more of a navigable index with previews and search/filter, they serve different purposes. That said, the Component Reference tab in Getting Started already links out to individual stories, so there's some overlap worth revisiting. Happy to consolidate if you have a specific direction in mind.

I think the bit of overlap is fine as you say they serve different purposes. Thanks

@1980computer 1980computer merged commit 99437fd into main May 26, 2026
43 checks passed
@1980computer 1980computer deleted the organize-canvas-ia branch May 26, 2026 21:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@BenGSchulz BenGSchulz BenGSchulz approved these changes

@CalinaCristian CalinaCristian Awaiting requested review from CalinaCristian

Assignees

No one assigned

Labels

app:storybook pkg:apollo-react size:XL 500-999 changed lines.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@1980computer @BenGSchulz