Create dashboard page ui (#43)

* create a dummy dashboard page

* add title to dashboard

* create a sidebar component

* create dashboard header

* create format route function

* use format route in form card

* update lucide react version

* update format route file name

* update workflow

* update workflow

* merge load env and test into one command

* remove reading from process.env in test

.github/workflows/test.yml

@@ -1,26 +1,26 @@
 name: Test
 
 on:
-  pull_request:
-    branches: ["*"]
+    pull_request:
+        branches: ["*"]
 
 jobs:
-  tests:
-    runs-on: ubuntu-latest
-    name: Run tests
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
+    tests:
+        runs-on: ubuntu-latest
+        name: Run tests
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
 
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.17.1
-          cache: "npm"
+            - name: Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.17.1
+                  cache: "npm"
 
-      - name: Install dependencies
-        run: npm i
+            - name: Install dependencies
+              run: npm i
 
-      - run: npm run test:ci
+            - run: npm run test:ci

package.json

@@ -1,74 +1,74 @@
 {
-  "name": "wisee-web",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:ci": "jest --ci",
-    "prettier": "prettier --check .",
-    "prettier:fix": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@radix-ui/react-slot": "1.0.2",
-    "@tanstack/react-query": "^5.24.1",
-    "@testing-library/user-event": "14.5.1",
-    "axios": "1.6.0",
-    "class-variance-authority": "0.7.0",
-    "lucide-react": "0.277.0",
-    "nanoid": "5.0.4",
-    "next": "13.5.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwind-merge": "1.14.0",
-    "zustand": "4.4.2"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.5.1",
-    "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/blocks": "7.5.1",
-    "@storybook/nextjs": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/testing-library": "0.2.2",
-    "@testing-library/jest-dom": "6.1.2",
-    "@testing-library/react": "14.0.0",
-    "@types/jest": "29.5.5",
-    "@types/node": "20.5.3",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
-    "autoprefixer": "10.4.15",
-    "css-loader": "6.8.1",
-    "eslint": "8.47.0",
-    "eslint-config-next": "13.5.3",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-formatjs": "4.10.3",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.15",
-    "jest": "29.6.4",
-    "jest-environment-jsdom": "29.6.4",
-    "postcss": "8.4.31",
-    "postcss-loader": "7.3.3",
-    "prettier": "3.0.2",
-    "prettier-plugin-tailwindcss": "0.5.3",
-    "storybook": "7.5.1",
-    "style-loader": "3.3.3",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
-  },
-  "volta": {
-    "node": "18.17.1"
-  }
+    "name": "wisee-web",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "test": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "test:ci": "jest --ci",
+        "prettier": "prettier --check .",
+        "prettier:fix": "prettier --write .",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "dependencies": {
+        "@radix-ui/react-slot": "1.0.2",
+        "@tanstack/react-query": "^5.24.1",
+        "@testing-library/user-event": "14.5.1",
+        "axios": "1.6.0",
+        "class-variance-authority": "0.7.0",
+        "lucide-react": "0.344.0",
+        "nanoid": "5.0.4",
+        "next": "13.5.3",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.14.0",
+        "zustand": "4.4.2"
+    },
+    "devDependencies": {
+        "@storybook/addon-essentials": "7.5.1",
+        "@storybook/addon-interactions": "7.5.1",
+        "@storybook/addon-links": "7.5.1",
+        "@storybook/addon-onboarding": "1.0.8",
+        "@storybook/addon-styling-webpack": "0.0.5",
+        "@storybook/blocks": "7.5.1",
+        "@storybook/nextjs": "7.5.1",
+        "@storybook/react": "7.5.1",
+        "@storybook/testing-library": "0.2.2",
+        "@testing-library/jest-dom": "6.1.2",
+        "@testing-library/react": "14.0.0",
+        "@types/jest": "29.5.5",
+        "@types/node": "20.5.3",
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "@typescript-eslint/eslint-plugin": "6.4.1",
+        "@typescript-eslint/parser": "6.4.1",
+        "autoprefixer": "10.4.15",
+        "css-loader": "6.8.1",
+        "eslint": "8.47.0",
+        "eslint-config-next": "13.5.3",
+        "eslint-config-prettier": "9.0.0",
+        "eslint-plugin-formatjs": "4.10.3",
+        "eslint-plugin-import": "2.28.1",
+        "eslint-plugin-react": "7.33.2",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-storybook": "0.6.15",
+        "jest": "29.6.4",
+        "jest-environment-jsdom": "29.6.4",
+        "postcss": "8.4.31",
+        "postcss-loader": "7.3.3",
+        "prettier": "3.0.2",
+        "prettier-plugin-tailwindcss": "0.5.3",
+        "storybook": "7.5.1",
+        "style-loader": "3.3.3",
+        "tailwindcss": "3.3.3",
+        "typescript": "5.1.6"
+    },
+    "volta": {
+        "node": "18.17.1"
+    }
 }

src/api/form-builder/form-builder.dto.ts

@@ -1,19 +1,8 @@
 import { CommonResponseDto } from "../common/common.dto";
 
-import { TFormContent } from "./form-builder.types";
+import { TForm, TFormContent } from "./form-builder.types";
 
-export type FromDto = {
-    id: number;
-    content: TFormContent;
-    owner_id: number;
-    created_by_id: number;
-    status: string; // TODO: @yesyash -  pick the correct enum from erd diagram
-    updated_by_id: number;
-    created_at: string;
-    updated_at: string;
-};
-
-export type GetAllFormsResponseDto = CommonResponseDto<FromDto[]>;
+export type GetAllFormsResponseDto = CommonResponseDto<TForm[]>;
 
 export type CreateFromRequestDto = {
     content: TFormContent;

src/api/form-builder/form-builder.types.ts

@@ -1,7 +1,3 @@
-export type TFormContent = {
-    blocks: TFormBlock[];
-};
-
 export type TFormBlock = {
     id: string;
     type: string;
@@ -10,3 +6,18 @@ export type TFormBlock = {
     order: number;
     meta?: unknown; // TODO: @yesyash -  pick the correct type from erd diagram
 };
+
+export type TFormContent = {
+    blocks: TFormBlock[];
+};
+
+export type TForm = {
+    id: number;
+    content: TFormContent;
+    owner_id: number;
+    created_by_id: number;
+    status: string; // TODO: @yesyash -  pick the correct enum from erd diagram
+    updated_by_id: number;
+    created_at: string;
+    updated_at: string;
+};

src/components/sidebar/__tests__/sidebar.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Sidebar } from '..'
+import { SIDEBAR_LINKS } from '../sidebar.constants'
+
+describe('Sidebar', () => {
+    it('renders the sidebar correctly', () => {
+        render(<Sidebar />)
+
+        // Check that the correct number of links are displayed
+        const links = screen.getAllByRole('link');
+        expect(links.length).toBe(SIDEBAR_LINKS.length);
+
+        // Check that each link has the correct text and href
+        SIDEBAR_LINKS.forEach((link, index) => {
+            expect(links[index]).toHaveTextContent(link.title);
+            expect(links[index]).toHaveAttribute('href', link.href);
+        });
+    })
+})

src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export * from "./sidebar";

src/components/sidebar/sidebar.constants.ts

@@ -0,0 +1,12 @@
+import { TSidebarLink } from "./sidebar.types";
+
+export const SIDEBAR_LINKS: TSidebarLink[] = [
+    {
+        title: "Home",
+        href: "/dashboard",
+    },
+    {
+        title: "Settings",
+        href: "/settings",
+    },
+];

src/components/sidebar/sidebar.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link"
+
+import { SIDEBAR_LINKS } from "./sidebar.constants"
+import { TSidebarLink } from "./sidebar.types"
+
+type SidebarLinkProps = TSidebarLink
+
+const SidebarLink = ({ href, title }: SidebarLinkProps) => {
+    return (
+        <Link href={href} className="px-3 py-1 text-stone-500 block rounded hover:bg-stone-200 hover:text-stone-700 transition">
+            {title}
+        </Link>
+    )
+}
+
+export const Sidebar = () => {
+    const appName = process.env.NEXT_PUBLIC_APP_NAME
+
+    return (
+        <nav className="w-full px-2 py-4">
+            <h1 className="text-2xl px-2 pb-6 font-semibold text-stone-900">{appName}</h1>
+
+            <ul className="w-full space-y-2">
+                {SIDEBAR_LINKS.map((link, index) => (
+                    <li key={index} className="w-full">
+                        <SidebarLink title={link.title} href={link.href} />
+                    </li>
+                ))}
+
+            </ul>
+        </nav>
+    )
+}

src/components/sidebar/sidebar.types.ts

@@ -0,0 +1,4 @@
+export type TSidebarLink = {
+    title: string;
+    href: string;
+};

src/modules/dashboard/components/__tests__/dashboard-header.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import { DashboardHeader } from '../dashboard-header'
+
+describe('Dashboard Header', () => {
+    it('renders the header correctly', () => {
+        render(<DashboardHeader />)
+
+        // check if search bar is displayed & the placeholder text is correct
+        expect(screen.getByPlaceholderText('Search')).toBeInTheDocument()
+
+        // check if the create form button is displayed
+        expect(screen.getByText('Create Form')).toBeInTheDocument()
+    })
+
+    it('check if id & className gets applied', () => {
+        render(<DashboardHeader className="test-class" />)
+        const element = screen.getByTestId('dashboard_header')
+
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('test-class')
+    })
+})

src/modules/dashboard/components/__tests__/form-card.test.tsx

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import { ROUTES } from '@/routes'
+import { formatRoute } from '@/utils/format-route/format-route.util'
+
+import { FormCard } from '../form-card'
+
+describe('Form Card', () => {
+    it("render the form card", () => {
+        render(<FormCard id={1} title="dummy form title" updated_at={"Edited 12hours ago"} status={'draft'} />)
+        const element = screen.getByTestId('form_card')
+
+        expect(element).toBeInTheDocument()
+    })
+
+    it("check if id, title, status & updated_at gets applied", () => {
+        render(<FormCard id={1} title="dummy form title" updated_at={"Edited 12hours ago"} status={'draft'} />)
+        const element = screen.getByTestId('form_card')
+        const anchorLink = screen.getByRole('link')
+
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveTextContent('dummy form title')
+        expect(element).toHaveTextContent('draft')
+        expect(element).toHaveTextContent('Edited 12hours ago')
+        expect(anchorLink).toHaveAttribute('href', formatRoute(ROUTES.forms.edit, { id: 1 }))
+    })
+})