From 9b7d714888924fee7b56a3823ffebc7cfe0f057b Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Fri, 24 Jan 2020 16:34:47 +0100
Subject: [PATCH] fix(form-system): use import.meta for docs images with start
 and build

---
 .storybook/main.js                            | 36 +++++++++++++++++++
 .../FormatMixinDiagram-1.svg                  |  0
 .../FormatMixinDiagram-2.svg                  |  0
 .../FormatMixinDiagram-3.svg                  |  0
 .../stories/30-System-Formatting.stories.mdx  | 18 ++--------
 .../stories/flow-diagrams.stories.js          | 17 +++++++++
 6 files changed, 56 insertions(+), 15 deletions(-)
 rename packages/form-system/{stories/diagram => dev-assets}/FormatMixinDiagram-1.svg (100%)
 rename packages/form-system/{stories/diagram => dev-assets}/FormatMixinDiagram-2.svg (100%)
 rename packages/form-system/{stories/diagram => dev-assets}/FormatMixinDiagram-3.svg (100%)
 create mode 100644 packages/form-system/stories/flow-diagrams.stories.js

diff --git a/.storybook/main.js b/.storybook/main.js
index a65b045fa..4ae6d4528 100644
--- a/.storybook/main.js
+++ b/.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'),
+            ),
+          });
+        },
+      });
+    }
+  },
 };
diff --git a/packages/form-system/stories/diagram/FormatMixinDiagram-1.svg b/packages/form-system/dev-assets/FormatMixinDiagram-1.svg
similarity index 100%
rename from packages/form-system/stories/diagram/FormatMixinDiagram-1.svg
rename to packages/form-system/dev-assets/FormatMixinDiagram-1.svg
diff --git a/packages/form-system/stories/diagram/FormatMixinDiagram-2.svg b/packages/form-system/dev-assets/FormatMixinDiagram-2.svg
similarity index 100%
rename from packages/form-system/stories/diagram/FormatMixinDiagram-2.svg
rename to packages/form-system/dev-assets/FormatMixinDiagram-2.svg
diff --git a/packages/form-system/stories/diagram/FormatMixinDiagram-3.svg b/packages/form-system/dev-assets/FormatMixinDiagram-3.svg
similarity index 100%
rename from packages/form-system/stories/diagram/FormatMixinDiagram-3.svg
rename to packages/form-system/dev-assets/FormatMixinDiagram-3.svg
diff --git a/packages/form-system/stories/30-System-Formatting.stories.mdx b/packages/form-system/stories/30-System-Formatting.stories.mdx
index 5f1830428..338037758 100644
--- a/packages/form-system/stories/30-System-Formatting.stories.mdx
+++ b/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">
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-1.svg" />
-  `}
-</Story>
+<Story id="forms-system-internals--standard-flow"></Story>
 
 ### Unparseable flow
 Where a user sets the input to something that is not parseable by the parser
 
-<Story name="Unparseable flow">
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-2.svg" />
-  `}
-</Story>
+<Story id="forms-system-internals--unparseable-flow"></Story>
 
 ### Imperative / programmatic flow
 Where the developer sets the modelValue of the input programmatically
 
-<Story name="Imperative / programmatic flow">
-  {html`
-    <img src="./packages/form-system/stories/diagram/FormatMixinDiagram-3.svg" />
-  `}
-</Story>
+<Story id="forms-system-internals--imperative-flow"></Story>
diff --git a/packages/form-system/stories/flow-diagrams.stories.js b/packages/form-system/stories/flow-diagrams.stories.js
new file mode 100644
index 000000000..a168c2f69
--- /dev/null
+++ b/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)} />
+`;