From a3a74f30ca0f6aee4353b5bdaf610f080186e3ed Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 08:21:22 +1000 Subject: [PATCH 01/12] NEW: create page header component --- src/components/PageHeader/PageHeader.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/PageHeader/PageHeader.tsx diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx new file mode 100644 index 0000000..4ac6358 --- /dev/null +++ b/src/components/PageHeader/PageHeader.tsx @@ -0,0 +1,12 @@ +import { FC } from 'react'; +import { StyledPageHeader } from './PageHeader.style'; + +type PageHeaderProps = {} + +export const PageHeader: FC = () => { + return ( + + PageHeader Component + + ); +}; From 4f641e3d6aeaaa17e04bbcc53590cc7699d75ae3 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 08:21:34 +1000 Subject: [PATCH 02/12] NEW: create page header style component --- src/components/PageHeader/PageHeader.style.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/components/PageHeader/PageHeader.style.ts diff --git a/src/components/PageHeader/PageHeader.style.ts b/src/components/PageHeader/PageHeader.style.ts new file mode 100644 index 0000000..136d187 --- /dev/null +++ b/src/components/PageHeader/PageHeader.style.ts @@ -0,0 +1,3 @@ +import styled from 'styled-components'; + +export const StyledPageHeader = styled.div``; From 312fdb3d41cf599b68dda3fa20f30cf43d345c5f Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 08:21:45 +1000 Subject: [PATCH 03/12] NEW: create page header story component --- .../PageHeader/PageHeader.stories.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/PageHeader/PageHeader.stories.ts diff --git a/src/components/PageHeader/PageHeader.stories.ts b/src/components/PageHeader/PageHeader.stories.ts new file mode 100644 index 0000000..2727e8d --- /dev/null +++ b/src/components/PageHeader/PageHeader.stories.ts @@ -0,0 +1,39 @@ +import { PageHeader } from './PageHeader'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta = { + title: 'Components/PageHeader', + component: PageHeader, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const defaultProps = { + +}; + +const disableControls = { + parameters: { + controls: { + disable: true + }, + actions: { + disable: true + }, + } +}; + +export const Demo: Story = { + args: { + ...defaultProps + }, + tags: ['excludeFromSidebar'] +}; + +export const Default: Story = { + args: { + ...defaultProps + }, + ...disableControls +}; From 878f5e870c3181c73c5ec6b3fd354014bae13814 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 08:22:04 +1000 Subject: [PATCH 04/12] NEW: create page header component test --- src/components/PageHeader/PageHeader.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/components/PageHeader/PageHeader.test.tsx diff --git a/src/components/PageHeader/PageHeader.test.tsx b/src/components/PageHeader/PageHeader.test.tsx new file mode 100644 index 0000000..f0521a3 --- /dev/null +++ b/src/components/PageHeader/PageHeader.test.tsx @@ -0,0 +1,13 @@ +import { screen } from '@testing-library/react'; +import { renderWithDeps } from '../../../jest.utils'; +import PageHeader from './PageHeader'; + +describe('', () => { + it('renders', () => { + renderWithDeps(); + + const pageHeader = screen.getByTestId('PageHeader'); + + expect(pageHeader).toBeInTheDocument(); + }); +}); From d7832a62520f01a6e3eb3db2fe1abc0e507bc99b Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 09:28:47 +1000 Subject: [PATCH 05/12] ADD: add logo and menu items array as props --- src/components/PageHeader/PageHeader.tsx | 48 +++++++++++++++++++++--- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 4ac6358..08470ee 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -1,12 +1,48 @@ -import { FC } from 'react'; -import { StyledPageHeader } from './PageHeader.style'; +import { FC } from "react"; +import { NavLink } from "react-router-dom"; +import { StyledPageHeader } from "./PageHeader.style"; -type PageHeaderProps = {} +type MenuItem = { + label: string; + path: string; +}; + +type PageHeaderProps = { + logo: string; // URL or path to the logo image + menuItems: MenuItem[]; // Array of menu items + size?: "small" | "large"; // Optional size prop, if needed +}; -export const PageHeader: FC = () => { +export const PageHeader: FC = ({ + logo = "Path/to/logo.png", + menuItems = [], + size = "large", +}: PageHeaderProps) => { return ( - - PageHeader Component + +
+ {/* Logo Section */} +
+ Logo +
+ {/* Menu Section */} + +
); }; From b228f896f02d730ecb77e0d145197e601a07fd45 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Sat, 24 Aug 2024 09:29:25 +1000 Subject: [PATCH 06/12] UPDATE: integrate the styles of page header --- src/components/PageHeader/PageHeader.style.ts | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/src/components/PageHeader/PageHeader.style.ts b/src/components/PageHeader/PageHeader.style.ts index 136d187..4912caa 100644 --- a/src/components/PageHeader/PageHeader.style.ts +++ b/src/components/PageHeader/PageHeader.style.ts @@ -1,3 +1,51 @@ import styled from 'styled-components'; -export const StyledPageHeader = styled.div``; +export const StyledPageHeader = styled.header<{ size: 'small' | 'large' }>` + .header-container { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: ${props => (props.size === 'small' ? '600px' : '1200px')}; + height: ${props => (props.size === 'small' ? '60px' : '100px')}; + padding: ${props => (props.size === 'small' ? '0.5rem' : '1rem')}; + margin: 0 auto; + background-color: #333; /* Background color for the header */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for header */ + } + + .logo-container { + flex-shrink: 0; + } + + .logo { + height: 100%; + max-height: ${props => (props.size === 'small' ? '50px' : '80px')}; /* Adjust logo size */ + width: auto; + } + + .menu-container { + display: flex; + gap: ${props => (props.size === 'small' ? '0.5rem' : '1rem')}; /* Space between menu items */ + } + + .menu-item { + all: unset; + color: white; /* Text color for menu items */ + font-size: ${props => (props.size === 'small' ? '0.8rem' : '1rem')}; /* Font size based on size prop */ + padding: ${props => (props.size === 'small' ? '0.25rem 0.5rem' : '0.5rem 1rem')}; /* Padding around menu items */ + cursor: pointer; + transition: color 150ms ease-in-out, background-color 150ms ease-in-out; /* Transition for hover effects */ + text-decoration: none; /* Remove underline from links */ + } + + .menu-item:hover { + color: #ddd; /* Hover text color */ + background-color: rgba(255, 255, 255, 0.1); /* Hover background color */ + } + + .menu-item.active { + color: #ffd700; /* Active link color */ + font-weight: bold; /* Bold active link */ + } +`; From ad3ca7ea7ab5a170e55acfa80597b8dfb315a9c6 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Mon, 26 Aug 2024 09:57:10 +1000 Subject: [PATCH 07/12] FIX: fix all linting issues for page header component file --- src/components/PageHeader/PageHeader.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 08470ee..0fc0c3d 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -1,6 +1,6 @@ -import { FC } from "react"; -import { NavLink } from "react-router-dom"; -import { StyledPageHeader } from "./PageHeader.style"; +import { FC } from 'react'; +import { NavLink } from 'react-router-dom'; +import { StyledPageHeader } from './PageHeader.style'; type MenuItem = { label: string; @@ -10,13 +10,13 @@ type MenuItem = { type PageHeaderProps = { logo: string; // URL or path to the logo image menuItems: MenuItem[]; // Array of menu items - size?: "small" | "large"; // Optional size prop, if needed + size?: 'small' | 'large'; // Optional size prop, if needed }; export const PageHeader: FC = ({ - logo = "Path/to/logo.png", + logo = 'Path/to/logo.png', menuItems = [], - size = "large", + size = 'large', }: PageHeaderProps) => { return ( From 37c48b5f08bd895d19e8887fbab421f012e69d5b Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Thu, 29 Aug 2024 07:09:53 +1000 Subject: [PATCH 08/12] ADD: install react router dom for page header navlinks --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 40 insertions(+) diff --git a/package-lock.json b/package-lock.json index 49e805c..100dbd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "lucide-react": "^0.378.0", "polished": "^4.3.1", "react-icons": "^5.2.1", + "react-router-dom": "^6.26.1", "styled-components": "^6.1.8" }, "devDependencies": { @@ -3428,6 +3429,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -13970,6 +13979,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/package.json b/package.json index baf771b..f2f97e5 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "lucide-react": "^0.378.0", "polished": "^4.3.1", "react-icons": "^5.2.1", + "react-router-dom": "^6.26.1", "styled-components": "^6.1.8" }, "peerDependencies": { From 960172ce08ffff721eaf6bff5cbe48fb802fa229 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Thu, 29 Aug 2024 07:10:48 +1000 Subject: [PATCH 09/12] Update TemplateName.test.tsx --- templates/TemplateName.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/TemplateName.test.tsx b/templates/TemplateName.test.tsx index 501e973..7018de2 100644 --- a/templates/TemplateName.test.tsx +++ b/templates/TemplateName.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; -import { renderWithDeps } from '../../../jest.utils.tsx'; -import TemplateName from './TemplateName'; +import { renderWithDeps } from '../jest.utils'; +import { TemplateName } from './TemplateName'; describe('', () => { it('renders', () => { From 416e4f711460a9c94eb4492bf58e6b6510f87e3d Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Thu, 29 Aug 2024 07:12:06 +1000 Subject: [PATCH 10/12] FIX: import issues in page header test file --- src/components/PageHeader/PageHeader.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PageHeader/PageHeader.test.tsx b/src/components/PageHeader/PageHeader.test.tsx index f0521a3..b82f700 100644 --- a/src/components/PageHeader/PageHeader.test.tsx +++ b/src/components/PageHeader/PageHeader.test.tsx @@ -1,10 +1,10 @@ import { screen } from '@testing-library/react'; import { renderWithDeps } from '../../../jest.utils'; -import PageHeader from './PageHeader'; +import { PageHeader } from './PageHeader'; describe('', () => { it('renders', () => { - renderWithDeps(); + renderWithDeps(); const pageHeader = screen.getByTestId('PageHeader'); From 96ad4db4c6134530b196219ffae8902ea79b3cf0 Mon Sep 17 00:00:00 2001 From: Narinder <85366812+Narinder788@users.noreply.github.com> Date: Thu, 29 Aug 2024 07:12:30 +1000 Subject: [PATCH 11/12] UPDATE: remove redundant code and comments --- src/components/PageHeader/PageHeader.tsx | 5 +---- src/index.ts | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 0fc0c3d..96b3835 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -21,19 +21,16 @@ export const PageHeader: FC = ({ return (
- {/* Logo Section */}
Logo
- {/* Menu Section */}