Added standalone Diagram component and consumed it in WizardShell's "Modify" step if the selected source is PID in "Add Source" step.
Added url-loader module loader for png/jpg to the Storybook's webpack config to be able to render images. I had trouble using the file-loader, so instead using url-loader with file size limit which converts the fetched image src file to base64 string if the size is less than that limit, otherwise it uses file-loader as fallback which resolves the file into a url. I found this post helpful.
Moved some types around to common files as they were consumed by multiple components.
Some styling changes
Testing 🧪
You can check Diagram component story and WizardShell's mock story by selecting the PID type source to see the diagram. We limit the PID options to dropdown selection without letting user enter a pib blob url since we already have the extracted text/cooked information from mock data.
Summary of changes 🔍
Diagramcomponent and consumed it inWizardShell's "Modify" step if the selected source is PID in "Add Source" step.Testing 🧪
You can check
Diagramcomponent story andWizardShell's mock story by selecting the PID type source to see the diagram. We limit the PID options to dropdown selection without letting user enter a pib blob url since we already have the extracted text/cooked information from mock data.Checklist ✔️