fix(docs): codesandbox relative imports point to package import

[evwilkin]

Closes #2737

This PR:

• Parses the full relative import path (which we already have in build process) from node_modules directory to convert relative imports in examples on the website to absolute import paths from npm packages on Codesandbox.

Ex:
import DashboardWrapper from './examples/DashboardWrapper' => import DashboardWrapper from '@patternfly/react-core/src/demos/./examples/DashboardWrapper'

Notes:

• This method should work on relative image imports and can replace this code that points image imports back to patternfly.org URLs, but in practice images were not displaying correctly. May be error in base64 image parsing, as image src looked to populate correctly when removing code linked above.
• Relative import paths need to be correct in the example code in order to match correctly to absolute URL. For example, the primary detail demo - primary detail card view correctly imports images at the top of the .md file (import pfIcon from './Card/pf-logo-small.svg';) but has incorrect import path in the example code (import pfIcon from './pf-logo-small.svg';) which previously did not break Codesandbox images but would now (if this PR code applied to images as noted above).

[patternfly-build]

PF4 preview: https://patternfly-org-pr-3122-v4.surge.sh/v4

[nicolethoen]

So far looking good!
I see that the images still are not working - though i cant find a demo where that seems to be particularly problematic. The codesandbox and a consumer's ability to play with the demo is still all in tact, even without the images.

[evwilkin]

So far looking good! I see that the images still are not working - though i cant find a demo where that seems to be particularly problematic. The codesandbox and a consumer's ability to play with the demo is still all in tact, even without the images.

@nicolethoen I'm still wrapping this work up, can you clarify which images you're referring to? Is it just the PF logo on the Codesandbox link, seen broken below?

[nicolethoen]

yeah that and I peeked at the Card view demo since I knew it had so many images

[evwilkin]

@nicolethoen thanks for the call out, it looks like the broken images bug already exists on the site today for examples that have a relative image import, so I've split that out into a new issue to fix the React example/demo images and will focus this PR as-is on enabling the relative imported components such as DashboardWrapper to not break the Codesandbox examples.

Note that there is currently a pending PR to update the relative image import within the DashboardHeader to an absolute import path, which should resolve the PatternFly brand logo at the top of these examples not rendering correctly.