TIL: Using decorators in Storybook to document invalid inputs

ɥɔɐ⅂ ɐɥɔsɐS — Mon, 10 May 2021 08:35:09 +0000

Today I learned about Storybooks decorators and used them for documenting validation errors on inputs.

Decorators are Storybooks way to wrap a story into some extra HTML.
By that, a basic component can for example be documented in a better visual way, as suggested by Storybooks, by adding some space around a story.

Writing an input component

Now to my use-case: I was developing input components with Vue, while writing the related stories.
Besides showing the default state of an input, I alse wanted to show the invalid state.

As an example I'd have a component called InputText.vue in which I would simply pass down all the props and attrs to the input field.

<template>
  <div class="input-group">
    <label v-if="label" :for="id">{{ label }}</label>
    <input type="text" v-bind="{...$props, ...$attrs}" />
  </div>
</template>

...

<style>
...
input:invalid {
  border-color: red;
}
</style>

With an InputText.stories.js as follows:

export default {
  title: "Forms/Inputs/Text",
  component: InputText,
  decorators: [],
};

const Template = (args) => ({
  props: Object.keys(args),
  components: { InputText },
  template: '<InputText v-bind="$props" />',
});

export const EmptyRequired = Template.bind({});
EmptyRequired.story = {
  name: "Required field",
  args: {
    id: "field1",
    label: "Some Label",
    required: true,
  },
};

So the required attribute would end up at the components input tag, making it invalid with an empty value.

Per default the invalid state would never be shown in Storybook.

Sure, I could've added an extra class to my CSS, which probably wouldn't ever be used in the final application, so I wanted to avoid that.

Adding a decorator

Instead I used a decorator to wrap my story into a form tag with:

  decorators: [() => ({ template: "<form><story /></form>" })],

By that I could make use of the browser built-in validation and have my possible validation states show up right away when setting the attribute required and no value.

This of course works not only with the required attribute, but also with something like an invalid e-mail address on type="email" inputs.

TIL: starting my own UI-library using Vue, Storybook & Sass

ɥɔɐ⅂ ɐɥɔsɐS — Tue, 13 Apr 2021 15:42:28 +0000

I wanted to start my own Vue UI-library 🎨, to be used in different projects.

Scaffolding

I was trying around with vue-sfc-rollup, which is a tool to

"scaffold a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs - into a form ready to share via npm".

Following their setup docu, it worked without a problem, so I went with it.
Having the Vue CLI dev server in place, I could add some first basic components, and view them with that in the browser.

I wanted my vue components to use lang="scss" in the style block, which worked out of the box.

Using Storybook

My next step was to install Storybook to my project, because I did want to use that, instead of the Vue CLI dev server, suggested by vue-sfc-roll.

I followed the guide to install it to a Vue project and also found the helpful guide to extend the webpack configuration, to add the sass and style loaders.

Now running Storybook's server, the components themselves did appear in their stories, but completely without any styles applied just bare-naked browser defaults. 😿
Only when using no lang-attribute at all, they would appear styled.

I realized, that Storybook must be misconfigured somehow.

Webpack's shaking trees to hard

At one point (and dozens of Github/SO searches later 😅) I found a hint in Webpack's docu: Marking as side-effect-free.

As I didn't setup anything like that myself, I was quite surprised to find, that seemingly vue-sfc-rollup had set "sideEffects": false in the package.json.

Removing that property, or even better using:

"sideEffects": ["*.vue"],

would solve my problem! 🥳 The components were styled even in Storybook.

So apparently Storybook's webpack had pruned the Sass inside my .vue files, where the Vue CLI service dev server did not do that.

And yes, a quick search in Vue CLI's documentation would reveal this page, where they even have a yellow warning:

If you are developing a library or in a monorepo, please be aware that CSS imports are side effects. Make sure to remove "sideEffects": false in the package.json, otherwise CSS chunks will be dropped by webpack in production builds.

Great, now I am able to continue developing my very first Vue UI-library!