From 0e2ca140451f6177babb6c4e3ea987b9e9cd0cfc Mon Sep 17 00:00:00 2001 From: rohit3171999 Date: Tue, 23 Dec 2025 20:21:34 +0530 Subject: [PATCH 1/3] feat(components/layout): Implement Layout component and LayoutProps interface Created LayoutProps.ts to define the interface for layout properties, specifically typing children. Implemented Layout.tsx to serve as the main application wrapper. Integrated the Header component with placeholder props (user={null} and a console log for logout). Applied Tailwind CSS classes (min-h-screen, bg-base-200, container, mx-auto) to structure the page layout and main content area. BREAKING CHANGE: None Closure --- src/components/layout/Layout/Layout.tsx | 16 ++++++++++++++++ src/components/layout/Layout/LayoutProps.ts | 5 +++++ 2 files changed, 21 insertions(+) create mode 100644 src/components/layout/Layout/Layout.tsx create mode 100644 src/components/layout/Layout/LayoutProps.ts diff --git a/src/components/layout/Layout/Layout.tsx b/src/components/layout/Layout/Layout.tsx new file mode 100644 index 0000000..64970c7 --- /dev/null +++ b/src/components/layout/Layout/Layout.tsx @@ -0,0 +1,16 @@ +import Header from "../Header/Header.tsx"; +import type {LayoutProps} from "./LayoutProps.ts"; + +export function Layout({children}: Readonly) { + return (
+
{ + console.log("Logout clicked"); + }} + /> +
+ {children} +
+
); +} \ No newline at end of file diff --git a/src/components/layout/Layout/LayoutProps.ts b/src/components/layout/Layout/LayoutProps.ts new file mode 100644 index 0000000..54441e9 --- /dev/null +++ b/src/components/layout/Layout/LayoutProps.ts @@ -0,0 +1,5 @@ +import type {ReactNode} from "react"; + +export interface LayoutProps{ + children?: ReactNode; +} \ No newline at end of file From 62f6fe8cb5acc3fd074b4eb596528d1be0012768 Mon Sep 17 00:00:00 2001 From: rohit3171999 Date: Tue, 23 Dec 2025 20:58:47 +0530 Subject: [PATCH 2/3] ### Type of change Feature ### Scope of Changes Layout component and Storybook ### Short Description Add Layout component with Header integration and children support ### Long Description Implemented the Layout component as the main application wrapper with a consistent structure including a Header and main content area. Integrated the existing Header component, added support for rendering children using ReactNode, marked props as read-only to comply with SonarQube rules, added JSDoc comments for clarity, and updated Storybook to visually test the Layout component with realistic child content. ### Breaking Changes None ### Closure Issues N/A --- .../layout/Layout/Layout.stories.tsx | 22 +++++++++++++++++++ src/components/layout/Layout/Layout.tsx | 12 +++++++++- src/components/layout/Layout/LayoutProps.ts | 6 +++++ 3 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/components/layout/Layout/Layout.stories.tsx diff --git a/src/components/layout/Layout/Layout.stories.tsx b/src/components/layout/Layout/Layout.stories.tsx new file mode 100644 index 0000000..d168780 --- /dev/null +++ b/src/components/layout/Layout/Layout.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; + +import { Layout } from './Layout'; + +const meta = { + component: Layout, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: ( +
+

Dashboard Content

+

This content is rendered inside the Layout component.

+
+ ), + } +}; \ No newline at end of file diff --git a/src/components/layout/Layout/Layout.tsx b/src/components/layout/Layout/Layout.tsx index 64970c7..13d3343 100644 --- a/src/components/layout/Layout/Layout.tsx +++ b/src/components/layout/Layout/Layout.tsx @@ -1,12 +1,22 @@ import Header from "../Header/Header.tsx"; import type {LayoutProps} from "./LayoutProps.ts"; +/** + * The main layout component for the application. + * + * This component wraps the application content with a consistent structure, + * including a header and a main content area. + * + * @param props - The component props. + * @param props.children - The child components to render within the main content area. + * @returns The rendered layout structure. + */ export function Layout({children}: Readonly) { return (
{ - console.log("Logout clicked"); + }} />
diff --git a/src/components/layout/Layout/LayoutProps.ts b/src/components/layout/Layout/LayoutProps.ts index 54441e9..7a7d06f 100644 --- a/src/components/layout/Layout/LayoutProps.ts +++ b/src/components/layout/Layout/LayoutProps.ts @@ -1,5 +1,11 @@ import type {ReactNode} from "react"; +/** + * Props for the {@link Layout} component. + */ export interface LayoutProps{ + /** + * The content to be rendered inside the main layout area. + */ children?: ReactNode; } \ No newline at end of file From 2e04d9fcc817ee026af24e4530aa35e3050e6d6f Mon Sep 17 00:00:00 2001 From: Rohit Sharma <94161768+rohit3171999@users.noreply.github.com> Date: Thu, 25 Dec 2025 16:00:18 +0530 Subject: [PATCH 3/3] Update src/components/layout/Layout/LayoutProps.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/components/layout/Layout/LayoutProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Layout/LayoutProps.ts b/src/components/layout/Layout/LayoutProps.ts index 7a7d06f..4bec604 100644 --- a/src/components/layout/Layout/LayoutProps.ts +++ b/src/components/layout/Layout/LayoutProps.ts @@ -3,7 +3,7 @@ import type {ReactNode} from "react"; /** * Props for the {@link Layout} component. */ -export interface LayoutProps{ +export interface LayoutProps { /** * The content to be rendered inside the main layout area. */