From a21434d2687ac2dfd059314d1633e3f07b8cdb72 Mon Sep 17 00:00:00 2001
From: Mariana Sartorato <mariana.sartorato@profusion.mobi>
Date: Mon, 15 Jul 2024 10:15:51 -0300
Subject: [PATCH] feat(#70): add custom accordion component

---
 .../Accordion/Accordion.stories.tsx           |  98 ++++++++++++
 .../src/components/Accordion/Accordion.tsx    | 141 ++++++++++++++++++
 2 files changed, 239 insertions(+)
 create mode 100644 dashboard/src/components/Accordion/Accordion.stories.tsx
 create mode 100644 dashboard/src/components/Accordion/Accordion.tsx

diff --git a/dashboard/src/components/Accordion/Accordion.stories.tsx b/dashboard/src/components/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..ef8ebec
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/dashboard/src/components/Accordion/Accordion.tsx b/dashboard/src/components/Accordion/Accordion.tsx
new file mode 100644
index 0000000..edb5e0a
--- /dev/null
+++ b/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;