diff --git a/athloi.js b/athloi.js new file mode 100644 index 000000000..f898257b4 --- /dev/null +++ b/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); + }, + }), +}); diff --git a/lerna.json b/lerna.json index db3e5bc2d..111465c53 100644 --- a/lerna.json +++ b/lerna.json @@ -1,7 +1,6 @@ { "packages": [ - "packages/*", - "private/*" + "packages/*" ], "version": "1.0.0-1" } diff --git a/makefile b/makefile new file mode 100644 index 000000000..8fdc9a7ae --- /dev/null +++ b/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 diff --git a/package.json b/package.json index 8058a174f..501d29d93 100644 --- a/package.json +++ b/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": { diff --git a/packages/x-docs/package.json b/packages/x-docs/package.json index d63412a50..d2738c332 100644 --- a/packages/x-docs/package.json +++ b/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" }, diff --git a/packages/x-docs/static/storybook b/packages/x-docs/static/storybook index 45d100cf3..09cc02df4 120000 --- a/packages/x-docs/static/storybook +++ b/packages/x-docs/static/storybook @@ -1 +1 @@ -../../x-workbench/dist/storybook/ \ No newline at end of file +../node_modules/@financial-times/x-workbench/dist/storybook/ \ No newline at end of file diff --git a/packages/x-teaser/package.json b/packages/x-teaser/package.json index fb03f7872..52f4e4d97 100644 --- a/packages/x-teaser/package.json +++ b/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": "", diff --git a/packages/x-workbench/package.json b/packages/x-workbench/package.json index c3afb7530..a476e02af 100644 --- a/packages/x-workbench/package.json +++ b/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": "", diff --git a/readme.md b/readme.md index bae86fc31..9439adf76 100644 --- a/readme.md +++ b/readme.md @@ -6,6 +6,12 @@ +## 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`. diff --git a/secret-squirrel.js b/secret-squirrel.js index bfa7c48de..12d4d0fc3 100644 --- a/secret-squirrel.js +++ b/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',