Run Scooby against Storybook stories

[andrico1234]

It would be great to provide a link to a Storybook.

Scooby can then access the Storybook, iterate over all of the stories and store the HTML to then compare as it does normally.

Here's a flow for what this could look like

%% Flowchart
graph TD
A[Run CLI]-->B{Is path a URL?}
B-->|Yes|C{Is Storybook URL}
B-->|No|D[Continue current flow...]
C-->|Yes|E[Access Storybook's iframe.html]
C-->|No|F[Access URL]
E-->G[Get stories data*]
G-->H[Create a list of story URLs to visit**]
H-->I[Access the story URL]
I-->J[Get HTML for Story***]
J-->K[Save HTML to file]
F-->K
K-->D

Loading

• • We can get this via global STORYBOOK_STORY_STORE (or something similar). And then the getStoriesJSONData function

** - URL of the stories equal to the key of the story in the JSON object.

e.g.,

const data = getStoriesJSONData;

// result
{
  "components-button--large": { ... }
}

const url = new URL("iframe.html",  "https://linktostory.com")
url.searchParams.append("id", "components-button--large")
const fullUrl = url.href

*** - We'll need to figure out how to pull out only the markup that we need.

Unknowns

• How will we handle styles?
• How can we determine which Storybook markup we need, and which we can discard?

[andrico1234]

Here's a gist that saves the HTML for a single story:

https://gist.github.com/andrico1234/c19d90ad9377c8d516c97d7d53649fdd

Any thoughts or concerns about this approach? I'll try it out within Scooby and see how it fares