Andrew Clancy nite

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

I've been working with plot.ly dash a bit lately, and let me tell you: this tool is incredible. I won't spend too long gushing about it, but definitely check it out if you ever need to draw graphs, but don't want to have to learn a million javascript graphing libraries to get it done. This gist will assume you have a decent base knowledge of plot.ly dash, so if you don't have much experience, you probably will want to go play around with it some.

While composing various interactive graphs, I found that I needed a way to use clickData events from multiple graphs as inputs to a callback, so that when a user clicked on any of three graphs, some other graph could redraw using a subset of data from whichever graph was clicked. This starts out sounding like a pretty

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

constructor
render

Introduction to Angular

Angular (aka Angular 2) is a new framework completely rewritten from the ground up, replacing the famous AngularJS framework (aka Angular 1.x).

More that just a framework, Angular should now be considered as a whole platform which comes with a complete set of tools, like its own CLI, debug utilities or performance tools.

	///////
	//To test this code, execute it locally or copy/paste it at https://try.playwright.tech/
	//Usage example: `await waitForMutationToStop(await page.$("#container"));`
	///////

	// @ts-check
	const playwright = require("playwright");

	//Wait for `elem` to have no mutations for a period of `noMutationDuration` ms. If `timeout` ms elapse without a "no mutation" period of sufficient length, throw an error. If `waitForFirstMutation` is true, wait until the first mutation before starting to wait for the `noMutationDuration` period.
	const waitForMutationToStop = async (elem, noMutationDuration = 3000, timeout = 60000, waitForFirstMutation = true) => {

	import { Observable } from 'rxjs';
	import { computed, IValueDidChange } from 'mobx';
	import isNil from 'lodash/isNil';
	import omit from 'lodash/omit';
	import { IEqualsComparer } from 'mobx/lib/internal';

	interface ToObservableOptions<T> {
	initial?: boolean;
	equals?: IEqualsComparer<T>;
	}

	import { debounce } from 'lodash';
	import axios from 'axios';

	// or vanilla debounce
	// const debounce = (func, timeOut) => {
	// let timer
	//
	// return (...args) => {
	// if (timer) clearTimeout(timer)
	// timer = setTimeout(func, timeOut)

	/**
	* Serialise input as key-value pair string, eg. for human-readable logs.
	*
	* @param {any} body
	* @param {number} nest
	* @param {string} delimiter
	* @param {string} arrayDelimiter
	* @param {boolean} nested
	* @returns {string}
	*/

	function iframeURLChange(iframe, callback) {
	var lastDispatched = null;

	var dispatchChange = function () {
	var newHref = iframe.contentWindow.location.href;

	if (newHref !== lastDispatched) {
	callback(newHref);
	lastDispatched = newHref;
	}