From 7f819ba3f80480620636d8ddc98045d2ee98a982 Mon Sep 17 00:00:00 2001 From: Mariana Sartorato Date: Mon, 15 Jul 2024 09:03:58 -0300 Subject: [PATCH 1/3] feat(#70): add accordion component from shadcn and radix ui --- dashboard/package.json | 1 + dashboard/pnpm-lock.yaml | 32 +++++++++++++++++++++ dashboard/src/components/ui/collapsible.tsx | 9 ++++++ 3 files changed, 42 insertions(+) create mode 100644 dashboard/src/components/ui/collapsible.tsx diff --git a/dashboard/package.json b/dashboard/package.json index e3400c5..a05ef53 100644 --- a/dashboard/package.json +++ b/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", diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml index cfb8023..eeb16de 100644 --- a/dashboard/pnpm-lock.yaml +++ b/dashboard/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@mui/x-charts': specifier: ^7.7.1 version: 7.9.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-collapsible': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-dropdown-menu': specifier: ^2.1.1 version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1290,6 +1293,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-collapsible@1.1.0': + resolution: {integrity: sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-collection@1.1.0': resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==} peerDependencies: @@ -6280,6 +6296,22 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-collapsible@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) diff --git a/dashboard/src/components/ui/collapsible.tsx b/dashboard/src/components/ui/collapsible.tsx new file mode 100644 index 0000000..a23e7a2 --- /dev/null +++ b/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 } From c1f5172958e55f514174afeb03850c857a2376f5 Mon Sep 17 00:00:00 2001 From: Mariana Sartorato Date: Mon, 15 Jul 2024 15:22:52 -0300 Subject: [PATCH 2/3] feat(#70): add green colored circle --- .../src/components/ColoredCircle/ColoredCircle.tsx | 10 ++++++++-- .../ListingComponentItem/ListingComponentItem.tsx | 1 + dashboard/tailwind.config.js | 3 +++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/dashboard/src/components/ColoredCircle/ColoredCircle.tsx b/dashboard/src/components/ColoredCircle/ColoredCircle.tsx index 5ed863c..0d739f4 100644 --- a/dashboard/src/components/ColoredCircle/ColoredCircle.tsx +++ b/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 (
{quantity} diff --git a/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx b/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx index 6454de8..cb5ab5c 100644 --- a/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx +++ b/dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx @@ -12,6 +12,7 @@ export interface IListingComponentItem { export enum ComponentType { Warning, Error, + Success, } const ListingComponentItem = ({ diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js index 3371669..32ee143 100644 --- a/dashboard/tailwind.config.js +++ b/dashboard/tailwind.config.js @@ -42,6 +42,9 @@ module.exports = { "black": '#000000', "lightRed": '#FFBBBB', "yellow": '#FFD27C', + "lightGreen": '#C9FADA', + "green": '#1DDF5D', + "red": '#E15739' } }, }, From a21434d2687ac2dfd059314d1633e3f07b8cdb72 Mon Sep 17 00:00:00 2001 From: Mariana Sartorato Date: Mon, 15 Jul 2024 10:15:51 -0300 Subject: [PATCH 3/3] 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; + +export default meta; +type Story = StoryObj; + +const itemsBuild: IAccordionItems[] = [ + { + trigger: { + config: 'config', + compiler: 'compiler', + date: 'dd/mm/yyyy', + buildErrors: 5, + buildTime: '500 seconds', + status: 'valid', + }, + content: AAAAa, + }, + { + trigger: { + config: 'config', + compiler: 'compiler', + date: 'dd/mm/yyyy', + buildErrors: 5, + buildTime: '500 seconds', + status: 'valid', + }, + content: AAAAa, + }, + { + trigger: { + config: 'config', + compiler: 'compiler', + date: 'dd/mm/yyyy', + buildErrors: 5, + buildTime: '500 seconds', + status: 'valid', + }, + content: AAAAa, + }, +]; + +const headersBuild = [ + 'config', + 'compiler', + 'date', + 'build errors', + 'build time', + 'status', +]; + +const itemsTest: IAccordionItems[] = [ + { + trigger: { + testPlans: 'aaaaaaa', + testErrors: 5, + testSuccessfull: 12, + status: 'invalid', + }, + content: AAAAa, + }, + { + trigger: { + testPlans: 'aaaaaaasdkjmla', + testErrors: 5, + testSuccessfull: 12, + status: 'valid', + }, + content: BBB, + }, +]; +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 => {header}), + [headers], + ); + + return ( + } + /> + ); +}; + +const AccordionTableBody = ({ + items, + type, +}: ICustomAccordionTableBody): JSX.Element => { + const accordionItems = useMemo( + () => + items.map((item, index) => ( + + <> + + + {type === 'build' ? ( + + ) : ( + + )} + + + {item.content} + + + )), + [items, type], + ); + + return {accordionItems}; +}; + +const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => { + const triggerInfo = trigger as AccordionItemBuildsTrigger; + return ( + <> + {triggerInfo.config} + {triggerInfo.compiler} + {triggerInfo.date} + + + + {triggerInfo.buildTime} + + {triggerInfo.status === 'valid' ? ( + + ) : ( + + )} + + + ); +}; + +const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => { + const triggerInfo = trigger as AccordionItemTestsTrigger; + return ( + <> + {triggerInfo.testPlans} + + + + + + {triggerInfo.status === 'valid' ? ( + + ) : ( + + )} + + + ); +}; + +export default Accordion;