Mikael Balin mikaelbalin

NOTE: This was written in 2020 and has been superseded by docs at storybook.js.org

Storybook React props handling for Typescript

We've flip-flopped on prop table handling for React components written in Typescript. This document attempts to be a final reference for anybody who's been trying to follow along.

TLDR:

SB6 uses react-docgen-typescript by default. We hope to use react-docgen in SB7. The whole experience led to zero-config in SB6, so it's now a one-line change main.js to switch between the two.

Building a react native app in WSL2

Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.

Install tools in Windows
Enable mirrored networking mode in WSL2
Install tools in WSL2
Connect to android hardware device from Windows
Connect to android hardware device from WSL2
Connect to android virtual device in Windows

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

	#!/bin/bash

	#
	# Inspects branch name and checks if it contains a Jira ticket number (i.e. ABC-123).
	# If yes, commit message will be automatically prepended with [ABC-123].
	#
	# Useful for looking through git history and relating a commit or group of commits
	# back to a user story.
	#

	// time and time end
	console.time("This");
	let total = 0;
	for (let j = 0; j < 10000; j++) {
	total += j
	}
	console.log("Result", total);
	console.timeEnd("This");

	// Memory

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var styleEl = document.getElementById('css-layout-hack');
	if (styleEl) {
	styleEl.remove();
	return;
	}
	styleEl = document.createElement('style');
	styleEl.id = 'css-layout-hack';

	/**
	* useScroll React custom hook
	* Usage:
	* const { scrollX, scrollY, scrollDirection } = useScroll();
	*/

	import { useState, useEffect } from "react";

	export function useScroll() {
	const [lastScrollTop, setLastScrollTop] = useState(0);

	let regex;

	/* matching a specific string */
	regex = /hello/; // looks for the string between the forward slashes (case-sensitive)... matches "hello", "hello123", "123hello123", "123hello"; doesn't match for "hell0", "Hello"
	regex = /hello/i; // looks for the string between the forward slashes (case-insensitive)... matches "hello", "HelLo", "123HelLO"
	regex = /hello/g; // looks for multiple occurrences of string between the forward slashes...

	/* wildcards */
	regex = /h.llo/; // the "." matches any one character other than a new line character... matches "hello", "hallo" but not "h\nllo"
	regex = /h.llo/; // the "" matches any character(s) zero or more times... matches "hello", "heeeeeello", "hllo", "hwarwareallo"

	@echo off
	REM Make sure that the path to the script is correct!
	@bash -l -c "~/bin/gitkraken-wsl-bash.sh %*"

	# Location: /mnt/c/windows/system32/drivers/etc/hosts
	127.0.0.1 virtualhost.local www.virtualhost.local