tmeasday

Well done! You've found code #2, it is XYICD.

Were you looking for the real docs? https://www.chromatic.com/docs/visual-testing-addon

tmeasday

/* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
}
h1,
h2,

tmeasday

module.exports = {

  // Make sure you match CSF files!
  testMatch: ['**/__tests__/**/*.js', '**/?(*.)test.js', '**/?(*.)stories.js'],
  
  // You'll probably want to add some code to mock out things for stories
  setupFilesAfterEnv: ['<rootDir>/.storybook/setupFilesAfterEnv'],
  
  transform: {
    // This is the key bit!

tmeasday

Simple API: export Component (for docs) and examples ("renderables")

import React from 'react';

import Component from 'somewhere';

export default Component;

export const variant1 = () => <Component variant="1" />;

tmeasday

import { configure } from '@kadira/storybook';

import '../src/index.css';

const req = require.context('../src', true, /.story.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

tmeasday

// This is a hard-coded value obtained via cURL, but in a real app
// you would read this from local storage (with localStorage.getItem(..))
// and set it on the `onLogin` handler.
let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1OGNlMThmNTAyMjZiODZlYmY4YTNjN2UifQ.94L8T58sxT4QHEduQnYVl_V3JrT0E6eGwrEJyu_0BDo";

const networkInterface = createNetworkInterface({
  uri: `${REACT_APP_API_HOST}/graphql`,
});
networkInterface.use([
  {

tmeasday

enum TaskState {
  TASK_INBOX
  TASK_PINNED
  TASK_SNOOZED
  TASK_ARCHIVED
}

type Task {
  id: ID!
  title: String!

tmeasday

const { executablePath, args } = require('chrome-aws-lambda');
const { spawnSync,execSync } = require('child_process');


const fullArgs = args.concat(['--no-sandbox', '--headless', '--disable-gpu', '--screenshot', 'https://kqdbudnrfd.tunnel.chromaticqa.com/iframe.html?selectedKind=basics%2FA&selectedStory=fonts']);
console.log('runningWithArgs: ' + fullArgs);
const screenshotResult = spawnSync(executablePath, fullArgs, { cwd: '/tmp', timeout: 25 * 1000 });
console.log('chrome command stdio: ' + screenshotResult.output.toString());
console.log('chrome command stderr: ' + screenshotResult.stderr.toString());

tmeasday

1. Refactor each view layer to export a "story" component

(sort of like I imagined on this PR: storybookjs/storybook#3360)

So, you could this:

import React from 'react';
import { Story }  from '@storybook/react';

tmeasday

// The idea is to maintain the `api.X` contract that allows us to change the internal store format without releasing a breaking change

import React from 'react';
import { addons, types } from '@storybook/addons';

import { ADDON_ID, PANEL_ID } from './constants';

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.PANEL,