From c338f6b8c5fa4fe1336591719a9f55893b978c80 Mon Sep 17 00:00:00 2001
From: James Taylor <james@jamestaylor.org>
Date: Sun, 7 Jul 2019 16:12:33 +0200
Subject: [PATCH 1/2] Make styleguide work for vue components.

All components are now loaded in the styleguide, however to document
them jsdoc comments need to be added and `.md` files for examples. The
Alert component is now documented as an example.

Unfortunately many of our components use axios to access the API
immediately on creation. I'm not sure how to document these. It seems
like a bad thing that they do this...
---
 client/galaxy/scripts/components/Alert.md  | 23 +++++++++++
 client/galaxy/scripts/components/Alert.vue | 14 +++++++
 client/styleguide.config.js                | 45 ++++++++++++----------
 3 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 client/galaxy/scripts/components/Alert.md

diff --git a/client/galaxy/scripts/components/Alert.md b/client/galaxy/scripts/components/Alert.md
new file mode 100644
index 00000000000..2e578282be3
--- /dev/null
+++ b/client/galaxy/scripts/components/Alert.md
@@ -0,0 +1,23 @@
+# Basic alert types
+
+Default alert:
+
+```js
+<Alert>An alert with all defaults</Alert>
+```
+
+Alert variants:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert v-bind:variant="variant">A {{variant}} message</Alert>
+</div>
+```
+
+Dismissible:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert :variant="variant" dismissible>A {{variant}} message</Alert>
+</div>
+```
diff --git a/client/galaxy/scripts/components/Alert.vue b/client/galaxy/scripts/components/Alert.vue
index 66af11ae62b..15fa4902114 100644
--- a/client/galaxy/scripts/components/Alert.vue
+++ b/client/galaxy/scripts/components/Alert.vue
@@ -1,5 +1,6 @@
 <template>
     <b-alert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
+        <!-- @slot Message to display in alert -->
         <slot> {{ message }} </slot>
     </b-alert>
 </template>
@@ -7,21 +8,34 @@
 <script>
 export default {
     props: {
+	/**
+         * Message to display in the alert
+         */
         message: {
             type: String,
             default: ""
         },
+	/**
+         * Alias for variant, takes precedence if both are set
+         */
         status: {
             type: String,
             default: ""
         },
+	/**
+         * Alert type, one of done/success, info, warning, error/danger
+         */
         variant: {
             type: String,
             default: "done"
         },
+	/** Display a close button in the alert that allows it to be dismissed */
         dismissible: Boolean,
+	/** Label for the close button, for aria */
         dismissLabel: String,
+	/** If a number, number of seconds to show before dismissing */
         show: [Boolean, Number],
+	/** Should the alert fade out */
         fade: Boolean
     },
     computed: {
diff --git a/client/styleguide.config.js b/client/styleguide.config.js
index 57aa4f09065..34a66424b2e 100644
--- a/client/styleguide.config.js
+++ b/client/styleguide.config.js
@@ -36,30 +36,33 @@ const fileLoaderConfigRule = { rules: [{ test: fileLoaderTest, use: ["file-loade
 webpackConfig.module = merge.smart(webpackConfig.module, fileLoaderConfigRule);
 webpackConfig.output.publicPath = "";
 
-const sections = [];
+webpackConfig.resolve.modules.push( path.join(__dirname, "galaxy/style/scss") );
 
-glob("./galaxy/docs/galaxy-*.md", (err, files) => {
-    files.forEach(file => {
-        const name = file.match(/galaxy-(\w+).md/)[1];
-        sections.push({ name: "Galaxy " + name, content: file });
-    });
-}),
-    sections.push(
-        ...[
-            {
-                name: "Basic Bootstrap Styles",
-                content: "./galaxy/docs/bootstrap.md"
-            }
-            // This will require additional configuration
-            // {
-            //     name: 'Components',
-            //     components: './galaxy/scripts/components/*.vue'
-            // }
-        ]
-    );
+galaxyStyleDocs = []
+glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
+    const name = file.match(/galaxy-(\w+).md/)[1];
+    galaxyStyleDocs.push({ name: name, content: file });
+});
+
+const sections = [
+    {
+	name: 'Components',
+	components: './galaxy/scripts/components/**/*.vue'
+    },
+    {
+	name: 'Galaxy styles',
+	sections: galaxyStyleDocs
+    },
+    {
+	name: "Basic Bootstrap Styles",
+	content: "./galaxy/docs/bootstrap.md"
+    }
+];
 
 module.exports = {
     webpackConfig,
+    pagePerSection: true,
     sections,
-    require: ["./galaxy/style/scss/base.scss"]
+    require: ["./galaxy/style/scss/base.scss", "./galaxy/scripts/polyfills.js", "./galaxy/scripts/bundleEntries.js"],
+    vuex: "./galaxy/scripts/store/index.js"
 };

From 2ccf36626a39a236c48e11c432509034cd4cbf06 Mon Sep 17 00:00:00 2001
From: James Taylor <james@jamestaylor.org>
Date: Sun, 7 Jul 2019 19:05:23 +0200
Subject: [PATCH 2/2] Better organization in styleguide.

---
 client/galaxy/scripts/components/Alert.md           |  8 +++-----
 .../galaxy/scripts/components/Tags/StatelessTags.md | 11 +++++++++++
 client/styleguide.config.js                         | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 client/galaxy/scripts/components/Tags/StatelessTags.md

diff --git a/client/galaxy/scripts/components/Alert.md b/client/galaxy/scripts/components/Alert.md
index 2e578282be3..021efd67e56 100644
--- a/client/galaxy/scripts/components/Alert.md
+++ b/client/galaxy/scripts/components/Alert.md
@@ -1,12 +1,10 @@
-# Basic alert types
-
-Default alert:
+### Default alert
 
 ```js
 <Alert>An alert with all defaults</Alert>
 ```
 
-Alert variants:
+### Alert variants
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
@@ -14,7 +12,7 @@ Alert variants:
 </div>
 ```
 
-Dismissible:
+### Dismissible
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
diff --git a/client/galaxy/scripts/components/Tags/StatelessTags.md b/client/galaxy/scripts/components/Tags/StatelessTags.md
new file mode 100644
index 00000000000..916362b0f33
--- /dev/null
+++ b/client/galaxy/scripts/components/Tags/StatelessTags.md
@@ -0,0 +1,11 @@
+### Default behavior with four simple tags
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" />
+```
+
+### Limiting maximum tags to two
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" maxVisibleTags=2 />
+```
diff --git a/client/styleguide.config.js b/client/styleguide.config.js
index 34a66424b2e..d3d7d64d7e9 100644
--- a/client/styleguide.config.js
+++ b/client/styleguide.config.js
@@ -1,5 +1,6 @@
 const path = require("path");
 const glob = require("glob");
+const fs = require("fs");
 const merge = require("webpack-merge");
 
 let webpackConfig = require("./webpack.config.js");
@@ -47,7 +48,17 @@ glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
 const sections = [
     {
 	name: 'Components',
-	components: './galaxy/scripts/components/**/*.vue'
+	// Components that are directories will get their own section
+	sections: glob.sync("./galaxy/scripts/components/*").map(file => {
+	    if (fs.lstatSync(file).isDirectory()) {
+		return {
+		    name: path.basename(file),
+		    components: file + "/**/*.vue"
+		};
+	    }
+	}).filter( v => v ),
+	// ...while top level components are handled here.
+	components: './galaxy/scripts/components/*.vue',
     },
     {
 	name: 'Galaxy styles',