fix(form-system): use import.meta for docs images with start and build

.storybook/main.js

@@ -1,3 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
 module.exports = {
   stories: [
     '../packages/*/stories/*.stories.{js,mdx}',
@@ -8,4 +11,37 @@ module.exports = {
     watch: true,
     open: true,
   },
+  rollup: configs => {
+    // temporarily hard copy all needed global files as all tested rollup plugins flatten the
+    // directory structure
+    // `rollup-plugin-copy` might work if issue 37 is resolved
+    // https://github.com/vladshcherbin/rollup-plugin-copy/issues/37
+    for (const config of configs) {
+      config.plugins.push({
+        generateBundle() {
+          this.emitFile({
+            type: 'asset',
+            fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-1.svg',
+            source: fs.readFileSync(
+              path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-1.svg'),
+            ),
+          });
+          this.emitFile({
+            type: 'asset',
+            fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-2.svg',
+            source: fs.readFileSync(
+              path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-2.svg'),
+            ),
+          });
+          this.emitFile({
+            type: 'asset',
+            fileName: 'packages/form-system/dev-assets/FormatMixinDiagram-3.svg',
+            source: fs.readFileSync(
+              path.join(__dirname, '../packages/form-system/dev-assets/FormatMixinDiagram-3.svg'),
+            ),
+          });
+        },
+      });
+    }
+  },
 };

packages/form-system/stories/30-System-Formatting.stories.mdx

@@ -220,26 +220,14 @@ Below we show three flow diagrams to show the flow of formatting, serializing an
 ### Standard flow
 Where a user changes the input with their keyboard
 
-<Story name="Standard flow">
+<Story id="forms-system-internals--standard-flow"></Story>
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-1.svg" />
-  `}
-</Story>
 
 ### Unparseable flow
 Where a user sets the input to something that is not parseable by the parser
 
-<Story name="Unparseable flow">
+<Story id="forms-system-internals--unparseable-flow"></Story>
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-2.svg" />
-  `}
-</Story>
 
 ### Imperative / programmatic flow
 Where the developer sets the modelValue of the input programmatically
 
-<Story name="Imperative / programmatic flow">
+<Story id="forms-system-internals--imperative-flow"></Story>
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-3.svg" />
-  `}
-</Story>

packages/form-system/stories/flow-diagrams.stories.js

@@ -0,0 +1,17 @@
+import { html } from '@open-wc/demoing-storybook';
+
+export default {
+  title: 'Forms/System/_internals',
+};
+
+export const standardFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-1.svg', import.meta.url)} />
+`;
+
+export const unparseableFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-2.svg', import.meta.url)} />
+`;
+
+export const imperativeFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-3.svg', import.meta.url)} />
+`;