From 0655ac41ec69ee19e5e2e05b86e09f47e103549c Mon Sep 17 00:00:00 2001
From: George Desipris <73396808+desiprisg@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:16:48 +0300
Subject: [PATCH] feat(dashboard): Workflow list primitives (#6599)

---
 .../src/components/primitives/badge.tsx       |  29 ++++
 .../src/components/primitives/button.tsx      |   4 +-
 .../src/components/primitives/pagination.tsx  | 105 +++++++++++++
 .../src/components/primitives/step.tsx        |  34 +++++
 .../src/components/primitives/table.tsx       |  66 +++++++++
 .../src/components/primitives/tag.tsx         |  28 ++++
 apps/dashboard/src/index.css                  |  14 +-
 apps/dashboard/src/main.tsx                   |   5 +-
 apps/dashboard/src/routes/home.tsx            |  17 ---
 apps/dashboard/src/routes/index.ts            |   1 -
 apps/dashboard/src/routes/primitives.tsx      | 138 ++++++++++++++++++
 apps/dashboard/tailwind.config.js             |  21 +++
 12 files changed, 439 insertions(+), 23 deletions(-)
 create mode 100644 apps/dashboard/src/components/primitives/badge.tsx
 create mode 100644 apps/dashboard/src/components/primitives/pagination.tsx
 create mode 100644 apps/dashboard/src/components/primitives/step.tsx
 create mode 100644 apps/dashboard/src/components/primitives/table.tsx
 create mode 100644 apps/dashboard/src/components/primitives/tag.tsx
 delete mode 100644 apps/dashboard/src/routes/home.tsx
 create mode 100644 apps/dashboard/src/routes/primitives.tsx

diff --git a/apps/dashboard/src/components/primitives/badge.tsx b/apps/dashboard/src/components/primitives/badge.tsx
new file mode 100644
index 00000000000..daf68db1eea
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/badge.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/ui';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-muted text-muted-foreground',
+        destructive: 'border-transparent bg-destructive/10 text-destructive',
+        success: 'border-transparent bg-success/10 text-success',
+        warning: 'border-transparent bg-warning/10 text-warning',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
index ea7f6ea3425..e0154f479d5 100644
--- a/apps/dashboard/src/components/primitives/button.tsx
+++ b/apps/dashboard/src/components/primitives/button.tsx
@@ -19,9 +19,9 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-9 p-2.5',
-        sm: 'h-8 rounded-md text-xs',
+        sm: 'h-8 px-3 rounded-md text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        icon: 'size-8',
       },
     },
     defaultVariants: {
diff --git a/apps/dashboard/src/components/primitives/pagination.tsx b/apps/dashboard/src/components/primitives/pagination.tsx
new file mode 100644
index 00000000000..52a8476a442
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/pagination.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from '@radix-ui/react-icons';
+
+import { cn } from '@/utils/ui';
+import { ButtonProps, buttonVariants } from '@/components/primitives/button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center rounded-md border', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-row items-center *:border-r', className)} {...props} />
+  )
+);
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: 'ghost',
+        size,
+      }),
+      'rounded-none',
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationStart = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to first page" size="icon" className={cn('', className)} {...props}>
+    <DoubleArrowLeftIcon className="size-4" />
+  </PaginationLink>
+);
+PaginationStart.displayName = 'PaginationStart';
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="icon" className={cn('', className)} {...props}>
+    <ChevronLeftIcon className="size-4" />
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="icon" className={cn('', className)} {...props}>
+    <ChevronRightIcon className="size-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEnd = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to final page" size="icon" className={cn('', className)} {...props}>
+    <DoubleArrowRightIcon className="size-4" />
+  </PaginationLink>
+);
+PaginationEnd.displayName = 'PaginationEnd';
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn(buttonVariants({ size: 'icon', variant: 'ghost' }), 'bg-transparent hover:bg-transparent', className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="size-4" />
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationStart,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEnd,
+  PaginationEllipsis,
+};
diff --git a/apps/dashboard/src/components/primitives/step.tsx b/apps/dashboard/src/components/primitives/step.tsx
new file mode 100644
index 00000000000..ee786a19185
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/step.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/ui';
+
+const stepVariants = cva(
+  'inline-flex items-center rounded-full border-1.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-muted-foreground/5 bg-muted/50 text-muted-foreground/50',
+        feature: 'border-feature/30 bg-transparent text-feature/30',
+        information: 'border-information/30 bg-transparent text-information/30',
+        highlighted: 'border-highlighted/30 bg-transparent text-highlighted/30',
+        stable: 'border-stable/30 bg-transparent text-stable/30',
+      },
+      size: {
+        default: 'p-2 [&>svg]:size-3.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface StepProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepVariants> {}
+
+function Step({ className, variant, ...props }: StepProps) {
+  return <div className={cn(stepVariants({ variant }), className)} {...props} />;
+}
+
+export { Step, stepVariants };
diff --git a/apps/dashboard/src/components/primitives/table.tsx b/apps/dashboard/src/components/primitives/table.tsx
new file mode 100644
index 00000000000..210b1644d2e
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/table.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/ui';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-hidden rounded-md border shadow">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn('bg-card [&>tr]:border-0', className)} {...props} />
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn('', className)} {...props} />
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tfoot ref={ref} className={cn('font-medium', className)} {...props} />
+);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-muted first-of-type:border-border border-t transition-colors', className)}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => <td ref={ref} className={cn('p-2 align-middle', className)} {...props} />
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
+  )
+);
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/apps/dashboard/src/components/primitives/tag.tsx b/apps/dashboard/src/components/primitives/tag.tsx
new file mode 100644
index 00000000000..12cc475948f
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/tag.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/ui';
+
+const tagVariants = cva(
+  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-muted text-muted-foreground',
+        feature: 'border-transparent bg-feature/10 text-feature',
+        information: 'border-transparent bg-information/10 text-information',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {}
+
+function Tag({ className, variant, ...props }: TagProps) {
+  return <div className={cn(tagVariants({ variant }), className)} {...props} />;
+}
+
+export { Tag, tagVariants };
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index 265de2d813f..4ee7c729314 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -6,7 +6,7 @@
     --background: 0 0% 100%;
     --foreground: 222 32% 8%;
 
-    --card: 0 0% 100%;
+    --card: 0 0% 98%;
     --card-foreground: 222 32% 8%;
 
     --popover: 0 0% 100%;
@@ -27,6 +27,18 @@
     --destructive: 355 96% 60%;
     --destructive-foreground: 0 0% 100%;
 
+    --success: 148 72% 44%;
+
+    --warning: 20 100% 64%;
+
+    --feature: 256 88% 64%;
+
+    --information: 228 100% 60%;
+
+    --highlighted: 330 96% 64%;
+
+    --stable: 172 72% 48%;
+
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 222 32% 8%;
diff --git a/apps/dashboard/src/main.tsx b/apps/dashboard/src/main.tsx
index 2d961f742fc..ff4ad9bc5b1 100644
--- a/apps/dashboard/src/main.tsx
+++ b/apps/dashboard/src/main.tsx
@@ -2,16 +2,18 @@ import { StrictMode } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
 import ErrorPage from '@/components/error-page';
-import { RootRoute, AuthRoute, DashboardRoute, CatchAllRoute, HomeRoute } from './routes';
+import { RootRoute, AuthRoute, DashboardRoute, CatchAllRoute } from './routes';
 import { WorkflowsPage, SignInPage, SignUpPage, OrganizationListPage } from '@/pages';
 import './index.css';
 import { ROUTES } from './utils/routes';
+import { Primitives } from '@/routes/primitives';
 
 const router = createBrowserRouter([
   {
     element: <RootRoute />,
     errorElement: <ErrorPage />,
     children: [
+      { path: '/primitives', element: <Primitives /> },
       {
         element: <AuthRoute />,
         children: [
@@ -37,7 +39,6 @@ const router = createBrowserRouter([
             path: ROUTES.WORKFLOWS,
             element: <WorkflowsPage />,
           },
-          { path: '/home', element: <HomeRoute /> },
           {
             path: '*',
             element: <CatchAllRoute />,
diff --git a/apps/dashboard/src/routes/home.tsx b/apps/dashboard/src/routes/home.tsx
deleted file mode 100644
index 06b38faf7d6..00000000000
--- a/apps/dashboard/src/routes/home.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Button } from '@/components/primitives/button';
-
-export const HomeRoute = () => {
-  return (
-    <div className="flex min-h-[2000px] w-full flex-col gap-8">
-      <h1>Home page</h1>
-      <div className="flex w-full flex-col items-center justify-center gap-4">
-        <h2 className="text-lg font-semibold">Buttons</h2>
-        <Button>Primary button</Button>
-        <Button variant="novu">Novu button</Button>
-        <Button variant="destructive">Destructive button</Button>
-        <Button variant="ghost">Ghost button</Button>
-        <Button variant="outline">Outline button</Button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/routes/index.ts b/apps/dashboard/src/routes/index.ts
index c0148236f5a..371651e0645 100644
--- a/apps/dashboard/src/routes/index.ts
+++ b/apps/dashboard/src/routes/index.ts
@@ -2,4 +2,3 @@ export * from './root';
 export * from './auth';
 export * from './dashboard';
 export * from './catch-all';
-export * from './home';
diff --git a/apps/dashboard/src/routes/primitives.tsx b/apps/dashboard/src/routes/primitives.tsx
new file mode 100644
index 00000000000..043eff6dd8a
--- /dev/null
+++ b/apps/dashboard/src/routes/primitives.tsx
@@ -0,0 +1,138 @@
+import { Badge } from '@/components/primitives/badge';
+import { Button } from '@/components/primitives/button';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationLink,
+  PaginationEllipsis,
+  PaginationNext,
+  PaginationStart,
+  PaginationEnd,
+} from '@/components/primitives/pagination';
+import { Step } from '@/components/primitives/step';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/primitives/table';
+import { Tag } from '@/components/primitives/tag';
+import { GlobeIcon } from '@radix-ui/react-icons';
+
+export const Primitives = () => {
+  return (
+    <div className="flex min-h-[2000px] w-full flex-col gap-8">
+      <h1>Home page</h1>
+      <div className="flex w-full flex-col items-center justify-center gap-4">
+        <h2 className="text-lg font-semibold">Buttons</h2>
+        <Button>Primary button</Button>
+        <Button variant="novu">Novu button</Button>
+        <Button variant="destructive">Destructive button</Button>
+        <Button variant="ghost">Ghost button</Button>
+        <Button variant="outline">Outline button</Button>
+      </div>
+
+      <div className="flex w-full flex-col items-center justify-center gap-4">
+        <h2 className="text-lg font-semibold">Badges</h2>
+        <Badge>Primary badge</Badge>
+        <Badge variant="success">Success badge</Badge>
+        <Badge variant="destructive">Destructive badge</Badge>
+        <Badge variant="warning">Warning badge</Badge>
+      </div>
+
+      <div className="flex w-full flex-col items-center justify-center gap-4">
+        <h2 className="text-lg font-semibold">Tags</h2>
+        <Tag variant="feature">authentication</Tag>
+        <Tag variant="information">tags</Tag>
+        <Tag>+11</Tag>
+      </div>
+
+      <div className="flex w-full flex-col items-center justify-center gap-4">
+        <h2 className="text-lg font-semibold">Steps</h2>
+        <Step>
+          <GlobeIcon />
+        </Step>
+        <Step variant="feature">
+          <GlobeIcon />
+        </Step>
+        <Step variant="information">
+          <GlobeIcon />
+        </Step>
+        <Step variant="highlighted">
+          <GlobeIcon />
+        </Step>
+        <Step variant="stable">
+          <GlobeIcon />
+        </Step>
+      </div>
+
+      <div className="flex w-full flex-col items-center justify-center gap-4">
+        <h2 className="text-lg font-semibold">Table</h2>
+
+        <div className="mx-auto w-full max-w-4xl">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead>Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+                <TableCell>Test</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+
+        <div>
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationStart href="#" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationPrevious href="#" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#">1</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#">2</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#">3</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationEllipsis />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#">15</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationNext href="#" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationEnd href="#" />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index aeab6e201e2..2d270f31ea9 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -4,6 +4,9 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      borderWidth: {
+        1.5: 1.5,
+      },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
@@ -40,6 +43,24 @@ export default {
           DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+        },
+        feature: {
+          DEFAULT: 'hsl(var(--feature))',
+        },
+        information: {
+          DEFAULT: 'hsl(var(--information))',
+        },
+        highlighted: {
+          DEFAULT: 'hsl(var(--highlighted))',
+        },
+        stable: {
+          DEFAULT: 'hsl(var(--stable))',
+        },
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',