feat: Props component

docs/content/2.usage/3.components.md

@@ -63,9 +63,7 @@ Check out a **danger** alert with a `codeblock` and a [link](/).
 </code-block>
 </code-group>
 
-| Prop | Type | Default | Values |
-|---------|------|-------------| ---|
-| `type` | `String` | `'info'` | `['info', 'success', 'warning', 'danger']` |
+<props of="atoms/Alert"></props>
 
 ### `<list>`
 
@@ -112,11 +110,8 @@ danger:
 </code-block>
 </code-group>
 
-| Prop | Type | Default | Values |
-|---------|------|-------------| ---|
-| `items` | `Array` | `[]` | Array of string |
-| `type` | `String` | `'primary'` | `['primary', 'success', 'info', 'warning', 'danger']` |
-| `icon` | `String` | `null` | Used to override the default `type` icon, check out the [icons available](https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons) |
+<props of="atoms/List"></props>
+
 
 ### `<badge>`
 
@@ -183,10 +178,7 @@ This component uses `slots`, refer to [`code-block`](#code-block) below.
   </code-block>
 </code-group>
 
-| Prop | Type | Required | Default | Description |
-|---------|------|-------------| ---| -- |
-| `label` | `String` | yes | | Label to display for the tab |
-| `active` | `Boolean` | no | `false` | Select which tab should be active |
+<props of="atoms/CodeBlock"></props>
 
 ### `<code-sandbox>`
 
@@ -211,9 +203,8 @@ link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dar
   </code-block>
 </code-group>
 
-| Prop | Type | Required | Value |
-|---------|------|-------------| ---|
-| `src` | `String` | `true` | Url to CodeSandbox embed |
+
+<props of="atoms/CodeSandbox"></props>
 
 ### `<tweet>`
 
@@ -238,6 +229,29 @@ Embed Tweets easily in your documentation with great performances, tweets embed
   </code-block>
 </code-group>
 
-| Prop | Type | Required | Value |
-|---------|------|-------------| ---|
-| `id` | `String` | `true` | Tweet id |
+<props of="atoms/Tweet"></props>
+
+### `<props>`
+
+List accepted properties of a component. 
+
+<code-group>
+  <code-block label="Preview" active>
+<div class="p-4 pb-0 border-2 border-t-0 border-gray-700 rounded-b-md">
+
+  <props of="atoms/CodeBlock"></props>
+
+</div>
+
+
+  </code-block>
+  <code-block label="Code">
+
+```md
+<props of="atoms/CodeBlock"></props>
+```
+
+  </code-block>
+</code-group>
+
+<props of="atoms/Props"></props>

package.json

@@ -38,7 +38,8 @@
     "tailwind-css-variables": "^2.0.3",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "theme-colors": "^0.0.5",
-    "ufo": "^0.6.6"
+    "ufo": "^0.6.6",
+    "vue-docgen-api": "^4.35.0"
   },
   "devDependencies": {
     "@nuxt/types": "^2.14.12",

theme/components/atoms/Alert.vue

@@ -11,6 +11,9 @@
 <script>
 export default {
   props: {
+    /**
+     * @values info, success, warning, danger
+     */
     type: {
       type: String,
       default: 'info',

theme/components/atoms/CodeBlock.vue

@@ -7,10 +7,16 @@
 <script>
 export default {
   props: {
+    /**
+     * Label to display for the tab
+     */
     label: {
       type: String,
       required: true
     },
+    /**
+     * Select which tab should be active
+     */
     active: {
       type: Boolean,
       default: false

theme/components/atoms/CodeSandbox.vue

@@ -16,6 +16,9 @@
 <script>
 export default {
   props: {
+    /**
+     * Url to CodeSandbox embed
+     */
     src: {
       type: String,
       required: true

theme/components/atoms/List.vue

@@ -12,10 +12,17 @@
 <script>
 export default {
   props: {
+    /**
+     * Array of string
+     */
     items: {
       type: Array,
       default: () => []
     },
+    /**
+     * Used to override the default <code>type</code> icon, check out the
+     *  <a href="https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons">icons available</a>
+     */
     icon: {
       type: String,
       default: null

theme/components/atoms/Props.vue

@@ -0,0 +1,96 @@
+<template>
+  <table v-if="component">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Type</th>
+        <th v-if="showRequired">Required</th>
+        <th v-if="showDefault">Default</th>
+        <th v-if="showValues">Values</th>
+        <th v-if="showDescription">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="prop in props" :key="prop.name">
+        <td><code>{{ prop.name }}</code></td>
+        <td><code>{{ prop.type && prop.type.name }}</code></td>
+        <td v-if="showRequired">{{ prop.required ? "Yes" : "No" }}</td>
+        <td v-if="showDefault"><code v-if="prop.defaultValue">{{ prop.defaultValue && prop.defaultValue.value }}</code></td>
+        <td v-if="showValues">
+          <code v-if="prop.values">{{ prop.values && JSON.stringify(prop.values).replace(/,/g, ', ') }}</code>
+          <span v-else>-</span>
+        </td>
+        <td v-if="showDescription">
+          <div v-html="prop.description"></div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    of: {
+      type: String,
+      default: undefined
+    },
+    /**
+     * @ignore
+     */
+    json: {
+      type: String,
+      default: '{}'
+    },
+    required: {
+      type: Boolean,
+      default: undefined
+    },
+    values: {
+      type: Boolean,
+      default: undefined
+    },
+    description: {
+      type: Boolean,
+      default: undefined
+    },
+    defaultValue: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  computed: {
+    component () {
+      return JSON.parse(decodeURI(this.json))
+    },
+    props () {
+      // hide ignored properties
+      return this.component.props.filter(prop => !prop.tags?.ignore)
+    },
+    showRequired () {
+      if (this.required !== undefined) {
+        return this.required
+      }
+      return this.props.find(prop => prop.required !== undefined)
+    },
+    showValues () {
+      if (this.values !== undefined) {
+        return this.values
+      }
+      return this.props.find(prop => prop.values)
+    },
+    showDescription () {
+      if (this.description !== undefined) {
+        return this.description
+      }
+      return this.props.find(prop => prop.description)
+    },
+    showDefault () {
+      if (this.defaultValue !== undefined) {
+        return this.defaultValue
+      }
+      return this.props.find(prop => prop.defaultValue)
+    }
+  }
+}
+</script>

docs/components/global/Tweet.vue → theme/components/atoms/Tweet.vue

@@ -40,12 +40,39 @@
 <script>
 export default {
   props: {
-    id: { type: String, default: '' },
+    /**
+     * Tweet id
+     */
+    id: { type: String, required: true },
+    /**
+     *
+     * @ignore
+     */
     name: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     username: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     avatar: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     heartCount: { type: String, default: '' },
+    /**
+     *
+     * @ignore
+     */
     createdAt: { type: Number, default: 0 },
+    /**
+     *
+     * @ignore
+     */
     layout: { type: String, default: 'tweet' }
   },
   computed: {

theme/nuxt.config.js

@@ -59,7 +59,8 @@ export default docusOptions => ({
         [r('utils/remark-prose'), {
           proseClass: 'prose dark:prose-dark'
         }],
-        [r('utils/remark-tweet'), {}]
+        [r('utils/remark-tweet'), {}],
+        [r('utils/remark-vue'), {}]
       ],
       remarkAutolinkHeadings: {
         behavior: 'wrap'

theme/utils/remark-prose.js

@@ -1,9 +1,10 @@
 const TAG_REGEX = /^\s*<\/?([A-Za-z0-9-_]+) ?[^>]*>/
 const PROSE_ELEMENTS = [
   // HTML tags
-  'div', 'p', 'ul'
+  'div', 'p', 'ul',
 
   // Global tags
+  'props'
 ]
 
 const isJsNode = (node, customProsElements = []) => {

theme/utils/remark-vue.js

@@ -0,0 +1,66 @@
+const path = require('path')
+const fs = require('fs')
+const {
+  parse
+} = require('vue-docgen-api')
+
+const directories = [
+  path.resolve('./docs/components'), // components directory of project docs
+  path.resolve('./components'), // components directory of project docs
+  path.resolve(__dirname, '../components') // components directory of Docus
+]
+
+function fileName (file) {
+  if (!file.match(/\.vue$/)) {
+    return file + '.vue'
+  }
+  return file
+}
+
+function resolvePath (file) {
+  file = fileName(file)
+  if (fs.existsSync(path.resolve(file))) {
+    return path.resolve(file)
+  }
+  for (const dir of directories) {
+    if (fs.existsSync(path.join(dir, file))) {
+      return path.join(dir, file)
+    }
+  }
+  return null
+}
+
+async function modifyNode (node) {
+  const match = node.value.match(/of=['"]([^'"]*)['"]/)
+  if (!match) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid component')
+    return { type: 'html', value: '<!-- Invalid component -->' }
+  }
+  const componentFile = resolvePath(match[1])
+  if (!componentFile) {
+    // eslint-disable-next-line no-console
+    console.error('Component not find. ' + match[1])
+    return { type: 'html', value: '<!-- Invalid component -->' }
+  }
+  const docs = await parse(componentFile)
+  node.value = node.value.replace(/^\s*<props\s+/, `<props json="${encodeURI(JSON.stringify(docs))}" `)
+  return node
+}
+
+module.exports = () => {
+  return async (tree, file) => {
+    const TAG_REGEX = /^\s*<[p|P]rops\s+/
+    const modified = tree.children.map(async (node, i) => {
+      if (node.type === 'html' && node.value && node.value.match(TAG_REGEX)) {
+        return await modifyNode(node)
+      }
+      if (node.children && node.children[0] && node.children[0].type === 'html' && node.children[0].value.match(TAG_REGEX)) {
+        node.children[0] = await modifyNode(node.children[0])
+      }
+      return Promise.resolve(node)
+    })
+    tree.children = (await Promise.all(modified)).flat()
+    return null
+  }
+}