Tom Coleman tmeasday

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

So, you could this:

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

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" />;

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:

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

Ideas of what I'd like to add:

	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!

	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());

	// 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,

	### 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:

	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 */

	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