From dea6e8e45360d53d09c4699f63abad25c430ebb9 Mon Sep 17 00:00:00 2001
From: bruno <bruno@process.st>
Date: Tue, 12 Dec 2023 20:16:16 -0300
Subject: [PATCH] add navbar
---
web/src/features/navbar/index.ts | 1 +
web/src/features/navbar/nav-button.tsx | 24 +++++++++++++
web/src/features/navbar/navbar.spec.tsx | 11 ++++++
web/src/features/navbar/navbar.stories.tsx | 13 +++++++
web/src/features/navbar/navbar.tsx | 37 ++++++++++++++++++++
web/src/layouts/layout.tsx | 5 ++-
web/src/pages/HomePage/home-page.stories.tsx | 6 ++--
7 files changed, 92 insertions(+), 5 deletions(-)
create mode 100644 web/src/features/navbar/index.ts
create mode 100644 web/src/features/navbar/nav-button.tsx
create mode 100644 web/src/features/navbar/navbar.spec.tsx
create mode 100644 web/src/features/navbar/navbar.stories.tsx
create mode 100644 web/src/features/navbar/navbar.tsx
diff --git a/web/src/features/navbar/index.ts b/web/src/features/navbar/index.ts
new file mode 100644
index 0000000..06c22c6
--- /dev/null
+++ b/web/src/features/navbar/index.ts
@@ -0,0 +1 @@
+export * from './navbar'
diff --git a/web/src/features/navbar/nav-button.tsx b/web/src/features/navbar/nav-button.tsx
new file mode 100644
index 0000000..00e39e9
--- /dev/null
+++ b/web/src/features/navbar/nav-button.tsx
@@ -0,0 +1,24 @@
+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
new file mode 100644
index 0000000..4c1caf2
--- /dev/null
+++ b/web/src/features/navbar/navbar.spec.tsx
@@ -0,0 +1,11 @@
+import * as RTL from '@redwoodjs/testing/web'
+
+import { Navbar } from './navbar'
+
+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
new file mode 100644
index 0000000..9080cc7
--- /dev/null
+++ b/web/src/features/navbar/navbar.stories.tsx
@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react'
+
+import { Navbar } from './navbar'
+
+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
new file mode 100644
index 0000000..796891c
--- /dev/null
+++ b/web/src/features/navbar/navbar.tsx
@@ -0,0 +1,37 @@
+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="/patrones" />
+ <NavButton label="Implementaciones" to="/implementaciones" />
+ <NavButton label="Reportes" to="/reportes" />
+ <NavButton label="Test" to="/tests" />
+ </Stack>
+ </Stack>
+ </Stack>
+ </Stack>
+ </Flex>
+ </Flex>
+ )
+}
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
index 0ee887f..35e9390 100644
--- a/web/src/layouts/layout.tsx
+++ b/web/src/layouts/layout.tsx
@@ -2,12 +2,15 @@ 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: React.FC = () => {
return (
<HStack>
- <Box bgColor="teal.50">{/* navbar */}</Box>
+ <Box bgColor="teal.50">
+ <Navbar />
+ </Box>
<Flex h="100vh" flexGrow="1" bgColor="white">
<Container maxW="lg" py="10" flexGrow="1">
<Routes />
diff --git a/web/src/pages/HomePage/home-page.stories.tsx b/web/src/pages/HomePage/home-page.stories.tsx
index 0836686..05b5ce7 100644
--- a/web/src/pages/HomePage/home-page.stories.tsx
+++ b/web/src/pages/HomePage/home-page.stories.tsx
@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
import { HomePage } from './home-page'
-const meta: Meta = {
+export default {
component: HomePage,
title: 'Home',
}
-export default meta
-
export const Default: StoryObj<typeof HomePage> = {
render: () => <HomePage />,
}
--
GitLab