fix: decouple from @scaleds/components, transpile @scaleds/docs (#239)

feat: dynamic whitelist aka featuredComponents config property
telekom · Jun 5, 2020 · 4339f7a · 4339f7a
1 parent c1f16dc
commit 4339f7a
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 18 deletions.
diff --git a/packages/components/.monument.js b/packages/components/.monument.js
@@ -2,5 +2,7 @@ const config = {
   outputDirName: 'monument',
   docsFilePath: '/dist/scale-components.json',
   namespace: 'scale-components',
+  featuredComponents: ["button", "card", "link", "icon", "tag", "table"],
+  themeFilePath: '/dist/theme.iife.js'
 };
 module.exports = config;
diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
@@ -69,4 +69,5 @@ yarn-error.log
 .yarn-integrity
 
 # Stencil files
-components.json
+components.json
+loader/
diff --git a/packages/docs/cli/copy.js b/packages/docs/cli/copy.js
@@ -2,30 +2,59 @@ const findUserConfig = require("./find-user-config")
 const { logger } = require("./logger")
 const path = require("path")
 const fs = require("fs-extra")
+const spawn = require("child_process").spawn
 
 const copy = async argv => {
   try {
     const config = require(await findUserConfig(argv))
     const monumentRootPath = path.join(__dirname, "..")
     const stencilRootPath = process.env.CWD
 
-    return Promise.all([
-      fs.copy(
-        `${stencilRootPath}${config.docsFilePath}`,
-        `${monumentRootPath}/components.json`
-      ),
+    const psClean = spawn(
+      "cd",
+      [
+        path.join(__dirname, "../"),
+        "&&",
+        "yarn",
+        "gatsby",
+        "clean",
+      ],
+      {
+        shell: true,
+      }
+    )
 
-      fs.copy(
-        `${stencilRootPath}/dist/${config.namespace}`,
-        `${monumentRootPath}/public/components/`
-      ),
 
-      config.themeFilePath &&
+    psClean.on("close", () => {
+      return Promise.all([
+        fs.copy(
+          `${stencilRootPath}${config.docsFilePath}`,
+          `${monumentRootPath}/components.json`
+        ),
+
+        fs.copy(
+          `${stencilRootPath}/dist/${config.namespace}`,
+          `${monumentRootPath}/public/components/`
+        ),
+
+        fs.copy(
+          `${stencilRootPath}/dist`,
+          `${monumentRootPath}/dist`
+        ),
+
+        fs.copy(
+          `${stencilRootPath}/loader`,
+          `${monumentRootPath}/loader`
+        ),
+
         fs.copy(
           `${stencilRootPath}${config.themeFilePath}`,
           `${monumentRootPath}/public/theme.js`
         ),
-    ])
+      ])
+    })
+
+
   } catch (error) {
     logger.error(error)
   }

diff --git a/packages/docs/gatsby-browser.js b/packages/docs/gatsby-browser.js
@@ -8,7 +8,7 @@ import "prismjs/themes/prism.css"
 import {
   defineCustomElements,
   applyPolyfills,
-} from "@scaleds/components/loader"
+} from "./loader"
 
 applyPolyfills().then(() => {
   defineCustomElements(window)

diff --git a/packages/docs/gatsby-config.js b/packages/docs/gatsby-config.js
@@ -5,6 +5,12 @@ module.exports = {
     author: `@telekom`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-compile-es6-packages`,
+      options: {
+        modules: [`@scaleds/docs`]
+      }
+    },
     {
       resolve: "@scaleds/gatsby-plugin",
       options: {

diff --git a/packages/docs/gatsby-node.js b/packages/docs/gatsby-node.js
@@ -3,7 +3,7 @@
  *
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
-const { GraphQLObjectType, GraphQLString } = require("graphql")
+const { GraphQLObjectType, GraphQLString, GraphQLList } = require("graphql")
 const config = require(process.env.MONUMENT_CONFIG_FILE)
 const { createFilePath } = require(`gatsby-source-filesystem`)
 
@@ -18,6 +18,7 @@ exports.setFieldsOnGraphQLNodeType = ({ type }) => {
             docsFilePath: { type: GraphQLString },
             themeFilePath: { type: GraphQLString },
             namespace: { type: GraphQLString },
+            featuredComponents: { type: GraphQLList(GraphQLString) },
           }),
         }),
         resolve: () => config,

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -4,12 +4,12 @@
   "version": "0.1.4",
   "author": "eeegor",
   "dependencies": {
-    "@scaleds/components": "^0.1.4",
     "@scaleds/gatsby-plugin": "^0.1.4",
     "@textlint/markdown-to-ast": "^6.1.7",
     "fs-extra": "^9.0.0",
     "gatsby": "^2.17.11",
     "gatsby-image": "^2.2.31",
+    "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-plugin-manifest": "^2.2.27",
     "gatsby-plugin-offline": "^3.0.19",
     "gatsby-plugin-react-helmet": "^3.1.14",

diff --git a/packages/docs/src/components/sidebar.js b/packages/docs/src/components/sidebar.js
@@ -1,9 +1,8 @@
 import React from "react"
 import { Link } from "gatsby"
 
-const whiteList = ["button", "card", "link", "icon", "tag", "table"]
 
-const Sidebar = ({ components, currentPage }) => {
+const Sidebar = ({ components, currentPage, featuredComponents }) => {
   const sortedComponents = components.sort((a, b) => {
     if (a.node.fields.filename < b.node.fields.filename) {
       return -1
@@ -15,7 +14,7 @@ const Sidebar = ({ components, currentPage }) => {
   })
 
   const filtered = sortedComponents.filter((c) => {
-    if (whiteList.includes(c.node.fields.filename.replace("/", ""))) {
+    if (featuredComponents.includes(c.node.fields.filename.replace("/", ""))) {
       return true
     } else if (c.node.fields.section !== "components") {
       return true

diff --git a/packages/docs/src/layouts/documentation.js b/packages/docs/src/layouts/documentation.js
@@ -24,6 +24,11 @@ export default ({ children, location }) => {
           title
         }
       }
+      site {
+        config {
+          featuredComponents
+        }
+      }
     }
   `)
   return (
@@ -37,6 +42,7 @@ export default ({ children, location }) => {
           <Sidebar
             currentPage={location.pathname}
             components={data.sidebar.edges}
+            featuredComponents={data.site.config.featuredComponents}
           />
         </div>
         <section className="main__content">

diff --git a/yarn.lock b/yarn.lock
@@ -889,6 +889,13 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.0.0":
+  version "7.10.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
+  integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2", "@babel/runtime@^7.9.6":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
@@ -7660,6 +7667,14 @@ gatsby-page-utils@^0.2.1:
     lodash "^4.17.15"
     micromatch "^3.1.10"
 
+gatsby-plugin-compile-es6-packages@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-compile-es6-packages/-/gatsby-plugin-compile-es6-packages-2.1.0.tgz#eb6068d8936fd8b404716e47b821d09bf0656af7"
+  integrity sha512-yrYAAjabHWJr3ARi8xzDm01dbBfyOxEWTwGkL3BMdgL/opfLvTrwLmfium4kSelnLs70DYY3rYDwyHjqyFsnFQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    regex-escape "^3.4.8"
+
 gatsby-plugin-manifest@^2.2.27:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.2.tgz#0a9605a778a8e30ce047b9b3701031b9bde61d6b"
@@ -14623,6 +14638,11 @@ regenerator-transform@^0.14.2:
     "@babel/runtime" "^7.8.4"
     private "^0.1.8"
 
+regex-escape@^3.4.8:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/regex-escape/-/regex-escape-3.4.9.tgz#407b413562e2373d56994ff213e693658ea4f8f7"
+  integrity sha512-Cv9rjwyQwVhn3L097ysanWsEElurmxDj6Cc4Ut23z7e6hzRbrNvF3Le7yAciMfuzyb0sZwSr0ZHunMNCIoy2/g==
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"