Admin Dashboard v0.1 (cashapp#245)

* Initial admin dashboard work * @misk/common NPM pkg & webpack fixes: - @misk/common NPM package ready to publish - FontAwesome isn't Typescript safe and is removed for simplicity - Webpack configs split into development and production for easier debug * Delete old misk-lib * Fix to duplicate React elements with no key console error. * Remove compiled code from src/core/components - Package.json now copies module compiled js files from build at compile - README.md updated with better explanation hot loading issue * Move t_ and m_ compiled js to module_ and menu_ nomenclature * CopyWebpackPlugin: All files in main/public copy to build Old modules removed because log4j, threads unmodifed from frintjs/examples/multiple-apps * PR Fixes - Addressed Jesse's PR comments (cleanup, whitespace...) - @misk/common pulls CSS from NPM, not local cache, and minifies - main and modules now assume `@misk/common` is in `node_modules` - `yarn start` in `main/package.json` correctly copies over `@misk/common` to node_modules in main & modules - `copy-webpack-plugin` copies to build from `node_modules/@misk/common/lib` and `src/public` - `original-web` removed and key code added to new `healthcheck` module - `// strict: true` removed from `main/tsconfig.json` since still has errors - Condence dev/prod webpack configs back to one in `@misk/common` since no necessary differences in build/dev - `yarn dist` still broken but issue added to README.md - New `@misk/common/README.md` with instructions how to use for NPM public webpage
jpulgarin · Jun 13, 2018 · 7efc0b8 · 7efc0b8
1 parent 71d5740
commit 7efc0b8
Show file tree

Hide file tree

Showing 71 changed files with 28,694 additions and 2,492 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,12 @@ build
 .idea
 *.iml
 
+.DS_Store
+.git
+build
+lib
+node_modules
+*.log
+**/menu_*.js*
+**/module_*.js*
+old_modules
diff --git a/misk/web/@misk/common/.npmignore b/misk/web/@misk/common/.npmignore
@@ -0,0 +1,5 @@
+src
+test
+coverage
+node_modules
+.nyc_output
diff --git a/misk/web/@misk/common/README.md b/misk/web/@misk/common/README.md
@@ -0,0 +1,101 @@
+@misk/common
+---
+
+`@misk/common` provides shared libraries, externals, and styles between `@misk` modules.
+
+Getting Started
+---
+
+- Install `@misk/common`???
+
+```bash
+$ yarn install --save @misk/common
+```
+
+- Using the common vendors libraries and styles. We use [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) to copy the compiled `vendor.js` file into build folder. 
+  - Install [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin)
+
+    ```bash
+    npm i -D copy-webpack-plugin
+    ```
+
+  - Add the following to your `webpack.config.js`
+
+    ```Typescript
+    const CopyWebpackPlugin = require('copy-webpack-plugin');
+    ...
+
+    module.exports = {
+      mode
+      entry
+      ...
+      plugins: [
+        new CopyWebpackPlugin(
+          [{ from: './node_modules/@misk/common/lib' }], 
+          { debug: 'info', copyUnmodified: true }
+        )
+      ],
+    }
+    ```
+  
+  - Add the following to your `index.html` to import `styles.js` and `vendors.js`
+
+    ```HTML
+    <body>
+
+      ...
+
+      <!-- Misk Common Libraries -->
+      <script type="text/javascript" src="js/styles.js" async></script>
+      <script type="text/javascript" src="js/vendors.js" preload></script>
+
+      <!-- Other JS -->
+    </body>
+    ```
+
+- Use `@misk/common` externals to keep Webpack from bundling duplicate libraries and styles into your Misk module. Add the following to your `webpack.config.js`
+  
+  ```Typescript
+  const miskCommon = require('@misk/common/lib');
+  ...
+
+  module.exports = {
+    mode
+    entry
+    ...
+    externals: miskCommon.externals,
+  }
+
+  ```
+
+Included Libraries
+---
+
+```JSON
+  "@blueprintjs/core": "^2.3.1",
+  "@types/history": "^4.6.2",
+  "@types/react": "^16.3.16",
+  "@types/react-dom": "^16.0.5",
+  "frint": "^5.4.4",
+  "frint-config": "^5.4.4",
+  "frint-react": "^5.4.4",
+  "frint-router": "^5.4.4",
+  "frint-router-react": "^5.4.4",
+  "frint-store": "^5.4.4",
+  "lodash": "^4.17.10",
+  "prop-types": "^15.6.1",
+  "react": "^16.4.0",
+  "react-dom": "^16.4.0",
+  "react-transition-group": "^2.3.1",
+  "rxjs": "^6.2.0",
+  "skeleton-css": "^2.0.4"
+```
+
+Included Styles
+---
+```Typescript
+  import './styles/misk-common.css'
+  import '../node_modules/@blueprintjs/core/lib/css/blueprint.css'
+  import '../node_modules/normalize.css/normalize.css'
+  import '../node_modules/skeleton-css/css/skeleton.css'
+```
diff --git a/misk/web/@misk/common/index.js b/misk/web/@misk/common/index.js
@@ -0,0 +1,2 @@
+import * as miskCommon from './lib';
+export default miskCommon;
diff --git a/misk/web/@misk/common/package.json b/misk/web/@misk/common/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@misk/common",
+  "version": "0.0.1",
+  "description": "Microservice Kontainer Common Libraries, Externals, Styles",
+  "author": "Square/Misk Authors (https://github.com/square/misk/graphs/contributors)",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:square/misk.git"
+  },
+  "scripts": {
+    "lib": "webpack",
+    "build:lib": "npm run lib",
+    "build": "npm run lib",
+    "dist": "npm run lib",
+    "reinstall": "rm -rf node_modules/; yarn install"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^2.3.1",
+    "@types/history": "^4.6.2",
+    "@types/react": "^16.3.16",
+    "@types/react-dom": "^16.0.5",
+    "frint": "^5.4.4",
+    "frint-config": "^5.4.4",
+    "frint-react": "^5.4.4",
+    "frint-router": "^5.4.4",
+    "frint-router-react": "^5.4.4",
+    "frint-store": "^5.4.4",
+    "lodash": "^4.17.10",
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-transition-group": "^2.3.1",
+    "rxjs": "^6.2.0",
+    "skeleton-css": "^2.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "^10.3.0",
+    "awesome-typescript-loader": "^5.0.0",
+    "css-loader": "^0.28.11",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "typescript": "^2.9.1",
+    "webpack": "^4.10.2",
+    "webpack-cli": "^3.0.3"
+  }
+}
diff --git a/misk/web/@misk/common/src/externals.ts b/misk/web/@misk/common/src/externals.ts
@@ -0,0 +1,94 @@
+export const externals = [{
+  'lodash': {
+    root: '_',
+    commonjs: 'lodash',
+    commonjs2: 'lodash',
+    amd: 'lodash',
+  },
+}, {
+  'rxjs': {
+    root: 'Rx',
+    commonjs: 'rxjs',
+    commonjs2: 'rxjs',
+    amd: 'rxjs',
+  },
+}, {
+  'react': {
+    root: 'React',
+    commonjs: 'react',
+    commonjs2: 'react',
+    amd: 'react',
+  },
+}, {
+  'react-dom': {
+    root: 'ReactDOM',
+    commonjs: 'react-dom',
+    commonjs2: 'react-dom',
+    amd: 'react-dom'
+  }
+}, {
+  'prop-types': {
+    root: 'PropTypes',
+    commonjs: 'prop-types',
+    commonjs2: 'prop-types',
+    amd: 'prop-types',
+  }
+}, {
+  'frint': {
+    root: 'Frint',
+    commonjs: 'frint',
+    commonjs2: 'frint',
+    amd: 'frint'
+  },
+}, {
+  'frint-store': {
+    root: 'FrintStore',
+    commonjs: 'frint-store',
+    commonjs2: 'frint-store',
+    amd: 'frint-store'
+  },
+}, {
+  'frint-react': {
+    root: 'FrintReact',
+    commonjs: 'frint-react',
+    commonjs2: 'frint-react',
+    amd: 'frint-react'
+  },
+}, {
+  'frint-router': {
+    root: 'FrintRouter',
+    commonjs: 'frint-router',
+    commonjs2: 'frint-router',
+    amd: 'frint-router'
+  },
+}, {
+  'frint-router-react': {
+    root: 'FrintRouterReact',
+    commonjs: 'frint-router-react',
+    commonjs2: 'frint-router-react',
+    amd: 'frint-router-react'
+  }
+}, {
+  'frint-router/BrowserRouterService': {
+    root: 'FrintRouterBrowserRouterService',
+    commonjs: 'frint-router/BrowserRouterService',
+    commonjs2: 'frint-router/BrowserRouterService',
+    amd: 'frint-router/BrowserRouterService'
+  }
+}, {
+  '@blueprintjs/core': {
+    root: 'BlueprintjsCore',
+    commonjs: '@blueprintjs/core',
+    commonjs2: '@blueprintjs/core',
+    amd: '@blueprintjs/core'
+  }
+}, {
+  'react-transition-group': {
+    root: 'ReactTransitionGroup',
+    commonjs: 'react-transition-group',
+    commonjs2: 'react-transition-group',
+    amd: 'react-transition-group'
+  }
+}];
+
+export default externals;
diff --git a/misk/web/@misk/common/src/index.ts b/misk/web/@misk/common/src/index.ts
@@ -0,0 +1,2 @@
+import externals from './externals'
+export default { externals }
diff --git a/misk/web/@misk/common/src/styles.ts b/misk/web/@misk/common/src/styles.ts
@@ -0,0 +1,4 @@
+import './styles/misk-common.css'
+import '../node_modules/@blueprintjs/core/lib/css/blueprint.css'
+import '../node_modules/normalize.css/normalize.css'
+import '../node_modules/skeleton-css/css/skeleton.css'
diff --git a/misk/web/@misk/common/src/styles/misk-common.css b/misk/web/@misk/common/src/styles/misk-common.css
@@ -0,0 +1,4 @@
+.misk-menu {
+    position: absolute;
+    float: left;
+}
diff --git a/misk/web/@misk/common/src/vendors.ts b/misk/web/@misk/common/src/vendors.ts
@@ -0,0 +1,13 @@
+(<any>window)._ = require('lodash');
+(<any>window).Rx = require('rxjs');
+(<any>window).ReactDOM = require('react-dom');
+(<any>window).React = require('react');
+(<any>window).PropTypes = require('prop-types');
+(<any>window).Frint = require('frint');
+(<any>window).FrintStore = require('frint-store');
+(<any>window).FrintReact = require('frint-react');
+(<any>window).FrintRouter = require('frint-router');
+(<any>window).FrintRouterReact = require('frint-router-react');
+(<any>window).FrintRouterBrowserRouterService = require('frint-router/BrowserRouterService');
+(<any>window).BlueprintjsCore = require('@blueprintjs/core');
+(<any>window).ReactTransitionGroup = require('react-transition-group');
diff --git a/misk/web/@misk/common/tsconfig.json b/misk/web/@misk/common/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compileOnSave": true,
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "alwaysStrict": true,
+        "declaration": true,
+        "esModuleInterop": true,
+        "jsx": "react",
+        "module": "commonjs",
+        "noEmit": true,
+        "noEmitOnError": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "outDir": "./lib/",
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "strict": true,
+        "target": "es6",
+    },
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+        "node_modules/**"
+    ]
+}
diff --git a/misk/web/@misk/common/webpack.config.js b/misk/web/@misk/common/webpack.config.js
@@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    index: path.resolve(__dirname, 'src/index.ts'),
+    externals: path.resolve(__dirname, 'src/index.ts'),
+    styles: path.resolve(__dirname, 'src/styles.ts'),
+    vendors: path.resolve(__dirname, 'src/vendors.ts')
+  },
+  devtool: 'source-map',
+  output: {
+    path: path.resolve(__dirname, './lib'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { 
+        test: /\.tsx?$/, 
+        loader: 'awesome-typescript-loader'
+      }, {
+        test: /\.(scss|sass|css)$/,
+        loader: ['style-loader', 'css-loader?minimize=true', 'sass-loader']
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
+  },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import * as miskCommon from './lib';
		export default miskCommon;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import externals from './externals'
		export default { externals }