Releasing Explorer-1 v3 and maintaining an architecture for multiple platforms

[stephiescastle]

Now that EDU has launched, including its Explorer-1 improvements/additions, we need to determine when to officially release Explorer-1 v3. Note that regardless of when or how that happens, we also need to keep the v2 Storybook and docs available for current users.

Following are some points to consider:

Vue Storybook vs HTML Storybook

Back in v2, we maintained separate versions of the design system: one in Vue.js and another in plain HTML. For v3, we only updated the Vue-based Storybook. The HTML-based Storybook would require quite a bit of overhead to catch up if we want to continue both HTML and Vue Storybooks.

I would argue that, starting with v3, we retire the HTML-based Storybook. The value of using Vue as a basis for v3 is that we are able to use the components directly in our projects, which brings with it active use, active improvement and active testing. The HTML components are not used in any real-world scenario. We originally created them to serve as templates for non-Vue-based implementations, but the components still need to be rewritten for whichever platform they'll be used on (ex: rewritten as Django templates for WCP).

There are also ways, though not perfect, to extract styles and html templates from our existing Vue-based Storybook:

• We are already able to extract HTML from our Vue-based Storybook (check "HTML" tab in the addons bar), though this feature does need a bit of clean-up in v3 to be 100% accurate and helpful to our users.
• We already extract styles from the existing Vue-components.
• The remaining hurdle is to determine how to generate vanilla JS that is compatible with the generated HTML markup. We don't have a solution for this yet, other than re-writing it by hand.

I think it would be more worthwhile for us to invest time in improving these features rather than maintaining a completely separate Storybook for HTML.

New non-Vue components

Currently, the only component missing from our Vue-based Storybook is the internal navigation. This is because we never needed to build it in Vue and only used it in Django.

To resolve this we could try a few different approaches:

1. Retain an HTML-based Storybook ONLY for components that do not exist in Vue and strip out the rest. We would then need to find ways to link the two Storybooks together (ideas: create placeholder stories that link to the other Storybook, or use Storybook's Composition feature which has its own drawbacks). The only benefit this offers is that it requires the least amount of up-front dev time for adding a new non-Vue component to Explorer-1. Otherwise, this would fragment our documentation a bit, and we would still have to maintain both Storybooks in terms of module updates/compatibility, which can be its own headache.
2. Write a Vue-based version of the Internal Navigation. The component itself wouldn't get any direct use, but it would be a real-world implementation of using the Vue-generated output to create a component for a different platform.
3. (More ideas needed)

Please feel free to chime in with your thoughts!