DEV Community: Igor Neves Faustino

Set up Storybook in a Stencil project

Igor Neves Faustino — Sun, 02 Jul 2023 18:37:11 +0000

Setup Storybook in a Stencil project was not as easy as I expected. So I documented here the main steps I took to setup my project. Hope this can be useful to others in need.

Beginning with a Stencil application created, run the init script for the Storybook:

npx -p @storybook/cli sb init --type=html

This asks to set up using Webpack 5 or Vite. Both seem to work fine.

Now we need to allow Storybook to run my web components created with Stencil, So inside the .storybook/preview.js add the following code:

import { defineCustomElements } from '../loader';

defineCustomElements();

This will allow us to use the tag created for our components inside the Storybook.
Also in this file, you can import the Stencil's global.css file:

import '../src/global/global.css';

Now the basis of the setup is almost done. but there is one small problem. This loader folder that we imported does not exist yet. This folder is created at the build time of our application

so to create this folder we can run the build on watch mode:

npx stencil build --watch

this way every change that we in our components will reflect on the Storybook file (keep in mind that sometimes you need to refresh the Storybook page, especially with CSS).

Now with the Stencil build running, we can start the Storybook in a new terminal tab with the command:

npm run storybook

Great. now we can write our first story. Like with every other Storybook setup, we can place our .stories file into any folder that we want. I like to keep my stories in the same folder as my component, but you are free to follow other structures.

The story should be written using pure HTML into a string (for now at least). So my first story looked like this:

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },

  },
};

const Template = args => `<my-button label="${args.label}" variant="${args.variant}" size="${args.size}"></my-button>`;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};

This works fine, but we can set up the JSX syntax pretty easily. So all we need to do is to set up Babel to handle this for us. So first we need to install some libs:

npm i --save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx jsx-dom

Now add the plugins we just installed to the .babelrc file on the root of our project:

  "plugins": [
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]

now at our story, we can use the JSX syntax just by importing the h from the jsx-dom library.

import { h } from 'jsx-dom';

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
  },
};

const Template = args => <plx-button label={args.label} variant={args.variant} size={args.size}></plx-button>;

export const primary = Template.bind({});
primary.args = {
  label: 'Click me',
  variant: 'primaryFilled',
  size: 'medium',
};

much better. The last thing that I struggle with was setting up the events to show up in the actions tab on the Storybook page. The way I did this was to set up the withActions decorator from the @storybook/addon-actions package. So first, to install run this command:

npm i -D @storybook/addon-actions

and then we can use it like this:

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  argTypes: {
    // ...
  },
  decorators: [withActions],

  parameters: {
    actions: {
      handles: ['click', 'mouseover', 'mouseout'],
    },
  },
};

Now the events click, mouseover, and mouseout is logged into the Storybook. Exactly as expected.

Now we have a basic setup of Storybook in a Stencil build. Now you can keep enhancing this setup by adding more plugins to fit your need.

How to start with TDD

Igor Neves Faustino — Sun, 27 Mar 2022 20:22:51 +0000

When I initially started coding, I felt TDD didn't work because I wouldn't be able to code the test if I didn't know what to do.
After some time has passed, I've come to a different conclusion. When I'm not sure how to handle a problem, I find that creating the test ahead of time helps the most in figuring out how to solve the problem.

What is TDD?

TDD stands for Test-Driven Development and means you put focus on test before the actual production code.

Three TDD laws govern the process you should follow when using TDD. Here they are:

You can't write any production code until you have first written a failing unit test.
You can't write more of a unit test than is sufficient to fail, and not compiling is failing.
You can't write more production code than is sufficient to pass the currently failing unit test.

These laws contain us in a loop where we can only focus on and change one thing at a time. This allows us to take small steps and build up your projects incrementally.

How to start working with TDD

When working with TDD, we always take small steps to reach a greater goal.
To show you how I would've done a code using TDD, we will code the following problem:

I'm assuming you all can create a project and configure jest or whatever test library you like (if you don't know how to do this, I think this is your first step, google can help a lot with this. Don't worry, I'll be waiting here)

Let's start with a simple function that follows the following rules:

given a date of entry and exit in a parking lot, return the correct price.
each hour costs $1
we will always use completed hours to calculate the cost, so if a car is parked for 1:10 hours, we will charge 2 hours

Ok, now that we know the rules, we can start developing our code. Since we are using TDD, the first step is to create a test.

Since we are beginning our code from the test code, is easier to start thinking about the interface that we will be using. In this case, we know that we need the enter and leave hours. So we need to pass this information to the function.

Since we are using typescript, we can use the Date object to pass this info.

So for the first test, we will have something like this:

test("should return the correct price", () => {
  const enterDate = new Date('2022-03-27T10:00:00')
  const leaveDate = new Date('2022-03-27T12:00:00')

  const price = calculateParkingTicket(enterDate, leaveDate)

  expect(price).toBe(2)
})

Now that we have a failing test, we can finally start working on the actual function.

So following the TDD, we are creating the amount of code that is needed to the test pass:

export const calculateParkingTicket = (enter: Date, leave: Date) => {
  return 2
}

Now we have a passing test!!
We have the right amount of code to make your test pass, even though this code doesn't solve our real problem completely.

If the real problem is not solved yet, we will write a new test!!

test("should return the correct price when 5 hours passed", () => {
  const enterDate = new Date('2022-03-27T10:00:00')
  const leaveDate = new Date('2022-03-27T15:00:00')

  const price = calculateParkingTicket(enterDate, leaveDate)

  expect(price).toBe(5)
})

Ok, now we can't only return the number 2 from our function. We need to develop a more complex solution.

const PRICE_PER_HOUR = 1

export const calculateParkingTicket = (enter: Date, leave: Date) => {
  const diferencesInMs = (leave.getTime() - enter.getTime())
  const diferencesInHours = diferencesInMs / (1000 * 60 * 60)
  return diferencesInHours * PRICE_PER_HOUR
}

Looks better! But what will happen if a car stays parked for 2:30 hours?
according to our rules, it should cost $3, so let's write a test for this case

test("should return the correct price 2:30 hours passed", () => {
  const enterDate = new Date('2022-03-27T10:00:00')
  const leaveDate = new Date('2022-03-27T12:30:00')

  const price = calculateParkingTicket(enterDate, leaveDate)

  expect(price).toBe(3)
})

Now that we have a new test we can start to code!

const PRICE_PER_HOUR = 1

export const calculateParkingTicket = (enter: Date, leave: Date) => {
  const diferencesInMs = (leave.getTime() - enter.getTime())
  const diferencesInHours = diferencesInMs / (1000 * 60 * 60)
  const hoursToPay = Math.ceil(diferencesInHours)
  return hoursToPay * PRICE_PER_HOUR
}

So, this concludes our code. Every rule is taken into account and tested.

Now we are free to refactor the code as most as we want, with the certainty that we will not break any rule thanks to the tests!

Conclusion

We coded a basic example with TDD, and I think it demonstrates how to apply this technique correctly.

Working with TDD, in my opinion, has various advantages, such as the ability to take incremental steps, consider how you will interact with the code, and, of course, ensure that everything works correctly.

But, keep in mind that this approach may be hard to implement in the real world. Because not every piece of code is so trivial to test,

Along with TDD, it is critical to have a good architecture that enables the creation of testable code. Using patterns such as dependency injection can also aid in the creation of testable code.

Finally understanding the factory design pattern

Igor Neves Faustino — Mon, 28 Feb 2022 13:43:06 +0000

When I was studying Computer Science, I remember my professor trying to explain factories so enthusiastically about the subject that I honestly felt bad for not fully understanding it at the time.

To be honest, I understood the concept, but the UML diagram didn't quite relate to how I could use it to create better code, and now, years later, I finally have the same enthusiasm about the topic that my professor had. Because nowadays I find myself needing to create factories from time to time.

What are factories

The factory is a design pattern listed by the famous GOF design pattern book.
the factory is a creation pattern that informs ways to abstract object instantiations in a way that reduces couple and make the code simple

Factories are very common and work as a base to many other patterns.

Code example

Let's create some simple examples to show the pattern. These examples are created using typescript but can be translated into any language.

class ControllerFactory {
    static create() {
        const repo = new DatabaseConnection();
        const service = new Service(repo);
        const authenticator = new Authenticator();
        return new Controller(service, authenticator);
    }
}

In this first example, we use a factory to abstract all the logic to create a controller. This means that whoever uses the controller doesn't need to know anything about how the object is being created and its dependencies.

This abstraction means that eventually, we can change the steps of creating an object without changing everywhere the object is being used.

Now let's create a more complex example.

interface Message {
    send(): void;
}

class EmailMessage implements Message {
    send() {
        // ...
    }
}

class TelegramMessage implements Message {
    send() {
        // ...
    }
}

class MessageFactory {
    static create(type: 'email' | 'telegram'): Message {
        if (type === 'email') return new EmailMessage();
        if (type === 'telegram') return new TelegramMessage();
    }
}

class Application {
    main() {
        const message = MessageFactory.create('email');
        message.send();
    }
}

In this example, we create a factory that can decide which object needs to be created depending on the strategy passed. The factory will always return a Message, but depending on the type, this message can behave completely differently from one to another, which is the principle of the strategy pattern by the way.

Conclusion

So, all in all, the factory pattern is one of the most common patterns when working with object-oriented programming, and the goal is to abstract all the logic needed to instantiate an object.
Creating a simple interface to interact with and allowing you to select the right object that needs to be used.