added docs build/publish

.size-snapshot.json

@@ -38,9 +38,9 @@
     }
   },
   "dist/index.cjs.js": {
-    "bundled": 77303,
-    "minified": 53258,
-    "gzipped": 9105
+    "bundled": 81274,
+    "minified": 57910,
+    "gzipped": 10087
   },
   "dist/rbx.esm.js": {
     "bundled": 87646,

.travis.yml

@@ -3,6 +3,7 @@ node_js:
   - "8"
 script:
   - make test # run tests
-  - make # ensure /src builds
+  - make build # ensure pkg builds
+  - make build_docs # ensure docz builds
 after_success:
   - make ci_publish

Makefile

@@ -2,7 +2,34 @@ BUILD_DIR=dist
 
 .PHONY: all build_pre build_esm build_cjs build_styles clean publish test test_lint test_unit ci_publish help
 
-all: clean build_esm build_cjs build_styles
+help:
+	@echo "Makefile usage (<BUILD_DIR>: $(BUILD_DIR)):"
+	@echo "\nBUILD"
+	@echo "  \`make build\`:            build all"
+	@echo "  \`make clean\`:            delete <BUILD_DIR>"
+	@echo "  \`make build_esm\`:        package for ESM"
+	@echo "  \`make build_cjs\`:        package for CJS"
+	@echo "  \`make build_styles\`:     copy and compile sass"
+	@echo "  \`make build_pre\`:        create <BUILD_DIR>"
+
+	@echo "\nTEST"
+	@echo "  \`make test\`:             test all (lint & unit)"
+	@echo "  \`make lint\`:             run tslint"
+	@echo "  \`make test_unit\`:        run jest unit tests"
+
+	@echo "\nDOCS"
+	@echo "  \`make docs_dev\`:         run docz"
+	@echo "  \`make docs_build\`:       build docz"
+	@echo "  \`make docs_publish\`:     publish to GitHub Pages"
+
+	@echo "\nETC"
+	@echo "  \`make help\`:             show this message"
+	@echo "  \`make publish\`:          publish to npm"
+	@echo "  \`make ci_publish\`:       publish coverage"
+
+
+### Build
+build: clean build_esm build_cjs build_styles
 	@sed 's/"dist\//"/g' package.json > $(BUILD_DIR)/package.json
 
 build_pre:
@@ -26,10 +53,12 @@ clean:
 	@echo "Deleting $(BUILD_DIR)"
 	@rm -rf $(BUILD_DIR)
 
+### Publish
 publish:
 	@echo "Publishing to NPM"
 	@cd $(BUILD_DIR) && npm publish
 
+### Test
 test: lint test_unit
 
 lint:
@@ -40,26 +69,21 @@ test_unit:
 	@echo "Running tests"
 	@npx jest --coverage
 
+### CI
 ci_publish:
 	@echo "Publishing coverage"
 	@cat ./.coverage/lcov.info | npx coveralls
 
-help:
-	@echo "Makefile usage (<BUILD_DIR>: $(BUILD_DIR)):"
-	@echo "\nBUILD"
-	@echo "  \`make\`:                  build all"
-	@echo "  \`make clean\`:            delete <BUILD_DIR>"
-	@echo "  \`make build_esm\`:        package for ESM"
-	@echo "  \`make build_cjs\`:        package for CJS"
-	@echo "  \`make build_styles\`:     copy and compile sass"
-	@echo "  \`make build_pre\`:        create <BUILD_DIR>"
 
-	@echo "\nTEST"
-	@echo "  \`make test\`:             test all (lint & unit)"
-	@echo "  \`make lint\`:             run tslint"
-	@echo "  \`make test_unit\`:        run jest unit tests"
+### Docs
+docs_dev:
+	@echo "Running docs dev"
+	@npx docz dev
 
-	@echo "\nETC"
-	@echo "  \`make help\`:             show this message"
-	@echo "  \`make publish\`:          publish to npm"
-	@echo "  \`make ci_publish\`:       publish coverage"
+docs_build:
+	@echo "Running docs build"
+	@npx docz build
+
+docs_publish:
+	@echo "Publishing to GitHub pages"
+	@npx gh-pages -d .docz/dist -m \"Deploy Docs [skip ci]\"

doczrc.js

@@ -3,16 +3,17 @@
 const path = require("path");
 
 export default {
-  base: "rbx",
+  base: "/rbx",
   // unfortnately, "too-many-modules"
   // https://github.com/codesandbox/codesandboxer/blob/af013874f5a2f7bb6325c9608597883a8f5061ef/packages/codesandboxer-fs/src/assembleFiles.js#L120
   codeSandbox: false,
   description:
     "The Comprehensive Bulma UI Framework for React. This is a lightweight, yet robust, React framework that enables rapid, beautiful web development.",
   files: "**/*(.docs)?*.mdx",
   htmlContext: {
-    favicon: "public/favicon.ico"
+    favicon: "/rbx/public/favicon.ico"
   },
+  indexHtml: "src/__docs__/index.html",
   modifyBundlerConfig: config => {
     config.resolve.alias["src"] = path.join(__dirname, "./src");
 
@@ -26,7 +27,7 @@ export default {
   },
   // we manually create them rather than relying on React-Docgen
   propsParser: false,
-  public: "docs/public",
+  public: "src/__docs__/public",
   themeConfig: {
     colors: {
       white: "#FFFFFF",

package.json

@@ -9,6 +9,13 @@
     "type": "git",
     "url": "git+https://github.com/dfee/rbx.git"
   },
+  "scripts": {
+    "build": "make build",
+    "docs:build": "make docs_build",
+    "docs": "make docs_dev",
+    "lint": "make lint",
+    "test": "make test"
+  },
   "keywords": [
     "react",
     "bulma",

src/__docs__/components/feature.tsx

@@ -1,4 +1,6 @@
+import { Link } from "docz";
 import React from "react";
+
 import { Variables } from "src/base/helpers/variables";
 import { Control, Field, Tag } from "src/elements";
 
@@ -26,20 +28,20 @@ export const Feature = Object.assign(
     secondaryColor,
     url,
   }: FeatureProps) => {
-    const asType: keyof JSX.IntrinsicElements | undefined =
-      url === undefined ? undefined : "a";
     const tagGroupProps =
       url === undefined
         ? {}
+        : /^\/[a-z]/.test(url) // Local path, e.g. '/somewhere'
+        ? { as: Link, to: url }
         : {
+            as: "a" as keyof JSX.IntrinsicElements,
             href: url,
-            // if path starts with '/[a-z]', assume local, else external
-            target: /^\/[a-z]/.test(url) ? undefined : "_blank",
+            target: "_blank",
           };
 
     return (
       <Control>
-        <Tag.Group as={asType} gapless {...tagGroupProps}>
+        <Tag.Group gapless {...tagGroupProps}>
           <Tag color={primaryColor}>{primaryName}</Tag>
           <Tag color={secondaryColor}>{secondaryName}</Tag>
         </Tag.Group>
@@ -59,7 +61,7 @@ export const AsDoc: React.FC<AsDocProps> = ({ asType }) => (
     primaryColor="light"
     secondaryName={asType}
     secondaryColor="warning"
-    url="/rbx/architecture/inversion-of-control"
+    url="/architecture/inversion-of-control"
   />
 );
 
@@ -102,7 +104,7 @@ export const CustomizeFeature: React.FC<CustomizeFeatureProps> = ({
       primaryColor="light"
       secondaryName={name}
       secondaryColor={color}
-      url="/rbx/architecture/customize"
+      url="/architecture/customize"
     />
   );
 };

src/__docs__/etc.mdx

@@ -8,10 +8,10 @@ route: /architecture/etc
 
 ## Building & Commands
 
-You'll notice the `package.json` scripts are virtually empty.
+You'll notice the `package.json` scripts are very simple.
 That's because the build instructions were getting complex, so they were moved into a [`Makefile`](https://github.com/dfee/rbx/blob/master/Makefile).
 
-By running the `make help` command in the root of a cloned repo, you'll see the available options (including building, testing, etc.)
+By running the `make` command in the root of a cloned repo, you'll see the available options (including building, testing, etc.)
 
 ### Testing
 

src/__docs__/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="{{ lang }}">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="{{ description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>{{ title }}</title>
+  {{ head }}
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119795890-2"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-119795890-2');
+  </script>
+</head>
+
+<body>
+  <div id="root" />
+  {{ footer }}
+  <script src="/rbx/public/srcdoc-polyfill.min.js"></script>
+</body>
+
+</html>

tsconfig.build.json

@@ -5,5 +5,5 @@
     "outDir": "./dist"
   },
   "include": ["src"],
-  "exclude": ["**/__tests__", "**/__mocks__"]
+  "exclude": ["**/__tests__", "**/__mocks__", "**/__docs__"]
 }