docs(scripts): 📝 update docs script for v2 syntax

.prettierignore

@@ -55,6 +55,6 @@ yarn.lock
 dist
 __js
 templates
-docs
+/docs
 CHANGELOG.md
 .yalc

package.json

@@ -45,7 +45,7 @@
     "format": "prettier --check \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:fix": "prettier --write --list-different --cache \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:package": "sort-package-json package.json",
-    "docs": "node scripts/builds/docs.js",
+    "docs": "node scripts/docs/index.js",
     "prebuild": "rimraf dist",
     "build": "concurrently yarn:build:*",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",

scripts/docs/add-composition.js

@@ -0,0 +1,107 @@
+const path = require("path");
+const outdent = require("outdent");
+const { Project, ts } = require("ts-morph");
+
+const { addMdContent } = require("./utils");
+const { getPublicFiles, sortSourceFiles } = require("../utils/index");
+
+// eslint-disable-next-line no-useless-escape
+const COMPOSITION_ADD_FLAG = /\<\!\-\- INJECT_COMPOSITION (.*) \-\-\>/m;
+
+const addComposition = docsTemplate => {
+  return addMdContent(
+    docsTemplate,
+    COMPOSITION_ADD_FLAG,
+    (line, regexMatched) => {
+      const composites = getComposition(
+        path.join(process.cwd(), regexMatched[1]),
+      );
+
+      return getMarkdown(composites);
+    },
+  );
+};
+
+module.exports = { addComposition };
+
+function getComposition(rootPath) {
+  const project = new Project({
+    tsConfigFilePath: path.join(process.cwd(), "tsconfig.json"),
+    addFilesFromTsConfig: false,
+  });
+
+  const publicPaths = Object.values(getPublicFiles(rootPath));
+  const sourceFiles = project.addSourceFilesAtPaths(publicPaths);
+  project.resolveSourceFileDependencies();
+
+  let compose = {};
+
+  sortSourceFiles(sourceFiles).forEach(sourceFile => {
+    sourceFile.forEachDescendant(node => {
+      const kind = node.getKind();
+
+      if (kind === ts.SyntaxKind.TypeAliasDeclaration) {
+        const typeAliasDeclaration = node
+          .getChildrenOfKind(ts.SyntaxKind.Identifier)[0]
+          .getText();
+
+        const isOptionsType = /.+Options$/.test(typeAliasDeclaration);
+
+        if (isOptionsType) {
+          const identifiers = node.getDescendantsOfKind(
+            ts.SyntaxKind.Identifier,
+          );
+
+          const options = identifiers
+            .map(identifier => {
+              const identifierText = identifier.getText();
+
+              if (
+                /.+Options$/.test(identifierText) &&
+                identifierText !== typeAliasDeclaration
+              ) {
+                return identifierText;
+              }
+              return null;
+            })
+            .filter(Boolean);
+
+          const module = typeAliasDeclaration.replace(/Options$/, "");
+
+          const composition = options.map(option => {
+            return `use${option.replace(/Options$/, "")}`;
+          });
+
+          compose[module] = composition;
+        }
+      }
+    });
+  });
+
+  return compose;
+}
+
+function getMarkdown(compose) {
+  const formatter = new Intl.ListFormat("en", {
+    style: "long",
+    type: "conjunction",
+  });
+  const content = Object.keys(compose).map(moduleName => {
+    const module = compose[moduleName];
+
+    const composition = formatter.format(
+      module.map(item => {
+        return "`" + item + "`";
+      }),
+    );
+
+    return outdent`
+      - ${moduleName} uses ${composition}
+    `;
+  });
+
+  return outdent`
+  ## Composition
+
+  ${content.join("\n")}`;
+}

scripts/utils/inject-csb-links.js → scripts/docs/add-csb-links.js

@@ -1,14 +1,15 @@
 const yaml = require("yaml");
 const fetch = require("node-fetch");
 const { outdent } = require("outdent");
-const { joinCwd, extractCode } = require("./common-utils");
+
+const { joinCwd, extractCode } = require("../utils/common-utils");
 
 // eslint-disable-next-line no-useless-escape
 const CODESANDBOX_REGEX = /\<\!\-\- CODESANDBOX[\s\S]*?.*\-\-\>/gm;
 const CODESANDBOX_GLOBAL_FLAG = new RegExp(CODESANDBOX_REGEX.source, "gm");
 const CODESANDBOX_REPLACE_FLAG = new RegExp(CODESANDBOX_REGEX.source, "m");
 
-const injectCsbLinks = async docsTemplate => {
+const addCsbLinks = async docsTemplate => {
   const regexMatched = docsTemplate.match(CODESANDBOX_GLOBAL_FLAG);
   if (!regexMatched) return docsTemplate;
 
@@ -19,8 +20,8 @@ const injectCsbLinks = async docsTemplate => {
         .replace("-->", "");
       const parsed = yaml.parse(ymlString);
       const linkTitle = parsed.link_title.split(" ").join("%20");
-
       const sandboxLink = await getSandboxShortURL(parsed);
+
       return { sandboxLink, linkTitle };
     } catch (error) {
       console.log(error);
@@ -39,16 +40,18 @@ const injectCsbLinks = async docsTemplate => {
   return docsTemplate;
 };
 
-module.exports = injectCsbLinks;
+module.exports = { addCsbLinks };
 
 const getSandboxShortURL = async parsed => {
+  const linkTitle = parsed.link_title;
   const body = getSandboxContents(
     {
       js: parsed.js ? extractCode(joinCwd(parsed.js)) : undefined,
       css: parsed.css ? extractCode(joinCwd(parsed.css)) : undefined,
       utils: parsed.utils ? extractCode(joinCwd(parsed.utils)) : undefined,
     },
     parsed.deps && parsed.deps,
+    linkTitle,
   );
 
   // fetching the sandbox_id, otherwise the URL would be longer
@@ -69,40 +72,66 @@ const getSandboxShortURL = async parsed => {
   return sandboxLink;
 };
 
-const getSandboxContents = (files, extraDeps) => {
+const getSandboxContents = (files, extraDeps, linkTitle) => {
   const deps = {
-    "@adaptui/react": "latest",
-    react: "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-scripts": "^3.4.3",
+    "@adaptui/react": "alpha",
+    react: "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     ...(extraDeps &&
       extraDeps.reduce((curr, next) => {
         return { ...curr, ...resolveVersion(next) };
       }, {})),
   };
+  const description = `AdaptUI ${linkTitle} example`;
 
   return JSON.stringify({
     files: {
       "src/index.js": {
         content: outdent`
-          import * as ReactDOM from "react-dom";
-          import * as React from "react";
+          import { createRoot } from "react-dom/client";
+
           import App from "./App";
           import "./styles.css";
 
           const rootElement = document.getElementById("root");
-          ReactDOM.render(<App />, rootElement);
+          const root = createRoot(rootElement);
+
+          root.render(<App />);
         `,
       },
       "src/App.js": { content: files.js || "" },
       "src/styles.css": { content: files.css || "" },
-      "src/Utils.component.js": files.utils && {
-        content: files.utils,
-      },
+      ...(files.utils
+        ? { "src/Utils.component.js": { content: files.utils } }
+        : {}),
       "package.json": {
-        content: { dependencies: { ...deps } },
+        content: {
+          name: linkTitle,
+          version: "1.0.0",
+          description: description,
+          main: "src/index.js",
+          scripts: {
+            start: "react-scripts start",
+            build: "react-scripts build",
+            test: "react-scripts test --env=jsdom",
+            eject: "react-scripts eject",
+          },
+          browserslist: [
+            ">0.2%",
+            "not dead",
+            "not ie <= 11",
+            "not op_mini all",
+          ],
+          dependencies: { ...deps },
+          devDependencies: {
+            "@babel/runtime": "7.13.8",
+            typescript: "4.1.3",
+          },
+        },
       },
     },
+    template: "create-react-app",
   });
 };
 

scripts/docs/add-examples.js

@@ -0,0 +1,25 @@
+const strip = require("strip-comments");
+const prettier = require("prettier/standalone");
+const parserBabel = require("prettier/parser-babel");
+
+const prettierConfig = require("../../.prettierrc.js");
+const { joinCwd, extractCode } = require("../utils/common-utils");
+const { addMdContent } = require("./utils");
+
+// eslint-disable-next-line no-useless-escape
+const CODE_EXAMPLE_FLAG = /\<\!\-\- IMPORT_EXAMPLE (.*) \-\-\>/m;
+
+const addExamples = docsTemplate => {
+  return addMdContent(docsTemplate, CODE_EXAMPLE_FLAG, (line, regexMatched) => {
+    const importString = regexMatched[1];
+    const importPath = joinCwd(importString);
+    const prettifiedCode = prettier.format(strip(extractCode(importPath)), {
+      parser: "babel",
+      plugins: [parserBabel],
+      ...prettierConfig,
+    });
+    return ["```js", "\n", prettifiedCode, "```"].join("");
+  });
+};
+
+module.exports = { addExamples };