DEV Community: Simon Nyström

Building a Progress Bar

Simon Nyström — Tue, 15 Feb 2022 19:37:21 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic progress bar and integrate it with Storybook.

This will be a simple component compared to the ones we've made previously.

The finished product will look like this:

The `ProgressBar`

In the project, create two files:

src/components/ProgressBar/ProgressBar.tsx
src/stories/ProgressBar/ProgressBar.stories.tsx

This component is so simple that we can write it all in one go without really making any intermediate steps, so let's do that:

// ProgressBar.tsx

export type ProgressBarProps = {
  progress: number;
  progressText?: string;
};

const ProgressBar = ({ progress, progressText = "" }: ProgressBarProps) => {
  // Make sure our value stays between 0 and 100.
  const _progress = Math.min(Math.max(0, progress), 100);
  return (
    <div className="flex flex-col items-center justify-center">
      <div className="w-full border-2 border-indigo-700 h-6 rounded-md">
        <div
          className="bg-indigo-500 h-full transition-all duration-250"
          style={{ width: `${_progress}%` }}
        ></div>
      </div>
      <span>{progressText}</span>
    </div>
  );
};

export default ProgressBar;

There is nothing fancy going on in this component, basically we have an outer-most div to let us place the optional progressText where we want it to. There is also a wrapper for the progress bar outline and then there is the progress bar div itself which scales its width based on the progress (from 0 to 100).

Adding the Stories

In the file we created earlier, src/stories/ProgressBar/ProgressBar.stories.tsx, place the following:

import { ComponentMeta, Story } from "@storybook/react";
import ProgressBar, {
  ProgressBarProps,
} from "../../components/ProgressBar/ProgressBar";

export default {
  title: "Progress Bar",
  component: ProgressBar,
} as ComponentMeta<typeof ProgressBar>;

const Template: Story<ProgressBarProps> = (args) => (
  <div className="w-56">
    <ProgressBar {...args} />
  </div>
);

export const WithLoadingText = Template.bind({});
WithLoadingText.args = {
  progressText: "Loading...",
  progress: 23,
};

export const WithoutLoadingText = Template.bind({});
WithoutLoadingText.args = {
  progress: 50,
};

This is a lot simpler than our stories from previous entries in this series, and it's nice to do something simpler for a change. This is all we need and we will now have two predefined stories, one with text and one without.

Running `Storybook`

To see how this actually looks in reality, we'll need to start our Storybook by running yarn storybook.

Run Storybook, visit http://localhost:6006 and you'll find the ProgressBar component in the sidebar.

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/progressbar

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a Radio Button

Simon Nyström — Fri, 11 Feb 2022 22:01:28 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic radio button group and integrate it with Storybook.

The `RadioButton`

Let's start off by creating what's necessary for the radio button group. I want it to support being disabled, support focus for keyboard accessibility, and have visible transitions between states. On top of that I want it to integrate with react-hook-form as that is one of my favorite form libraries for React.

In the project, create two files:

src/components/RadioButtonGroup/RadioButtonGroup.tsx
src/stories/RadioButtonGroup/RadioButtonGroup.stories.tsx

First, we'll create the necessary structure for the RadioButton and RadioButtonGroup (since a radio button on its own is useless):



// RadioButtonGroup.tsx

export type RadioButtonProps = {
  label: string;
  name: string;
  isSelected: boolean;
};

const RadioButton = ({ label, name, isSelected }: RadioButtonProps) => {
  return (
    <label className="flex items-center">
      <span className="mr-2.5 text-sm">{label}</span>
      <div
        style={{ width: "0.8em", height: "0.8em" }}
        className="ring ring-indigo-700 rounded-full relative"
      >
        {isSelected && (
          <div
            style={{ width: "70%", height: "70%", top: "15%", left: "15%" }}
            className="bg-indigo-700 rounded-full absolute"
          ></div>
        )}{" "}
      </div>
      <input type="radio" name={name} className="opacity-0" />
    </label>
  );
};

export type RadioButtonGroupProps = { name: string };

const RadioButtonGroup = ({ name }: RadioButtonGroupProps) => {
  return (
    <div>
      <RadioButton isSelected={false} name={name} label="Test"></RadioButton>
    </div>
  );
};

export default RadioButtonGroup;

Similar to how we created the Checkbox component in the last entry in this series, we're doing a similar trick here where we specify the input field to be hidden by saying opacity-0, this lets us still focus this field with our keyboard by using built-in functionality.

For now, this is a good step in the right direction, but we've hard coded the select state to always be false. We want to determine which radio button in the group is selected by examining its value, that's what we'll do next.

Integrating `react-hook-form`

To make sure our radio buttons work as they are supposed to, our RadioButtonGroup needs to support receiving multiple options. Let's update the code to let us hook up react-hook-form. We need our RadioButton component to be able to call the react-hook-form version of the onChange function, as well as support value attribute. We also need to wrap the RadioButtonGroup in a <Controller /> just like we did for the Checkbox component in the previous entry in this post series.



import { Control, Controller, FieldValues, Path } from "react-hook-form";

export type RadioButtonProps = {
  label: string;
  name: string;
  isSelected: boolean;
  onChange: () => void;
  value: string;
};

const RadioButton = ({
  label,
  name,
  isSelected,
  onChange,
  value,
}: RadioButtonProps) => {
  return (
    <label className="flex items-center">
      <span className="mr-2.5 text-sm">{label}</span>
      <div
        style={{ width: "0.8em", height: "0.8em" }}
        className="ring ring-indigo-700 rounded-full relative"
      >
        {isSelected && (
          <div
            style={{ width: "70%", height: "70%", top: "15%", left: "15%" }}
            className="bg-indigo-700 rounded-full absolute"
          ></div>
        )}
      </div>
      <input
        type="radio"
        name={name}
        value={value}
        className="opacity-0"
        onChange={onChange}
      />
    </label>
  );
};

export type RadioButtonGroupOption = {
  value: string;
  label: string;
};

export type RadioButtonGroupProps<T extends FieldValues> = {
  control: Control<T>;
  name: Path<T>;
  options: RadioButtonGroupOption[];
};

const RadioButtonGroup = <T extends FieldValues>({
  name,
  options,
  control,
}: RadioButtonGroupProps<T>) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => {
        return (
          <div>
            {options.map((opt) => (
              <RadioButton
                value={opt.value}
                isSelected={field.value === opt.value}
                name={name}
                label={opt.label}
                key={opt.label}
                onChange={field.onChange}
              ></RadioButton>
            ))}
          </div>
        );
      }}
    ></Controller>
  );
};

export default RadioButtonGroup;

Adding Styling

Just like how our Checkbox works with its styling and supporting the possibility to be disabled, let's add similar styling to our radio button:



// RadioButtonGroup.tsx

import { Control, Controller, FieldValues, Path } from "react-hook-form";
import cx from "classnames";

export type RadioButtonProps = {
  label: string;
  name: string;
  isSelected: boolean;
  onChange: () => void;
  value: string;
  isDisabled?: boolean;
};

const RadioButton = ({
  label,
  name,
  isSelected,
  onChange,
  value,
  isDisabled = false,
}: RadioButtonProps) => {
  return (
    <label className={cx("flex items-center", { "opacity-50": isDisabled })}>
      <span className="mr-2.5 text-sm">{label}</span>
      <div
        style={{ width: "0.8em", height: "0.8em" }}
        className="ring ring-indigo-700 rounded-full relative"
      >
        <div
          className={cx("w-full h-full transition-colors rounded-full", {
            "hover:bg-indigo-200": !isSelected && !isDisabled,
            "focus-within:ring-4 focus-within:ring-indigo-400": !isDisabled,
          })}
        >
          {isSelected && (
            <div
              style={{ width: "70%", height: "70%", top: "15%", left: "15%" }}
              className="bg-indigo-700 rounded-full absolute"
            ></div>
          )}
          <input
            disabled={isDisabled}
            type="radio"
            name={name}
            value={value}
            className="opacity-0"
            onChange={onChange}
          />
        </div>
      </div>
    </label>
  );
};

export type RadioButtonGroupOption = {
  value: string;
  label: string;
  isDisabled?: boolean;
};

export type RadioButtonGroupProps<T extends FieldValues> = {
  control: Control<T>;
  name: Path<T>;
  options: RadioButtonGroupOption[];
  isDisabled: boolean;
};

const RadioButtonGroup = <T extends FieldValues>({
  name,
  options,
  control,
  isDisabled,
}: RadioButtonGroupProps<T>) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => {
        return (
          <div className={cx("flex gap-4", { "opacity-50": isDisabled })}>
            {options.map((opt) => (
              <RadioButton
                value={opt.value}
                isSelected={field.value === opt.value}
                name={name}
                label={opt.label}
                key={opt.label}
                onChange={field.onChange}
                isDisabled={opt.isDisabled || isDisabled}
              ></RadioButton>
            ))}
          </div>
        );
      }}
    ></Controller>
  );
};

export default RadioButtonGroup;

Adding the Stories

In the file we created earlier, src/stories/RadioButtonGroup/RadioButtonGroup.stories.tsx, place the following:



// RadioButtonGroup.stories.tsx

import { ComponentMeta, Story } from "@storybook/react";
import { FieldValues, useForm, useWatch } from "react-hook-form";

import RadioButtonGroup, {
  RadioButtonGroupProps,
} from "../../components/RadioButtonGroup/RadioButtonGroup";

export default {
  title: "Radio Button Group",
  component: RadioButtonGroup,
} as ComponentMeta<typeof RadioButtonGroup>;

const Template: Story<RadioButtonGroupProps<FieldValues>> = (args) => {
  const { control } = useForm();
  return <RadioButtonGroup {...args} control={control} />;
};

export const Basic = Template.bind({});
Basic.args = {
  name: "test",
  options: [
    { label: "Option 1", value: "opt1" },
    { label: "Option 2", value: "opt2" },
  ],
};

export const DisabledOption = Template.bind({});
DisabledOption.args = {
  name: "test",
  options: [
    { label: "Option 1", value: "opt1", isDisabled: true },
    { label: "Option 2", value: "opt2" },
  ],
};

export const DisabledGroup = Template.bind({});
DisabledGroup.args = {
  name: "test",
  isDisabled: true,
  options: [
    { label: "Option 1", value: "opt1" },
    { label: "Option 2", value: "opt2" },
  ],
};

export const InForm = () => {
  const { control, getValues } = useForm({
    mode: "onChange",
    defaultValues: { test: "1" },
  });

  useWatch({ control, name: "test" });

  return (
    <div>
      <div className="flex gap-4">
        <RadioButtonGroup
          control={control}
          name={"test"}
          options={[
            { label: "Option 1", value: "1" },
            { label: "Option 2", value: "2" },
            { label: "Option 3", value: "3", isDisabled: true },
          ]}
          isDisabled={false}
        ></RadioButtonGroup>
      </div>
      <pre>
        <code>{JSON.stringify(getValues(), null, 2)}</code>
      </pre>
    </div>
  );
};

Running `Storybook`

To see how this actually looks in reality, we'll need to start our Storybook by running yarn storybook.

Run Storybook, visit http://localhost:6006 and you'll find the RadioButtonGroup component in the sidebar.

The InForm story should look something like this:

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/radiobutton

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a Checkbox

Simon Nyström — Wed, 09 Feb 2022 19:42:09 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic text field and integrate it with Storybook.

The Checkbox

Let's start off by creating what's necessary for the checkbox. I want my text field to support two different styles, one checkmark and one cross. It should support being disabled, support focus for keyboard accessibility, and have visible transitions between states. On top of that I want it to integrate with react-hook-form as that is one of my favorite form libraries for React.

In the end, I want it to look like this:

In the project, create the files:

src/components/Checkbox/Checkbox.tsx
src/stories/Checkbox/Checkbox.stories.tsx

First, we'll create the necessary structure for the Checkbox:



// Checkbox.tsx

import { Control, FieldValues, Path } from "react-hook-form";

export type CheckboxProps<T extends FieldValues> = {
  type?: CheckboxType;
  control: Control<T>;
  name: Path<T>;
  label?: string;
  isDisabled?: boolean;
};

export enum CheckboxType {
  CROSS = "cross",
  CHECK = "check",
}

const Checkbox = <T extends FieldValues>({
  name,
  label = "",
  control,
  isDisabled = false,
  type = CheckboxType.CHECK,
}: CheckboxProps<T>) => {
  return <input type="checkbox" />;
};

export default Checkbox;

That's the basics of it, but now all we have a simple ordinary checkbox that looks kind of boring, has no label and it is not hooked up through react-hook-form.

Adding the Label

Let's follow a similar approach to how the label was handled in the TextField component from a previous post in this series.

Add the following to Checkbox.tsx:



// Checkbox.tsx

const Checkbox = <T extends FieldValues>({
  name,
  label = "",
  control,
  isDisabled = false,
  type = CheckboxType.CHECK,
}: CheckboxProps<T>) => {
  return (
    <label className={"flex items-center"}>
      <span className="mr-2.5 text-sm">{label}</span>
      <input type="checkbox" />
    </label>
  );
};

At least we have a label now, but let's tackle styling the checkbox itself now.

Adding Custom Styles

Since I want my checkbox to support different types of styles, like a checkmark and a cross, let's create a function that can make these for us. I won't go into detail on how this works specifically, there's a lot of fiddling around with values until you get what you're after. Here's the function:



// Checkbox.tsx

const getCheckboxType = (type: CheckboxType) => {
  switch (type) {
    case CheckboxType.CROSS:
      return (
        <>
          <div
            className="absolute rounded-md bg-white"
            style={{
              width: "100%",
              height: "25%",
              top: "40%",
              transform: "rotate(45deg)",
            }}
          ></div>
          <div
            className="absolute rounded-md bg-white"
            style={{
              width: "100%",
              height: "25%",
              top: "40%",
              transform: "rotate(135deg)",
            }}
          ></div>
        </>
      );
    case CheckboxType.CHECK:
      return (
        <>
          <div
            className="absolute bg-white rounded-md"
            style={{
              width: "50%",
              height: "25%",
              transform: "rotate(35deg)",
              left: "6%",
              bottom: "15%",
            }}
          ></div>
          <div
            className="absolute bg-white rounded-md"
            style={{
              width: "90%",
              height: "25%",
              transform: "rotate(125deg)",
              left: "18%",
              bottom: "35%",
            }}
          ></div>
        </>
      );
  }
};

And use it in the component like so:



// Checkbox.tsx

const Checkbox = <T extends FieldValues>({
  name,
  label = "",
  control,
  isDisabled = false,
  type = CheckboxType.CHECK,
}: CheckboxProps<T>) => {
  return (
    <label className={"flex items-center"}>
      <span className="mr-2.5 text-sm">{label}</span>
      <div
        className="relative ring-indigo-700 ring"
        style={{ width: "0.8em", height: "0.8em" }}
      >
        <div className={"w-full h-full transition-all bg-indigo-700"}>
          {getCheckboxType(type)}
          <input className="opacity-0" type="checkbox" />
        </div>
      </div>
    </label>
  );
};

Note that the regular input field is now hidden (by saying opacity-0 it is fully transparent). It is important to keep it in the DOM. If we hide it with for example display: none; we lose the ability to focus the field and we also lose built-in keyboard controls.

At this point the checkbox looks like this:

That's a bit problematic, it's currently stuck looking like it's checked.

Integrating `react-hook-form`

I talked more about react-hook-form and cx (classnames) which will both get in the following updates to the code, visit those posts to learn more or read up on their documentation.

Similar to how we integrated the TextField from a previous post with react-hook-form we will be following a similar approach here but this one is slightly different.

As can be seen earlier in the post, we define a type on our props called Control, this is a type from react-hook-form that we need in our component.

To integrate the component with react-hook-form, the component looks like this:



// Checkbox.tsx

const Checkbox = <T extends FieldValues>({
  name,
  label = "",
  control,
  isDisabled = false,
  type = CheckboxType.CHECK,
}: CheckboxProps<T>) => {
  return (
    <Controller
      control={control}
      render={({ field }) => {
        return (
          <label
            className={cx("flex items-center", { "opacity-50": isDisabled })}
          >
            <span className="mr-2.5 text-sm">{label}</span>
            <div
              className="relative ring-indigo-700 ring"
              style={{ width: "0.8em", height: "0.8em" }}
            >
              <div
                className={cx("w-full h-full transition-all", {
                  "hover:bg-indigo-200": !field.value && !isDisabled,
                  "hover:bg-indigo-900": field.value && !isDisabled,
                  "bg-indigo-700": field.value,
                  "focus-within:ring-4 focus-within:ring-indigo-400":
                    !isDisabled,
                })}
              >
                {field.value && getCheckboxType(type)}
                <input
                  ref={field.ref}
                  name={field.name}
                  checked={field.value}
                  onChange={(...args) => {
                    if (isDisabled) return;
                    field.onChange(...args);
                  }}
                  className="opacity-0"
                  type="checkbox"
                />
              </div>
            </div>
          </label>
        );
      }}
      name={name}
    />
  );
};

Instead of using register which we used for our TextField component, we use the Controller component from react-hook-form this time. By doing this, we can get the value of the current field inside the component itself, available on the field render prop.

The rest of the code doesn't contain too many new things, you might recognize the use of cx again to combine classes based on properties in the class. You'll also notice how focus-within is used rather than focus, this is because we want to apply those styles when the focus is actually on the invisible input field. We now also utilize the isDisabled property to be able to prevent the field from being interacted with when it is disabled.

Now our component is integrated with react-hook-form and we are ready to create some stories in Storybook.

Adding the Stories

In the file we created earlier, src/stories/Checkbox/Checkbox.stories.tsx, place the following:



// Checkbox.stories.tsx

import { ComponentMeta, Story } from "@storybook/react";
import { FieldValues, useForm, useWatch } from "react-hook-form";
import Checkbox, {
  CheckboxProps,
  CheckboxType,
} from "../../components/Checkbox/Checkbox";

export default {
  title: "Checkbox",
  component: Checkbox,
} as ComponentMeta<typeof Checkbox>;

const Template: Story<CheckboxProps<FieldValues>> = (args) => {
  const form = useForm();
  return <Checkbox {...args} name="test" control={form.control} />;
};

export const Basic = Template.bind({});
Basic.args = { label: "Name" };

export const Disabled = Template.bind({});
Disabled.args = { label: "Name", isDisabled: true };

export const InForm = () => {
  const { control, getValues } = useForm({
    mode: "onChange",
    defaultValues: { cheese: true, onions: true, mayo: false },
  });

  useWatch({ control, name: "cheese" });
  useWatch({ control, name: "onions" });
  useWatch({ control, name: "mayo" });

  return (
    <div className="w-56">
      <div className="flex gap-4">
        <Checkbox
          name="cheese"
          label="Cheese"
          control={control}
          type={CheckboxType.CHECK}
        />
        <Checkbox
          name="onions"
          label="Onions"
          control={control}
          type={CheckboxType.CROSS}
        />
        <Checkbox
          name="mayo"
          label="Mayo"
          control={control}
          type={CheckboxType.CROSS}
        />
      </div>
      <pre>
        <code>{JSON.stringify(getValues(), null, 2)}</code>
      </pre>
    </div>
  );
};

Running `Storybook`

To see how this actually looks in reality, we'll need to start our Storybook by running yarn storybook.

Run Storybook, visit http://localhost:6006 and you'll find the checkbox component in the sidebar.

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/checkbox

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a Text Field

Simon Nyström — Thu, 03 Feb 2022 21:15:05 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic text field and integrate it with Storybook.

The text field

Let's start off by creating what's necessary for the text field. I want my text field to support the basics of a simple text-input field. It should support being disabled, having a placeholder and so on. On top of that I want it to integrate with react-hook-form as that is one of my favorite form libraries for React.

In the end, I want it to look like this:

In the project, create the files:

src/components/TextField/TextField.tsx
src/stories/TextField/TextField.stories.tsx

First, we'll create the necessary structure for the TextField:

// TextField.tsx

export type TextFieldProps = {
  label?: string;
  id: string;
  register: UseFormRegisterReturn;
  isDisabled?: boolean;
  isRequired?: boolean;
  placeholder?: string;
  error?: string;
};

const TextField = ({
  label,
  id,
  register,
  isDisabled = false,
  isRequired = false,
  placeholder,
  error,
}: TextFieldProps) => {
  return (
    <label htmlFor={id}>
      <input id={id} type="text" />
    </label>
  );
};

export default TextField;

Now we have the basics, but it doesn't look good and it doesn't really do anything at all for now. It's basically just a completely blank field with no border, no label etc.

Adding the label

To start with I'll add the desired label functionality. I want the label to be above the input field, and I want the field itself to look a bit better.

First, I'll make sure to add a style that will always apply to the input which we can later combine with error-state styling or disabled-state styling.

Add the following to TextField.tsx:

// TextField.tsx

const shared =
  "rounded-sm bg-indigo-100 border-indigo-300 border-2 p-2 hover:bg-indigo-200 focus:bg-indigo-200 duration-150 transition-all outline-none focus:ring-2 ring-indigo-300";

And update the component to contain the following

// TextField.tsx

const TextField = ({
  label,
  id,
  register,
  isDisabled = false,
  isRequired = false,
  placeholder,
  error,
}: TextFieldProps) => {
  return (
    <label htmlFor={id} className="flex flex-col">
      <span className="mb-1 text-sm">{label}</span>
      <input id={id} type="text" className={shared}></input>
      <span className="text-red-500 font-semibold text-sm">{error}</span>
    </label>
  );
};

Now it's starting to look like what I want.

Adding styling for error/disabled state

It's also good to be visually clear to your users that your field is disabled, in an error state and why that might be or if the field is required.

Let's proceed by adding these conditional styles:

// TextField.tsx

const disabled = "opacity-50 hover:bg-indigo-100";

const errored =
  "bg-red-200 border-red-400 focus:bg-red-100 hover:bg-red-100 focus:ring-red-400";

And update the component to conditionally display these styles as well as show an * character next to the label of a required field. Let's also add some other props that I want my text field to support.

// TextField.tsx

import cx from "classnames"; // add this import to combine styles easily

const TextField = ({
  label,
  id,
  register,
  isDisabled = false,
  isRequired = false,
  placeholder,
  error,
}: TextFieldProps) => {
  return (
    <label htmlFor={id} className="flex flex-col">
      <span className="mb-1 text-sm">
        {label}
        <span className="font-semibold ml-0.5">{isRequired ? "*" : ""}</span>
      </span>

      <input
        placeholder={placeholder}
        autoComplete="off"
        disabled={isDisabled}
        id={id}
        type="text"
        className={cx(shared, { [disabled]: isDisabled, [errored]: error })}
      ></input>
      <span className="text-red-500 font-semibold text-sm">{error}</span>
    </label>
  );
};

The following line:

className = { cx(shared, { [disabled]: isDisabled, [errored]: error }); };

Basically says the following: "Combine the style shared with the style disabled if the isDisabled variable is set to true and do the same with the errored style." For more info on how classnames works visit the following link: classnames.

Adding integration with `react-hook-form`

react-hook-form is one of my favorite form libraries for React. You can read more about it here if you are curious: react-hook-form

One way to integrate an input field with react-hook-form is to call register and spread the return value over the concerned input field, so let's do that.

You might recall this line from the prop type definition:

register: UseFormRegisterReturn;

This is there to let us pass the register function returned by useForm (which in turn comes from react-hook-library, more on that in a bit when we integrate it with a story for our Storybook).

Let's update our component to actually use this prop:

// TextField.tsx

const TextField = ({
  label,
  id,
  register,
  isDisabled = false,
  isRequired = false,
  placeholder,
  error,
}: TextFieldProps) => {
  return (
    <label htmlFor={id} className="flex flex-col">
      <span className="mb-1 text-sm">
        {label}
        <span className="font-semibold ml-0.5">{isRequired ? "*" : ""}</span>
      </span>

      <input
        {...register}
        placeholder={placeholder}
        autoComplete="off"
        disabled={isDisabled}
        id={id}
        type="text"
        className={cx(shared, { [disabled]: isDisabled, [errored]: error })}
      ></input>
      <span className="text-red-500 font-semibold text-sm">{error}</span>
    </label>
  );
};

I'm happy with the implementation so far, and I will leave it like this until I might need to make changes to it, this is good enough for now.

It's ready to be put to the test in a story in Storybook.

Adding the stories

In the file we created earlier, src/stories/TextField/TextField.stories.tsx, place the following:

// TextField.stories.tsx

import { ComponentMeta, Story } from "@storybook/react";
import { useForm, useWatch } from "react-hook-form";
import TextField, {
  TextFieldProps,
} from "../../components/TextField/TextField";

export default {
  title: "Text Field",
  component: TextField,
} as ComponentMeta<typeof TextField>;

const Template: Story<TextFieldProps> = (args) => <TextField {...args} />;

export const Basic = Template.bind({});
Basic.args = { label: "Name", placeholder: "Enter name" };

That's all we need to show of the basics of what the text field can do, and since we've integrated it with Storybook now we can test it interactively and change props as we wish, such as toggling its disabled status and so on. Illustrated with an image below:

Let's also add a more advanced story where we actually use the react-hook-form integration, in the same file, add the following:

// TextField.stories.tsx

export const InForm = () => {
  const {
    register,
    control,
    getValues,

    formState: { errors },
  } = useForm({
    mode: "onChange",
    defaultValues: { name: "test" },
  });

  useWatch({ control, name: "name" });

  return (
    <div className="w-56">
      <TextField
        id="name"
        register={register("name", {
          required: "This field is required",
          maxLength: { value: 20, message: "Name cannot exceed 20 characters" },
        })}
        placeholder="Enter name"
        error={errors.name?.message}
        label="Name"
        isDisabled={false}
        isRequired={true}
      ></TextField>
      <pre>
        <code>{JSON.stringify(getValues(), null, 2)}</code>
      </pre>
    </div>
  );
};

For specifics on react-hook-form, I placed a link to it earlier in the post where you can read more. To explain it in simple terms what the above story does:

Retrieve the register, control, getValues and errors from the useForm-hook where we supply that the mode should be onChange (basically revalidate when we type something in the registered field(s), and the default value for the field with name )
Call the useWatch-hook so that our field will be rerendered when the name field changes, useful to display in the Storybook.
Register the field by calling register and passing the return value to the register-prop. We also specify here that the field is required, and if the field is missing something display the "This field is required" message. The same goes for the maxLength property except it also expects a value.
Pass the error down to the component if there is one.

The resulting story looks like this in Storybook:

Running `Storybook`

To see how this actually looks in reality, we'll need to start our Storybook by running yarn storybook.

Run Storybook, visit http://localhost:6006 and you'll find the text-field component in the sidebar.

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/text-field

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a Button

Simon Nyström — Sun, 30 Jan 2022 13:31:05 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic button component and integrate it with Storybook.

The button

Let's start off by creating what's necessary for the button component. I want my button to support three sizes, three variants, accept an onClick handler and to specify the text in the button.

We will build the following in this blog post:

In the project, create the following file:

src/components/Button/Button.tsx

First, we'll create the types I want my Button to support:

// Button.tsx

export enum ButtonVariant {
  PRIMARY = "primary",
  SECONDARY = "secondary",
  TERTIARY = "tertiary",
}

export enum ButtonSize {
  SMALL = "small",
  MEDIUM = "medium",
  LARGE = "large",
}

export type ButtonProps = {
  type?: "submit" | "reset" | "button";
  text: string;
  variant: ButtonVariant;
  size?: ButtonSize;
  onClick?: () => void;
};

This lays a nice foundation, having the types in advance makes the writing of the Button component easier.

Now we need to start working on the component itself, start of by writing the necessary boilerplate:

// Button.tsx

const Button = ({
  type = "submit",
  text,
  size = ButtonSize.MEDIUM,
  variant = ButtonVariant.PRIMARY,
  onClick,
}: ButtonProps) => {
  return (
    <button onClick={onClick} type={type}>
      {text}
    </button>
  );
};

export default Button;

At this stage, the Button component just looks like this in all variants and sizes:

So let's add some styles with tailwind:

const shared =
  "rounded-sm text-white tracking-tighter transition-color duration-150";

const small = "p-1 text-sm font-medium gap-2 border-1";
const medium = "px-3 py-1.5 font-semibold border-2";
const large = "px-4 py-2 text-lg font-semibold border-4";

const primary =
  "bg-indigo-700 border-transparent text-white hover:bg-indigo-600";

const secondary =
  "border border-indigo-700 text-indigo-700 hover:bg-indigo-200";

const tertiary =
  "text-indigo-700 border-transparent bg-white hover:bg-indigo-600 hover:text-white";

const getSizeClass = (size: ButtonSize) => {
  if (size === ButtonSize.SMALL) return small;
  if (size === ButtonSize.MEDIUM) return medium;
  if (size === ButtonSize.LARGE) return large;
};

const getVariantClass = (variant: ButtonVariant) => {
  if (variant === ButtonVariant.PRIMARY) return primary;
  if (variant === ButtonVariant.SECONDARY) return secondary;
  if (variant === ButtonVariant.TERTIARY) return tertiary;
};

And import classnames so that we can easily combine classes in our Button:

// Button.tsx

import cx from "classnames";

const Button = ({
  type = "submit",
  text,
  size = ButtonSize.MEDIUM,
  variant = ButtonVariant.PRIMARY,
  onClick,
}: ButtonProps) => {
  return (
    <button
      onClick={onClick}
      className={cx(shared, getSizeClass(size), getVariantClass(variant))}
      type={type}
    >
      {text}
    </button>
  );
};

That's all we need for our Button component 😊.

Adding our `Button` to `Storybook`

To display our Button with various predefined properties in Storybook, create the following file:

src/stories/Button/Button.stories.tsx

And add the following content:

// Button.stories.tsx

import { ComponentMeta, Story } from "@storybook/react";
import Button, {
  ButtonProps,
  ButtonSize,
  ButtonVariant,
} from "../../components/Button/Button";

export default {
  title: "Button",
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const SmallPrimary = Template.bind({});
SmallPrimary.args = {
  text: "Submit",
  variant: ButtonVariant.PRIMARY,
  size: ButtonSize.SMALL,
};

export const MediumPrimary = Template.bind({});
MediumPrimary.args = {
  text: "Submit",
  variant: ButtonVariant.PRIMARY,
  size: ButtonSize.MEDIUM,
  type: "button",
};

export const MediumSecondary = Template.bind({});
MediumSecondary.args = {
  text: "Submit",
  variant: ButtonVariant.SECONDARY,
  size: ButtonSize.MEDIUM,
  type: "button",
};

export const LargeTertiary = Template.bind({});
LargeTertiary.args = {
  text: "Submit",
  variant: ButtonVariant.TERTIARY,
  size: ButtonSize.LARGE,
  type: "button",
};

This will give you the following list once you run Storybook:

If you want to accomplish what my initial screenshot in this post included, add the following as well:

// Button.stories.tsx

export const All = () => {
  return (
    <div className="flex gap-6 items-start flex-col" style={{ width: "500px" }}>
      <div className="flex gap-2 items-start justify-between w-full">
        <Button
          text={"Primary Small"}
          variant={ButtonVariant.PRIMARY}
          size={ButtonSize.SMALL}
        ></Button>
        <Button
          text={"Primary Medium"}
          variant={ButtonVariant.PRIMARY}
          size={ButtonSize.MEDIUM}
        ></Button>
        <Button
          text={"Primary Large"}
          variant={ButtonVariant.PRIMARY}
          size={ButtonSize.LARGE}
        ></Button>
      </div>
      <div className="flex gap-2 items-start justify-between w-full">
        <Button
          text={"Secondary Small"}
          variant={ButtonVariant.SECONDARY}
          size={ButtonSize.SMALL}
        ></Button>
        <Button
          text={"Secondary Medium"}
          variant={ButtonVariant.SECONDARY}
          size={ButtonSize.MEDIUM}
        ></Button>
        <Button
          text={"Secondary Large"}
          variant={ButtonVariant.SECONDARY}
          size={ButtonSize.LARGE}
        ></Button>
      </div>
      <div className="flex gap-2 items-start justify-between w-full">
        <Button
          text={"Tertiary Small"}
          variant={ButtonVariant.TERTIARY}
          size={ButtonSize.SMALL}
        ></Button>
        <Button
          text={"Tertiary Medium"}
          variant={ButtonVariant.TERTIARY}
          size={ButtonSize.MEDIUM}
        ></Button>
        <Button
          text={"Tertiary Large"}
          variant={ButtonVariant.TERTIARY}
          size={ButtonSize.LARGE}
        ></Button>
      </div>
    </div>
  );
};

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/button

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a Loading Spinner

Simon Nyström — Sat, 29 Jan 2022 23:41:24 +0000

Introduction

This is part of the UI Kit with React, TypeScript, Storybook and Tailwind, make sure you've checked out the previous entries in the series if you find anything confusing 😊.

In this series I aim to implement a basic loading spinner and integrate it with Storybook.

The loading spinner

Let's start off by creating what's necessary for the loading spinner. I want my loading spinner to consist of three bars pulsing in and out from the sides. I also want to be able to specify a text to go along with the loading spinner.

In the project, create two files:

src/components/LoadingSpinner/LoadingSpinner.tsx
src/components/LoadingSpinner/LoadingSpinner.module.css

First, we'll create the necessary structure for the LoadingSpinner:



// LoadingSpinner.tsx

import cx from "classnames";
import styles from "./LoadingSpinner.module.css";

export type LoadingSpinnerProps = {
  isLoading: boolean;
  color?: string;
  text?: string;
};

const LoadingSpinner = ({
  isLoading,
  color = "bg-black",
  text = "",
}: LoadingSpinnerProps) => {
  if (!isLoading) return null;
  return (
    <div className={styles.wrapper}>
      <div className={cx(styles.div1, color)}></div>
      <div className={cx(styles.div2, color)}></div>
      <div className={cx(styles.div3, color)}></div>
      <span>{text}</span>
    </div>
  );
};

export default LoadingSpinner;

This component at this stage won't do much or look how I want it to, but this should be all my component would need.

At the top you'll see that I import a library called classnames, I love using this library in all my React apps. It lets you easily manipulate classNames strings to combine them in ways that would be a hassle to do on your own. You can read more about classnames here if you're interested: https://github.com/JedWatson/classnames. In my case here they simply join the two strings together (the ones imported from styles and the color string from the props).

Adding the `css`

We don't need a lot of css to accomplish what I'm aiming for here:



/* LoadingSpinner.module.css */

.wrapper {
  width: fit-content;
  min-width: 24px;
}

.wrapper div {
  margin: 3px auto;
  height: 0.33em;
}

.div1 {
  animation: pulse 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  margin-bottom: 2px;
}

.div2 {
  animation: pulse 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation-delay: -0.2s;
  margin-bottom: 2px;
}

.div3 {
  animation: pulse 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation-delay: -0.4s;
}

@keyframes pulse {
  0% {
    width: 0.4em;
  }
  50% {
    width: 1.4em;
  }
  100% {
    width: 0.4em;
  }
}

The result

Using this component now, it will look like this, but animated:

Integrating the component with `Storybook`:

Create a file called src/stories/LoadingSpinner/LoadingSpinner.stories.tsx with the following content:



import { ComponentMeta, Story } from "@storybook/react";
import LoadingSpinner, {
  LoadingSpinnerProps,
} from "../../components/LoadingSpinner/LoadingSpinner";

export default {
  argTypes: {
    color: {
      options: ["bg-red-200", "bg-indigo-700", "bg-black"],
      control: { type: "select" },
    },
  },
  title: "Loading Spinner",
  component: LoadingSpinner,
} as ComponentMeta<typeof LoadingSpinner>;

const Template: Story<LoadingSpinnerProps> = (args) => (
  <LoadingSpinner {...args} />
);

export const Basic = Template.bind({});
Basic.args = {
  isLoading: true,
};

export const WithText = Template.bind({});
WithText.args = {
  isLoading: true,
  text: "Loading...",
};

This will create everything that is required by Storybook to render our component and its controls.

We tell Storybook that the color prop should be controllable with a select control where the options can be one of the values in ["bg-red-200", "bg-indigo-700", "bg-black"]. We also tell Storybook that we want to show two different variants, one Basic and one WithText, this way we can show different pre-built use cases of our components.

Running `Storybook`

To see how this actually looks in reality, we'll need to start our Storybook by running yarn storybook.

Running Storybook and visiting http://localhost:6006 will show that, indeed, our Loading Spinner is available from the sidebar. We're also able to test the component live by changing properties as we like illustrated by the image below:

Troubleshooting

If you can't get it to run, or have some other concerns, check it out from my repo and see if that works:

https://github.com/simon-nystrom/newcurrent-react-ui/tree/loading-spinner

Stay tuned for the next entry in the series 😊. What component would you like to see next?

Building a UI Kit with React, TypeScript, Storybook and Tailwind

Simon Nyström — Sat, 29 Jan 2022 23:39:10 +0000

Introduction

Welcome to the UI Kit with React, TypeScript, Storybook and Tailwind series where I aim to build a basic UI kit that I can use in my hobby projects and continuously update so that all my projects will have the same features.

The goal of this series is to share my experience when learning these different technologies, I have some previous experience of React, TypeScript, and tailwindcss, but I haven't used Storybook a lot in the past.

Quick about me: Full-stack engineer with 6 years experience with a back-end bias working mostly with Java and Kotlin.

Maybe you'll learn something as well 😊.

Why my own UI kit?

There are a bunch of ready-made, true and tested UI libraries out there already such as Material-UI, but I would like to attempt to create my own for learning purposes. I can also build some libraries that I like right into the UI kit such as react-table and react-select.

Prerequisites

You should have node and npm installed
You should be somewhat familiar with TypeScript, React and tailwindcss.
You should expect this series to contain suboptimal implementations and possible mistakes (which I will try to fix!).
Some familiarity with Storybook.

Setting up the required tools

If you want to follow along on your own in this journey, you need to do the following:

Set up `tailwind` with `storybook`

Assuming you followed the steps above, you should have the following lines in your index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

This file is already included by the template we used (you will find import './index.css'; stated in the src/index.tsx file).

However, we also need to include this file when running storybook. To do this, your .storybook/preview.js needs to look like this:

import "../src/index.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Making sure everything works

Let's make sure everything works as expected by running yarn storybook, this should start storybook on your system and run a server accessible at http://localhost:6006. Visit this page and make sure it works.

To ensure that tailwind is working as expected, go to the src/stories/Button.tsx and add some tailwind class, for example change the button element to look like this:

// src/stories/Button.tsx
<button
  type="button"
  className={"text-red-400"}
  style={{ backgroundColor }}
  {...props}
>
  {label}
</button>

Now, visit this component in storybook and there should be the word "Button" written in red text. If it's not red, then something went wrong in the setup.

Cleaning up

Let's remove resources we don't intend to use ourselves so that our storybook is as clean as possible for the upcoming tutorials.

Remove everything from the src/stories directory except the src/stories/asset folder and the Introduction.stories.mdx file. Might as well keep that one for having something to show in our storybook for now.

Feel free to remove anything else that you feel adds clutter to the project.

Troubleshooting

If you had any problems with anything getting started, I suggest you compare your solution to my repo at this stage.

What's next

That's it for part 1 in this series. I think it makes sense to keep all the initial setup in one consolidated place.

jq: Querying JSON

Simon Nyström — Sun, 16 Jan 2022 15:11:10 +0000

What is `jq`?

The goal of this blog post is just to make a quick introduction to jq and why you might want to explore it on your own.

jq is an open-source command line tool for interacting with JSON data, you can find the repository here and installations instructions for your system here.

Sometimes you (well, I do) end up in a situation where you wish you could explore and wrangle JSON data on the command line. jq let's you do exactly that and I believe it's a tool worth adding to your proverbial toolbox.

The examples in this blog post might seem contrived, but it is for the benefit of using a JSON API that you can all use without any extra dependencies needed. I hope the examples will make enough sense for you to utilize jq in a more pragmatic manner.

The API I will utilize in this blog post is the https://jsonplaceholder.typicode.com/ open API.

The Basics

If you feel like you don't often have to query and explore specific parts of a JSON response, then at least the basic identity operator should provide some value.

The identity operator in jq is simply the . character, running the following command highlights and pretty-prints your JSON:

curl -s https://jsonplaceholder.typicode.com/posts/1 | jq '.'
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

If you want the value of a specific field, you can use following forms:

curl -s https://jsonplaceholder.typicode.com/posts/1 | jq '.userId'
1
curl -s https://jsonplaceholder.typicode.com/posts/1 | jq '.["userId"]'
1

Operating on JSON Arrays

jq also allows you to easily operate on JSON arrays, the simplest case is to just print whatever is at a specified index:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[2]'
{
  "userId": 1,
  "id": 3,
  "title": "ea quasi exercitationem repellat qui ipsa sit aut",
  "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
}

You can also return a slice of an array:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[0:2]'
[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
]

Or even the entire array:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[]'
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
…
{
  "userId": 10,
  "id": 100,
  "title": "at nam consequatur ea labore ea harum",
  "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
}

Operator Chaining

Fetching nested properties in jq is simple, you simply access it like you would in for example JavaScript:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[].title'
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
"qui est esse"
"ea quasi exercitationem repellat qui ipsa sit aut"
"eum et est occaecati"
…

The above can be accomplished in the following way too:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[] | .title'

As you might expect, the | character in a jq script works similar to how it works in common command line environments. The above script basically reads "for every element in the array, print the title field".

We'll see more examples utilizing piping.

`jq` Operators and Functions

jq comes with a bunch of built in functions and operators, for example you could make sure the titles of the first three entries end with an exclamation mark using the + operator:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[0:3] | .[].title + "!"'
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit!"
"qui est esse!"
"ea quasi exercitationem repellat qui ipsa sit aut!"

Or you could combine functions, such as selecting all titles of a length greater than 78:

curl -s https://jsonplaceholder.typicode.com/posts | jq '.[] | select(.title | length > 78)'
{
  "userId": 5,
  "id": 50,
  "title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
  "body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
}

The above script combines two functions select and length, the select function which takes a boolean expression and keeps whatever satisfies the constraint; in this case the constraint where the title's length has to be greater than 78.

Combining `jq` with Other Tools

The true power of command line utilities and tools is the power of chaining them together with the | character. This holds true for jq as well.

Let's say we want to figure out the top 5 most frequent words and the counts of their respective occurences appearing in all the body properties of the posts:

curl -s https://jsonplaceholder.typicode.com/posts | jq '[.[].body] | add | split(" ")' | sort | uniq -c | sort | tail -5 | awk '{$1=$1};1' | sed s/"[\",]"/""/g
26 est
39 ut
43 qui
45 aut
84 et

TLDR

jq is great if you ever want to wrangle JSON data in an easy and scriptable way.

Find out more about jq here: https://stedolan.github.io/jq/

Adding contextual serialization in Ktor

Simon Nyström — Sat, 15 Jan 2022 21:23:47 +0000

What is Ktor?

Ktor is a Kotlin framework for building web applications and HTTP services.

This blog post will focus on an issue I ran into recently concerning to JSON serialization when using Ktor (adding contextual serialization).

If you're into Kotlin and you haven't tried Ktor yet, I highly suggest you try it out. You can read more about Ktor here.

JSON Serialization in Ktor

The process of turning objects into JSON data is a common task and most of the time it's a non-issue; turning an Int into a JSON number is simple, turning a String into a JSON string is simple and so on. Eventually you will run into a situation where you need to either customize your serialization logic or provide a serialization implementation for a non-primitive value.

The Ktor docs are great as a start and they even show you how to use three built-in converters (Gson, Jackson and kotlinx.serialization). For my project I'm using kotlinx.serialization and the issue at hand will be solved for that converter, but the concept is the same for the others.

A minimal Ktor setup with JSON serialization might look like this:

@Serializable
data class Response(private val value: String)

fun main() {
    embeddedServer(Netty, port = 8080, host = "127.0.0.1") {
        install(ContentNegotiation) {
            json()
        }
        routing {
            get("/") {
                call.respond(Response("Hello World!"))
            }
        }
    }.start(wait = true)
}

As expected, visiting http://localhost:8080 returns the following:

{
  "value": "Hello World!"
}

The Issue

Let's illustrate a case where you might run into an issue.

In my project, I want failing requests, those that generate server-side exceptions, to translate these exceptions into response objects with the properties errorMessage and statusCode.

One might start by attempting the following:

@Serializable
data class DuplicateEntryException(
    private val errorMessage: String,

    @Contextual // Required, this specifies that this converter is expected to be found during runtime
    private val statusCode: HttpStatusCode = HttpStatusCode.Conflict
) : RuntimeException(errorMessage)

fun main() {
    embeddedServer(Netty, port = 8080, host = "127.0.0.1") {
        install(ContentNegotiation) {
            json()
        }
        routing {
            get("/") {
                // Faked error for simplicity's sake
                call.respond(DuplicateEntryException("This entry already exists"))
            }
        }
    }.start(wait = true)
}

Starting the project now and visiting http://localhost:8080 will result in the following exception:

kotlinx.serialization.SerializationException: Serializer for class 'HttpStatusCode' is not found.

The Solution

As the exception is telling us, we need to register a serializer for the HttpStatusCode type. There are two ways of doing this, depending on your use case. I will illustrate both variants below.

Our first order of business, which will be used in both solutions, is to define the custom serializer:

object HttpStatusCodeSerializer : KSerializer<HttpStatusCode> {

    override fun deserialize(decoder: Decoder): HttpStatusCode =
        HttpStatusCode.fromValue(decoder.decodeInt())


    override fun serialize(encoder: Encoder, value: HttpStatusCode) {
        encoder.encodeInt(value.value)
    }

    override val descriptor: SerialDescriptor = PrimitiveSerialDescriptor("HttpStatusCode", PrimitiveKind.INT)
}

Basically, turn the HttpStatusCode object into a primitive type, Int in this case.

Next up we need to use this, the first way is to add it to our json() converter definition, like so:

fun main() {
    embeddedServer(Netty, port = 8080, host = "127.0.0.1") {
        install(ContentNegotiation) {
            json(Json {
                serializersModule = SerializersModule {
                    contextual(HttpStatusCode::class) { HttpStatusCodeSerializer}
                }
            })
        }
        routing {
            get("/") {
                // Faked error for simplicity's sake
                call.respond(DuplicateEntryException("This entry already exists"))
            }
        }
    }.start(wait = true)
}

I prefer this solution when you want your serialization to be easily reusable, for example DuplicateEntryException is generic enough to be reused across use cases in the project.

If you want to customize serialization in a more localized fashion, something that might only be used for some specific purpose, you can do the following instead:

@Serializable
data class DuplicateEntryException(
    private val errorMessage: String,

    @Contextual
    @Serializable(with = HttpStatusCodeSerializer::class) // Inform which Serializer to use for this property
    private val statusCode: HttpStatusCode = HttpStatusCode.Conflict
) : RuntimeException(errorMessage)

Resources

If you want to learn more about Ktor or kotlinx.serialization, you can read more at the following resources:

A few Visual Studio Code keybindings to improve your efficiency

Simon Nyström — Mon, 27 Dec 2021 00:00:00 +0000

Proficiency for efficiency

As a developer, you're spending most of your time at the keyboard; reading, navigating, modifying and writing code. Just like a carpenter should master his tools, us developers should master ours. The more proficient you can become at speeding up the menial tasks that are repeated many times throughout the day, the more time you can spend on what you actually set out to do: code.

This post aims to provide some useful starter tips to get more proficient at the above tasks. Wouldn't it be nice if you could stop using your mouse so much?

I use a Windows machine, so I'll be specifying ctrl and alt in the post, but most things in VS Code are interchangeable and simply become replaced by cmd and option on a Mac. For those that aren't interchangeable, read on to find out how to efficiently look up keybindings that you might have forgotten.

Open command palette (`ctrl` + `shift` + `p`)

If you haven't been using this, you've really been missing out. All of the following tips and tricks in this blog post can be found via this menu.

When you enter this key combination, the following window pops up:

This menu let's you search for all the actions that you can trigger inside of Visual Studio Code. For example, try searching for quick fix and the next tip in this blog post shows up.

This shortcut is one of my most used, it let's me forget keybindings without making me feel bad.

Maybe you forgot how to organize imports? Simply search for it and it will be there, including information about the keybinding for that action. Not only can it help you with things that are bound to key combinations, but it can also trigger actions that have no corresponding keybinding.

Quick open (`ctrl` + `p`)

Ever click around the file tree? Well, you shouldn't. Once you're familiar with a project, you more or less know what all the files are called. Jump to a file easily by using this keybinding and typing a substring of the file name and your file navigation in Visual Studio Code will speed up by miles.

Trigger quickFix (`ctrl` + `.`)

This shortcut triggers a contextual suggestion for actions you can take based on your current cursor placement.

For example, you can add and remove braces to an arrow function:

This is really useful when you want to add functionality to a one line arrow function defined somewhere in your project.

You can do many nice things with this command, try it out every here and there and see what you can find. It can be especially helpful to trigger an import suggestion or to add all required parameters to a React component for example (provided you use typescript).

Remove current line (`ctrl` + `shift` + `k`)

I find myself using this one maybe too often, but it's really nice being able to delete lines without selecting the text.

Expand selection (`alt` + `shift` + `right/left arrow`)

Ever find yourself wanting to select text in between two parentheses? Or between two quotes? Well, this let's you do exactly that. To use it, place your cursor somewhere and try it out. You expand the selection by hitting right in the key combination specified above, or left if you go too far. This is especially great when you want to remove all text inside a block, or rewrite the arguments to a log statement.

Add selection to next match (`ctrl` + `d`)

This is a keybinding that is more versatile than you might think. What this keybinding does it that it looks for the next match of your current selection, and marks that as well while duplicating your selection box. This is easier to illustrate with an image:

Here I marked the word day and hit ctrl + d a bunch of times, this selected all occurrences and I can either replace day with something else just by typing or remove it by hitting delete for example.

This really starts to shine once you can visualize common substrings or parts of text that you wish to manipulate all at once. A common task where this is great is to turn a comma-separated list into a space-separated one for example, or to insert new lines after every space.

Learn more

I intentionally kept this blog post pretty short, if you try to learn too many keybindings at once you might end up feeling overwhelmed. Try to focus on learning one at a time, once it feels second nature to you, move along and learn another one.

If you want some inspiration, open up the command palette and search for Keyboard Shortcuts and you'll find an extensive list of built-in keybindings available out of the box in Visual Studio Code.

Don't forget, you can always add your own keybindings or rebind the ones that are already present.

What are your favorite keybindings?

tldr: Remember your commands

Simon Nyström — Sun, 19 Dec 2021 18:35:38 +0000

What is `tldr`?

tldr is an open-source command line tool distributed both via npm and pip3 that lets you easily look up common use cases for various commands.

Have you ever been in the position where you:

Forgot how to use the tar command?
Forgot how to open an ssh tunnel?
Forgot how git rebase works?
Forgot how to … in the terminal?

Well, I have. tldr lets you easily look up common uses cases for commands and subcommands. All the tldr pages are open-source and community driven, and if a command you are trying to use tldr for is not available, you can always add it yourself to help out both yourself and others.

How do I install it?

To get your hands on tldr, all you have to do is install it in one of the following ways:

npm install -g tldr
pip3 install tldr

After that, provided the package location is in your path, all you need to do is run tldr git rebase for example.

Here's an example of what that might look like:

More information

If you have further interest in this, please visit https://tldr.sh/

DEV Community: Simon Nyström

Building a Progress Bar

Introduction

The ProgressBar

Adding the Stories

Running Storybook

Troubleshooting

Building a Radio Button

Introduction

The RadioButton

Integrating react-hook-form

Adding Styling

Adding the Stories

Running Storybook

Troubleshooting

Building a Checkbox

Introduction

The Checkbox

Adding the Label

Adding Custom Styles

Integrating react-hook-form

Adding the Stories

Running Storybook

Troubleshooting

Building a Text Field

Introduction

The text field

Adding the label

Adding styling for error/disabled state

Adding integration with react-hook-form

Adding the stories

Running Storybook

Troubleshooting

Building a Button

Introduction

The button

Adding our Button to Storybook

Troubleshooting

Building a Loading Spinner

Introduction

The loading spinner

Adding the css

The result

Integrating the component with Storybook:

Running Storybook

Troubleshooting

Building a UI Kit with React, TypeScript, Storybook and Tailwind

Introduction

Why my own UI kit?

Prerequisites

Setting up the required tools

Set up tailwind with storybook

Making sure everything works

Cleaning up

Troubleshooting

What's next

jq: Querying JSON

What is jq?

The Basics

Operating on JSON Arrays

Operator Chaining

jq Operators and Functions

Combining jq with Other Tools

TLDR

Adding contextual serialization in Ktor

What is Ktor?

JSON Serialization in Ktor

The Issue

The Solution

Resources

A few Visual Studio Code keybindings to improve your efficiency

Proficiency for efficiency

Open command palette (ctrl + shift + p)

Quick open (ctrl + p)

Trigger quickFix (ctrl + .)

Remove current line (ctrl + shift + k)

Expand selection (alt + shift + right/left arrow)

Add selection to next match (ctrl + d)

Learn more

tldr: Remember your commands

The `ProgressBar`

Running `Storybook`

The `RadioButton`

Integrating `react-hook-form`

Running `Storybook`

Integrating `react-hook-form`

Running `Storybook`

Adding integration with `react-hook-form`

Running `Storybook`

Adding our `Button` to `Storybook`

Adding the `css`

Integrating the component with `Storybook`:

Running `Storybook`

Set up `tailwind` with `storybook`

What is `jq`?

`jq` Operators and Functions

Combining `jq` with Other Tools

Open command palette (`ctrl` + `shift` + `p`)

Quick open (`ctrl` + `p`)

Trigger quickFix (`ctrl` + `.`)

Remove current line (`ctrl` + `shift` + `k`)

Expand selection (`alt` + `shift` + `right/left arrow`)

Add selection to next match (`ctrl` + `d`)

What is `tldr`?