refactor: add "Container" component

apps/web/components/organisms/header/header.tsx

@@ -7,49 +7,53 @@ import { DropDownBurgerMenu } from 'organisms/dropDownBurgerMenu/dropDownBurgerM
 import { useHamburgerMenu } from 'organisms/dropDownBurgerMenu/useHamburgerMenu';
 import { HeaderUserLoginContent } from 'organisms/header/headerUserLoginContent/headerUserLoginContent';
 import { HeaderUserLoggedInContent } from 'organisms/header/headerUserLoggedInContent/headerUserLoggedInContent';
-import { VisuallyHidden, Heading } from 'ui';
+import { VisuallyHidden, Heading, Container } from 'ui';
 import Link from 'next/link';
 
 export const Header = () => {
 	const { user, isLoading } = useUser();
 	const { closeBurgerMenu, isBurgerMenuActive, openBurgerMenu } =
 		useHamburgerMenu();
 	return (
-		<header className="flex  px-12 py-4  justify-between items-center w-full sticky shadow-xl z-10">
-			<Link href="/">
-				<Heading
-					tag="h1"
-					size="large"
-					className="font-bold text-2xl whitespace-nowrap mr-20"
-				>
-					Start-Coding
-				</Heading>
-			</Link>
+		<header className="sticky shadow-xl z-10">
+			<Container>
+				<div className="flex justify-between items-center w-full py-4">
+					<Link href="/">
+						<Heading
+							tag="h1"
+							size="large"
+							className="font-bold text-2xl whitespace-nowrap mr-20"
+						>
+							Start-Coding
+						</Heading>
+					</Link>
 
-			<button onClick={openBurgerMenu} className="lg:hidden">
-				<Image src={BurgerIcon} alt="" height={50} width={50} />
-				<VisuallyHidden>burger</VisuallyHidden>
-			</button>
-			{isBurgerMenuActive && (
-				<DropDownBurgerMenu hideBurgerMenu={closeBurgerMenu}>
-					<Navbar>
-						<NavLink link={{ name: 'Zadania', href: '/challenges/all' }} />
-					</Navbar>
-				</DropDownBurgerMenu>
-			)}
-			<div className="hidden lg:flex items-center justify-between w-full">
-				<div className="flex items-center justify-between max-w-sm w-full">
-					<Navbar>
-						<NavLink link={{ name: 'Zadania', href: '/challenges/all' }} />
-					</Navbar>
+					<button onClick={openBurgerMenu} className="lg:hidden">
+						<Image src={BurgerIcon} alt="" height={50} width={50} />
+						<VisuallyHidden>burger</VisuallyHidden>
+					</button>
+					{isBurgerMenuActive && (
+						<DropDownBurgerMenu hideBurgerMenu={closeBurgerMenu}>
+							<Navbar>
+								<NavLink link={{ name: 'Zadania', href: '/challenges/all' }} />
+							</Navbar>
+						</DropDownBurgerMenu>
+					)}
+					<div className="hidden lg:flex items-center justify-between w-full">
+						<div className="flex items-center justify-between max-w-sm w-full">
+							<Navbar>
+								<NavLink link={{ name: 'Zadania', href: '/challenges/all' }} />
+							</Navbar>
+						</div>
+						{!isLoading && !user && <HeaderUserLoginContent />}
+						{!isLoading && user && (
+							<HeaderUserLoggedInContent
+								user={{ avatarSrc: user.picture, nickname: user.nickname }}
+							/>
+						)}
+					</div>
 				</div>
-				{!isLoading && !user && <HeaderUserLoginContent />}
-				{!isLoading && user && (
-					<HeaderUserLoggedInContent
-						user={{ avatarSrc: user.picture, nickname: user.nickname }}
-					/>
-				)}
-			</div>
+			</Container>
 		</header>
 	);
 };

apps/web/components/templates/challenge/single/singleChallenge.tsx

@@ -1,4 +1,4 @@
-import { Button, CategoryTag, Heading, Text } from 'ui';
+import { Button, CategoryTag, Container, Heading, Text } from 'ui';
 import Image from 'next/image';
 import type { Challenge } from '../../../../types/types';
 import { useState } from 'react';
@@ -22,7 +22,7 @@ export const SingleChallengePage = ({
 	const { isLoading, user } = useUser();
 
 	return (
-		<main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+		<Container as="main" id="main">
 			<LoginModal
 				isOpen={!user && !isLoading && showModal}
 				onClose={onClickHandler}
@@ -66,6 +66,6 @@ export const SingleChallengePage = ({
 					</div>
 				</div>
 			</section>
-		</main>
+		</Container>
 	);
 };

apps/web/components/templates/challenges/all/allChallenges.tsx

@@ -1,4 +1,4 @@
-import { Heading, VisuallyHidden } from 'ui';
+import { Heading, VisuallyHidden, Container } from 'ui';
 import { ChallengesList } from 'organisms/challengesList/challengesList';
 import { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
@@ -110,7 +110,7 @@ export const AllChallengesPage = () => {
 					</div>
 				</Dialog>
 			</Transition.Root>
-			<main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+			<Container as="main" id="main">
 				<div className="flex items-baseline justify-between border-b border-gray-200 pt-10 pb-6">
 					<Heading
 						tag="h1"
@@ -144,7 +144,7 @@ export const AllChallengesPage = () => {
 						<ChallengesList challenges={challenges} />
 					</div>
 				</section>
-			</main>
+			</Container>
 		</>
 	);
 };

apps/web/components/templates/homepage/homepage.tsx

@@ -1,3 +1,5 @@
+import { Container } from 'ui';
+
 export const Homepage = () => {
-	return <div>Witaj na stronie głównej</div>;
+	return <Container as="main">Witaj na stronie głównej</Container>;
 };

packages/ui/components/atoms/container/container.stories.tsx

@@ -0,0 +1,16 @@
+import { Container } from './container';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+	title: 'Main Library/atoms/Container',
+	component: Container,
+} as ComponentMeta<typeof Container>;
+
+export const Default: ComponentStory<typeof Container> = (props) => {
+	return <Container {...props} />;
+};
+
+Default.args = {
+	children:
+		'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At, ab nisi cupiditate facilis adipisci dignissimos porro doloremque pariatur iste eveniet quae possimus unde soluta amet velit aperiam fuga aspernatur ut!',
+};

packages/ui/components/atoms/container/container.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type Props = {
+	children: ReactNode;
+	as?: 'div' | 'main';
+	id?: string;
+};
+
+export const Container = ({ children, as: Tag = 'div', id }: Props) => (
+	<Tag className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" id={id}>
+		{children}
+	</Tag>
+);

packages/ui/index.ts

@@ -13,3 +13,4 @@ export * from './components/organisms/dropdownMenu/dropdownMenu';
 export * from './components/molecules/checkbox/checkbox';
 export * from './components/atoms/categoryTag/categoryTag';
 export * from './components/atoms/heading/heading';
+export * from './components/atoms/container/container';