Merge pull request #44 from Financial-Times/build

nicer non-maintainer dev experience

athloi.js

@@ -0,0 +1,42 @@
+const open = require('opn');
+const tcpPortUsed = require('tcp-port-used');
+const url = require('url');
+
+const openUrls = {
+	docs: 'http://localhost:8000',
+	storybook: 'http://localhost:9001',
+};
+
+module.exports = ({tasks, prompt, addPrompt}) => ({
+	start: Object.assign({}, tasks.start, {
+		requiredArgs: ['open'],
+
+		choice: addPrompt(
+			tasks.start.choice,
+			() => prompt([{
+				type: 'list',
+				name: 'open',
+				message: 'What do you want to open in the browser?',
+				choices: [
+					{value: 'docs', short: 'Docs', name: 'The documentation website'},
+					{value: 'storybook', short: 'Storybook', name: 'The component explorer'},
+				]
+			}])
+		),
+
+		run(options) {
+			const openUrl = openUrls[options.open];
+			const port = parseInt(url.parse(openUrl).port, 10);
+
+			if(port) {
+				// wait for whatever (storybook/gatsby) to be listening on the port
+				// try every 500ms and give up after 30s
+				tcpPortUsed.waitUntilUsed(port, 500, 30000)
+					.then(() => open(openUrl))
+					.catch(e => console.error(e.stack));
+			}
+
+			return tasks.start.run(options);
+		},
+	}),
+});

lerna.json

@@ -1,7 +1,6 @@
 {
   "packages": [
-    "packages/*",
-    "private/*"
+    "packages/*"
   ],
   "version": "1.0.0-1"
 }

makefile

@@ -0,0 +1,19 @@
+# DO NOT ADD TASKS TO THIS MAKEFILE
+# these tasks exist for principle-of-least-surprise purposes for people coming
+# here from next-land. this makefile should not be used for anything else.
+# instead, use per-package npm scripts
+
+install:
+	@printf "\n  \e[1;34m☞\e[0m this is the same as running \e[3;36mnpm install\e[0m\n\n"
+	@sleep 3
+	npm install
+
+run:
+	@printf "\n  \e[1;34m☞\e[0m this is the same as running \e[3;36mnpm start\e[0m\n\n"
+	@sleep 3
+	npm start
+
+build:
+	@printf "\n  \e[1;34m☞\e[0m this is the same as running \e[3;36mnpm run build\e[0m\n\n"
+	@sleep 3
+	npm run build

package.json

@@ -4,18 +4,23 @@
     "postinstall": "lerna bootstrap",
     "rebootstrap": "lerna clean --yes && lerna bootstrap",
     "add-package": "addpackage() { mkdir packages/$1 ; pushd packages/$1 ; npm init -y --scope=financial-times ; popd ; } ; addpackage",
-    "pretest": "lerna run build",
+    "build": "athloi build",
+    "pretest": "npm run build",
     "test": "jest -c jest.config.js",
+    "start": "athloi",
     "precommit": "secret-squirrel",
     "commitmsg": "secret-squirrel-commitmsg"
   },
   "devDependencies": {
     "@financial-times/secret-squirrel": "^2.8.0",
+    "athloi": "^1.2.0",
     "husky": "^0.14.3",
     "jest": "^22.4.3",
     "lerna": "^3.0.0-beta.16",
+    "opn": "^5.3.0",
     "react": "^16.3.1",
-    "react-test-renderer": "^16.3.1"
+    "react-test-renderer": "^16.3.1",
+    "tcp-port-used": "^0.1.2"
   },
   "x-dash": {
     "engine": {

packages/x-docs/package.json

@@ -45,9 +45,6 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build --prefix-paths",
-    "build-storybook": "cd ../x-workbench && npm run build && cd ../x-docs",
-    "prestart": "npm run build-storybook",
-    "prebuild": "npm run build-storybook",
     "start": "nodemon -x 'gatsby develop' -w \"gatsby-*.js\"",
     "postinstall": "bower install"
   },

packages/x-docs/static/storybook

@@ -1 +1 @@
-../../x-workbench/dist/storybook/
+../node_modules/@financial-times/x-workbench/dist/storybook/

packages/x-teaser/package.json

@@ -8,7 +8,8 @@
   "types": "Props.d.ts",
   "scripts": {
     "prepare": "npm run build",
-    "build": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js",
+    "start": "rollup --watch -c rollup.config.js"
   },
   "keywords": [],
   "author": "",

packages/x-workbench/package.json

@@ -5,8 +5,9 @@
   "description": "",
   "main": "stories.js",
   "scripts": {
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "build": "build-storybook -c .storybook -o dist/storybook"
+    "start": "start-storybook -p 9001 -c .storybook",
+    "build": "build-storybook -c .storybook -o dist/storybook",
+    "prepare": "npm run build"
   },
   "keywords": [],
   "author": "",

readme.md

@@ -6,6 +6,12 @@
         </a>
 </h1>
 
+## Developer guide
+
+This is a [Lerna](https://github.com/lerna/lerna) monorepo. To get started hacking on x-dash, clone it and `npm install` as usual, and Lerna will install and link together all the individual packages.
+
+Run `npm start` to open the developer interface, which shows a list of tasks. Choose one to run it and it'll tell you a shortcut to run that task in the future.
+
 ## What is this?
 
 x-dash is an experiment in building new shared frontend components for FT.com and the FT Apps. A detailed introduction is available in [Google Slides][slides].
@@ -17,9 +23,3 @@ x-dash is an experiment in building new shared frontend components for FT.com an
 Origami components are designed to work across the whole of FT and our sub-brands, making as few assumptions as possible about the tech stack that will be consuming them. Origami components don't contain templating, only styles and behaviour. It's up to each individual app to produce markup for components.
 
 x-dash aims to complement Origami by providing easily reusable and composable templates, flexibly enough to work across Next and Apps apps.
-
-## Developer guide
-
-This is a [Lerna](https://github.com/lerna/lerna) monorepo. To get started hacking on x-dash, clone it and `npm install` as usual, and Lerna will install and link together all the individual packages.
-
-To add a new package, run `npm run add-package -- package-name`.

secret-squirrel.js

@@ -1,6 +1,7 @@
 module.exports = {
 	files: {
 		allow: [
+			'makefile',
 			'packages/x-docs/.bowerrc',
 			'packages/x-docs/LICENSE',
 			'packages/x-docs/static/storybook',