Feat: add accordion

dashboard/package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.20",
     "@mui/x-charts": "^7.7.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",

dashboard/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Accordion, { IAccordionItems } from './Accordion';
+
+const meta = {
+  title: 'Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const itemsBuild: IAccordionItems[] = [
+  {
+    trigger: {
+      config: 'config',
+      compiler: 'compiler',
+      date: 'dd/mm/yyyy',
+      buildErrors: 5,
+      buildTime: '500 seconds',
+      status: 'valid',
+    },
+    content: <span>AAAAa</span>,
+  },
+  {
+    trigger: {
+      config: 'config',
+      compiler: 'compiler',
+      date: 'dd/mm/yyyy',
+      buildErrors: 5,
+      buildTime: '500 seconds',
+      status: 'valid',
+    },
+    content: <span>AAAAa</span>,
+  },
+  {
+    trigger: {
+      config: 'config',
+      compiler: 'compiler',
+      date: 'dd/mm/yyyy',
+      buildErrors: 5,
+      buildTime: '500 seconds',
+      status: 'valid',
+    },
+    content: <span>AAAAa</span>,
+  },
+];
+
+const headersBuild = [
+  'config',
+  'compiler',
+  'date',
+  'build errors',
+  'build time',
+  'status',
+];
+
+const itemsTest: IAccordionItems[] = [
+  {
+    trigger: {
+      testPlans: 'aaaaaaa',
+      testErrors: 5,
+      testSuccessfull: 12,
+      status: 'invalid',
+    },
+    content: <span>AAAAa</span>,
+  },
+  {
+    trigger: {
+      testPlans: 'aaaaaaasdkjmla',
+      testErrors: 5,
+      testSuccessfull: 12,
+      status: 'valid',
+    },
+    content: <span>BBB</span>,
+  },
+];
+const headersTest = ['test plan', 'test results', 'status'];
+
+export const Builds: Story = {
+  args: {
+    items: itemsBuild,
+    headers: headersBuild,
+    type: 'build',
+  },
+};
+
+export const Tests: Story = {
+  args: {
+    items: itemsTest,
+    headers: headersTest,
+    type: 'test',
+  },
+};

dashboard/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,141 @@
+import { ReactNode, useMemo } from 'react';
+
+import { MdCheck, MdClose } from 'react-icons/md';
+
+import { TableBody, TableCell, TableRow } from '../ui/table';
+import BaseTable from '../Table/BaseTable';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
+import ColoredCircle from '../ColoredCircle/ColoredCircle';
+import { ComponentType } from '../ListingComponentItem/ListingComponentItem';
+
+export interface IAccordion {
+  headers: string[];
+  items: IAccordionItems[];
+  type: 'build' | 'test';
+}
+
+export interface IAccordionItems {
+  trigger: AccordionItemBuildsTrigger | AccordionItemTestsTrigger;
+  content?: ReactNode;
+}
+
+interface ICustomAccordionTableBody {
+  items: IAccordionItems[];
+  type: 'build' | 'test';
+}
+
+export type AccordionItemBuildsTrigger = {
+  config?: string;
+  compiler?: string;
+  date?: string;
+  buildErrors?: number;
+  buildTime?: string;
+  status?: 'valid' | 'invalid';
+};
+
+export type AccordionItemTestsTrigger = {
+  testPlans?: string;
+  testSuccessfull?: number;
+  testErrors?: number;
+  status?: 'valid' | 'invalid';
+};
+
+const Accordion = ({ headers, items, type }: IAccordion): JSX.Element => {
+  const accordionTableHeader = useMemo(
+    () => headers.map(header => <span key={header}>{header}</span>),
+    [headers],
+  );
+
+  return (
+    <BaseTable
+      headers={accordionTableHeader}
+      body={<AccordionTableBody items={items} type={type} />}
+    />
+  );
+};
+
+const AccordionTableBody = ({
+  items,
+  type,
+}: ICustomAccordionTableBody): JSX.Element => {
+  const accordionItems = useMemo(
+    () =>
+      items.map((item, index) => (
+        <Collapsible key={index} asChild>
+          <>
+            <CollapsibleTrigger asChild>
+              <TableRow>
+                {type === 'build' ? (
+                  <AccordionBuildsTrigger trigger={item.trigger} />
+                ) : (
+                  <AccordionTestsTrigger trigger={item.trigger} />
+                )}
+              </TableRow>
+            </CollapsibleTrigger>
+            <CollapsibleContent>{item.content}</CollapsibleContent>
+          </>
+        </Collapsible>
+      )),
+    [items, type],
+  );
+
+  return <TableBody>{accordionItems}</TableBody>;
+};
+
+const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
+  const triggerInfo = trigger as AccordionItemBuildsTrigger;
+  return (
+    <>
+      <TableCell>{triggerInfo.config}</TableCell>
+      <TableCell>{triggerInfo.compiler}</TableCell>
+      <TableCell>{triggerInfo.date}</TableCell>
+      <TableCell>
+        <ColoredCircle
+          className="max-w-6"
+          quantity={triggerInfo.buildErrors ?? 0}
+          type={ComponentType.Error}
+        />
+      </TableCell>
+      <TableCell>{triggerInfo.buildTime}</TableCell>
+      <TableCell>
+        {triggerInfo.status === 'valid' ? (
+          <MdCheck className="text-green" />
+        ) : (
+          <MdClose className="text-red" />
+        )}
+      </TableCell>
+    </>
+  );
+};
+
+const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
+  const triggerInfo = trigger as AccordionItemTestsTrigger;
+  return (
+    <>
+      <TableCell>{triggerInfo.testPlans}</TableCell>
+      <TableCell className="flex flex-row gap-1">
+        <ColoredCircle
+          quantity={triggerInfo.testErrors ?? 0}
+          type={ComponentType.Error}
+        />
+        <ColoredCircle
+          quantity={triggerInfo.testSuccessfull ?? 0}
+          type={ComponentType.Warning}
+        />
+      </TableCell>
+      <TableCell>
+        {triggerInfo.status === 'valid' ? (
+          <MdCheck className="text-green" />
+        ) : (
+          <MdClose className="text-red" />
+        )}
+      </TableCell>
+    </>
+  );
+};
+
+export default Accordion;

dashboard/src/components/ColoredCircle/ColoredCircle.tsx

@@ -5,16 +5,22 @@ import { ComponentType } from '../ListingComponentItem/ListingComponentItem';
 interface IColoredCircle {
   quantity: number;
   type: ComponentType;
+  className?: string;
 }
 
-const ColoredCircle = ({ quantity, type }: IColoredCircle): JSX.Element => {
+const ColoredCircle = ({
+  quantity,
+  type,
+  className,
+}: IColoredCircle): JSX.Element => {
   const backgroundColor =
-    type === ComponentType.Error ? 'bg-lightRed' : 'bg-yellow';
+    type === ComponentType.Error ? 'bg-lightRed' : 'bg-lightGreen';
   return (
     <div
       className={classNames(
         backgroundColor,
         'rounded-full text-black h-6 min-w-6 flex justify-center px-1',
+        className,
       )}
     >
       <span className="text-sm">{quantity}</span>

dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx

@@ -12,6 +12,7 @@ export interface IListingComponentItem {
 export enum ComponentType {
   Warning,
   Error,
+  Success,
 }
 
 const ListingComponentItem = ({

dashboard/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

dashboard/tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
         "black": '#000000',
         "lightRed": '#FFBBBB',
         "yellow": '#FFD27C',
+        "lightGreen": '#C9FADA',
+        "green": '#1DDF5D',
+        "red": '#E15739'
       }
     },
   },