Set up Storybook and use that for documentation

.eslintrc.js

@@ -9,11 +9,12 @@ module.exports = {
     '@typescript-eslint',
   ],
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/essential',
-    '@vue/typescript/recommended'
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/essential",
+    "@vue/typescript/recommended",
+    "plugin:storybook/recommended"
   ],
   rules: {
     "indent": ["error", 2],

.github/workflows/build-deploy-docs.yml

@@ -32,10 +32,10 @@ jobs:
       - name: Build
         run: yarn build
 
-      - name: Build docs
-        run: yarn docs
+      - name: Build Storybook
+        run: yarn build-storybook 
 
-      - name: Deploy docs to GitHub Pages
+      - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages

.github/workflows/build.yml

@@ -34,6 +34,6 @@ jobs:
       - name: Build
         run: yarn build
 
-      - name: Build docs
-        run: yarn docs
+      - name: Build Storybook 
+        run: yarn build-storybook
 

.gitignore

@@ -26,3 +26,5 @@ tsconfig.tsbuildinfo
 *.env
 
 docs/
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from "@storybook/vue3-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: {
+    name: "@storybook/vue3-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: async (config) => {
+    config.module?.rules?.push({
+      test: /\.less/,
+      sideEffects: true,
+      use: ["style-loader", "css-loader", "less-loader"],
+    });
+    config.module?.rules?.push({
+      test: /\.md/,
+      use: ["markdown-loader"]
+    });
+
+    // Remove existing mdx rule if any (but should be none)
+    // config.module?.rules = config.module?.rules?.filter((f) => f && f != false && f?.test?.toString() !== '/\\.mdx$/')
+
+    config.module?.rules?.push({
+      test: /\.mdx$/,
+      use: ['@mdx-js/loader'],
+    });
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,33 @@
+import { setup, type Preview } from "@storybook/vue3";
+
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+const vuetify = createVuetify({
+  components,
+  directives
+});
+
+setup((app) => {
+  app.use(vuetify);
+});
+
+const preview: Preview = {
+  // TODO: This is what storybook tells us to do:
+  // https://storybook.js.org/docs/writing-docs/autodocs
+  // but doesn't seem to work. Why not?
+  // For now, we can work around this by marking each story
+  // with this tag
+  // tags: ["autodocs"],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -17,21 +17,40 @@
     "vuetify": "^3.3.3"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/test": "^8.0.9",
+    "@storybook/vue3": "^8.0.9",
+    "@storybook/vue3-webpack5": "^8.0.9",
     "@types/leaflet": "^1.9.11",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.25",
     "@vue/eslint-config-typescript": "^12.0.0",
     "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.1",
     "eslint": "^8.31.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.8.0",
     "less": "^4.2.0",
     "less-loader": "^12.1.0",
+    "markdown-loader": "^8.0.0",
+    "storybook": "^8.0.9",
+    "storybook-css-modules-preset": "^1.1.1",
+    "storybook-dark-mode": "^4.0.1",
+    "style-loader": "^4.0.0",
     "typedoc": "^0.25.13",
+    "typedoc-plugin-markdown": "^3.17.1",
     "typedoc-plugin-vue": "^1.1.0",
     "typescript": "^4.9.4",
+    "vue-loader": "^17.4.2",
     "vue-template-compiler": "^2.7.14",
     "webpack": "^5.75.0"
   },
@@ -48,8 +67,10 @@
   "scripts": {
     "build": "vue-cli-service build --target lib --name index src/index.ts",
     "clean": "rimraf dist",
-    "docs": "typedoc",
-    "lint": "vue-cli-service lint src --no-fix"
+    "docs": "typedoc --plugin typedoc-plugin-markdown",
+    "lint": "vue-cli-service lint src --no-fix",
+    "storybook": "storybook dev -p 6006 --debug",
+    "build-storybook": "storybook build -o docs"
   },
   "types": "./dist/src/index.d.ts"
 }

src/stories/CreditLogos.stories.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { CreditLogosProps } from "../types";
+import CreditLogos from "../components/CreditLogos.vue";
+
+const meta: Meta<typeof CreditLogos> = {
+  component: CreditLogos,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CreditLogos>;
+
+export const Primary: Story = {
+  render: (args: CreditLogosProps) => ({
+    components: { CreditLogos },
+    template: `<CreditLogos v-bind="args" />`,
+    setup() {
+      return { args };
+    }
+  }),
+  args: {
+    logoSize: "5vmin",
+    extraLogos: [
+      {
+        alt: "Smithsonian Logo",
+        src: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Smithsonian_sun_logo_no_text.svg/1024px-Smithsonian_sun_logo_no_text.svg.png",
+        href: "https://www.si.edu/"
+      }
+    ],
+    defaultLogos: ["wwt", "cosmicds", "nasa", "sciact"],
+  }
+};

src/stories/IconButton.stories.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { IconButtonProps } from "../types";
+import IconButton from "../components/IconButton.vue";
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faBookOpen);
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Primary: Story = {
+  render: (args: IconButtonProps) => ({
+    components: { IconButton },
+    template: `<IconButton v-bind="args" />`,
+    setup() {
+      return { args };
+    }
+  }),
+  decorators: [
+    () => {
+      return { template: `<div style="width: 50px"><story /></div>` };
+    }
+  ],
+  args: {
+    modelValue: false,
+    faIcon: "book-open",
+    mdIcon: null,
+    color: "white",
+    focusColor: "red",
+    backgroundColor: "#040404",
+    boxShadow: true,
+    border: true,
+    longPressTimeMs: 500,
+    tooltipText: "Tooltip",
+    tooltipLocation: "start",
+    tooltipOnClick: false,
+    tooltipOnFocus: false,
+    tooltipOnHover: true,
+    showTooltip: true,
+    faSize: "lg",
+    mdSize: "100px"
+  }
+};

typedoc.json

@@ -2,5 +2,5 @@
     "$schema": "https://typedoc.org/schema.json",
     "entryPoints": ["./src/index.ts"],
     "out": "docs",
-    "exclude": ["**/*.vue", "src/shims-vue.d.ts"]
+    "exclude": ["**/*.vue", "src/shims-vue.d.ts", "src/stories/**"]
 }