feat: migrate from docz to gatsby

Author: mrholek

build/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": false,
+    "node": true
+  },
+  "parserOptions": {
+    "sourceType": "script"
+  },
+  "extends": "../.eslintrc.js",
+  "rules": {
+    "no-console": "off",
+    "strict": "error"
+  }
+}

build/api.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+'use strict'
+
+const docgen = require('react-docgen-typescript')
+const fs = require('fs').promises
+const path = require('path')
+const globby = require('globby')
+
+// These are the filetypes we only care about replacing the version
+const GLOB = ['src/components/**/*.tsx']
+const GLOBBY_OPTIONS = {
+  cwd: path.join(__dirname, '..'),
+  gitignore: true,
+  ignore: ['**/__tests__/**'],
+}
+const EXCLUDED_FILES = []
+
+const options = {
+  savePropValueAsString: true,
+}
+
+async function createMdx(filename, name, props) {
+  if (typeof props === 'undefined') return
+
+  // let content = `### ${name}\n\n| Prop name | Description | Type |\n| --- | --- | --- |\n`
+  let content = `| Prop name | Description | Type |\n| --- | --- | --- |\n`
+
+  for (const [key, value] of Object.entries(props).sort()) {
+    if (value.parent.fileName !== 'react/node_modules/@types/react/index.d.ts') {
+      content += `| ${value['name']} | ${value['description']} | ${value['type']['name']} |\n`
+      console.log(`${key}: ${value}`)
+    }
+  }
+
+  await fs.writeFile(`api/${filename}.api.mdx`, content, { encoding: 'utf8' }).then(() => {
+    // Do whatever you want to do.
+    console.log('Done')
+  })
+}
+
+async function main() {
+  try {
+    const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES)
+
+    await Promise.all(
+      files.map((file) => {
+        const props = docgen.parse(file, options)
+        if (props && typeof props[0] !== 'undefined') {
+          const filename = path.basename(file, '.tsx')
+          createMdx(filename, props[0].displayName, props[0].props)
+        }
+        // const props = docgen.parse(file, options)
+        // if (props) console.log(props)
+      }),
+    )
+  } catch (error) {
+    console.error(error)
+    process.exit(1)
+  }
+}
+
+main()

doczrc.js

@@ -0,0 +1 @@
+import './src/styles/style.scss'

gatsby-browse.js

@@ -1,9 +1,42 @@
 module.exports = {
   siteMetadata: {
-    siteUrl: `https://coreui.io/`,
+    title: `CoreUI for React.js`,
+    titleTemplate: '%s · React UI Components · CoreUI ',
+    description: `CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project.`,
+    url: `https://coreui.io/react/docs/`,
+    image: '', // Path to your image you placed in the 'static' folder
+    twitterUsername: '@coreui_io',
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        defaultLayouts: {
+          docs: require.resolve('./src/docs/templates/Docs.tsx'),
+        },
+        gatsbyRemarkPlugins: [
+          {
+            // resolve: `gatsby-remark-embed-markdown`,
+            resolve: require.resolve('./src/docs/plugins/gatsby-remark-embed-markdown'),
+            options: {
+              directory: `${__dirname}/api/`,
+            },
+          },
+          {
+            resolve: `gatsby-remark-autolink-headers`,
+          },
+        ],
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `docs`,
+        path: `${__dirname}/content/docs/`,
+      },
+    },
     'gatsby-plugin-sass',
+    'gatsby-plugin-typescript',
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
@@ -19,5 +52,11 @@ module.exports = {
         ],
       },
     },
+    // {
+    //   resolve: `gatsby-transformer-remark`,
+    //   options: {
+    //     plugins: [`gatsby-remark-autolink-headers`],
+    //   },
+    // },
   ],
 }

gatsby-config.js

@@ -0,0 +1,62 @@
+const path = require('path')
+const { createFilePath } = require('gatsby-source-filesystem')
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+
+  // you only want to operate on `Mdx` nodes. If you had content from a
+  // remote CMS you could also check to see if the parent node was a
+  // `File` node here
+  if (node.internal.type === 'Mdx') {
+    const value = createFilePath({ node, getNode })
+
+    createNodeField({
+      // Name of the field you are adding
+      name: 'slug',
+      // Individual MDX node
+      node,
+      // Generated value based on filepath with "blog" prefix. you
+      // don't need a separating "/" before the value because
+      // createFilePath returns a path with the leading "/".
+      value: `${value}`,
+    })
+  }
+}
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  // Destructure the createPage function from the actions object
+  const { createPage } = actions
+  const result = await graphql(`
+    query {
+      allMdx {
+        edges {
+          node {
+            id
+            fields {
+              slug
+            }
+            tableOfContents(maxDepth: 10)
+          }
+        }
+      }
+    }
+  `)
+  if (result.errors) {
+    reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query')
+  }
+  // Create blog post pages.
+  const posts = result.data.allMdx.edges
+  // you'll call `createPage` for each result
+  posts.forEach(({ node }, index) => {
+    createPage({
+      // This is the slug you created before
+      // (or `node.frontmatter.slug`)
+      path: node.fields.slug,
+      // This component will wrap our MDX content
+      component: path.resolve(`./src/docs/templates/Docs.tsx`),
+      // You can use the values in this context in
+      // our page layout component
+      context: { id: node.id },
+    })
+  })
+}

gatsby-node.js

@@ -1,6 +1,9 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.6",
+  "config": {
+    "version_short": "4.0"
+  },
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
@@ -9,13 +12,12 @@
   "files": [
     "dist/",
     "src/",
-    "doczrc.js",
     "tsconfig.json",
     "package.json"
   ],
   "scripts": {
     "build": "rollup -c",
-    "docs:dev": "docz dev",
+    "docs:dev": "gatsby dev",
     "docs:build": "docz build",
     "lint": "eslint \"src/components/**/*.{js,ts,tsx}\"",
     "test": "jest --coverage",
@@ -28,49 +30,58 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
     "@coreui/coreui": "^4.0.1",
     "@coreui/icons": "^2.0.1",
     "@coreui/icons-react": "^2.0.0-rc.5",
     "@coreui/react-chartjs": "^2.0.0-rc.1",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
     "@popperjs/core": "^2.9.3",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
-    "@types/react": "^17.0.17",
+    "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.2",
     "@types/react-transition-group": "^4.4.2",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
     "classnames": "^2.3.1",
-    "docz": "^2.3.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsdoc": "^36.0.7",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "gatsby-plugin-google-gtag": "2",
-    "gatsby-plugin-sass": "3",
-    "gatsby-plugin-sitemap": "2",
+    "gatsby": "^3.12.0",
+    "gatsby-plugin-google-gtag": "3",
+    "gatsby-plugin-mdx": "^2.12.0",
+    "gatsby-plugin-sass": "4",
+    "gatsby-plugin-sitemap": "4",
+    "gatsby-remark-autolink-headers": "^4.9.0",
+    "gatsby-remark-embed-markdown": "^0.0.4",
+    "gatsby-source-filesystem": "^3.12.0",
+    "gatsby-transformer-remark": "^4.9.0",
+    "glob": "^7.1.7",
+    "globby": "^11.0.4",
     "jest": "^27.0.6",
     "prettier": "^2.3.2",
+    "prism-react-renderer": "^1.2.1",
+    "prismjs": "^1.24.1",
     "react": "^17.0.1",
+    "react-docgen-typescript": "^2.1.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
     "rollup": "^2.56.22.56.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "sass": "^1.37.5",
-    "ts-jest": "^27.0.4",
+    "sass": "^1.38.0",
+    "ts-jest": "^27.0.5",
     "typescript": "^4.3.5"
   },
   "jest": {