DEV Community: Gabriel Linassi

How to create a Steps Wizzard in React

Gabriel Linassi — Tue, 29 Nov 2022 13:30:18 +0000

This is a quick tutorial to show you the barebones of how to create a Wizzard Steps component.

import type { NextPage } from 'next';
import React, { useReducer } from 'react';

type StepsProps = {
  children: React.ReactNode;
};

const Steps = ({ children }: StepsProps) => {
  let idx = 0;

  const _children = React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return null;
    return React.cloneElement(child, { ...child.props, idx: ++idx });
  });

  return <div className="space-y-1">{_children}</div>;
};

type StepProps = {
  title: string;
  children: React.ReactNode;
  idx?: number;
};

const Step = ({ title, idx, children }: StepProps) => {
  return (
    <div className="border border-dashed border-gray-400 p-2">
      <div className="flex gap-2">
        <span className="bg-red-300 px-1">{idx}</span>
        <h4>{title}</h4>
      </div>
      <div className="mt-2">{children}</div>
    </div>
  );
};

const Home: NextPage = () => {
  const [hasWarranty, toggleWarranty] = useReducer((s) => !s, false);

  return (
    <div className="p-4">
      <h1 className="text-2xl">Checkout</h1>
      <button
        onClick={toggleWarranty}
        className="bg-gray-700 px-2 py-1 text-white"
      >
        Toggle Warranty Step
      </button>
      <div className="mt-3">
<Steps>
  <Step title="Contact Details">Step Details</Step>
  <Step title="Aditional Add-Ons">Step Details</Step>
  {hasWarranty && <Step title="Extended Warranty">Step Details</Step>}
  <Step title="Shipping Details">Step Details</Step>
  <Step title="Payment Details">Step Details</Step>
</Steps>
      </div>
    </div>
  );
};

export default Home;

Notice how the <Steps/> injects the idx into the <Step/> component without having to manually enter it.

const Steps = ({ children }: StepsProps) => {
  let idx = 0;

  const _children = React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return null;
    return React.cloneElement(child, { ...child.props, idx: ++idx });
  });

  return <div className="space-y-1">{_children}</div>;
};

How to create Google's Input Field with Tailwind?

Gabriel Linassi — Wed, 28 Sep 2022 18:55:54 +0000

const inputClasses = {
  root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
  label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
  input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};

function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
  return (
    <div className={inputClasses.root}>
      <label
        className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
        htmlFor={props.id ?? props.name}
      >
        {placeholder}
      </label>
      <input id={props.id ?? props.name} {...props} className={inputClasses.input} />
    </div>
  );
}

How to create a polymorphic Button with variants in NextJS + TailwindCSS + TS + RadixUI

Gabriel Linassi — Mon, 26 Sep 2022 14:10:39 +0000

This is a quick post just to share a nice way how to do it with full TypeScript support. It uses RadixUI Slot component for the polymorphism.

import React, { forwardRef } from 'react';
import { cnMerge } from 'common/cn-merge';
import { Slot } from '@radix-ui/react-slot';

const baseClasses = /*tw:*/ `inline-flex items-center justify-center gap-2 font-bold text-center rounded-md`;

const variantsLookup = {
  solid: /*tw:*/ `text-white bg-primary hover:shadow-button duration-100`,
  outline: /*tw:*/ `text-primary border border-blue-300 hover:bg-blue-600 hover:border-primary`,
  subtle: /*tw:*/ `text-primary hover:bg-blue-600`,
};

const sizesLookup = {
  base: /*tw:*/ `px-5 py-2.5`,
};

type ButtonProps = {
  children: React.ReactNode;
  variant?: 'outline' | 'solid' | 'subtle';
  size?: 'base';
  href?: string;
  className?: string;
  asChild?: boolean;
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { children, variant, size, asChild, className, ...rest } = props;

  const classes = cnMerge([
    baseClasses,
    variantsLookup[variant || 'solid'],
    sizesLookup[size || 'base'],
    className,
  ]);

  const Comp = asChild ? Slot : 'button';

  return (
    <Comp {...rest} className={classes} ref={ref}>
      {children}
    </Comp>
  );
});

export default Button;

Usage:

<NextLink href="/extension" passHref>
  <Button asChild>
    <a>
      <ExtensionIcon />
      Install Chrome Extension
    </a>
  </Button>
</NextLink>

/* ---- */

<Button asChild>
  <a href="https://wwww.test.com" target="_blank" rel="noopener noreferrer">
    <ExtensionIcon />
    Install Chrome Extension
  </a>
</Button>

How to create a polymorphic button in React

Gabriel Linassi — Wed, 10 Aug 2022 13:40:06 +0000

Today I want to show you how to build a polymorphic button. In other words, a button that may be a button, a external link or a link (route). For that I'll build a IconButton but it can be applied to anything else.

Instead of going with an approach like this which requires a lot more work, I will use RadixUI Slot component (~800B).

Implementation example:

/components/button-icon/ButtonIcon.tsx

import React from 'react'
import { Slot } from '@radix-ui/react-slot'

type AsButton = {
  asChild?: false
} & React.ComponentPropsWithoutRef<'button'>

type AsSlot = {
  asChild?: true
}

type ButttonIconProps = {
  children: React.ReactNode
} & (AsButton | AsSlot)

const ButtonIcon = ({ children, asChild, ...props }: ButttonIconProps) => {
  const Comp = asChild ? Slot : 'button'
  return (
    <Comp
      className="flex h-12 w-12 items-center justify-center rounded-lg border border-[#4A5465] bg-[#252932]"
      {...props}
    >
      {children}
    </Comp>
  )
}

export default ButtonIcon

As you can see the code is much cleaner than this implementation

Usage sample

/pages/index.tsx

import type { NextPage } from 'next'
import NextLink from 'next/link'
import ButtonIcon from 'components/button-icon'
import { AppleIcon, FbIcon, GoogleIcon } from 'components/icons'

const HomePage: NextPage = () => {
  return (
    <div className="flex h-screen w-screen items-center justify-center bg-gray-600">
      <div className="flex h-80 w-full max-w-sm flex-col items-center justify-end rounded-md bg-gray-800 p-4">
        <div className="mt-4 flex gap-4">
          {/* link (route) */}
          <NextLink href="/account" passHref>
            <ButtonIcon asChild>
              <a>
                <AppleIcon />
              </a>
            </ButtonIcon>
          </NextLink>
          {/* external link */}
          <ButtonIcon asChild>
            <a
              href="https://www.linkedin.com/in/gabrielmlinassi/"
              target="_blank"
              rel="noreferrer"
            >
              <FbIcon />
            </a>
          </ButtonIcon>
          {/* button */}
          <ButtonIcon onClick={() => alert('clicked')}>
            <GoogleIcon />
          </ButtonIcon>
        </div>
      </div>
    </div>
  )
}

export default HomePage

Stackblitz live code

TailwindCSS + React best practices: The clean way

Gabriel Linassi — Wed, 10 Aug 2022 03:34:00 +0000

I've using Tailwind for a long time and I've had so much pain and that uncomfortable feeling of seeing your code a total mess. I've sharped my strategies to write Tailwind throughout the time and I think I've come up with a good pattern to build more complex components.

The pattern uses CSS Modules, Talwind @apply and tailwind-merge. Let's say I want to build a Button, this would be the folder structure:

|
|-button
|--Button.tsx
|--Button.module.css
|--index.ts
|

And the code like this:

Button /button/Button.tsx

import s from './Button.module.css'
import React from 'react'
import cn from 'classnames'
import Spinner from 'components/spinner'

type ButtonProps = {
  children: React.ReactNode
  fullWidth?: boolean
  loading?: boolean
  variant?: 'filled' | 'outlined'
  color?: 'primary' | 'secondary'
  size?: 'base' | 'lg'
} & Omit<React.ComponentProps<'button'>, 'className'>

const Button = ({
  children,
  variant = 'filled',
  color = 'primary',
  size = 'base',
  fullWidth,
  loading,
  disabled,
  ...props
}: ButtonProps) => {
  const classes = cn(s.root, s[variant], s[color], s[size], {
    [s.fullWidth]: fullWidth,
  })

  return (
    <button className={classes} disabled={disabled || loading} {...props}>
      {children}
      {loading && (
        <span className="ml-1.5">
          <Spinner className={s.spinner} />
        </span>
      )}
    </button>
  )
}

export default Button

Styles /button/Button.module.css

.root {
  @apply inline-flex items-center justify-center rounded-full font-semibold duration-150 disabled:pointer-events-none disabled:opacity-75;
}

.fullWidth {
  @apply w-full;
}

/*
 * SIZES
 */
.base {
  @apply px-8 py-3;
}

.lg {
  @apply px-12 py-5;
}

/*
 * VARIANTS & COLORS
 */
.filled.primary {
  @apply bg-[#FAA806] text-[#FFFFFF] hover:bg-[#EE9F04];
}

.filled.secondary {
  @apply bg-[#373E4B] text-[#97A3B7] hover:bg-[#343A47];
}

.outlined.primary {
  @apply border-[#FAA806] text-[#FAA806];
}

.outlined.secondary {
  @apply border-[#373E4B] text-[#373E4B];
}

/*
 * LOADING INDICATOR
 */
.primary .spinner {
  @apply fill-[#bc7e03] text-white;
}

.secondary .spinner {
  @apply fill-[#292e38] text-white;
}

Usage (with NextJS Link)

<NextLink href="/signin" passHref>
  <Button fullWidth {...{ disabled, loading }}>
    Register
  </Button>
</NextLink>

Source code (Stackblitz)

How to load local fonts in NextJS (Optimal way)

Gabriel Linassi — Mon, 08 Aug 2022 15:44:00 +0000

This is my solution to load custom local fonts in NextJS.

Add the font on the /public folder. woff2 extension is good enough as you can see on caniuse

PS. If you have a problem regarding vertical alignment, make sure to use this awesome tool to fix it. Just load the font and select "fix vertical metrics". Then use this new font instead.

Import the font with CSS @font-face like below:

@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Optimize the font by preloading it. Add the snippet below on _Document file:

<link
  rel="preload"
  href="/fonts/BebasNeue/BebasNeue-Regular.woff2"
  as="font"
  crossOrigin=""
/>

PS. It's not needed to add any caching mecanism. Nextjs takes care of it for static assets. More details here

Make sure to test it on different browsers (safari, chrome, firefox and edge) with lambdatest for example.

References:
https://leerob.io/blog/fonts
https://github.com/vercel/next.js/discussions/25389

Building a dead simple Rating component without any dependencies

Gabriel Linassi — Wed, 15 Jun 2022 02:18:17 +0000

Hello guys 👋 Today I want to share with you my solution to build a Rating component like the one bellow:

This is a super simple component that has no interactivity functionality. It's just meant to display a rating. Initially I thought about using a 3rd party lib but the ones I found are outdated and super heavy (>70kb) for such a simple thing so I went ahead and built one myself.

The code:

import { useId } from "react";

const Star = ({ variant }: { variant: "filled" | "empty" | "half" }) => {
  const id = useId();

  let c1, c2;
  if (variant === "filled") {
    c1 = "#FBBC05";
    c2 = "#FBBC05";
  } else if (variant === "empty") {
    c1 = "#C4C4C4";
    c2 = "#C4C4C4";
  } else if (variant === "half") {
    c1 = "#FBBC05";
    c2 = "#C4C4C4";
  }

  return (
    <svg
      width="20"
      height="19"
      viewBox="0 0 20 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id={id}>
          <stop offset="50%" stopColor={c1} />
          <stop offset="50%" stopColor={c2} />
        </linearGradient>
      </defs>
      <path
        d="M10 0.148438L12.935 6.14144L19.5 7.10844L14.75 11.7704L15.871 18.3564L10 15.2454L4.129 18.3564L5.25 11.7704L0.5 7.10844L7.064 6.14144L10 0.148438Z"
        fill={`url(#${id})`}
      />
    </svg>
  );
};

const Rating = ({ rating, max = 5 }: { rating: number; max?: number }) => {
  return (
    <div className="flex items-center">
      {Array.from({ length: Math.floor(rating) }, (_, i) => (
        <Star key={i} variant="filled" />
      ))}
      {!Number.isInteger(rating) && <Star variant="half" />}
      {Array.from({ length: max - Math.ceil(rating) }, (_, i) => (
        <Star key={i} variant="empty" />
      ))}
    </div>
  );
};

export default Rating;

🚨 Realize I'm using React 18 useId hook because the lineargradient svg field needs a unique one.

Usage:

() => {
  return (
    <div>
      <Rating rating={1} />
      <Rating rating={1.5} />
      <Rating rating={2} />
      <Rating rating={2.5} />
      <Rating rating={3} />
      <Rating rating={3.5} />
      <Rating rating={4} />
      <Rating rating={4.5} />
      <Rating rating={5} />
    </div>
  )
}

Sandbox:

How to build a DateCountdown in React?

Gabriel Linassi — Thu, 26 May 2022 03:57:07 +0000

Recently I applied to a position as a Frontend developer and they asked me to solve a React challenge. Among other things, they asked to build a reusable DateCountdown component. If you're interested to see the challenge, check this Reddit post.

Take a look at the Takeaways section at the end to learn some useful patterns I used here which can be useful in your projects.

TL;DR

This is how the component will look at the end. Check the sandbox for the full code.

const DateCountdown = ({ endDate }: DateCountdownProps) => {
  const { rDays, rHours, rMinutes, rSeconds } = useDateCountdown(endDate);

  return (
    <div className={styles.countdown}>
      <div className={styles.clock}>
        <div className={styles.ticker}>{rDays}</div>
        <div className={styles.label}>Days</div>
      </div>
      <Separator />
      <div className={styles.clock}>
        <div className={styles.ticker}>{rHours}</div>
        <div className={styles.label}>Hours</div>
      </div>
      <Separator />
      <div className={styles.clock}>
        <div className={styles.ticker}>{rMinutes}</div>
        <div className={styles.label}>Minutes</div>
      </div>
      <Separator />
      <div className={styles.clock}>
        <div className={styles.ticker}>{rSeconds}</div>
        <div className={styles.label}>Seconds</div>
      </div>
    </div>
  );
};

const endDate = new Date("2022-12-27T16:25:00");
() => <DateCountdown endDate={endDate} />

Implementation details 💻

The code above is pretty much self explanatory so let's focus on the custom hook which is a little tricker.

import { useEffect, useState } from "react";
import { getRemainingTime } from "./DateCountdown.helpers";

type State = {
  rDays: number;
  rHours: number;
  rMinutes: number;
  rSeconds: number;
};

const initialState: State = { rDays: 0, rHours: 0, rMinutes: 0, rSeconds: 0 };

const useDateCountdown = (endDate: Date) => {
  const [state, setState] = useState<State>(initialState);

  useEffect(() => {
    const remainingTime = getRemainingTime(endDate);
    setState(remainingTime);

    const intervalId = setInterval(() => {
      const remainingTime = getRemainingTime(endDate);
      setState(remainingTime);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [endDate]);

  return state;
};

export { useDateCountdown };

Notice that I call the getRemainingTime function outside of the setInterval because the interval will call getRemainingTime just after 1sec and I want it to start asap.

To implement the getRemainingTime I added date-fns as a dependency to help with the date calculations.

import {
  getDaysInMonth,
  getMonth,
  getYear,
  intervalToDuration
} from "date-fns";

export const getRemainingTime = (endDate: Date) => {
  const now = new Date();
  const difference = intervalToDuration({
    start: now,
    end: endDate
  });

  /**
   * As the hook is not returning the number of months and years,
   * it needs to aggreagate those values into the days counter
   */
  let numOfDays = difference.days || 0;
  let numOfMonths = (difference.months || 0) + (difference.years || 0) * 12;

  for (let i = 1; i <= numOfMonths; i++) {
    numOfDays += getDaysInMonth(new Date(getYear(now), getMonth(now) + i));
  }

  return {
    rDays: numOfDays,
    rHours: difference.hours || 0,
    rMinutes: difference.minutes || 0,
    rSeconds: difference.seconds || 0
  };
};

Notice that the intervalToDuration from date-fns returns the range between seconds to years however my custom hook just returns the range between seconds to days so I had to implement the logic to convert the remaining months and years to days.

The logic is pretty much it. I used CSS Modules to style.

.countdown {
  display: flex;
  align-items: center;
}

.dots {
  margin: 0 0.5rem;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: #fff;
}

.dot + .dot {
  margin-top: 3px;
}

.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgba(119, 126, 144, 0.2);
  border-radius: 8px;
  width: 70px;
  height: 60px;
}

.ticker {
  font-size: 1rem;
  font-weight: 600;
}

.label {
  font-size: 0.75rem;
}

@media only screen and (min-width: 640px) {
  .dots {
    margin: 0 1rem;
  }

  .dot {
    width: 6px;
    height: 6px;
  }

  .dot + .dot {
    margin-top: 6px;
  }

  .clock {
    width: 100px;
    height: 90px;
  }

  .ticker {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .label {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
}

Notes 📖

At my original implementation here I didn't add the logic to convert months and years to days. I just realized that once I was writing this article 🙈

Takeaways 🎯

Besides this code, I would like to call your attention to some good React patterns I assembled together here which can be useful to apply in other projects.

Use custom hooks. They help you write clean code because it separates the view from the logic.
Keep closed related files in the same folder. Notice that I nested some files inside of the DateCountdown folder because those are being used just by that component.

Sandbox

How to build a dynamically resizable textarea?

Gabriel Linassi — Sat, 21 May 2022 22:33:31 +0000

Making a textarea dynamically resizable is fundamental to delivering a good UX on a text editor, a comment area or a get in a contact section. However, all the solutions available are too complex, require installing another dependency or need workarounds that are not a11y compliant.

In this post I'll show you a quick and simple solution for this problem using React, but you can apply it anywhere else.

Allright, show me the code then:

textarea {
  width: 500px;
  min-height: 100px;
  padding: 8px;
  font-size: 18px;
  resize: none;
  border: solid 1px;
  border-radius: 4px;
  outline: none;
}

const ref = useRef<HTMLTextAreaElement>(null);

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = "auto";
    ref.current.style.height = `${e.target.scrollHeight - 16}px`;
  }
};

return (
  <div className="App">
    <section>
      <textarea
        ref={ref}
        rows={1}
        placeholder="Enter text here..."
        onInput={handleInput}
      />
    </section>
  </div>
);

Explanation

I want to call your attention to some key points. Notice we're setting the height to auto before setting it to scrollHeight-16. Forget the -16 for now, I'll talk about it later. Let's just leave the line below to explain how it works.

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = `${e.target.scrollHeight}px`;
  }
};

What happens is that on every keypress, the textarea will increase it's height. If you notice you'll see that the height is increasing by 16px on every keypres. That happens because the scrollHeight include padding. To exemplify, let's say the height of the textarea is 40px initially, then what happens on each keypres is this:

i) height = x+16
ii) height = x+16+16
iii) height = x+16+16+16
...

That's why I subtracted the 16, because it's the sum of padding-top + padding-bottom and I don't to count it over again.

So by now the height should be resizing correctly when the size is increasing but if you delete a line you'll see that the height don't go shorter. To fix that, I set the height to auto before and it will do the job for us.

Also notice that I added the row={1}. That's because I don't want to have an empty line below the last line. Try to remove it to see how it will add extra space at the bottom of the textarea.

That's it, hope it helps. Thanks.

Sandbox

https://codesandbox.io/s/dynamically-resizable-textarea-9jbs1y

References:

i) https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
ii) https://www.npmjs.com/package/autosize

Quick Javascript tip

Gabriel Linassi — Fri, 20 May 2022 17:54:37 +0000

While developing a Textarea component in React with React-hook-form,
I needed to add two refs to the textarea field but it was a bit uggly so I tried to make that prettier:

Before:

<textarea
  ref={e => {
    textareaRef.current = e;
    registerRef(e);  
  }}
  ...  
/>

After:

<textarea
  ref={e => ((textareaRef.current = e), registerRef(e))}
  ...  
/>

A more stylish way to write conditional Tailwind classes

Gabriel Linassi — Wed, 13 Apr 2022 17:36:46 +0000

TLDR; Instead of writting like this:

className={clsx(
  'rounded px-2 py-1',
  variant == 'contained' && 'bg-blue-500 text-white',
  variant == 'outlined' && 'border border-blue-500 text-blue-500'
)}

Prefer this:

className={clsx(
  'rounded px-2 py-1',
  variantStyle[variant], className
)}

Full implementation:

import clsx from 'clsx'
import { ButtonHTMLAttributes, FC } from 'react'

type Variants = 'outlined' | 'contained'

type ButtonProps = {
  variant: Variants
} & ButtonHTMLAttributes<HTMLButtonElement>

const variantStyle: { [key in Variants]: string } = {
  contained: 'bg-blue-500 text-white',
  outlined: 'border border-blue-500 text-blue-500',
}

const Button: FC<ButtonProps> = (props) => {
  const { children, variant, className, ...rest } = props
  return (
    <button
      className={clsx('rounded px-2 py-1', variantStyle[variant], className)}
      {...rest}
    >
      {children}
    </button>
  )
}

export default Button