Use emotion components within <Canvas>

[gazpachu]

Is it possible to use emotion components within <Canvas>?

Something like this?

export const AvatarWrapper = styled.div`
  display: flex;
  align-items: center;
`;

<Canvas>
   <AvatarWrapper>
      <Story name="custom-xsmall" args={{ size: 'xsmall' }}>
         {Template.bind({})}
      </Story>
      <Story name="custom-small" args={{ size: 'small' }}>
         {Template.bind({})}
      </Story>
      ...
   </AvatarWrapper>
</Canvas>

When I try this, I get this error:

Uncaught Error: Invalid name '', must include alphanumeric characters
    at sanitizeSafe (index.js:37)
    at toId (index.js:48)
    at lookupStoryId (Story.js:14)
    at getStoryProps (Story.js:22)
    at Story.js:65
    at updateContextConsumer (react-dom.development.js:18747)
    at beginWork (react-dom.development.js:19114)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)

I just want to have a flex div to center align all the avatars, as currently they are not:

[shilman]

The issue here is that the Story block is not immediately beneath the Canvas. You should be able to workaround by adding the AvatarWrapper via a decorator.

https://storybook.js.org/docs/react/writing-stories/decorators

[shilman]

Any chance you can create a repro with npx sb@next repro?

[gazpachu]

I've tried but there seems to be an error in the install script: typescript@patch:typescript@npm%3A4.3.2#builtin<compat/typescript>::version=4.3.2&hash=a45b0e: Cannot apply hunk #2 (set enableInlineHunks for details)

yarnpkg/berry#2935

Perhaps repro needs to be fixed?

[shilman]

Can you please try again? I think that upstream error has been fixed. Sorry for the inconvenience.

[gazpachu]

Hmm, I still get errors:

npm ERR! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pixman-1' found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1

[gazpachu]

Anyway, I also tried <Canvas style={{ display: 'flex', alignItems: 'center' }}> and the styles where applied to the div. The problem is the canvas has several divs below before it reaches the actual stories, so my intention to create a flex wrapper for the avatar won't possibly work either by using a decorator.

Maybe there's another way? or do you really thing the decorator will apply the style to the div right above the stories?