Brandon Orther orther

Using Stitches with Storybook

The setup for storybook is the same as their docs. Once you're repo is set up (Im using Typescript) and you have Stitches imported and set up (as per the stitches docs), the next step is to install Storybook.

I went with their npx setup: npx sb init (note: since my project was already set up with React/TS this command detected everything it needed to know, so there was no interactive prompt for me)

When using a styled stitches component everything will work as expected:

export const Button = styled('button', {

ES Modules are terrible, actually

This post was adapted from an earlier Twitter thread.

It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual advantages to it. At all.

It looks shiny and new and some libraries use it in their documentation without any explanation, so people assume that it's the new thing that must be used. And then I end up having to explain to them why, unlike CommonJS, it doesn't actually work everywhere yet, and may never do so. For example, you can't import ESM modules from a CommonJS file! (Update: I've released a module that works around this issue.)

And then there's Rollup, which apparently requires ESM to be u

	const text = css({
	color: '$gray12',

	variants: {
	size: {
	// corrective letter-spacing and text-indent styles
	// should go here too, because they're determined by font-size.
	// You could also put line-height here too, if your devs prefer
	// a default line-height that works in some cases. But understand
	// that line-height is also a function of line-length, so the

	import { styled } from "@stitches/react"

	const Stack = styled("div", {
	display: "flex",

	variants: {
	dir: {
	col: { flexDirection: "column" },
	row: { flexDirection: "row" },
	},

	type State = string;
	type Message = string;

	type StatesList = readonly State[];
	type MessagesConfig = Record<State, Record<Message, State>>;

	type OneOf<S extends StatesList> = S[number];

	type Send<
	SBConfig extends StateBuilderConfig<StatesList, State, State>,

	# Edit this configuration file to define what should be installed on
	# your system. Help is available in the configuration.nix(5) man page
	# and in the NixOS manual (accessible by running ‘nixos-help’).

	{ config, pkgs, ... }:

	{
	imports =
	[ # Include the results of the hardware scan.
	./hardware-configuration.nix

	import { useEffect } from 'react'

	type KeyPress = {
	key: string
	action: () => void
	}

	const useKeyPress = ({ key, action }: KeyPress) => {
	const onKeyDown = (e: KeyboardEvent) => {
	if (e.key === key) action()

	#
	# NixOS Configuration for Framework Laptop
	#

	{ config, lib, pkgs, modulesPath, ... }:

	{

	boot.kernelParams = [ "mem_sleep_default=deep" ];

	import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
	import React from 'react'

	const channels = {}

	export function useBroadcastLeader(id = 'default') {
	const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)

	React.useEffect(() => {
	if (!channels[id]) {