mockups first iteration

.vscode/settings.json

 {
   "editor.tabSize": 2,
   "files.trimTrailingWhitespace": true,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },

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"
+  }
 }

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>

web/src/Routes.tsx

-// 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>
   )
 }

web/src/features/navbar/index.ts

-export * from './navbar'

web/src/features/navbar/nav-button.tsx

-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>
-  )
-}

web/src/features/navbar/navbar.spec.tsx

-import * as RTL from '@redwoodjs/testing/web'
-
-import { Navbar } from '.'
-
-describe('HomePage', () => {
-  it('renders successfully', () => {
-    RTL.render(<Navbar />)
-
-    RTL.screen.getByText(/Componentes/i)
-  })
-})

web/src/features/navbar/navbar.stories.tsx

-import type { StoryObj } from '@storybook/react'
-
-import { Navbar } from '.'
-
-type Args = {}
-
-export default {
-  component: Navbar,
-}
-
-type Story = StoryObj<Args>
-
-export const Default: Story = {}

web/src/features/navbar/navbar.tsx

-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>
-  )
-}

web/src/features/topbar/index.ts

+export * from './topbar'

web/src/features/topbar/topbar.tsx

+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 />
+    </>
+  )
+}

web/src/layouts/index.ts

-export * from './layout'
+export * from './main-layout'

web/src/layouts/layout.tsx

-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>
-  )
-}

web/src/layouts/main-layout.tsx

+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>
+  )
+}

web/src/models/animation-model.ts

+import { Pattern } from '.'
+
+export interface Animation {
+  id: string
+  patternId: Pattern['id']
+  title: string
+  description: string
+  creationDate: number
+}

web/src/models/implementation-model.ts

+import { Pattern } from '.'
+
+export interface Implementation {
+  id: string
+  patternId: Pattern['id']
+  title: string
+  description: string
+  creationDate: number
+}

web/src/models/index.ts

+export * from './pattern-model'
+export * from './implementation-model'
+export * from './animation-model'

web/src/models/pattern-model.ts

+export interface Pattern {
+  id: string
+  title: string
+  description: string
+  numberOfImplementations: number
+}

web/src/pages/Patterns/data.ts

+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,
+  },
+]

web/src/pages/Patterns/details/index.ts

+export * from './pattern-details'