Storybook addons not working when running creevey

[creevey]

Storybook addons not working when running creevey

[wKich]

I've reproduced it on a fresh angular project. This happened when my addon calls the setStories method of Storybook API. I'll try to fix it. Thank you for the report and your patience.

[wKich]

@BmsVisionJo I've just released the new version with the fix. Please, take a look.

[BmsVisionJo]

I managed to achieve the desired result by setting our own globals instead of using the themes addon.
This now sets the classes correctly and by using your experimental gobals support we are now able to run the tests for different themes. Closing this issue now and will keep track of upcomming progress. Thank you.

[wKich]

This is strange. Creevey addon doesn't do anything with other addons. It just adds a panel in Storybook UI. I guess it could be related to this storybookjs/storybook#11442

About the waring, it's Storybook issue storybookjs/storybook#12872, try to update to 6.1.x

[BmsVisionJo]

I've updated to Storybook 6.1.11 and that solved the warning, thanks for that.
I also updated to the newly released creevey 0.7.15.

Moving the order of the addons did not help. I have no issues however with my storybook untill I run the creevey command.
I switched on debug logging and saw this exception. Maybe this could be a problem?

info => Get angular-cli webpack config.
info => Using default Webpack setup
SyntaxError: Unexpected token, expected ";" (2:11)
    at Object._raise (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:748:17)
    at Object.raiseWithData (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:741:17)
    at Object.raise (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:735:17)
    at Object.unexpected (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:9101:16)
    at Object.semicolon (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:9083:40)
    at Object.parseExpressionStatement (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:12216:10)
    at Object.parseExpressionStatement (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:6874:26)
    at Object.parseStatementContent (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:11812:19)
    at Object.parseStatementContent (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:6806:18)
    at Object.parseStatement (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:11676:17)
    at Object.parseBlockOrModuleBlockBody (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:12258:25)
    at Object.parseBlockBody (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:12249:10)
    at Object.parseBlock (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:12233:10)
    at Object.parseStatementContent (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:11752:21)
    at Object.parseStatementContent (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:6806:18)
    at Object.parseStatement (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:11676:17) {
  loc: Position { line: 2, column: 11 },
  pos: 13
}
[CreeveyWorker]: Starting chrome:17740```

[wKich]

To clarify, you add creevey addon to the storybook config, then start storybook and open it in a browser. Your components are styled, even if you refresh the page. But, then you start creevey and refresh the page again styles disappear. If so, it's really strange, because the server doesn't affect storybook.

Do you have any errors in the browser console? Can also tell your angular version? I'll try to reproduce it.

[BmsVisionJo]

No errors in the console, the angular version we are using is 10.1.5.
Happy to hear you can reproduce it. Thank you for looking into it.

[wKich]

About the exception in debug logging. Can you please send to me ([email protected]) a file from node_modules/creevey/node_modules/.cache/creevey/storybook/main.js? I'll take a look and tell you where the problem is and how to fix it.

[BmsVisionJo]

I've narrowed down the source of the exception leading me to the issue beeing babel trying to compile documentation.json thinking it is a javascript file and throwing an error that it needs a ";" character.

I've added logging to see where it fails and that shows me that the location of the error is at the "pipes" keyword that is in the documentation.json file.

{"type":"","start":6,"end":0,"loc":{"start":{"line":2,"column":4}},"expression":{"type":"StringLiteral","start":6,"end":13,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":11}},"extra":{"rawValue":"pipes","raw":"\"pipes\""},"value":"pipes"}}

SyntaxError: Unexpected token, expected ";" (2:11)
    at Object._raise (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:748:17)
    at Object.raiseWithData (C:\Users\jola\source\repos\Component Library\node_modules\creevey\node_modules\@babel\parser\lib\index.js:741:17)

Do you have any clue what could be wrong on our end? I Expect you got it working in that fresh angular project?
Could you provide us a functional project to compare maybe?

[wKich]

I think you mean this file. You can place these 3 lines into separate file and import it in the preview.js as workaround for now. I will fix it soon.

[BmsVisionJo]

These lines were already there since we already used the docs addon.

[wKich]

I mean, your preview.js file should be like this:

import './docs';

/* ... other stuff ... */

And in docs.js you place

import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);

Actually, the compilation error you get in debugging is not a problem until Creevey loads and runs tests.

[BmsVisionJo]

I've implemented the workarround and also installed creevey 0.7.18.
I am now able to refresh my page without losing the addon buttons wich is already a step forward.
The only issue remaining is that the taken images do not match with my storybook.
What could be causing this?

[wKich]

Oh, I see. If I'm right, you change a theme in the toolbar, and creevey captures the default one. Creevey doesn't sync any changes in the toolbar or controls. Because it could be a problem when you run creevey in CI, you can't switch between themes and capture just the default one.

I can suggest setting the default theme in parameters https://github.com/tonai/storybook-addon-themes#globally (the default prop of the theme). But you will have been limited to capture only one theme. If you aren't ok with this, I have PR #104 that adds supporting globals.

[BmsVisionJo]

We have a default theme:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  themes: [
    { name: 'light touch', class: ['dx-swatch-light-theme', 'is-touch'], color: '#fff', default: true },

But next to that we also use some implementation to swap out css files based on the selected brand.
This is implemented the following way:

We have a preview-head.html file that sets a default brand from a dist folder.

<link id="cssBrand" rel="stylesheet" href="../dist/styles/bms.all.css">

Then we can change this href by using a decorator when clicking items in the toolbar.

 const withBrandProvider=(storyFunc, globalTypes)=>{
	const story = storyFunc();
	const brand = globalTypes.globals.brand;

	const linkCssBrand = document
		.getElementById("cssBrand");

	linkCssBrand.href = `../dist/styles/${brand}.all.css`;

	return story;
  } 
export const decorators = [withBrandProvider];

We also have icons that are located in the dist folder and those do appear on the images, however the style doesnt.
Maybe the preview-head.html is not applied in the docker container?
I'm not able to look into it further as I have no experience debugging what is going on in that docker container.

[wKich]

What is globals.brand default value?

The browser in docker container goes to the same storybook that you open in a browser. One exception is, it goes to http://localhost:6006/iframe.html?path=/story/{storyId}, where {storyId} is the id of the current story. You can open the story if you click on the second icon from the toolbar's top-left corner.

I guess creevey doesn't wait until new styles are loaded. Try to add creevey: { delay: 500 } parameter in storybook parameters

[BmsVisionJo]

I'm sorry I did not include that part.

export const globalTypes = {
	brand: {
	  name: 'Brands',
	  description: 'Global brand',
	  defaultValue: 'bms',
	  toolbar: {
		icon: 'circlehollow',
		// array of plain string values or MenuItem shape (see below)
		items: ['bms', 'savio'],
	  },
	},
  };

That may be a possible explanation, I will try it soon with the delay, thank you.

[wKich]

In later versions storybook has async loaders, you can try to add them, to check when styles loaded https://storybook.js.org/docs/react/writing-stories/loaders#global-loaders

[wKich]

@BmsVisionJo, I've just released new version with support globals, but it's experimental feature, and API will change.