Bundle new tab in CLI

packages/@misk/cli/package.json

@@ -10,7 +10,9 @@
   },
   "files": [
     "lib",
-    "miskweb"
+    "miskweb",
+    "plopfile.js",
+    "plop-templates"
   ],
   "engines": {
     "node": ">= 0.2.0"
@@ -39,6 +41,7 @@
     "fs-extra": "9.1.0",
     "klaw": "3.0.0",
     "lodash": "4.17.21",
+    "node-plop": "0.26.2",
     "pkg": "4.4.8",
     "prettier": "1.19.1",
     "progress": "2.0.3",
@@ -71,7 +74,7 @@
     "transform": {
       "^.+\\.tsx?$": "ts-jest"
     },
-    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
+    "testRegex": "cli/tests/.*(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
     "moduleFileExtensions": [
       "ts",
       "tsx",

packages/@misk/cli/plop-templates/basic/.gitignore

@@ -0,0 +1,22 @@
+.git
+.DS_Store
+**/@misk/web
+cachedUrls
+logs
+*.log
+npm-debug.log*
+coverage
+node_modules
+.npm
+build
+dist
+lib
+.hash
+.old_build_files
+prettier.config.js
+tsconfig.json
+tslint.json
+webpack.config.js
+*.js.map
+
+// Generated by @misk/cli.

packages/@misk/cli/plop-templates/basic/miskTab.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{titleCaseName}}",
+  "output_path": "lib/web/_tab/template-basic",
+  "port": "3150",
+  "rawGitginore": "",
+  "rawIndex": false,
+  "rawPackageJson": {},
+  "rawTsconfig": {},
+  "rawTslint": {},
+  "rawWebpackConfig": {},
+  "relative_path_prefix": "",
+  "slug": "template-basic",
+  "useWebpackBundleAnalyzer": false,
+  "useWebpackExternals": true,
+  "version": "0.3.0",
+  "zipOnBuild": false,
+  "___DeprecatedKeys": "Any keys below this point in your miskTab.json are deprecated and can be safely removed."
+}

packages/@misk/cli/plop-templates/basic/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "misk-web-tab-template-basic",
+  "version": "0.3.0",
+  "license": "SEE LICENSE IN https://github.com/cashapp/misk-web",
+  "main": "src/index.tsx",
+  "scripts": {
+    "build": "npm run-script prebuild && npm run-script lib && npm run-script test ",
+    "ci-build": "npm install && npm run-script clean && npm run-script prebuild && cross-env NODE_ENV=production npm run-script lib && npm run-script test ",
+    "dev-build": "npm run-script dev-lib ",
+    "clean": "rm -rf demo lib",
+    "clean-build-files": "rm .hash package-lock.json package.json tsconfig.json tslint.json webpack.config.js",
+    "lib": "cross-env NODE_ENV=production webpack",
+    "dev-lib": "cross-env NODE_ENV=development webpack",
+    "lint": "prettier --write --config package.json \".{/src/**/,/}*.{md,css,scss,less,json,js,jsx,ts,tsx}\"",
+    "prebuild": "miskweb prebuild && npm run-script lint",
+    "reinstall": "rm -rf node_modules && npm run-script install",
+    "start": "npm run-script prebuild && cross-env NODE_ENV=development webpack-dev-server",
+    "test": "jest --passWithNoTests --maxWorkers=2",
+    "zip": "tar --exclude='.gitignore' --exclude='.old_build_files' --exclude='package.json' --exclude='package-lock.json' --exclude='prettier.config.js' --exclude='tsconfig.json' --exclude='tslint.json' --exclude='webpack.config.js' --exclude='yarn.lock' --exclude='demo' --exclude='lib' --exclude='.DS_Store' --exclude='*.log' --exclude='node_modules' --exclude='template-basic.tgz' -czvf template-basic.tgz ./"
+  },
+  "dependencies": {
+    "@misk/cli": "0.3.0",
+    "@misk/common": "0.3.0",
+    "@misk/core": "0.3.0",
+    "@misk/simpleredux": "0.3.0",
+    "@blueprintjs/core": "3.19.1",
+    "@blueprintjs/datetime": "3.13.0",
+    "@blueprintjs/icons": "3.13.0",
+    "@blueprintjs/select": "3.16.6",
+    "@blueprintjs/table": "3.9.0",
+    "@blueprintjs/timezone": "3.9.6",
+    "@redux-saga/core": "1.1.3",
+    "axios": "0.21.1",
+    "connected-react-router": "6.6.1",
+    "dayjs": "1.8.26",
+    "enum-utils": "1.0.0",
+    "history": "4.10.1",
+    "http-method-enum": "1.0.0",
+    "immutable": "4.0.0-rc.12",
+    "lodash": "4.17.21",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-helmet": "6.0.0",
+    "react-hot-loader": "4.12.21",
+    "react-redux": "7.2.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
+    "react-transition-group": "4.4.1",
+    "redux": "4.0.5",
+    "redux-saga": "1.1.3",
+    "reselect": "4.0.0",
+    "re-reselect": "3.4.0",
+    "skeleton-css": "2.0.4",
+    "status-code-enum": "1.0.0",
+    "styled-components": "4.4.1"
+  },
+  "devDependencies": {
+    "@misk/dev": "0.3.0",
+    "@misk/prettier": "0.3.0",
+    "@misk/test": "0.3.0",
+    "jest-emotion": "10.0.14",
+    "@misk/tslint": "0.3.0",
+    "@testing-library/dom": "7.2.2",
+    "@testing-library/react": "9.1.1",
+    "@types/history": "4.7.5",
+    "@types/jest": "25.2.3",
+    "@types/lodash": "4.14.150",
+    "@types/node": "14.17.6",
+    "@types/react": "16.14.11",
+    "@types/react-dom": "16.9.14",
+    "@types/react-helmet": "6.0.0",
+    "@types/react-hot-loader": "4.1.0",
+    "@types/react-redux": "7.1.8",
+    "@types/react-router": "5.1.7",
+    "@types/react-router-dom": "5.1.5",
+    "@types/styled-components": "4.4.3",
+    "@types/webpack": "4.41.13",
+    "@types/webpack-env": "1.15.2",
+    "copy-webpack-plugin": "5.1.1",
+    "cross-env": "7.0.2",
+    "css-loader": "3.5.3",
+    "fibers": "5.0.0",
+    "file-loader": "6.0.0",
+    "html-parser": "0.11.0",
+    "html-webpack-harddisk-plugin": "1.0.1",
+    "html-webpack-plugin": "3.2.0",
+    "jest": "24.9.0",
+    "jest-serializer-html": "7.1.0",
+    "mini-css-extract-plugin": "0.12.0",
+    "optimize-css-assets-webpack-plugin": "5.0.8",
+    "node-sass": "4.14.1",
+    "prettier": "1.19.1",
+    "prop-types": "15.7.2",
+    "sass": "1.36.0",
+    "sass-loader": "8.0.2",
+    "source-map-loader": "0.2.4",
+    "style-loader": "1.2.1",
+    "ts-jest": "24.3.0",
+    "ts-loader": "7.0.5",
+    "tslib": "2.3.0",
+    "typescript": "3.9.10",
+    "typescript-plugin-styled-components": "1.4.4",
+    "webpack": "4.43.0",
+    "webpack-cli": "3.3.11",
+    "webpack-bundle-analyzer": "3.7.0",
+    "webpack-dev-server": "3.11.0",
+    "webpack-merge": "4.2.2"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "snapshotSerializers": [
+      "jest-serializer-html",
+      "jest-emotion"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx"
+    ],
+    "moduleNameMapper": {
+      "^src(.*)$": "<rootDir>/src/$1",
+      "^tests(.*)$": "<rootDir>/tests/$1"
+    }
+  },
+  "prettier": "@misk/prettier",
+  "generated": "// Generated by @misk/cli."
+}

packages/@misk/cli/plop-templates/basic/src/components/HowToComponent.tsx

@@ -0,0 +1,34 @@
+import { H1, H3 } from "@blueprintjs/core"
+import * as React from "react"
+export const HowToComponent = () => {
+  return (
+    <div>
+      <H1>Welcome to your new Misk-Web tab!</H1>
+      <p>
+        Take a look around! There are some{" "}
+        <a href="https://cashapp.github.io/misk-web/docs/guides/building-a-tab/05-pure-vs-connected">
+          pure components and connected containers
+        </a>
+        , examples of form fields, and network requests.
+      </p>
+      <p>
+        For larger examples, check out the{" "}
+        <a href="https://github.com/cashapp/misk-web/tree/master/examples/tabs/palette-exemplar">
+          palette-exemplar tab in Misk-Web repo
+        </a>
+        , or play around with the palette-exemplar demo in the{" "}
+        <a href="https://cashapp.github.io/misk-web/docs/examples/palette-exemplar">
+          docs
+        </a>
+        .
+      </p>
+      <H3>
+        Good luck building on Misk-Web! See the{" "}
+        <a href="https://cashapp.github.io/misk-web/">docs</a> or{" "}
+        <a href="https://github.com/cashapp/misk-web">repo</a> to learn more.
+      </H3>
+    </div>
+  )
+}
+
+export default HowToComponent

packages/@misk/cli/plop-templates/basic/src/components/index.ts

@@ -0,0 +1,2 @@
+import HowToComponent from "./HowToComponent"
+export { HowToComponent }

packages/@misk/cli/plop-templates/basic/src/containers/LoadDataFormContainer.tsx

@@ -0,0 +1,86 @@
+import { Button, FormGroup, Intent, InputGroup } from "@blueprintjs/core"
+import {
+  handler,
+  mergeSagaMapKeysToTags,
+  simpleSelectorGet
+} from "@misk/simpleredux"
+import * as React from "react"
+import { connect } from "react-redux"
+import {
+  IDispatchProps,
+  IState,
+  mapDispatchToProps,
+  mapStateToProps
+} from "src/ducks"
+
+interface OwnProps {
+  tag: string
+}
+
+export const LoadDataFormContainer = (
+  props: IState & IDispatchProps & OwnProps
+) => {
+  const { tag } = props
+  const seedData = {
+    key: "cars",
+    range: [50, 75],
+    url: "https://cashapp.github.io/misk-web/examples/data/demo/cars.json"
+  }
+  const keyTagLookup = {
+    key: `${tag}::dataKey`,
+    range: `${tag}::dataRange`,
+    url: `${tag}::dataUrl`
+  }
+  return (
+    <div>
+      <FormGroup>
+        <Button
+          onClick={handler.simpleMergeData(props, tag, {
+            mergeSaga: mergeSagaMapKeysToTags(props, "data", keyTagLookup),
+            overrideArgs: seedData
+          })}
+          text={"Use Example Values"}
+        />
+        <InputGroup
+          placeholder={
+            "data endpoint URL (example: https://cashapp.github.io/misk-web/examples/data/demo/cars.json"
+          }
+          onChange={handler.simpleMergeData(props, `${tag}::dataUrl`)}
+          value={simpleSelectorGet(
+            props.simpleRedux,
+            [`${tag}::dataUrl`, "data"],
+            ""
+          )}
+          type={"url"}
+        />
+        <InputGroup
+          placeholder={"network response data object key (example: cars)"}
+          onChange={handler.simpleMergeData(props, `${tag}::dataKey`)}
+          value={simpleSelectorGet(
+            props.simpleRedux,
+            [`${tag}::dataKey`, "data"],
+            ""
+          )}
+        />
+        <Button
+          onClick={handler.simpleHttpGet(
+            props,
+            `${tag}::dataRequest`,
+            simpleSelectorGet(props.simpleRedux, [`${tag}::dataUrl`, "data"])
+          )}
+          intent={Intent.PRIMARY}
+          loading={simpleSelectorGet(props.simpleRedux, [
+            `${tag}::dataRequest`,
+            "loading"
+          ])}
+          text={"GET Data"}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LoadDataFormContainer)