diff --git a/.vscode/settings.json b/.vscode/settings.json
index bb0578ddbbf8945ae956250327a1d002e8b2c42b..fca87a631e7cd498e29ac65291a1d23381cf3cfc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
{
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
- "editor.formatOnSave": false,
+ "editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
diff --git a/package.json b/package.json
index 695b49abd25649fde019b109b7828d42aa704192..32ea088497b1a54a4c7435a8b275cc3407e823d8 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
"node": "=18.x",
"yarn": ">=1.15"
},
- "packageManager": "yarn@3.7.0"
+ "packageManager": "yarn@3.7.0",
+ "dependencies": {
+ "react-icons": "^5.0.1"
+ }
}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0d94bfc85fafbd8b806e1fb8e9c71a938e19d9af..37c729cf7c2304bc1a9320f53fee043fbf0f393c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,8 +4,8 @@ import * as theme from 'config/chakra.config'
import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
-import { Layout } from './layouts'
import { DevFatalError } from './pages/fatal-error'
+import Routes from './Routes'
const extendedTheme = extendTheme(theme)
@@ -15,7 +15,7 @@ const App = () => (
<ColorModeScript />
<ChakraProvider theme={extendedTheme}>
<RedwoodApolloProvider>
- <Layout />
+ <Routes />
</RedwoodApolloProvider>
</ChakraProvider>
</RedwoodProvider>
diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 16b9207da0da9f0d4f336e3481cad24ba3e627d0..f278105f8838b343a1b43864226be7ac60d1f920 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -1,30 +1,20 @@
-// In this file, all Page components from 'src/pages` are auto-imported. Nested
-// directories are supported, and should be uppercase. Each subdirectory will be
-// prepended onto the component name.
-//
-// Examples:
-//
-// 'src/pages/HomePage/HomePage.js' -> HomePage
-// 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
-
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
import { Home } from './pages/home'
-import { Implementations } from './pages/implementations'
import { NotFound } from './pages/not-found'
import { Patterns } from './pages/patterns'
-import { Reports } from './pages/reports'
-import { Tests } from './pages/tests'
+import { PatternDetails } from './pages/patterns/details'
+import { MainLayout } from './layouts'
const Routes = () => {
return (
<Router>
+ <Set wrap={MainLayout}>
+ <Route path="/" page={Home} name="home" />
+ <Route path="/patterns" page={Patterns} name="patterns" />
+ <Route path="/pattern/{id}" page={PatternDetails} name="pattern" />
+ </Set>
<Route notfound page={NotFound} />
- <Route path="/" page={Home} name="home" />
- <Route path="/patterns" page={Patterns} name="patterns" />
- <Route path="/implementations" page={Implementations} name="implementations" />
- <Route path="/reports" page={Reports} name="reports" />
- <Route path="/tests" page={Tests} name="tests" />
</Router>
)
}
diff --git a/web/src/features/navbar/index.ts b/web/src/features/navbar/index.ts
deleted file mode 100644
index 06c22c60c51af24ffe5e169276e0d9587d325cfb..0000000000000000000000000000000000000000
--- a/web/src/features/navbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navbar'
diff --git a/web/src/features/navbar/nav-button.tsx b/web/src/features/navbar/nav-button.tsx
deleted file mode 100644
index 00e39e9cfca2b3b065892743d1b30929d39f672b..0000000000000000000000000000000000000000
--- a/web/src/features/navbar/nav-button.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { Button, ButtonProps, Text } from '@chakra-ui/react'
-
-import { Link } from '@redwoodjs/router'
-
-export type NavButtonProps = {
- label: string
- to: string
-} & ButtonProps
-
-export const NavButton: React.FC<NavButtonProps> = ({
- label,
- to,
- ...props
-}) => {
- return (
- <Link to={to}>
- <Button {...props} justifyContent="start" w="full">
- <Text>{label}</Text>
- </Button>
- </Link>
- )
-}
diff --git a/web/src/features/navbar/navbar.spec.tsx b/web/src/features/navbar/navbar.spec.tsx
deleted file mode 100644
index f12f88698b8bf8f8759a606b30271da02062cb74..0000000000000000000000000000000000000000
--- a/web/src/features/navbar/navbar.spec.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as RTL from '@redwoodjs/testing/web'
-
-import { Navbar } from '.'
-
-describe('HomePage', () => {
- it('renders successfully', () => {
- RTL.render(<Navbar />)
-
- RTL.screen.getByText(/Componentes/i)
- })
-})
diff --git a/web/src/features/navbar/navbar.stories.tsx b/web/src/features/navbar/navbar.stories.tsx
deleted file mode 100644
index 4d79000e99c1a712075600176cf744d2c62005ab..0000000000000000000000000000000000000000
--- a/web/src/features/navbar/navbar.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { StoryObj } from '@storybook/react'
-
-import { Navbar } from '.'
-
-type Args = {}
-
-export default {
- component: Navbar,
-}
-
-type Story = StoryObj<Args>
-
-export const Default: Story = {}
diff --git a/web/src/features/navbar/navbar.tsx b/web/src/features/navbar/navbar.tsx
deleted file mode 100644
index 2d0723d37c4f9d9a8ca1e9d1787c1c876fce0b48..0000000000000000000000000000000000000000
--- a/web/src/features/navbar/navbar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Flex, Stack, Text } from '@chakra-ui/react'
-
-import { NavButton } from './nav-button'
-
-export const Navbar: React.FC = () => {
- return (
- <Flex as="section" minH="100vh" bg="bg.canvas">
- <Flex
- flex="1"
- bg="bg.surface"
- boxShadow="sm"
- maxW={{ base: 'full', sm: 'xs' }}
- py={{ base: '6', sm: '8' }}
- px={{ base: '4', sm: '6' }}
- >
- <Stack justify="space-between" spacing="1" width="full">
- <Stack spacing="8" shouldWrapChildren>
- <Stack spacing="1">
- <NavButton label="Inicio" to="/" />
- </Stack>
- <Stack>
- <Text textStyle="sm" color="fg.subtle" fontWeight="medium">
- Componentes
- </Text>
- <Stack spacing="1">
- <NavButton label="Patrones" to="/patterns" />
- <NavButton label="Implementaciones" to="/implementations" />
- <NavButton label="Reportes" to="/reports" />
- <NavButton label="Test" to="/tests" />
- </Stack>
- </Stack>
- </Stack>
- </Stack>
- </Flex>
- </Flex>
- )
-}
diff --git a/web/src/features/topbar/index.ts b/web/src/features/topbar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6a647c069b7442caa9019233fc5670a9ae2b373
--- /dev/null
+++ b/web/src/features/topbar/index.ts
@@ -0,0 +1 @@
+export * from './topbar'
diff --git a/web/src/features/topbar/topbar.tsx b/web/src/features/topbar/topbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8db41162dd7dd0764b8fba73d94e8ae7eb1b95a5
--- /dev/null
+++ b/web/src/features/topbar/topbar.tsx
@@ -0,0 +1,29 @@
+import { Divider, HStack, Icon, IconButton, Text } from '@chakra-ui/react'
+import { Link, back, routes, useLocation } from '@redwoodjs/router'
+import React from 'react'
+import { FaArrowLeft } from 'react-icons/fa'
+
+export const Topbar: React.FC = () => {
+ const asd = useLocation()
+ console.log({ asd })
+ const handleOnBack = () => {
+ back()
+ }
+ return (
+ <>
+ <HStack h="10" w="full" justifyContent="space-between">
+ <IconButton
+ aria-label="back"
+ variant="unstyled"
+ onClick={handleOnBack}
+ icon={<Icon as={FaArrowLeft} />}
+ />
+
+ <Link to={routes.patterns()}>
+ <Text textAlign="right">Patrones</Text>
+ </Link>
+ </HStack>
+ <Divider />
+ </>
+ )
+}
diff --git a/web/src/layouts/index.ts b/web/src/layouts/index.ts
index 626835ba5575bbebdc8c22a0028b68425606297d..e274993bd46343e3b51be37b72b409ef093845da 100644
--- a/web/src/layouts/index.ts
+++ b/web/src/layouts/index.ts
@@ -1 +1 @@
-export * from './layout'
+export * from './main-layout'
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
deleted file mode 100644
index c9bd342d8ee3f0f6e95dd77bc1132aa3465f4130..0000000000000000000000000000000000000000
--- a/web/src/layouts/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { Box, Container, Flex, HStack } from '@chakra-ui/react'
-
-import { Navbar } from 'src/features/navbar'
-import Routes from 'src/Routes'
-
-export const Layout = () => {
- return (
- <HStack>
- <Box bgColor="teal.50">
- <Navbar />
- </Box>
- <Flex h="100vh" flexGrow="1" bgColor="white">
- <Container maxW="lg" py="10" flexGrow="1">
- <Routes />
- </Container>
- </Flex>
- </HStack>
- )
-}
diff --git a/web/src/layouts/main-layout.tsx b/web/src/layouts/main-layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5f7761ec18dde0aadcbf57115958a47f6c5bb56
--- /dev/null
+++ b/web/src/layouts/main-layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { Box, Flex, VStack } from '@chakra-ui/react'
+
+import { Topbar } from 'src/features/topbar'
+
+export type MainLayoutProps = {
+ children?: React.ReactNode
+}
+
+export const MainLayout = ({ children }: MainLayoutProps) => {
+ return (
+ <VStack w="full" alignItems="center">
+ <Topbar />
+ <Flex h="100vh" w="full" justifyContent="center" bgColor="white">
+ <Box>{children}</Box>
+ </Flex>
+ </VStack>
+ )
+}
diff --git a/web/src/models/animation-model.ts b/web/src/models/animation-model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..077f24f1f016650bf65e133c1bd3acb3218d7a07
--- /dev/null
+++ b/web/src/models/animation-model.ts
@@ -0,0 +1,9 @@
+import { Pattern } from '.'
+
+export interface Animation {
+ id: string
+ patternId: Pattern['id']
+ title: string
+ description: string
+ creationDate: number
+}
diff --git a/web/src/models/implementation-model.ts b/web/src/models/implementation-model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c2bce86d2cc3f0c9974227c9e7ac56bf7e97537
--- /dev/null
+++ b/web/src/models/implementation-model.ts
@@ -0,0 +1,9 @@
+import { Pattern } from '.'
+
+export interface Implementation {
+ id: string
+ patternId: Pattern['id']
+ title: string
+ description: string
+ creationDate: number
+}
diff --git a/web/src/models/index.ts b/web/src/models/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6821c0634ba01837957804bfbde3235cdba35d57
--- /dev/null
+++ b/web/src/models/index.ts
@@ -0,0 +1,3 @@
+export * from './pattern-model'
+export * from './implementation-model'
+export * from './animation-model'
diff --git a/web/src/models/pattern-model.ts b/web/src/models/pattern-model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..447786399566a001b11af052ea36c1d403e4acf1
--- /dev/null
+++ b/web/src/models/pattern-model.ts
@@ -0,0 +1,6 @@
+export interface Pattern {
+ id: string
+ title: string
+ description: string
+ numberOfImplementations: number
+}
diff --git a/web/src/pages/Patterns/data.ts b/web/src/pages/Patterns/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c256cb524b17237ec75359006cbc3ea9f97a6983
--- /dev/null
+++ b/web/src/pages/Patterns/data.ts
@@ -0,0 +1,234 @@
+import { Implementation } from 'src/models/implementation-model'
+import { Pattern } from 'src/models/pattern-model'
+
+export const patterns: Pattern[] = [
+ {
+ id: '1',
+ title: 'API Gateway',
+ description:
+ 'El patrón de Gateway API actúa como un punto de entrada para las solicitudes de clientes y enruta esas solicitudes a los servicios adecuados en la arquitectura de microservicios. Proporciona una capa de abstracción que oculta la complejidad de la arquitectura subyacente de microservicios al cliente, y también puede proporcionar funciones como autenticación, autorización, y equilibrio de carga.',
+ numberOfImplementations: 3,
+ },
+ {
+ id: '2',
+ title: 'Orquestación de Microservicios',
+ description:
+ 'Este patrón implica la coordinación de múltiples microservicios para llevar a cabo una tarea empresarial compleja. Puede ser implementado utilizando herramientas de orquestación como Kubernetes, Docker Swarm o Apache Mesos, que gestionan la implementación, escalado y administración de los microservicios. La orquestación de microservicios es fundamental para garantizar que los servicios trabajen juntos de manera cohesiva y coordinada.',
+ numberOfImplementations: 2,
+ },
+ {
+ id: '3',
+ title: 'Service Discovery',
+ description:
+ 'En una arquitectura de microservicios dinámica, los servicios pueden aparecer y desaparecer debido a la escalabilidad automática o a la falla de instancias. El patrón de autodescubrimiento permite que los servicios descubran dinámicamente la ubicación (por ejemplo, la dirección IP y el puerto) de otros servicios con los que necesitan comunicarse, lo que facilita la resiliencia y la adaptabilidad en un entorno de microservicios.',
+ numberOfImplementations: 4,
+ },
+]
+
+export const implementations: Implementation[] = [
+ // pattern 1
+ {
+ id: '1',
+ patternId: '1',
+ title: 'Microservicio 1 patron 1',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '2',
+ patternId: '1',
+ title: 'Microservicio 2 patron 1',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '3',
+ patternId: '1',
+ title: 'Microservicio 3 patron 1',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '4',
+ patternId: '1',
+ title: 'Microservicio 4 patron 1',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ // pattern 2
+ {
+ id: '5',
+ patternId: '2',
+ title: 'Microservicio 1 patron 2',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '6',
+ patternId: '2',
+ title: 'Microservicio 2 patron 2',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '7',
+ patternId: '2',
+ title: 'Microservicio 3 patron 2',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '8',
+ patternId: '2',
+ title: 'Microservicio 4 patron 2',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '9',
+ patternId: '2',
+ title: 'Microservicio 5 patron 2',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ // pattern 3
+ {
+ id: '10',
+ patternId: '3',
+ title: 'Microservicio 1 patron 3',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '11',
+ patternId: '3',
+ title: 'Microservicio 2 patron 3',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '12',
+ patternId: '3',
+ title: 'Microservicio 3 patron 3',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '14',
+ patternId: '3',
+ title: 'Microservicio 4 patron 3',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '15',
+ patternId: '3',
+ title: 'Microservicio 5 patron 3',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+]
+
+export const animations: Implementation[] = [
+ // pattern 1
+ {
+ id: '1',
+ patternId: '1',
+ title: 'Animacion 1 patron 1',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '2',
+ patternId: '1',
+ title: 'Animacion 2 patron 1',
+ description: 'Im an amazing microservice',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '3',
+ patternId: '1',
+ title: 'Animacion 3 patron 1',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '4',
+ patternId: '1',
+ title: 'Animacion 4 patron 1',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ // pattern 2
+ {
+ id: '5',
+ patternId: '2',
+ title: 'Animacion 1 patron 2',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '6',
+ patternId: '2',
+ title: 'Animacion 2 patron 2',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '7',
+ patternId: '2',
+ title: 'Animacion 3 patron 2',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '8',
+ patternId: '2',
+ title: 'Animacion 4 patron 2',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '9',
+ patternId: '2',
+ title: 'Animacion 5 patron 2',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ // pattern 3
+ {
+ id: '10',
+ patternId: '3',
+ title: 'Animacion 1 patron 3',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '11',
+ patternId: '3',
+ title: 'Animacion 2 patron 3',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '12',
+ patternId: '3',
+ title: 'Animacion 3 patron 3',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '14',
+ patternId: '3',
+ title: 'Animacion 4 patron 3',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+ {
+ id: '15',
+ patternId: '3',
+ title: 'Animacion 5 patron 3',
+ description: 'Im an amazing animation',
+ creationDate: 1708273884329,
+ },
+]
diff --git a/web/src/pages/Patterns/details/index.ts b/web/src/pages/Patterns/details/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..606aa734ec9d3bf6c745ec69340a0d2d0c4ae6af
--- /dev/null
+++ b/web/src/pages/Patterns/details/index.ts
@@ -0,0 +1 @@
+export * from './pattern-details'
diff --git a/web/src/pages/Patterns/details/pattern-details.tsx b/web/src/pages/Patterns/details/pattern-details.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..70bc9ecd1f14a242c4f1916e932914d4156452b5
--- /dev/null
+++ b/web/src/pages/Patterns/details/pattern-details.tsx
@@ -0,0 +1,35 @@
+import { Heading, Text, VStack } from '@chakra-ui/react'
+import { useParams } from '@redwoodjs/router'
+import React from 'react'
+import { patterns } from '../data'
+import { Implementations } from 'src/pages/implementations'
+import { Animations } from 'src/pages/animations'
+
+export const PatternDetails: React.FC = () => {
+ const { id } = useParams()
+ const pattern = patterns.find((p) => p.id === id)
+
+ if (!pattern) {
+ return null
+ }
+ return (
+ <VStack w="full" px="4" aria-label="hey" alignItems="flex-start">
+ <Heading as="h2">{pattern.title}</Heading>
+ <Text>{pattern.description}</Text>
+ <VStack w="full" justifyContent="center" spacing="2">
+ <VStack alignItems="flex-start">
+ <Text pl="8" mb="-4" fontWeight="bold">
+ Implementaciones
+ </Text>
+ <Implementations patternId={pattern.id} />
+ </VStack>
+ <VStack alignItems="flex-start">
+ <Text pl="8" mb="-4" fontWeight="bold">
+ Animaciones
+ </Text>
+ <Animations patternId={pattern.id} />
+ </VStack>
+ </VStack>
+ </VStack>
+ )
+}
diff --git a/web/src/pages/Patterns/index.ts b/web/src/pages/Patterns/index.ts
index 0117504f049e844d300714cb68149c5dc10b10a7..37f11590a90cf9024c16709423f35e167b55ac8c 100644
--- a/web/src/pages/Patterns/index.ts
+++ b/web/src/pages/Patterns/index.ts
@@ -1 +1,2 @@
export * from './patterns'
+export * from './data'
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 570187a1b49a5888904a81bcb985492bf62d9355..01c70ca8326bfd9c1691921ec28ab75ae826c021 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -1,16 +1,104 @@
import React from 'react'
-import { Text, Heading, Box } from '@chakra-ui/react'
+import {
+ Heading,
+ VStack,
+ TableContainer,
+ Table,
+ Thead,
+ Tr,
+ Th,
+ Tbody,
+ Td,
+ Text,
+ TableCaption,
+ Tooltip,
+ HStack,
+ Icon,
+ IconButton,
+} from '@chakra-ui/react'
+import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
+import { Link, routes } from '@redwoodjs/router'
+import { patterns } from '.'
+import { Pattern } from 'src/models'
+
+const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
export const Patterns = () => {
return (
- <Box>
- <Heading as="h1" size="xl" mb="6">
+ <VStack alignItems="flex-start" spacing="0">
+ <Heading as="h2" px="6">
Patrones
</Heading>
- <Text fontSize="lg" mb="4">
- Contenido de patrones
- </Text>
- </Box>
+ <TableContainer>
+ <Table variant="simple" size="lg">
+ <TableCaption>Patrones disponibles</TableCaption>
+ <Thead>
+ <Tr>
+ {tableHeaders.map((header, index) => (
+ <Th key={`th-${index}`}>{header}</Th>
+ ))}
+ </Tr>
+ </Thead>
+ <Tbody>
+ {patterns.map((pattern, index) => (
+ <Tr key={`pattern-${pattern.title}-${index}`}>
+ <Link to={routes.pattern({ id: pattern.id })}>
+ <Td>{pattern.title}</Td>
+ </Link>
+ <Td>
+ <Tooltip label={pattern.description} hasArrow>
+ <Text isTruncated maxW="sm">
+ {pattern.description}
+ </Text>
+ </Tooltip>
+ </Td>
+ <Td>
+ <Text textAlign="center">
+ {pattern.numberOfImplementations}
+ </Text>
+ </Td>
+ <Td>
+ <ActionsRow pattern={pattern} />
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </VStack>
+ )
+}
+
+type ActionsRowProps = {
+ pattern: Pattern
+}
+const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
+ return (
+ <HStack>
+ {/* Linter yells but is fine https://github.com/redwoodjs/redwood/issues/1742 */}
+ <Link to={routes.pattern({ id: pattern.id })}>
+ <IconButton
+ aria-label="view pattern"
+ variant="unstyled"
+ icon={<Icon as={FaEye} />}
+ />
+ </Link>
+ <IconButton
+ aria-label="add pattern"
+ variant="unstyled"
+ icon={<Icon as={FaPlus} />}
+ />
+ <IconButton
+ aria-label="edit pattern"
+ variant="unstyled"
+ icon={<Icon as={FaEdit} />}
+ />
+ <IconButton
+ aria-label="delete pattern"
+ variant="unstyled"
+ icon={<Icon as={FaTrash} />}
+ />
+ </HStack>
)
}
diff --git a/web/src/pages/animations/animations.tsx b/web/src/pages/animations/animations.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a93c0a95230a8cdda79157e03d674218e317f45c
--- /dev/null
+++ b/web/src/pages/animations/animations.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { Animation, Pattern } from 'src/models'
+import { animations, patterns } from '../patterns'
+import {
+ Table,
+ TableCaption,
+ TableContainer,
+ Tbody,
+ Td,
+ Th,
+ Text,
+ Thead,
+ Tooltip,
+ Tr,
+ HStack,
+ IconButton,
+ Icon,
+} from '@chakra-ui/react'
+import { FaPlay, FaTrash } from 'react-icons/fa'
+
+const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']
+
+export type AnimationsProps = {
+ patternId: Pattern['id']
+}
+export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
+ const pattern = patterns.find((p) => p.id === patternId)
+ const patternAnimations = animations.filter(
+ (animation) => animation.patternId === patternId
+ )
+
+ if (!pattern || !patternAnimations) {
+ return null
+ }
+
+ return (
+ <TableContainer>
+ <Table variant="simple" size="lg">
+ <TableCaption>Animaciones disponibles de {pattern.title}</TableCaption>
+ <Thead>
+ <Tr>
+ {tableHeaders.map((header, index) => (
+ <Th key={`th-${index}`}>{header}</Th>
+ ))}
+ </Tr>
+ </Thead>
+ <Tbody>
+ {patternAnimations.map((animation, index) => (
+ <Tr key={`animation-${animation.title}-${index}`}>
+ <Td>{animation.title}</Td>
+ <Td>
+ <Tooltip label={animation.description} hasArrow>
+ <Text isTruncated maxW="sm">
+ {animation.description}
+ </Text>
+ </Tooltip>
+ </Td>
+ <Td>{new Date(animation.creationDate).toUTCString()}</Td>
+ <Td>
+ <ActionsRow _animation={animation} />
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ )
+}
+
+type ActionsRowProps = {
+ _animation: Animation
+}
+const ActionsRow: React.FC<ActionsRowProps> = ({ _animation }) => {
+ return (
+ <HStack>
+ <IconButton
+ aria-label="view animation"
+ variant="unstyled"
+ icon={<Icon as={FaPlay} />}
+ />
+ <IconButton
+ aria-label="delete animation"
+ variant="unstyled"
+ icon={<Icon as={FaTrash} />}
+ />
+ </HStack>
+ )
+}
diff --git a/web/src/pages/animations/index.ts b/web/src/pages/animations/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c91b0e87664fda13d631ddb42414da8d0120a98e
--- /dev/null
+++ b/web/src/pages/animations/index.ts
@@ -0,0 +1 @@
+export * from './animations'
diff --git a/web/src/pages/home/home.tsx b/web/src/pages/home/home.tsx
index 3c7c104652d4a4f0a46509b97e1cb618199dde74..b50bc5a64791e02aa0d9176a3d8e2f4956d9922a 100644
--- a/web/src/pages/home/home.tsx
+++ b/web/src/pages/home/home.tsx
@@ -6,10 +6,11 @@ export const Home = () => {
return (
<Box>
<Heading as="h1" size="xl" mb="6">
- Welcome to My App
+ Testing de Microservicios
</Heading>
<Text fontSize="lg" mb="4">
- This is a simple example of how to add content to your app.
+ En este lugar se describe lo que hace la aplicacion, el objetivo del
+ proyect, etc...
</Text>
</Box>
)
diff --git a/web/src/pages/implementations/implementations.tsx b/web/src/pages/implementations/implementations.tsx
index 53b78a5c6330e8d83dff01f2787ba39e6836f0a1..c7e2234f56e2dbc720257bcf25f40f1073158a38 100644
--- a/web/src/pages/implementations/implementations.tsx
+++ b/web/src/pages/implementations/implementations.tsx
@@ -1,16 +1,98 @@
import React from 'react'
-import { Text, Heading, Box } from '@chakra-ui/react'
+import {
+ Text,
+ TableContainer,
+ Table,
+ TableCaption,
+ Thead,
+ Tr,
+ Th,
+ Tbody,
+ Td,
+ Tooltip,
+ HStack,
+ IconButton,
+ Icon,
+} from '@chakra-ui/react'
+import { implementations, patterns } from '../patterns'
+import { FaEye, FaPlay, FaTrash } from 'react-icons/fa'
+import { Implementation, Pattern } from 'src/models'
-export const Implementations = () => {
+const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']
+
+export type ImplementationsProps = {
+ patternId: Pattern['id']
+}
+export const Implementations: React.FC<ImplementationsProps> = ({
+ patternId,
+}) => {
+ const pattern = patterns.find((p) => p.id === patternId)
+ const patternImplementations = implementations.filter(
+ (implementation) => implementation.patternId === patternId
+ )
+
+ if (!pattern || !patternImplementations) {
+ // TODO: empty state
+ return null
+ }
+
+ return (
+ <TableContainer>
+ <Table variant="simple" size="lg">
+ <TableCaption>
+ Implementaciones disponibles de {pattern.title}
+ </TableCaption>
+ <Thead>
+ <Tr>
+ {tableHeaders.map((header, index) => (
+ <Th key={`th-${index}`}>{header}</Th>
+ ))}
+ </Tr>
+ </Thead>
+ <Tbody>
+ {patternImplementations.map((implementation, index) => (
+ <Tr key={`implementation-${implementation.title}-${index}`}>
+ <Td>{implementation.title}</Td>
+ <Td>
+ <Tooltip label={implementation.description} hasArrow>
+ <Text isTruncated maxW="sm">
+ {implementation.description}
+ </Text>
+ </Tooltip>
+ </Td>
+ <Td>{new Date(implementation.creationDate).toUTCString()}</Td>
+ <Td>
+ <ActionsRow _implementation={implementation} />
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ )
+}
+type ActionsRowProps = {
+ _implementation: Implementation
+}
+const ActionsRow: React.FC<ActionsRowProps> = ({ _implementation }) => {
return (
- <Box>
- <Heading as="h1" size="xl" mb="6">
- Implementaciones
- </Heading>
- <Text fontSize="lg" mb="4">
- Contenido de implementaciones
- </Text>
- </Box>
+ <HStack>
+ <IconButton
+ aria-label="view implementation"
+ variant="unstyled"
+ icon={<Icon as={FaEye} />}
+ />
+ <IconButton
+ aria-label="test implementation"
+ variant="unstyled"
+ icon={<Icon as={FaPlay} />}
+ />
+ <IconButton
+ aria-label="delete implementation"
+ variant="unstyled"
+ icon={<Icon as={FaTrash} />}
+ />
+ </HStack>
)
}
diff --git a/yarn.lock b/yarn.lock
index 638cfa6cc7d35cc856d4e4c916a98516eeb1e57a..540f92dfb1ba4d2f38d7f732e1145550abae1af6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20980,6 +20980,15 @@ __metadata:
languageName: node
linkType: hard
+"react-icons@npm:^5.0.1":
+ version: 5.0.1
+ resolution: "react-icons@npm:5.0.1"
+ peerDependencies:
+ react: "*"
+ checksum: 717022d93a3b2b30082f86fbb3c725a94a603b3fa1c611533439cc886f691a13b1833c30446d257a177667779239eac57411fa7516d8a4787bd735e965c9f63d
+ languageName: node
+ linkType: hard
+
"react-is@npm:18.1.0":
version: 18.1.0
resolution: "react-is@npm:18.1.0"
@@ -21735,6 +21744,7 @@ __metadata:
dependencies:
"@redwoodjs/cli-storybook": 6.5.1
"@redwoodjs/core": 6.5.1
+ react-icons: ^5.0.1
languageName: unknown
linkType: soft