feat: docs generator

.eslintrc

@@ -9,7 +9,8 @@
     ".vscode/",
     ".cache/",
     "__mocks__/",
-    "__generated__/"
+    "__generated__/",
+    "scripts/format-docs.js"
   ],
   "env": {
     "es2022": true

.gitignore

@@ -82,3 +82,6 @@ out
 
 # File system stuff
 **/.DS_Store
+
+# Auto-generated documentation
+__tmpDocs

package.json

@@ -30,6 +30,7 @@
     "build:storybook": "pnpm build && pnpm storybook build",
     "chromatic": "chromatic --exit-zero-on-changes --build-script-name=build:storybook",
     "docs": "npm --prefix packages/admin-ui-docs run start",
+    "generate-docs": "typedoc --plugin typedoc-plugin-markdown && node scripts/format-docs.js",
     "next-docs": "npm --prefix packages/next-docs run dev",
     "build:docs": "npm --prefix packages/admin-ui-docs run build-docs",
     "build:next-docs": "npm --prefix packages/next-docs run build-docs",
@@ -129,6 +130,8 @@
     "storybook": "^7.5.3",
     "tslib": "2.6.2",
     "turbo": "1.4.3",
+    "typedoc": "^0.25.3",
+    "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "4.9.5",
     "url-loader": "^4.1.0",
     "vite": "4.3.9",

scripts/format-docs.js

@@ -0,0 +1,83 @@
+const fs = require('fs')
+const prettier = require('prettier')
+
+function splitIntoMultipleFiles() {
+  const cwd = process.cwd()
+
+  const rootFile = fs.readFileSync(`${cwd}/__tmpDocs/modules.md`, 'utf8')
+  // typedoc-plugin-markdown generates a single file with all the docs separated by "___"
+  const files = rootFile.split('___')
+
+  for (const file of files) {
+    try {
+      const content = file.split('\n')
+      const componentName = content
+        // Find the line that starts with "###", which is the component/method/hook name
+        .find((line) => line.startsWith('###'))
+        .replace('###', '')
+        .trim()
+
+      // Means that this is a component
+      const isPascalCase = /^[A-Z][a-zA-Z0-9]*$/.test(componentName)
+
+      // Means that this is a hook, matches camelCase methods starting with "use"
+      const isHook = /^use[A-Z][a-zA-Z0-9]*$/.test(componentName)
+
+      if (isHook) {
+        const kebabCaseName = componentName
+          .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+          .toLowerCase()
+
+        const folderPath = `${cwd}/__tmpDocs/hooks/${kebabCaseName}`
+        fs.mkdirSync(folderPath, {
+          recursive: true,
+        })
+
+        const filePath = `${folderPath}/code.mdx`
+        fs.writeFileSync(filePath, file)
+        prettify(filePath)
+
+        continue
+      }
+
+      if (isPascalCase) {
+        const kebabCaseName = componentName
+          .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+          .toLowerCase()
+
+        const folderPath = `${cwd}/__tmpDocs/components/${kebabCaseName}`
+        fs.mkdirSync(folderPath, {
+          recursive: true,
+        })
+
+        const filePath = `${folderPath}/code.mdx`
+        fs.writeFileSync(filePath, file)
+
+        prettify(filePath)
+
+        continue
+      }
+
+      const filePath = `${cwd}/__tmpDocs/${componentName}.md`
+      fs.writeFileSync(filePath, file)
+      prettify(filePath)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+function prettify(filePath) {
+  const prettierConfigPath = require.resolve('../.prettierrc')
+  const prettierConfig = require(prettierConfigPath)
+  const prettierOptions = {
+    ...prettierConfig,
+    parser: 'markdown',
+  }
+
+  const file = fs.readFileSync(filePath, 'utf8')
+  const formatted = prettier.format(file, prettierOptions)
+  fs.writeFileSync(filePath, formatted)
+}
+
+splitIntoMultipleFiles()

typedoc.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": [
+    "packages/components/src/index.ts",
+    "packages/raccoon-next/src/index.ts",
+    "packages/raccoon-io/src/index.ts"
+  ],
+  "exclude": [
+    "packages/components/src/**/*+(index|.vitest|.e2e|.test|.stories).(ts|tsx)"
+  ],
+  "tsconfig": "packages/components/tsconfig.json",
+  "out": "__tmpDocs"
+}