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

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

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,

tmeasday

### Keybase proof

I hereby claim:

  * I am tmeasday on github.
  * I am tmeasday (https://keybase.io/tmeasday) on keybase.
  * I have a public key ASB182E6eXpK7TriyrH8UK4hiMI9WVQmgK7deP7SlxC3rAo

To claim this, I am signing this object:

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

Here's a rough plan of where I am interested in taking Storybook's Story API.

The basic idea is to transition towards a new API that is:

1. More powerful
2. More flexible and interoperable with other tools
3. More familiar+idomatic.

The ground work of @storybook/core has been done, now we can do the fun stuff!

Ideas of what I'd like to add:

tmeasday

import { execute } from 'graphql';
import { makeExecutableSchema } from 'graphql-tools';

// There is some code duplication with server/index here.
// I wonder if we could refactor?
import addModelsToContext from '../model';
import typeDefs from '../schema';
import resolvers from '../resolvers';

/* eslint-disable no-console */

tmeasday

/* eslint-disable import/no-extraneous-dependencies */
import { LocalCollection } from 'meteor-standalone-minimongo';

const collections = {};

class Collection {
  constructor(name) {
    if (!collections[name]) {
      collections[name] = new LocalCollection();
    }