Components

Introduction

The component system that I used is from shadcn/ui https://ui.shadcn.com/. I have limited talent (and tolerance) for anything that involves CSS. So thank you shadcn for making this 🤣. Kidding aside, it will also help you save time since all of these components are industry standard like Lego blocks that you can plug into your app.

I only included the components that I used for the demo apps, feel free to extend and add any necessary components to your future application since I already configured the components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tailwind": {
    "config": "libs/ts/uikit-utils/tailwind.config.js",
    "css": "libs/ts/uikit-utils/global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "libs/ts/uikit/src",
    "utils": "@ts/uikit-utils"
  }
}

Adding a new component like the Carousel should be something like this:

npx shadcn-ui@latest add carousel

and it should automatically place the necessary files in this directory

libs/ts/uikit

Data Tables

This component and its sample usage is fairly simple but time-consuming. There's a simple pattern that you can follow when implementing data-driven tables with this template

1. Make a GET endpoint.

2. Make a query function using React Query

3. Make data table columns

4. Feed the query function result list and data table column into the DataTable component

The pattern can be seen inside this file apps/admin-web/src/app/app/page.tsx It showcases the data table by displaying the list of customers and its management features.