Dataform server boilerplate (dataform-co#601)

* Dataform UI app & server boilerplate * Remove storybook * Update yargs * Revert yargs upgrade * Fix some types * Fix tag * Revert accidental change
dreamdata-io · Feb 11, 2020 · f3085c3 · f3085c3
1 parent 4f89eac
commit f3085c3
Show file tree

Hide file tree

Showing 23 changed files with 2,989 additions and 108 deletions.
diff --git a/WORKSPACE b/WORKSPACE
@@ -140,3 +140,21 @@ go_repository(
     sum = "h1:6fhXjXSzzXRQdqtFKOI1CDw6Gw5x6VflovRpfbrlVi0=",
     version = "v1.2.0",
 )
+
+http_archive(
+    name = "io_bazel_rules_sass",
+    sha256 = "77e241148f26d5dbb98f96fe0029d8f221c6cb75edbb83e781e08ac7f5322c5f",
+    strip_prefix = "rules_sass-1.24.0",
+    url = "https://github.com/bazelbuild/rules_sass/archive/1.24.0.zip",
+)
+
+# Fetch required transitive dependencies. This is an optional step because you
+# can always fetch the required NodeJS transitive dependency on your own.
+load("@io_bazel_rules_sass//:package.bzl", "rules_sass_dependencies")
+
+rules_sass_dependencies()
+
+# Setup repositories which are needed for the Sass rules.
+load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
+
+sass_repositories()
diff --git a/app/BUILD b/app/BUILD
@@ -0,0 +1,111 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:css_typings.bzl", "css_typings")
+
+filegroup(
+    name = "assets",
+    srcs = glob([
+        "**/*.html",
+        "public/**/*.*",
+    ]),
+)
+
+load("@io_bazel_rules_sass//:defs.bzl", "multi_sass_binary")
+
+multi_sass_binary(
+    name = "sass",
+    srcs = glob(["**/*.scss"]),
+    output_style = "expanded",
+    sourcemap = False,
+)
+
+css_typings(
+    name = "css_typings",
+    srcs = [
+        ":sass",
+    ],
+)
+
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+ts_library(
+    name = "app",
+    srcs = glob(
+        [
+            "**/*.ts",
+            "**/*.tsx",
+        ],
+        exclude = ["webpack.ts"],
+    ),
+    data = [":sass"],
+    deps = [
+        ":css_typings",
+        "//protos",
+        "//tools/protobufjs:grpc_web_rpc_impl",
+        "@npm//@blueprintjs/core",
+        "@npm//@types/node",
+        "@npm//@types/react",
+        "@npm//@types/react-dom",
+        "@npm//@types/react-router",
+        "@npm//@types/react-router-dom",
+        "@npm//protobufjs",
+        "@npm//react",
+        "@npm//react-dom",
+        "@npm//react-router",
+        "@npm//react-router-dom",
+    ],
+)
+
+load("@npm//webpack-dev-server:index.bzl", "webpack_dev_server")
+
+webpack_dev_server(
+    name = "devserver",
+    args = [
+        "--config=app/webpack.config.js",
+        "--output=./app.bundle.js",
+        "--history-api-fallback",
+    ],
+    data = [
+        ":assets",
+        ":app",
+        ":sass",
+        ":webpack.config.js",
+        "@npm//webpack-cli",
+    ],
+    tags = [
+        # "ibazel_notify_changes",
+    ],
+)
+
+load("@npm//webpack:index.bzl", "webpack")
+
+webpack(
+    name = "bundler",
+    data = [
+        ":assets",
+        ":app",
+        ":sass",
+        ":webpack.config.js",
+        "@npm//webpack-cli",
+    ],
+)
+
+load("@build_bazel_rules_nodejs//:index.bzl", "npm_package_bin")
+
+npm_package_bin(
+    name = "bundle",
+    outs = [
+        "app.bundle.js",
+    ],
+    args = [
+        "--config=app/webpack.config.js",
+        "--output=$(location app.bundle.js)",
+    ],
+    data = [
+        ":webpack.config.js",
+        "@npm//css-loader",
+        "@npm//style-loader",
+        "@npm//umd-compat-loader",
+    ],
+    tool = ":bundler",
+)
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@blueprintjs/core@3.19.1/lib/css/blueprint.css"
+    />
+    <style>
+      #preloader {
+        display: flex;
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+        z-index: 100;
+        background-color: white;
+        -webkit-transition: opacity 0.5s ease-in;
+        -moz-transition: opacity 0.5s ease-in;
+        -o-transition: opacity 0.5s ease-in;
+        -ms-transition: opacity 0.5s ease-in;
+        transition: opacity 0.5s ease-in;
+      }
+      #preloader_logo {
+        width: 400px;
+        max-width: 100%;
+        opacity: 0;
+        -webkit-transition: opacity 0.5s ease-in;
+        -moz-transition: opacity 0.5s ease-in;
+        -o-transition: opacity 0.5s ease-in;
+        -ms-transition: opacity 0.5s ease-in;
+        transition: opacity 0.5s ease-in;
+      }
+    </style>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        document.getElementById("preloader_logo").style.opacity = 1;
+        window.setTimeout(function() {
+          document.getElementById("preloader").style.opacity = 0;
+        }, 750);
+        window.setTimeout(function() {
+          document.getElementById("preloader").style.display = "none";
+        }, 1500);
+      });
+    </script>
+  </head>
+  <body>
+    <div id="preloader">
+      <img id="preloader_logo" src="/public/new_logo_with_text.svg" />
+    </div>
+    <div id="root"></div>
+    <script src="app.bundle.js"></script>
+  </body>
+</html>
diff --git a/app/index.tsx b/app/index.tsx
@@ -0,0 +1,24 @@
+import { Overview } from "df/app/overview";
+import { Service } from "df/app/service";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Route } from "react-router";
+import { BrowserRouter } from "react-router-dom";
+
+const service = Service.get();
+
+async function render() {
+  const metadata = await service.metadata({});
+  ReactDOM.render(
+    <BrowserRouter>
+      <Route
+        path={"/"}
+        exact={true}
+        component={(props: any) => <Overview {...props} service={service} metadata={metadata} />}
+      />
+    </BrowserRouter>,
+    document.getElementById("root")
+  );
+}
+
+const _ = render();
diff --git a/app/overview.scss b/app/overview.scss
@@ -0,0 +1,5 @@
+.overviewContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
diff --git a/app/overview.tsx b/app/overview.tsx
@@ -0,0 +1,27 @@
+import { Button, Navbar, NavbarGroup, Tag } from "@blueprintjs/core";
+import { dataform } from "@dataform/protos";
+import * as styles from "df/app/overview.css";
+import { Service } from "df/app/service";
+import * as React from "react";
+
+interface IProps {
+  service: Service;
+  metadata: dataform.server.MetadataResponse;
+}
+
+export class Overview extends React.Component<IProps> {
+  public render() {
+    return (
+      <div className={styles.overviewContainer}>
+        <Navbar>
+          <NavbarGroup>
+            <img src="/public/new_logo_with_text.svg" />
+          </NavbarGroup>
+          <NavbarGroup align="right">
+            <Tag>{this.props.metadata.projectDir}</Tag>
+          </NavbarGroup>
+        </Navbar>
+      </div>
+    );
+  }
+}
diff --git a/app/public/new_logo_with_text.svg b/app/public/new_logo_with_text.svg
diff --git a/app/service.ts b/app/service.ts
@@ -0,0 +1,16 @@
+import { dataform } from "@dataform/protos";
+import { rpcImpl } from "df/tools/protobufjs/grpc_web_rpc_impl";
+
+export class Service extends dataform.server.Service {
+  public static get(): Service {
+    if (!Service.instance) {
+      Service.instance = new Service();
+    }
+    return Service.instance;
+  }
+  private static instance: Service;
+
+  constructor() {
+    super(rpcImpl("http://localhost:9111", "dataform.server.Service"), false, false);
+  }
+}
diff --git a/app/webpack.config.js b/app/webpack.config.js
@@ -0,0 +1,101 @@
+const path = require("path");
+const webpack = require("webpack");
+const fs = require("fs");
+
+module.exports = (env, argv) => {
+  const config = {
+    mode: argv.mode || "development",
+    entry: [path.resolve(process.env.RUNFILES, "df/app/index")],
+    output: {
+      path: path.dirname(path.resolve(argv.output)),
+      filename: path.basename(argv.output)
+    },
+    optimization: {
+      minimize: argv.mode === "production"
+    },
+    watchOptions: {
+      ignored: [/node_modules/]
+    },
+    stats: {
+      warnings: true
+    },
+    node: {
+      fs: "empty",
+      child_process: "empty"
+    },
+    devServer: {
+      port: 9110,
+      open: false,
+      publicPath: "/",
+      contentBase: path.resolve("./app"),
+      stats: {
+        colors: true
+      }
+    },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".jsx", ".json", ".css"],
+      alias: {
+        "@dataform": path.resolve(process.env.RUNFILES, "df"),
+        df: path.resolve(process.env.RUNFILES, "df")
+      }
+    },
+
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1
+      })
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          use: ["style-loader", "css-loader"]
+        },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          use: [
+            { loader: "style-loader" },
+            {
+              loader: "css-loader",
+              query: {
+                modules: true
+              }
+            }
+          ]
+        },
+        {
+          test: /\.jsx?$/,
+          exclude: /node_modules/,
+          use: [{ loader: "umd-compat-loader" }]
+        }
+      ]
+    }
+  };
+  // Only add the babel transpilation in production mode.
+  if (argv.mode === "production") {
+    config.module.rules.push({
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: "babel-loader",
+          options: {
+            presets: [["env", { targets: { browsers: ["defaults"] } }]],
+            plugins: [
+              [
+                "transform-runtime",
+                {
+                  polyfill: false,
+                  regenerator: true
+                }
+              ]
+            ]
+          }
+        }
+      ]
+    });
+  }
+  return config;
+};
diff --git a/docs/layouts/documentation.tsx b/docs/layouts/documentation.tsx
@@ -20,6 +20,7 @@ export default class Documentation extends React.Component<IProps> {
       .filter(child => !!child.props.children)
       .map(child =>
         React.Children.toArray(child.props.children)
+          .map(child => child as React.ReactElement<any>)
           .filter(child => child.type === "h2")
           .map(child => ({
             id: child.props.id,