🐳📖📸Whales-story-shots

CLI API

• shoot.js - perform automatic story shooting
• compare.js - perform automatic image comparison

Support

• v1 - Storybook 4
• v2 - Storybook 5

API

Storybook API

• to activate whale-shots

import 'whales-story-shots/storybook/register';

• to activate dev mode hightlighting

import whalesStyles from 'whales-story-shots/storybook/styles';
<style dangerouslySetInnerHTML={{ __html: whalesStyles }} />

• to active shot for specific story

import whales from 'whales-story-shots/storybook/decorator';
addDecorator(whales({
    hinted: { jsLingui: [Trans] }, // will "hint" jsLingui Trans components and store it's coordinates
    failOnCatch: true|false // fail or not on any exception during the render (error image will be stored in any case)
}));

Whales API

• compare/stories - for comparison
• shot/shooter - for image generation

ENV

• IMAGESDIR(/build-output) - directory to store result images
• SOURCEDIR(/images) - directory to get result images(for comparison)
• METADIR(/meta-output) - directory to store result meta files
• STORYBOOK(http://host.docker.internal:6006) - storybook location
• STORYBOOK_PORT(6006) - port
• WAIT_UNTIL(load) - load, idle
• ISOLATED(false) - should stories be shooted in isolation(slow) or not
• THREAD_COUNT(8) - workers count
• PATHRULE - "path rule" file location

Volumes

• /whales-story-shots/compare/pathRule - to override file name generator

#!/usr/bin/env bash

DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"

echo "data will be saved to"
echo "${DIR}/../../build-output/shots"

# force image update
./node_modules/whales-story-shots/install.sh

# run image generation
docker run --shm-size 1G --rm \
-v "${DIR}/../../build-output/shots":/build-output \
-v "${DIR}/../../build-output/shots/meta":/meta-output \
-e MODE="iframe" \
whales-story-shots:latest node /whales-story-shots/shoot.js

# run image comparison
docker run --shm-size 1G --rm \
-v "${DIR}/../../templates":/images \
-v"${DIR}/pathRule":/whales-story-shots/compare/pathRule \
-v "${DIR}/../../build-output/shots":/build-output \
-v "${DIR}/../../build-output/shots/meta":/meta-output \
whales-story-shots:latest node /whales-story-shots/compare.js

Docker less run

It just could be faster, especially if you are already inside Docker.

Generation

const shooter = require('whales-story-shots/shot/shooter');

const storybook = `file://${join(__dirname, '..', '..', 'storybook-static')}`;
const imagesDir = join(__dirname, 'shots');

shooter({
    storybook,
    imagesDir,
    metaDir: join(imagesDir, 'meta'),
    waitUntil: 'load',
    isolated: false,
}).then(() => {
    process.exit();
});

Comparison

export METADIR="${DIR}/../../build-output/shots/meta"
export IMAGESDIR="${DIR}/../../build-output/shots"
export SOURCEDIR="${DIR}/../../templates"
export PATHRULE="${DIR}/pathRule"

node ../../node_modules/whales-story-shots/compare.js