DEV Community: timreach

How to stop Storybook opening a new webpage on start (automatically with zsh)

timreach — Tue, 21 May 2024 10:29:29 +0000

This started as a tip for Storybook users but it is probably useful for anyone who uses zsh -

Do you find it annoying that whenever you run $ yarn storybook, Storybook takes the liberty of opening itself in a brand new tab? No fun if you're just restarting it because hot reload isn't working or something.

You may or may not know that there is an option to prevent this from happening: $ yarn storybook --ci will start Storybook but not open a tab. Hoorah.

But even knowing this, I often forget and become annoyed for literally microseconds as I close the superfluous tab. Sure, I could just suck up the minor inconvenience, meditate more, drink less caffeine, get some perspective. Or, I could just automate a fix.

I don't want to impose my preference upon the whole team so I don't want to just add the flag to the scripts definition in package.json so instead let's just configure the terminal to add the flag in automatically.

Simply add the following to your ~/.zshrc

function yarn() {
  if [[ "$1" == "storybook" ]]; then
    command yarn storybook --ci "${@:2}"
  else
    command yarn "$@"
  fi
}

P.S. don't forget to restart your terminal before testing it works...

This basically does a check any time yarn is run and if you're executing storybook will automatically add the flag. I'm sure you can imagine other uses of this pattern for similar issues where you want edit the default way a script executes on your machine but not your team's.

Using fonts in Storybook for Next.JS and Tailwind Projects

timreach — Thu, 29 Feb 2024 21:53:48 +0000

I'm pretty new to Storybook. I am so frustrated I haven't used it in projects earlier as developing components in isolation is incredible. However I hit a bit of a gotcha this week when using it in my shadcn/ui based Next/Tailwind project.

If you want to use a custom font in Next app router you need to import them the next way to get the benefit of all Next's nextiness. If you're using Tailwind, the Next docs instruct you to export a variable name from the Next font object and insert it into the classNames of the body element in your root layout. You then reference this variable in your tailwind config under sans or your own chosen selector. This is also the instructions provided in the shadcn/ui Next setup docs. As someone who doesn't really use CSS variables this seems incredibly arkane, but it works fantastically well.

However, I noticed that it wasn't always working. I don't want to admit how long it took me to simply realising that when I was working in Storybook the font wasn't loading. In fact the only thing that flagged this issue was that it was falling back to a default sans-serif system font which didn't have a full range of font weights. Long story short, my fonts were not in Storybook.

Of course Storybook is NOT Next. The root layout where you are importing your font and defining its CSS variable isn't in use. Forehead slapping aside, the solution was relatively easy. In my case, I am using the shadcn/ui default font of Inter so I just needed to load this in and apply it to the body of the Storybook instance. And of course, you load this in, as per Google's advice, in the header of the document.

A little digging into the Storybook docs reveals a useful feature of preview-head.html, which is a file you can define in your .storybook directory which will then be treated as the head element of Storybook. This gives you somewhere to import your font from Google Font's CDN and also define a style tag where you apply the font to the body element. My file ended up looking like this:



<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
<style>
    body {
        font-family: "Inter", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>

A previous attempt at solving this involved importing the font at Storybook's preview.tsx in a global decorator, however this doesn't catch instances where components are instantiated as siblings of your story, such as with popovers or alert dialogs. A wrapper is almost as good, but using the preview head is more universal.

I hope this helps someone else in this confusing but not all that uncommon situation solve the problem a little faster than I did.

How to preview a Next.JS app on a mobile device

timreach — Fri, 17 Mar 2023 12:36:15 +0000

So you're building a mobile web app and you want to view it on an actual phone not a virtual one in your dev tools? No, you don't have to deploy! If you've ever used Create React App, running developer mode gives you simple instructions for doing this, however Next.JS $ yarn dev does not! Fear not, it is very simple...

1. Get your machine's IP address

# Linux/Mac
$ ifconfig

# Or Windows...
$ ipconfig

2. Run your project

$ yarn dev

3.Open browser on your phone

If your machine's IP is 192.168.0.69...
...navigate to 192.168.0.69:3000 on your phone

It's as easy as that!