Routine Design
Nodejs package for aligning code and design.
Command Line Interface
routine-design
is a Swiss army knife of simple commands for aligning code and design. The commands interact with a directory with many React.Component
, lets call it ./render
.
Turn ./render
into a Webpack server
routine-design render ./render
See below for more commands, or run routine-design -h
for more commands and help.
Capturing
Saves a screenshot images of every component in Google Cloud Platform.
routine-design capture ./render project-id storage-bucket-name
Save screenshot images of ./render/foo
on Google Cloud Platform.
routine-design directory capture project-id storage-bucket-name ./render --component-directory=foo
Validating Pixels
Tests that all screenshot images are identical to the golden screenshots saved on Google Cloud Platform.
routine-design test ./render project-id storage-bucket-name
You can also check just one directory using the pixel-validate
command. For example, here's how to check screenshot images of ./render/foo
routine-design directory pixel-validate project-id storage-bucket-name ./render --component-directory=foo
JavaScript API
const RoutineDesign = require('routine-design');
const routineDesign = new RoutineDesign();
createGcpImageBucket(projectId, storageBucketName)
Creates a new GpcImageBucket
, which manages a screenshot image bucket on Google Cloud Platform.
createTree(directory)
Creates a new RoutineDesignTree
, which operates on a directory with React.Component
. Say ./render
is a directory with React.Component
.
const routineDesignTree = routineDesign.createTree('./render');
getLocalStorage()
Creates a new LocalStorage
, which provides tools for writing local files.
createComponentWorkshop(renderDirectory, gcpProjectId, storageBucketName)
Creates a new ComponentWorkshop
, which connects a directory of components to a storage bucket of screenshots.
createWebPage(browser, port, path)
Creates a new WebPage
, which interact with a local Web page.
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const webPage = routineDesign.createWebPage(browser, 8080, 'path');
You can specify the width of the WebPage
.
const webPage = routineDesign.createWebPage(browser, 8080, 'path', 320);
WebPage.screenshot()
Returns a screenshot as a PNG object, like from pngjs.
WebPage.resolves()
Returns true if the URL resolves.
WebPage.waitForResolution(tryCount)
Keeps trying until the URL resolves.
createApplication(cssFilename = 'bundle.css', javaScriptFilename = 'bundle.js')
Creates a new Application
, which provides tools for creating a Web application.