DEV Community: Max Campbell

🚀 2 Tricks to build an Ebay clone in 30 Minutes 🚀

Max Campbell — Mon, 21 Aug 2023 18:12:18 +0000

In this tutorial, you'll learn how to:

Build a Bidding system with SMS notifications.
Handle time dependent jobs in a safe manner
[TRICK 1]: Building a web application super quickly with Blitz.js
[TRICK 2]: Bid status notifications using Byteflow

So let's get started!

Byteflow:Integrate SMS Messaging in minutes 💬

Just a quick background about us. Byteflow is a Twilio alternative that does not require a 15+ business day verification period to start sending SMS messages.

The tools

Before we get into this tutorial, let's look at the tools we will be using:

Blitz.js: Blitz.js is a react meta-framework. It builds on top of Next.js, providing a "Rails-like" experience where the backend and frontend are tightly integrated.
Prisma: Prisma is an ORM that offers tight integration with Typescript. The Prisma schema is defined in a separate Prisma file and is converted into TS types auto-magically, making it super easy to use.
Quirrel: Quirrel is a simple open-source system for job scheduling that we will use to schedule jobs to run when the auction is complete.

Setting up the project

First, we need to install Blitz.js.

npm:

npm install -g blitz

Yarn:

yarn global add blitz

Then create a new project by running the following:

blitz new bidding-site

Then select the following options:

Pick a new project's language › Typescript
Pick your new app template › Full
Install dependencies? › (Pick what you prefer for me, that is Yarn)
Pick a form library › React Hook Form

Once you do this, you will get a simple application with a full DB, basic authentication, and everything we need.

Before we continue let's start a new dev server by running:

npm run dev

or for Yarn:

yarn dev

This will start the dev server at http://localhost:3000

Scaffolding the DB

We will be using Prisma as our ORM to interface with our database. Start by opening the db/schema.prisma file and add the following value to the User model:

bids     Bid[]

Then create these new models:

model Product {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  name      String
  bids      Bid[]
}

model Bid {
  id          Int     @id @default(autoincrement())
  bidValueUSD Int
  Product     Product @relation(fields: [productId], references: [id], onDelete: Cascade)
  productId   Int
  User        User    @relation(fields: [userId], references: [id])
  userId      Int
}

Here we have:

A Bid Model that represents an individual bid on a product
A Product Model representing a product that users can place bids on.

Products

Then run:

blitz g all Product

This will scaffold mutations and queries for products and generate a page for creating, deleting, viewing, and updating products.

Blitz.js does a pretty good job of scaffolding, but it's not perfect, so we will need to make a few changes.

First update src/products/schema.ts to:

import { z } from "zod";

export const CreateProductSchema = z.object({
  name: z.string()
});
export const UpdateProductSchema = z.object({
  id: z.number(),
});

export const DeleteProductSchema = z.object({
  id: z.number(),
});

Here we have updated it so that when creating a product, it takes in the name of the product.

Then update src/products/components/ProductForm.tsx to:

import React from "react";
import { Form, FormProps } from "src/core/components/Form";
import { LabeledTextField } from "src/core/components/LabeledTextField";
import { z } from "zod";
export { FORM_ERROR } from "src/core/components/Form";
export function ProductForm<S extends z.ZodType<any, any>>(
  props: FormProps<S>
) {
  return (
    <Form<S> {...props}>
      <LabeledTextField name="name" label="Name" placeholder="Diamond watch" />
    </Form>
  );
}

Here we have added an input field for the name of the product.
After you create an account, you can then create a product by going to http://localhost:3000/products/new

Bids

Now that you can create products let's create the bidding system.

Start by running:

blitz g crud Bid

This will scaffold out CRUD mutations and queries for bids.

Then update src/bids/schemas.ts to:

import { z } from "zod";

export const CreateBidSchema = z.object({
  bidValueUSD: z.number(),
  productId: z.number()
});
export const UpdateBidSchema = z.object({
  id: z.number(),
});

export const DeleteBidSchema = z.object({
  id: z.number(),
});

When creating a new bid, we have updated the schema to include the bidValueUSD and the productId.

Then update src/bids/mutations/createBid.ts to:

import { resolver } from "@blitzjs/rpc"
import db from "db"
import { CreateBidSchema } from "../schemas"

export default resolver.pipe(
  resolver.zod(CreateBidSchema),
  resolver.authorize(),
  async (input, ctx) => {
    const bid = await db.bid.create({
      data: {
        userId: ctx.session.userId,
        productId: input.productId,
        bidValueUSD: input.bidValueUSD,
      },
    })

    return bid
  }
)

Then create a new file called bids/components/CreateBidForm.tsx and add the following:

import { AuthenticationError, PromiseReturnType } from "blitz"
import Link from "next/link"
import { LabeledTextField } from "src/core/components/LabeledTextField"
import { Form, FORM_ERROR } from "src/core/components/Form"
import login from "src/auth/mutations/login"
import { Login } from "src/auth/schemas"
import { useMutation } from "@blitzjs/rpc"
import { Routes } from "@blitzjs/next"
import createBid from "../mutations/createBid"
import { z } from "zod"

type CreateBidFormProps = {
  onSuccess?: () => void
  productId: number
  currentMaxBid?: number
}

export const CreateBidForm = (props: CreateBidFormProps) => {
  const [createBidMutation] = useMutation(createBid)
  return (
    <div>
      <h2>Create Bid</h2>

      <Form
        submitText= "Create Bid"
        schema={z.object({
          value: z.string(),
        })}
        onSubmit={async (values) => {
          try {
            if (props.currentMaxBid != undefined) {
              if (parseInt(values.value) <= props.currentMaxBid) {
                return { [FORM_ERROR]: "Your bid must be greater than the current highest bid"}
              }
            }
            await createBidMutation({
              bidValueUSD: parseInt(values.value),
              productId: props.productId,
            })
            props.onSuccess?.()
          } catch (error: any) {
            return {
              [FORM_ERROR]:
                "Sorry, we had an unexpected error. Please try again. - " + error.toString(),
            }
          }
        }}
      >
        <LabeledTextField name="value" label="Bid Value" placeholder="100" />
      </Form>
    </div>
  )
}

export default CreateBidForm

This is a pretty simple form component that takes in the value for the bid and then triggers the createBidMutation when submitted.

Now let's update the resolver inside of products/queries/getProduct.ts to:

export default resolver.pipe(resolver.zod(GetProduct), resolver.authorize(), async ({ id }) => {
  const product = await db.product.findFirst({ where: { id }, include: { bids: true } })

  if (!product) throw new NotFoundError()

  return product
})

Here we have just told to prisma to include bids when getting the product so we can show them on the product page.

Then updates pages/products/[productId.tsx] to:

import { Suspense, useEffect, useState } from "react"
import { Routes } from "@blitzjs/next"
import Head from "next/head"
import Link from "next/link"
import { useRouter } from "next/router"
import { useQuery, useMutation } from "@blitzjs/rpc"
import { useParam } from "@blitzjs/next"

import Layout from "src/core/layouts/Layout"
import getProduct from "src/products/queries/getProduct"
import deleteProduct from "src/products/mutations/deleteProduct"
import createBid from "../../bids/mutations/createBid"
import { Bid } from ".prisma/client"
import Form from "../../core/components/Form"
import CreateBidForm from "../../bids/components/CreateBidForm"

export const Product = () => {
  const router = useRouter()
  const productId = useParam("productId", "number")
  const [deleteProductMutation] = useMutation(deleteProduct)
  const [product, { refetch }] = useQuery(getProduct, { id: productId })
  const [sortedBids, setSortedBids] = useState<Bid[]>([])

  useEffect(() => {
    setSortedBids(product.bids.sort((a, b) => b.bidValueUSD - a.bidValueUSD))
  }, [product.bids])

  return (
    <>
      <Head>
        <title>Product - {product.name}</title>
      </Head>

      <div>
        <h1>{product.name}</h1>

        {product.bids.length == 0 ? <p>No bids</p> : <p>Top Bid: {sortedBids[0]?.bidValueUSD}</p>}

        <hr />
        <CreateBidForm
          currentMaxBid={product.bids[0]?.bidValueUSD}
          onSuccess={() => refetch()}
          productId={product.id}
        />
        <hr />

        <Link href={Routes.EditProductPage({ productId: product.id })}>Edit</Link>

        <button
          type= "button"
          onClick={async () => {
            if (window.confirm("This will be deleted")) {
              await deleteProductMutation({ id: product.id })
              await router.push(Routes.ProductsPage())
            }
          }}
          style={{ marginLeft: "0.5rem" }}
        >
          Delete
        </button>
      </div>
    </>
  )
}

const ShowProductPage = () => {
  return (
    <div>
      <p>
        <Link href={Routes.ProductsPage()}>Products</Link>
      </p>

      <Suspense fallback={<div>Loading...</div>}>
        <Product />
      </Suspense>
    </div>
  )
}

ShowProductPage.authenticate = true
ShowProductPage.getLayout = (page) => <Layout>{page}</Layout>

export default ShowProductPage

The changes here are pretty simple. We sort the bids returned from the getProduct query so the biggest bid is first. Then we show the largest bid. We also add the CreateBidForm so users can create new bids on the product.

You should now be able to create a product and place bids on it.

Ending Auctions

Auctions should end at some point, so let's start by adding the following to the Product model in the Prisma schema:

endDate   DateTime

So it looks like this:

model Product {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  name      String
  bids      Bid[]
  endDate   DateTime
}

Then run the following to migrate the database:

blitz prisma migrate reset && blitz prisma migrate dev

Then install react-date-picker with:

npm i react-date-picker

Or, if you are using Yarn:

yarn add react-date-picker

Then update products/components/ProductForm.tsx to:

import React, { useState } from "react"
import { LabeledTextField } from "src/core/components/LabeledTextField"
import { z } from "zod"
import DatePicker from "react-date-picker"
import "react-date-picker/dist/DatePicker.css"
import "react-calendar/dist/Calendar.css"
import { Form, FORM_ERROR } from "src/core/components/Form"
interface FormResult {
  name: string
  date: Date
}

export function ProductForm<S extends z.ZodType<any, any>>({
  onSubmit,
}: {
  onSubmit: (data: FormResult) => void
}) {
  const [value, onChange] = useState<Date | null>(null)
  return (
    <Form
      schema={z.object({ name: z.string() })}
      submitText= "Submit"
      onSubmit={async (x) => {
        console.log("HELLO!")
        if (value == null)
          return {
            [FORM_ERROR]: "Please select an end date",
          }
        onSubmit({
          name: x.name,
          date: value,
        })
      }}
    >
      <LabeledTextField name="name" label="Name" placeholder="Diamond watch" />
      <label>Date:</label>
      <DatePicker
        minDate={new Date()} //Don't allow the user to select any dates before now
        onChange={(x) => onChange(x)}
        value={value}
      />
    </Form>
  )
}

Then update the CreateProductSchema in products/schemas.ts to:

export const CreateProductSchema = z.object({
  name: z.string(),
  date: z.date(),
})

Then update products/mutations/createProduct.ts to:

import { resolver } from "@blitzjs/rpc"
import db from "db"
import { CreateProductSchema } from "../schemas"

export default resolver.pipe(
  resolver.zod(CreateProductSchema),
  resolver.authorize(),
  async (input) => {
    const product = await db.product.create({
      data: {
        endDate: input.date,
        name: input.name,
      },
    })

    return product
  }
)

Here we have updated the resolver to add the date to our Product model in the DB.

Then install date-fns by running:

npm i date-fns

Or, if you are using Yarn:

yarn add date-fns

Now let's show the date the auction ends on the product page. Open pages/products/[productId].tsx and add below the product title:

<p>Auction ending in: {formatDistanceToNow(product.endDate, { addSuffix: true })}</p>

So it looks like:

import { Suspense, useEffect, useState } from "react"
import { Routes } from "@blitzjs/next"
import Head from "next/head"
import Link from "next/link"
import { useRouter } from "next/router"
import { useQuery, useMutation } from "@blitzjs/rpc"
import { useParam } from "@blitzjs/next"
import Layout from "src/core/layouts/Layout"
import getProduct from "src/products/queries/getProduct"
import deleteProduct from "src/products/mutations/deleteProduct"
import { Bid } from ".prisma/client"
import { formatDistanceToNow } from "date-fns"
import CreateBidForm from "../../bids/components/CreateBidForm"

export const Product = () => {
  const router = useRouter()
  const productId = useParam("productId", "number")
  const [deleteProductMutation] = useMutation(deleteProduct)
  const [product, { refetch }] = useQuery(getProduct, { id: productId })
  const [sortedBids, setSortedBids] = useState<Bid[]>([])

  useEffect(() => {
    console.log(product)
    setSortedBids(product.bids.sort((a, b) => b.bidValueUSD - a.bidValueUSD))
  }, [product.bids])

  return (
    <>
      <Head>
        <title>Product - {product.name}</title>
      </Head>

      <div>
        <h1>{product.name}</h1>

        <p>Auction ending in: {formatDistanceToNow(product.endDate, { addSuffix: true })}</p>

        {product.bids.length == 0 ? <p>No bids</p> : <p>Top Bid: {sortedBids[0]?.bidValueUSD}</p>}

        <hr />
        <CreateBidForm
          currentMaxBid={product.bids[0]?.bidValueUSD}
          onSuccess={() => refetch()}
          productId={product.id}
        />
        <hr />

        <Link href={Routes.EditProductPage({ productId: product.id })}>Edit</Link>

        <button
          type= "button"
          onClick={async () => {
            if (window.confirm("This will be deleted")) {
              await deleteProductMutation({ id: product.id })
              await router.push(Routes.ProductsPage())
            }
          }}
          style={{ marginLeft: "0.5rem" }}
        >
          Delete
        </button>
      </div>
    </>
  )
}

const ShowProductPage = () => {
  return (
    <div>
      <p>
        <Link href={Routes.ProductsPage()}>Products</Link>
      </p>

      <Suspense fallback={<div>Loading...</div>}>
        <Product />
      </Suspense>
    </div>
  )
}

ShowProductPage.authenticate = true
ShowProductPage.getLayout = (page) => <Layout>{page}</Layout>

export default ShowProductPage

Now if you go to the product page, you will be able to see the auction end date.

Now that we have the date in the DB and a decent UI, we need to remove the product from the DB and award it to the highest bidder when the auction ends.

To do that, we will use Quirrel, a simple open-source system for job scheduling. You can add it to your Blitz app by running:

npm i quirrel concurrently

Or for Yarn:

yarn add quirrel concurrently

Now update the package.json dev command to:

"dev": "concurrently --raw \"blitz dev\" 'quirrel'",

This makes it so that when you run yarn dev (or npm run dev), it will run a local quirrel server along with blitz.js. At this point, you should stop your current dev server and restart it with npm run dev or yarn dev.

Then create the following file src/pages/api/queues/auctionEnd.ts and add the following:

import { Queue } from "quirrel/next-pages"
import db from "../../../../db"

export default Queue("api/queues/auctionEnd", async (productId: number) => {
  const product = await db.product.delete({
    where: {
      id: productId,
    },
    include: {
      bids: true,
    },
  })
  // Sort bids so the highest value ones are first
  let sortedBids = product.bids.sort((a, b) => b.bidValueUSD - a.bidValueUSD)
  // TODO: Message the winner of the bid
})

This is a simple stub job that we will extend later. Right now, it just deletes the product when the auction ends.

Now let's make it run when the auction ends. To do that, add the following to the createProduct mutation resolver:

await auctionEnd.enqueue(product.id, {
      runAt: input.date, // Run when the auction ends
      id: nanoid(), // The ID representing the job for future reference
})

So it looks like this:

import { resolver } from "@blitzjs/rpc"
import db from "db"
import { CreateProductSchema } from "../schemas"
import { nanoid } from "nanoid"
import auctionEnd from "../../pages/api/queues/auctionEnd"

export default resolver.pipe(
  resolver.zod(CreateProductSchema),
  resolver.authorize(),
  async (input) => {
    const product = await db.product.create({
      data: {
        endDate: input.date,
        name: input.name,
      },
    })
    await auctionEnd.enqueue(product.id, {
      runAt: input.date, // Run when the auction ends
      id: nanoid(), // The ID representing the job for future reference
    })

    return product
  }
)

Notifications

First, let's make the user input their phone number at signup so we can message them todo that update src/auth/components/SignupForm.tsx to:

import { LabeledTextField } from "src/core/components/LabeledTextField"
import { Form, FORM_ERROR } from "src/core/components/Form"
import signup from "src/auth/mutations/signup"
import { Signup } from "src/auth/schemas"
import { useMutation } from "@blitzjs/rpc"

type SignupFormProps = {
  onSuccess?: () => void
}

export const SignupForm = (props: SignupFormProps) => {
  const [signupMutation] = useMutation(signup)
  return (
    <div>
      <h1>Create an Account</h1>

      <Form
        submitText= "Create Account"
        schema={Signup}
        initialValues={{ email:"  ", password:"  "}}
        onSubmit={async (values) => {
          try {
            await signupMutation(values)
            props.onSuccess?.()
          } catch (error: any) {
            if (error.code === "P2002" && error.meta?.target?.includes("email")) {
              // This error comes from Prisma
            } else {
              return { [FORM_ERROR]: error.toString() }
            }
          }
        }}
      >
        <LabeledTextField name="email" label="Email" placeholder="Email" />
        <LabeledTextField name="phoneNumber" label="Phone Number" placeholder="+11234567890" />
        <LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
      </Form>
    </div>
  )
}

export default SignupForm

Here we have added a new LabeledTextField to take in the phone number. Then update the Signup zod schema in src/auth/schemas.ts to:

export const Signup = z.object({
  email,
  password,
  phoneNumber: z.string()
})

Then add the following to the User model in db/schema.prisma:

phoneNumber String

Then run:

blitz prisma migrate reset && blitz prisma migrate dev

(Note: this will remove everything currently in the DB)

Then update the resolver in src/auth/mutations/signup.ts to:

export default resolver.pipe(
  resolver.zod(Signup),
  async ({ email, password, phoneNumber }, ctx) => {
    const hashedPassword = await SecurePassword.hash(password.trim())
    const user = await db.user.create({
      data: {
        email: email.toLowerCase().trim(),
        hashedPassword,
        role: "USER",
        phoneNumber: phoneNumber,
      },
      select: { id: true, name: true, email: true, role: true },
    })

    await ctx.session.$create({ userId: user.id, role: user.role as Role })
    return user
  }
)

Here we have added the phoneNumber to the db.user.create call.

Now let's expand the auctionEnd job to message the bid winner. To do that, let's first install the Byteflow SDK:

npm i @byteflow-inc/sdk

Or for Yarn:

yarn add @byteflow-inc/sdk

(Side note: You can use Twilio here if you prefer but will have to wait 15+ business days (1+ month real-time) to start sending messages)

Now create the file integrations/byteflow.ts and add:

import { ByteFlow } from "@byteflow-inc/sdk"

// NOTE: In a real deployment, make sure to store this API Key // in an environment variable instead
const sdk = new ByteFlow("<YOUR_API_KEY_HERE>")

export default sdk;

You can get a Byteflow API key by creating a free account here

Now let's update src/pages/api/queues/auctionEnd.ts to:

import { Queue } from "quirrel/next-pages"
import db from "../../../../db"

export default Queue("api/queues/auctionEnd", async (productId: number) => {
  const product = await db.product.delete({
    where: {
      id: productId,
    },
    include: {
      bids: {
        select: {
          bidValueUSD: true,
          User: {
            select: {
              phoneNumber: true,
            },
          },
        },
      },
    },
  })
  // Sort bids so the highest value ones are first
  let sortedBids = product.bids.sort((a, b) => b.bidValueUSD - a.bidValueUSD)
  // Message the winner of bid
  if (sortedBids[0]?.User.phoneNumber == undefined)
    throw new Error("Could not get phoneNumber for user!")
  await sdk.sendMessage({
    message_content: `You have won the auction for: ${product.name} 🎉`,
    destination_number: sortedBids[0]?.User.phoneNumber,
  })
})

Now let's add a notification for when you get outbid. Update the resolver in src/bids/mutations/createBid.ts to:

export default resolver.pipe(
  resolver.zod(CreateBidSchema),
  resolver.authorize(),
  async (input, ctx) => {
    const bidsForProduct = await db.bid.findMany({
      where: {
        productId: input.productId,
      },
      select: {
        bidValueUSD: true,
        User: {
          select: {
            phoneNumber: true,
          },
        },
      },
    })

    let sortedBids = bidsForProduct.sort((a, b) => b.bidValueUSD - a.bidValueUSD)

    let currentHighestBidPhoneNumber = sortedBids[0]?.User.phoneNumber
    if (currentHighestBidPhoneNumber != undefined) {
      await sdk.sendMessage({
        message_content: `You have been outbid. The new highest bid is $${input.bidValueUSD}`,
        destination_number: currentHighestBidPhoneNumber,
      })
    }

    const bid = await db.bid.create({
      data: {
        userId: ctx.session.userId,
        productId: input.productId,
        bidValueUSD: input.bidValueUSD,
      },
    })

    return bid
  }
)

Here we have updated the resolver to get the current highest bid and, if it exists, send them a message to tell them they have been outbid.

Conclusion

In this article, we built an Ebay clone that lets users create products, bid on products, and get notifications. There is plenty of stuff you can do to expand on this, such as adding styling maybe by making your own component library (tutorial on that) or by using something more cookie cutter like MUI. I hope you found this tutorial useful!

The Ultimate Guide to building a UI Library

Max Campbell — Tue, 08 Aug 2023 22:48:08 +0000

Introduction

We are always looking to create amazing experiences for our users. In this tutorial, you will learn how to create a fully featured accessible UI library.

Why build a custom UI library over pre-existing ones? Although libraries like Material UI come with a host of built-in components and styles, they may not always cater to your application’s specific needs. By building your own UI library, you gain the autonomy to create elements tailored to your application, enhancing the overall user experience.

The tools

Before we dive into this guide, let’s take a moment to explore the tools:

Radix: Radix is a low-level UI library that offers full control over styling and functionality. It provides a system of primitives to develop complex accessible UI components, making it an ideal choice for building a custom UI library.
Storybook: Storybook allows you to build your components separate from the rest of your application. This makes building UI component libraries way easier. You can also connect it to Chromatic to test the UI of your components.
Next.js: Next is a react meta framework. Its features such as server-side rendering make it great for building modern React applications.
Tailwind: Tailwind is an amazing utility-first CSS framework that lets you write styles in your HTML. It can take some time to get used to but once you do it makes styling 10x faster.
Class Variance Authority: CVA is a zero runtime CSS in JS library that makes it easy to create variants for components with Tailwind.

Together, Radix, Storybook, Tailwind, CVA, and Next.js provide the tools and flexibility you need to craft your custom UI library. Ready to get started? Let’s dive in.

Components

First, we should decide what components we want to build. This will depend on your application’s needs, but for this tutorial, we will be building the following components:

Button
Modal/Dialog
Tooltip
Dropdown Input ## Getting Started Let’s start by creating a new Next.js application by running the following in your terminal:

npx create-next-app@latest

And use the following options:

✔ What is your project named? - my-app
✔ Would you like to use TypeScript? - Yes
✔ Would you like to use ESLint? - Yes
✔ Would you like to use Tailwind CSS? - Yes
✔ Would you like to use `src/` directory? - Yes
✔ Would you like to use App Router? (recommended) - Yes
✔ Would you like to customize the default import alias? - No

Now we need to install Storybook. Run this in your Next.js project to install Storybook:

npx storybook@latest init

After the command finishes installing dependencies it will open a new window in your browser with Storybook:

In the left-hand bar, you can see all of our storybook components. If you click on them you can see an interactive preview of each component. Components can also have variants and controls. Controls allow you to see what the component will look like under different circumstances inside of Storybook.

Our first component

Let’s start by removing the default components that storybook gives us.

Delete the src/stories/ directory that Storybook created inside of our Next.js project
Create a new directory at src/components
Now that we have removed the default components let’s create our first component Button to do this first create a new directory src/components/Button inside of this directory create two files Button.tsx and Button.stories.tsx Our Button.tsx file is our actual component, and the Button.stories.tsx file is a configuration file for storybook that we will talk more about in a minute.

Add the following to your Button.tsx file:

const Button = ({ label }: {
    label: string
}) => {
    return (
        <button>{label}</button>
    )
}
export default Button;

Then add the following to the Button.stories.tsx file:

import type { Meta, StoryObj } from '@storybook/react';

import Button from './Button';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: 'Button',
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'centered',
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: {
    label: "Test"
  },
};

This is a pretty simple storybook config that we will expand on later. Let’s run through it quickly. The first section tells storybook the title of the component inside of storybook, and we pass in the actual component, so it knows what component to render.

The second section creates a new variant called Primary that passes the prop label: "Test" to the Button.

If you open up the storybook window again with (You don’t need to do this if you kept the window open):

yarn storybook

or the following if you are using npm:

npm run storybook

You can now see our component inside of storybook:

This is a very basic component as you can see, so let’s get started with styling it with Tailwind and CVA. First, install CVA:

yarn:

yarn add -D class-variance-authority

npm:

npm i class-variance-authority --save-dev

Now we have to tell Storybook to use Tailwind to do this run:

yarn add -D @storybook/addon-styling

and then:

yarn addon-styling-setup

or for npm:

npm i @storybook/addon-styling --save-dev

and then add "@storybook/addon-styling" to add-ons array inside of .storybook/main.ts

Then update .storybook/preview.ts to replace:

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

with:

import "../src/app/globals.css";

Then run (If you run into any ESM issues try running this again):

yarn upgrade

npm upgrade

Then replace the contents of Button.tsx with:

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-white",
        "text-black",
        "border-transparent",
        "hover:bg-slate-100",
        "rounded-lg",
      ],
      secondary: [
        "bg-[#23252c]",
        "text-white",
        "border-transparent",
        "rounded-lg",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

const Button: React.FC<ButtonProps> = ({
  className,
  intent,
  size,
  ...props
}) => <button className={button({ intent, size, className })} {...props} />;
export default Button;

Let’s walk through this code. First, we create a CVA style with variants, and we style each variant with tailwind classes. Then we tell CVA what variants to use by default. After that, we create a new React component that forwards any props passed to it into a button component. It also takes in the props intent and size which are then passed into CVA inside the className={button({ intent, size, className })} section.

Now update your Button.stories.tsx file to change the Primary variant to:

export const Primary: Story = {
  args: {
    children: "Test",
    intent: "primary",
  },
};

You will now be able to see our new Button component inside of Storybook. Try messing around with the controls and see what happens.

Making it good

Currently, our Button component is a bit generic. Let’s update it so it looks nice. You can go with your own styles, but I’m going to be going for a dark monochromatic style similar to that of Vercel. So to achieve that I’m going to update the classes in our Button.tsx component to:

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-white",
        "text-black",
        "border-transparent",
        "hover:bg-slate-100",
        "rounded-lg",
      ],
      secondary: [
        "bg-[#23252c]",
        "text-white",
        "border-transparent",
        "rounded-lg",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

Here I have updated the background color and text color to achieve the style I want. This article assumes some previous knowledge of tailwind, so I’m not going to go into detail here. But take a look at the Tailwind Docs for more info.

The Modal

Up until this point we have been building components without Radix because they have been pretty simple so far. But for our next component, we will be using Radix to handle all the accessibility features and interactions for us. Let’s start by installing the Radix modal component.

npm:

npm i @radix-ui/react-dialog && npm upgrade

Yarn:

yarn add @radix-ui/react-dialog && yarn upgrade

Once you have installed the radix modal we can start creating one. I recommend you also take a look at the radix modal docs here as it gives a nice overview of the component.

To get started create a new directory called src/components/Modal and add the files Modal.tsx and Modal.stories.ts and then scaffold Modal.tsx with:

import * as Dialog from "@radix-ui/react-dialog";
const Modal = ({ trigger }: { trigger: any }) => {
  return (
    <Dialog.Root>
      <Dialog.Trigger>{trigger}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title />
          <Dialog.Description />
          <Dialog.Close />
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};
export default Modal;

That’s a lot so here is a quick overview of the components:

Dialog.Root is an HOC that provides context for the sub-components.
Dialog.Trigger is where you put your trigger such as a button
Dialog.Overview covers the part of the screen that is not your modal
Dialog.Title is the title of the modal
Dialog.Description is an optional description for the modal
Dialog.Close is an optional trigger that closes the modal
We take in a trigger component and put it in radix trigger HOC
Now add the following to Modal.stories.tsx:

import type { Meta, StoryObj } from "@storybook/react";

import Modal from "./Modal";
import Button from "../Button/Button";
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: "Modal",
  component: Modal,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
} satisfies Meta<typeof Modal>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: {
    trigger: <Button>Trigger Modal</Button>,
    title: "Example Title",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
};

Now let’s fill out our modal component:

import * as Dialog from "@radix-ui/react-dialog";
import Button from "../Button/Button";
const Modal = ({
  trigger,
  title,
  description,
  body,
}: {
  trigger: any;
  title: string;
  description: string;
  body?: any;
}) => {
  return (
    <Dialog.Root>
      <Dialog.Trigger>{trigger}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content className="bg-black border-2 border-[#22242a]  fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] p-4 rounded-lg">
          <Dialog.Title className="text-2xl">{title}</Dialog.Title>
          <Dialog.Description className="mt-2">
            {description}
          </Dialog.Description>
          {body}
          <Dialog.Close>
            <Button className="mt-4" intent="secondary">
              Close
            </Button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};
export default Modal;

Let’s go over what’s happening here: We take in a trigger prop that you can use to pass in a trigger to our modal component We also take in a description prop for the modal, a title prop for the modal, and a prop for the body of the modal.

If you look at the storybook now you should be able to see our modal component!

Modal inside of Storybook

Tooltip

First, install the radix tooltip component:

npm:

npm i @radix-ui/react-tooltip && npm upgrade

Yarn:

yarn add @radix-ui/react-tooltip && yarn upgrade

Now create a new directory called src/components/Tooltip with the files Tooltip.tsx and Tooltip.stories.tsx then add the following to Tooltip.tsx:

import * as Tooltip from "@radix-ui/react-tooltip";
import Button from "../Button/Button";
const TooltipComponent = ({
  text,
  position,
  intent,
  trigger,
}: {
  intent?: "normal" | "danger";
  position?: "left" | "right" | "top" | "bottom";
  text: string;
  trigger: any;
}) => {
  if (intent == undefined) {
    intent = "normal";
  }
  if (position == undefined) {
    position = "top";
  }
  return (
    <Tooltip.Provider delayDuration={0}>
      <Tooltip.Root>
        <Tooltip.Trigger className="w-full" asChild>
          {trigger}
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            side={position}
            className={
              "max-w-xl rounded-lg border-2 bg-base-100 p-2 " +
              (intent == "normal" ? "border-[#22242a]" : "border-red-500")
            }
          >
            {text}
            {intent == "normal" ? (
              <Tooltip.Arrow className="fill-[#22242a]" />
            ) : (
              <Tooltip.Arrow className="fill-red-500" />
            )}
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
};
export default TooltipComponent;

Here we use the Radix tooltip HOC and take in an intent value that can be normal or danger. Then if it’s danger we make the border red otherwise we make it a neutral color

We also take in a text prop and a position prop. We pass the position prop into Radix’s side prop to set the tooltip side.

Then add the following to Tooltip.stories.tsx:

import type { Meta, StoryObj } from "@storybook/react";

import Tooltip from "./Tooltip";
import Button from "../Button/Button";
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: "Tooltip",
  component: Tooltip,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
} satisfies Meta<typeof Tooltip>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Normal: Story = {
  args: {
    trigger: <p>Hover Over Me</p>,
    text: "This is a tooltip",
    intent: "normal",
  },
};

export const Danger: Story = {
  args: {
    trigger: <p>Hover Over Me</p>,
    text: "This is a tooltip",
    intent: "danger",
  },
};

With that, you should be able to see the tooltip inside of Storybook:

Dropdown

First, install the radix dropdown component:

npm:

npm i @radix-ui/react-dropdown-menu && npm upgrade

Yarn:

yarn add @radix-ui/react-dropdown-menu && yarn upgrade

Create a new folder called src/components/Dropdown with the files: Dropdown.tsx and Dropdown.stories.tsx.

Scaffold out Dropdown.tsx with:

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

const Dropdown = ({ items, trigger }: { items: string[]; trigger: any }) => {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="outline-none select-none">
        {trigger}
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] select-none outline-none">
          {items.map((item) => {
            return (
              <DropdownMenu.Item
                key={item}
                className="text-black select-none outline-none hover:bg-black hover:text-white p-0.5 rounded cursor-pointer data-[highlighted]:text-white data-[highlighted]:bg-black"
              >
                {item}
              </DropdownMenu.Item>
            );
          })}
          <DropdownMenu.Arrow className="fill-white" />
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};
export default Dropdown;

The dropdown component is pretty simple we use the Radix dropdown component and take in an array of items and a trigger.

and then add the following to Dropdown.stories.tsx:

import type { Meta, StoryObj } from "@storybook/react";

import Dropdown from "./Dropdown";
import Button from "../Button/Button";
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: "Dropdown",
  component: Dropdown,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
} satisfies Meta<typeof Dropdown>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: {
    items: [
      "10 - 100",
      "100 - 1000",
      "1000 - 10,000",
      "10,000 - 100,000",
      "100,000+",
    ],
    trigger: <Button>Dropdown</Button>,
  },
};

You should now be able to see the Dropdown component inside of storybook:

Conclusion

In this article we built several components with Tailwind, Radix, CVA, and Storybook. The great thing about building your own component library is the extensibility, so with what you have learned you can continue to add more components to this library.

Aside: Stop Spending Weeks Integrating SMS

Thanks for reading this article! If you are looking for a way to send SMS messages without a 15+ business day verification period that providers like Twilio, and Sinch have take a look at Byteflow!