work on it

docs-old/docgen/docgen.config.cjs → docs/docgen/docgen.config.cjs

@@ -8,8 +8,8 @@ const slots = require('./docgen.template.slots.cjs')
 const component = require('./docgen.template.component.cjs')
 
 module.exports = defineConfig({
-  componentsRoot: 'components/',
-  outDir: './docs/components',
+  componentsRoot: '../components/',
+  outDir: './src/pages/components/',
   defaultExamples: true,
   templates: {
     component,

docs-old/docgen/docgen.template.component.cjs → docs/docgen/docgen.template.component.cjs

@@ -17,11 +17,11 @@ description: ${doc.description}`
 <script lang="ts" setup>
 import { ${
     doc.exportName
-  } as ${tempName} } from '../../../components/${fileName}'
+  } as ${tempName} } from '../../../../../components/${fileName}'
 const components$ = { ${doc.displayName}: ${tempName} }
 </script>
 ${doc.docsBlocks
-  .map((d) => d.replace(new RegExp(`# ${doc.displayName}`, 'g'), ''))
+  ?.map((d) => d.replace(new RegExp(`# ${doc.displayName}`, 'g'), ''))
   .join('\n\n')}
 ${usage.props}
 ${usage.events}

docs-old/docgen/docgen.template.events.cjs → docs/docgen/docgen.template.events.cjs

@@ -15,7 +15,7 @@ module.exports = async function renderProp(events, opt) {
   return `
 ${supComponent ? '#' : ''}## Events
 
-${await lineTemplate(events, supComponent)}
+${await lineTemplate(events, supComponent ?? false)}
 `
 }
 
@@ -28,7 +28,7 @@ async function lineTemplate(event, supComponent) {
   const retArray = await Promise.all(
     event.map(async (ev) => {
       const properties = await Promise.all(
-        ev.properties.map(
+        ev.properties?.map(
           /**
            * @param {any} prop
            */
@@ -38,8 +38,8 @@ async function lineTemplate(event, supComponent) {
               description: prop.description,
               type: await renderType(prop.type),
             }
-          }
-        )
+          },
+        ) ?? [],
       )
       const name = ev.name
       let t = ev.description ?? ''
@@ -61,15 +61,15 @@ ${supComponent ? '#' : ''}##### ${mdclean(p.name)}
 ${p.description ? mdclean(p.description) : ''}
 <div><b>type</b>: ${p.type ? p.type : ''}</div>
 
-`
+`,
   )
   .join('')}
   `
     : ''
 }
 
 `
-    })
+    }),
   )
 
   return retArray.join('')

docs-old/docgen/docgen.template.props.cjs → docs/docgen/docgen.template.props.cjs

@@ -29,7 +29,7 @@ ${supComponent ? '#' : ''}### ${mdclean(p)}
 ${mdclean(t)}
 
 `
-    })
+    }),
   )
 
   return retArray.join('')
@@ -46,7 +46,7 @@ module.exports = async function renderProp(props, opt) {
   return `
 ${supComponent ? '#' : ''}## Props
 
-${await lineTemplate(props, supComponent)}
+${await lineTemplate(props, supComponent ?? false)}
 ---
 `
 }

docs-old/docgen/renderType.cjs → docs/docgen/renderType.cjs

@@ -6,18 +6,19 @@ const { mdclean } = defaultTemplates
 
 /**
  *
- * @param {{name:string, schema?:any}} type
+ * @param {{name:string, schema?:any} | undefined} type
  * @returns {Promise<string>}
  */
 module.exports = async function renderType(type) {
+  if (!type) return ''
   if (type.schema) {
     return `<code class="bg-gray-50 py-[2px] px-[4px] inline-block rounded">${await renderComplexTypes(
-      type.schema
+      type.schema,
     )}</code>`
   }
   return (
     `<code class="bg-gray-50 py-[2px] px-[4px] rounded">${mdclean(
-      type?.name
+      type?.name,
     ).replace(/\\\|/g, '|')}</code>` ?? ''
   )
 }
@@ -31,7 +32,7 @@ let highlighter = null
  *
  * @param {any} schema
  * @param {boolean} [subType]
- * @returns {Promise<string>}
+ * @returns {Promise<string | undefined>}
  */
 async function renderComplexTypes(schema, subType) {
   if (typeof schema === 'string') {
@@ -40,7 +41,7 @@ async function renderComplexTypes(schema, subType) {
   }
   if (schema.kind === 'enum') {
     const values = await Promise.all(
-      schema.schema.map((v) => renderComplexTypes(v, true))
+      schema.schema.map((v) => renderComplexTypes(v, true)),
     )
     const filteredValues = values.filter((v) => v)
     const overflow = filteredValues.length > 12
@@ -56,8 +57,8 @@ async function renderComplexTypes(schema, subType) {
           serializedInlineValuesWrapped,
           `type ${schema.type.replace(
             ' | undefined',
-            ''
-          )} = ${filteredValues.join(' | ')}`
+            '',
+          )} = ${filteredValues.join(' | ')}`,
         )
       : serializedInlineValuesWrapped
   }
@@ -69,7 +70,7 @@ async function renderComplexTypes(schema, subType) {
   }
   if (schema.kind === 'object') {
     const obj = Object.values(schema.schema).map((value) =>
-      renderObjectType(value)
+      renderObjectType(value),
     )
     if (obj.includes(undefined)) return schema.type
     const code = `interface ${schema.type} {
@@ -91,7 +92,7 @@ function renderObjectType(value) {
     ? /\n/.test(value.description)
       ? `\t/**\n\t * ${value.description.replace(
           /(\n\r?)/g,
-          '$1\t * '
+          '$1\t * ',
         )}\n\t */\n`
       : `\t/** ${value.description} */\n`
     : ''
@@ -110,6 +111,6 @@ async function makeTooltip(content, popperCode) {
     popperCode,
     {
       lang: 'ts',
-    }
+    },
   )}</span></template></Tooltip>`
 }

docs/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@cypress-design/docs",
-  "version": "0.3.0",
+  "private": true,
+  "version": "0.0.1",
   "files": [
     "*"
   ],
   "scripts": {
-    "build": "vite-ssg build",
-    "dev": "vite --port 3333 --open",
-    "preview": "vite preview"
+    "build": "node ../scripts/copy-md.mjs && vue-docgen -c ./docgen/docgen.config.cjs --logLevel=debug && yarn build:components && ./vercel-build-docs.sh",
+    "docgen:watch": "vue-docgen --watch -c ./docgen/docgen.config.cjs",
+    "preview": "vite preview",
+    "dev": "rimraf docs/components && NODE_ENV=development concurrently \"node ../scripts/watch-constants.mjs\" \"yarn docgen:watch\" \"yarn vite dev\""
   },
   "dependencies": {
+    "@cypress-design/vue-tooltip": "*",
     "@types/markdown-it-link-attributes": "^3.0.1",
+    "@vueuse/head": "^1.3.1",
+    "concurrently": "^8.2.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.9.0",
     "react-docgen-typescript": "^2.2.2",
@@ -28,5 +33,6 @@
     "vue-docgen-cli": "^4.67.0",
     "vue-live": "^2.5.4",
     "vue-router": "^4.2.4"
-  }
-}
+  },
+  "license": "MIT"
+}

docs/src/.gitignore

@@ -0,0 +1 @@
+pages/components/*

docs/src/App.vue

@@ -1,23 +1,24 @@
 <script lang="ts" setup>
 import { RouterView } from 'vue-router'
+import { useHead } from '@vueuse/head'
 
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
 useHead({
-  title: 'Vitesse',
+  title: 'Cypress Design Docs',
   meta: [
     { name: 'description', content: 'Opinionated Vite Starter Template' },
     {
       name: 'theme-color',
-      content: () => (isDark.value ? '#00aba9' : '#ffffff'),
+      content: () => '#ffffff',
     },
   ],
   link: [
     {
       rel: 'icon',
       type: 'image/svg+xml',
-      href: () => (preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg'),
+      href: () => '/favicon.svg',
     },
   ],
 })

docs/src/components/DemoWrapper.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="demo-wrapper bg-gray-50 rounded p-[16px] my-[24px]">
+    <slot />
+  </div>
+</template>