Auto generate documentation (#13)

* Install docgen

* Remove manual story

* Configure docgen

* Rename config js to cjs

* Disable auto props globally

* Ignore generated docs

* Use self-documenting components in storybook

---------

Co-authored-by: Bryant Gillespie <[email protected]>

.gitignore

@@ -9,3 +9,4 @@ dist
 .DS_Store
 .fleet
 .idea
+*.story.md

components/docgen.config.cjs

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+	componentsRoot: 'src',
+	outDir: 'src',
+	getDestFile: (file, config) => path.join(config.outDir, file).replace(/\.vue$/, '.story.md'),
+};

components/histoire.config.ts

@@ -4,4 +4,7 @@ import { defineConfig } from 'histoire';
 export default defineConfig({
 	plugins: [HstVue()],
 	setupFile: './histoire.setup.ts',
+	defaultStoryProps: {
+		autoPropsDisabled: true,
+	},
 });

components/package.json

@@ -28,6 +28,7 @@
 		"story:dev": "histoire dev",
 		"story:build": "histoire build",
 		"story:preview": "histoire preview",
+		"docs": " vue-docgen '**/*[!story].vue' -c docgen.config.cjs",
 		"typecheck": "vue-tsc --noEmit"
 	},
 	"devDependencies": {
@@ -43,6 +44,7 @@
 		"vite": "4.3.7",
 		"vite-plugin-dts": "2.3.0",
 		"vitest": "0.31.1",
+		"vue-docgen-cli": "4.67.0",
 		"vue-tsc": "1.8.0"
 	},
 	"dependencies": {

components/src/base-icon/base-icon.story.vue

@@ -10,7 +10,7 @@ const state = reactive({
 </script>
 
 <template>
-	<Story title="Base / Icon" auto-props-disabled>
+	<Story title="Base / Icon">
 		<template #controls>
 			<HstText v-model="state.name" title="Name" />
 			<HstSlider v-model="state.weight" :step="100" :min="100" :max="700" title="Weight" />

components/src/base-icon/base-icon.vue

@@ -2,8 +2,22 @@
 import { computed, unref } from 'vue';
 
 export interface BaseIconProps {
+	/**
+	 * Name of the Material Symbol to use.
+	 * @see https://fonts.google.com/icons for all available icons
+	 */
 	name: string;
+
+	/**
+	 * Size of the icon. Controls both font size and optical size
+	 * @values small, medium, large
+	 */
 	size?: 'small' | 'medium' | 'large';
+
+	/**
+	 * Weight of the icon. Similar to font-weight
+	 * @values 100, 200, 300, 400, 500, 600, 700
+	 */
 	weight?: number;
 }