implementations + cleanup

web/src/App.tsx

@@ -4,14 +4,13 @@ import * as theme from 'config/chakra.config'
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
-import FatalErrorPage from 'src/pages/FatalErrorPage'
-
 import { Layout } from './layouts'
+import { DevFatalError } from './pages/fatal-error'
 
 const extendedTheme = extendTheme(theme)
 
 const App = () => (
-  <FatalErrorBoundary page={FatalErrorPage}>
+  <FatalErrorBoundary page={DevFatalError}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <ColorModeScript />
       <ChakraProvider theme={extendedTheme}>

web/src/Routes.tsx

@@ -9,15 +9,18 @@
 
 import { Router, Route } from '@redwoodjs/router'
 
-import { HomePage } from './pages/HomePage'
-import { PatternsPage } from './pages/Patterns'
+import { Home } from './pages/home'
+import { Implementations } from './pages/implementations'
+import { NotFound } from './pages/not-found'
+import { Patterns } from './pages/patterns'
 
 const Routes = () => {
   return (
     <Router>
-      <Route notfound page={NotFoundPage} />
-      <Route path="/" page={HomePage} name="home" />
-      <Route path="/patrones" page={PatternsPage} name="patterns" />
+      <Route notfound page={NotFound} />
+      <Route path="/" page={Home} name="home" />
+      <Route path="/patterns" page={Patterns} name="patterns" />
+      <Route path="/implementations" page={Implementations} name="implementations" />
     </Router>
   )
 }

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

 import * as RTL from '@redwoodjs/testing/web'
 
-import { Navbar } from './navbar'
+import { Navbar } from '.'
 
 describe('HomePage', () => {
   it('renders successfully', () => {

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

 import type { StoryObj } from '@storybook/react'
 
-import { Navbar } from './navbar'
+import { Navbar } from '.'
 
 type Args = {}
 

web/src/features/navbar/navbar.tsx

@@ -23,9 +23,9 @@ export const Navbar: React.FC = () => {
                 Componentes
               </Text>
               <Stack spacing="1">
-                <NavButton label="Patrones" to="/patrones" />
-                <NavButton label="Implementaciones" to="/implementaciones" />
-                <NavButton label="Reportes" to="/reportes" />
+                <NavButton label="Patrones" to="/patterns" />
+                <NavButton label="Implementaciones" to="/implementations" />
+                <NavButton label="Reportes" to="/reports" />
                 <NavButton label="Test" to="/tests" />
               </Stack>
             </Stack>

web/src/layouts/layout.tsx

@@ -5,7 +5,7 @@ import { Box, Container, Flex, HStack } from '@chakra-ui/react'
 import { Navbar } from 'src/features/navbar'
 import Routes from 'src/Routes'
 
-export const Layout: React.FC = () => {
+export const Layout = () => {
   return (
     <HStack>
       <Box bgColor="teal.50">

web/src/pages/HomePage/index.ts

-export * from './home-page'

web/src/pages/Patterns/index.ts

-export * from './patterns-page'
+export * from './patterns'

web/src/pages/Patterns/patterns-page.stories.tsx

-import type { StoryObj } from '@storybook/react'
-
-import { PatternsPage } from './patterns-page'
-
-export default {
-  component: PatternsPage,
-  title: 'Patterns',
-}
-
-export const Default: StoryObj<typeof PatternsPage> = {
-  render: () => <PatternsPage />,
-}

web/src/pages/Patterns/patterns-page.spec.tsx → web/src/pages/Patterns/patterns.spec.tsx

 import * as RTL from '@redwoodjs/testing/web'
 
-import { PatternsPage } from './patterns-page'
+import { Patterns } from '.'
 
-describe('HomePage', () => {
+describe('Patterns page', () => {
   it('renders successfully', () => {
-    RTL.render(<PatternsPage />)
+    RTL.render(<Patterns />)
 
     RTL.screen.getByText('Patrones')
     RTL.screen.getByText(/contenido de patrones/i)

web/src/pages/HomePage/home-page.stories.tsx → web/src/pages/Patterns/patterns.stories.tsx

 import type { StoryObj } from '@storybook/react'
 
-import { HomePage } from './home-page'
+import { Patterns } from '.'
 
 export default {
-  component: HomePage,
-  title: 'Home',
+  component: Patterns,
+  title: 'Patterns page',
 }
 
-export const Default: StoryObj<typeof HomePage> = {
-  render: () => <HomePage />,
+export const Default: StoryObj<typeof Patterns> = {
+  render: () => <Patterns />,
 }

web/src/pages/Patterns/patterns-page.tsx → web/src/pages/Patterns/patterns.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Text, Heading, Box } from '@chakra-ui/react'
 
-export const PatternsPage: React.FC = () => {
+export const Patterns = () => {
   return (
     <Box>
       <Heading as="h1" size="xl" mb="6">

web/src/pages/FatalErrorPage/FatalErrorPage.tsx → web/src/pages/fatal-error/fatal-error.tsx

@@ -10,7 +10,8 @@
 // This import will be automatically removed when building for production
 import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorPage'
 
-export default DevFatalErrorPage ||
+export const DevFatalError =
+  DevFatalErrorPage ||
   (() => (
     <main>
       <style

web/src/pages/fatal-error/index.ts

+export * from './fatal-error'

web/src/pages/HomePage/home-page.spec.tsx → web/src/pages/home/home.spec.tsx

 import * as RTL from '@redwoodjs/testing/web'
 
-import { HomePage } from './home-page'
+import { Home } from '.'
 
-describe('HomePage', () => {
+describe('Home page', () => {
   it('renders successfully', () => {
-    RTL.render(<HomePage />)
+    RTL.render(<Home />)
 
     RTL.screen.getByText(/welcome to my app/i)
     RTL.screen.getByText(

web/src/pages/home/home.stories.tsx

+import type { StoryObj } from '@storybook/react'
+
+import { Home } from '.'
+
+export default {
+  component: Home,
+  title: 'Home page',
+}
+
+export const Default: StoryObj<typeof Home> = {
+  render: () => <Home />,
+}

web/src/pages/HomePage/home-page.tsx → web/src/pages/home/home.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Box, Heading, Text } from '@chakra-ui/react'
 
-export const HomePage: React.FC = () => {
+export const Home = () => {
   return (
     <Box>
       <Heading as="h1" size="xl" mb="6">

web/src/pages/home/index.ts

+export * from './home'

web/src/pages/implementations/implementations.spec.tsx

+import * as RTL from '@redwoodjs/testing/web'
+
+import { Implementations } from '.'
+
+describe('Implementations page', () => {
+  it('renders successfully', () => {
+    RTL.render(<Implementations />)
+
+    RTL.screen.getByText('Implementaciones')
+    RTL.screen.getByText(/contenido de implementaciones/i)
+  })
+})

web/src/pages/implementations/implementations.stories.tsx

+import type { StoryObj } from '@storybook/react'
+
+import { Implementations } from '.'
+
+export default {
+  component: Implementations,
+  title: 'Implementations page',
+}
+
+export const Default: StoryObj<typeof Implementations> = {
+  render: () => <Implementations />,
+}