search

storybookjs / design-system

🗃 Storybook Design System
https://master--5ccbc373887ca40020446347.chromatic.com/
1.91k stars 585 forks source link

Export marketing components #322

Closed kylegach closed 2 years ago

kylegach commented 2 years ago
📦 Published PR as canary version: 7.0.4-canary.322.4411ee0.0
:sparkles: Test out this PR locally via: ```bash npm install @storybook/design-system@7.0.4-canary.322.4411ee0.0 # or yarn add @storybook/design-system@7.0.4-canary.322.4411ee0.0 ```
kylegach commented 2 years ago

@winkerVSbecks — Any idea what's up with Netlify? Looks like it's been failing in the same way quite often, but it sometimes works? 🤷‍♂️

kylegach commented 2 years ago

Hmm... this is trickier than I first thought. The distributed files do not contain the svg files in src/images, which are referenced by PageFooter. Apparently (I did some searching), prior to PageFooter, all svg files in that directory were only referenced in story files, so it hasn't been an issue until I attempted to distribute that component.

Ahh, I think I see now. They're used like this:

import RepoSVG from '../../../images/colored-icons/repo.svg';

<img src={RepoSVG} alt="Docs" />

Which works within Storybook, because Webpack transforms RepoSVG into the proper string. But our package is only built with Babel, not Webpack, so none of that bundling is happening.

Going to have to think about the best way to move forward...

winkerVSbecks commented 2 years ago

@kylegach perhaps convert it into JSX https://svg2jsx.com/

kylegach commented 2 years ago

@kylegach perhaps convert it into JSX https://svg2jsx.com/

Yeah, that's what I ended up doing, but in an automated way via https://react-svgr.com/docs/cli/.

This is truly ready for review now. I confirmed it via canary install in my local project.

github-actions[bot] commented 2 years ago

:rocket: PR was released in v7.1.0 :rocket: