feat: Template gallery (#272)

* Template Gallery WIP

* Template Gallery WIP: add chart to static dashboard works

* Template Gallery WIP: chart libraries work

* Template Gallery WIP: fix body.css

* Template Gallery WIP: basic flow

* Template Gallery WIP: web socket transport

* Template Gallery WIP: do not overwrite if versions equals

* Template Gallery WIP: revert back simple static dashboard

* Template Gallery WIP: revert to modern static dashboard as simple one isn't compatible with different CSS frameworks

* Template Gallery WIP: Material UI static dashboard template

* Top Menu and Gallery Styling WIP

* Redirect without dashbooad app to the gallery

* Extract create your own modal

* Styles for menu and templates gallery

* Recipes Cards css update

* Template Gallery WIP: Copy and ensure dependencies fix

Author: paveltiunov

packages/cubejs-playground/generateScaffolding.js

@@ -33,19 +33,21 @@
     "react-chartjs-2": "^2.7.4",
     "react-dom": "^16.8.3",
     "react-is": "^16.8.4",
+    "react-responsive": "^8.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "2.1.5",
     "react-source-render": "^2.0.0-beta.6",
     "recharts": "^1.7.1",
     "sql-formatter": "^2.3.2",
+    "styled-components": "^4.4.1",
     "whatwg-fetch": "^3.0.0"
   },
   "scripts": {
-    "start": "node generateScaffolding.js && PORT=3080 react-app-rewired start",
-    "build": "node generateScaffolding.js && react-app-rewired --max-old-space-size=2048 build && rm -Rf ../cubejs-server-core/playground/** && cp -R build/ ../cubejs-server-core/playground/",
-    "test": "node generateScaffolding.js && react-app-rewired test",
-    "eject": "node generateScaffolding.js && react-scripts eject"
+    "start": "PORT=3080 react-app-rewired start",
+    "build": "react-app-rewired --max-old-space-size=2048 build && rm -Rf ../cubejs-server-core/playground/** && cp -R build/ ../cubejs-server-core/playground/",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"

packages/cubejs-playground/package.json

@@ -1,17 +1,21 @@
 /* eslint-disable no-undef,react/jsx-no-target-blank */
 import React, { Component } from 'react';
-import { Link } from "react-router-dom";
 import * as PropTypes from 'prop-types';
 import "./index.less";
 import "./index.css";
-import {
-  Layout, Menu, Alert, notification, Icon
-} from "antd";
+import { Layout, Alert, notification } from "antd";
 import { fetch } from 'whatwg-fetch';
 import { withRouter } from "react-router";
+import Header from './components/Header';
 import { event } from './events';
 
-const { Header, Content } = Layout;
+const selectedTab = (pathname) => {
+  if (pathname === '/template-gallery') {
+    return ['/dashboard'];
+  } else {
+    return [pathname];
+  }
+};
 
 class App extends Component {
   async componentDidMount() {
@@ -69,47 +73,16 @@ class App extends Component {
     const { location, children } = this.props;
     return (
       <Layout style={{ height: '100%' }}>
-        <Header style={{ padding: '0 32px' }}>
-          <div style={{ float: 'left' }}>
-            <img src="./cubejs-playground-logo.svg" style={{ display: 'inline', height: 43, marginRight: 15 }} alt="" />
-          </div>
-          <Menu
-            theme="light"
-            mode="horizontal"
-            selectedKeys={[location.pathname]}
-          >
-            <Menu.Item key="/build"><Link to="/build">Build</Link></Menu.Item>
-            <Menu.Item key="/dashboard"><Link to="/dashboard">Dashboard App</Link></Menu.Item>
-            <Menu.Item key="/schema"><Link to="/schema">Schema</Link></Menu.Item>
-            <Menu.Item
-              key="docs"
-              style={{ float: 'right' }}
-            >
-              <a href="https://cube.dev/docs" target="_blank">
-                <Icon type="book" />
-                Docs
-              </a>
-            </Menu.Item>
-            <Menu.Item
-              key="slack"
-              style={{ float: 'right' }}
-            >
-              <a href="https://slack.cube.dev" target="_blank">
-                <Icon type="slack" />
-                Slack
-              </a>
-            </Menu.Item>
-          </Menu>
-        </Header>
-        <Content style={{ height: '100%' }}>
+        <Header selectedKeys={selectedTab(location.pathname)} />
+        <Layout.Content style={{ height: '100%' }}>
           {fatalError ? (
             <Alert
               message="Error occured while rendering"
               description={fatalError.stack}
               type="error"
             />
           ) : children}
-        </Content>
+        </Layout.Content>
       </Layout>
     );
   }

packages/cubejs-playground/public/cubejs-playground-logo.svg

@@ -17,13 +17,13 @@ export const frameworks = [{
   id: 'vanilla',
   title: 'Vanilla JavaScript',
   docsLink: 'https://cube.dev/docs/@cubejs-client-core'
+}, {
+  id: 'react',
+  title: 'React'
 }, {
   id: 'angular',
   title: 'Angular',
   docsLink: 'https://cube.dev/docs/@cubejs-client-ngx'
-}, {
-  id: 'react',
-  title: 'React'
 }, {
   id: 'vue',
   title: 'Vue.js',

packages/cubejs-playground/src/App.js

@@ -17,9 +17,9 @@ import * as chartjsLibrary from './libraries/chartjs';
 import * as tablesLibrary from './libraries/tables';
 
 export const libraryToTemplate = {
-  bizcharts: { library: bizChartLibrary, title: 'Bizcharts' },
+  chartjs: { library: chartjsLibrary, title: 'Chart.js' },
   recharts: { library: rechartsLibrary, title: 'Recharts' },
-  chartjs: { library: chartjsLibrary, title: 'Chart.js' }
+  bizcharts: { library: bizChartLibrary, title: 'Bizcharts' }
 };
 
 export const babelConfig = {