Merge pull request #1690 from balena-io-modules/add-layout-component

Add Layout component

src/components/Layout/Header.tsx

@@ -0,0 +1,55 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+import theme from '../../theme';
+import { Box, BoxProps } from '../Box';
+import { Flex } from '../Flex';
+import { Button } from '../Button';
+import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
+import styled from 'styled-components';
+
+const BaseHeader = styled(Box)`
+	z-index: 12;
+	position: relative;
+	width: 100%;
+`;
+
+export interface HeaderProps extends BoxProps {
+	rightContent?: JSX.Element[];
+	leftContent?: JSX.Element[];
+	isSidebarCollapsed?: boolean;
+	setIsSidebarCollapsed?: (isSidebarCollapsed: boolean) => void;
+}
+
+export const Header = ({
+	rightContent,
+	leftContent,
+	isSidebarCollapsed,
+	setIsSidebarCollapsed,
+	...props
+}: HeaderProps) => (
+	<BaseHeader width="100%" backgroundColor="secondary.main" {...props}>
+		<Flex justifyContent="space-between" mx={3}>
+			<Flex justifyContent="space-between" alignItems="center" ml={0} mr="auto">
+				{setIsSidebarCollapsed && (
+					<Button
+						plain
+						color={theme.colors.quartenary.main}
+						ml="auto"
+						display={['block', 'block', 'none']}
+						onClick={() => {
+							setIsSidebarCollapsed(!isSidebarCollapsed);
+						}}
+						aria-label="Toggle navigation"
+						fontSize={5}
+					>
+						<FontAwesomeIcon icon={faBars} />
+					</Button>
+				)}
+				{leftContent}
+			</Flex>
+			<Flex justifyContent="space-between" alignItems="center" ml="auto" mr={0}>
+				{rightContent}
+			</Flex>
+		</Flex>
+	</BaseHeader>
+);

src/components/Layout/Layout.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { createTemplate, createStory } from '../../stories/utils';
+import { Layout, LayoutProps } from '.';
+import { Box } from '../Box';
+import { Txt } from '../Txt';
+
+export default {
+	title: 'Core/Layout',
+	component: Layout,
+} as Meta;
+
+const Template = createTemplate<LayoutProps>(Layout);
+
+export const Default = createStory<LayoutProps>(Template, {
+	header: {
+		leftContent: (
+			<Txt color="white" my={1} ml={1} minHeight="10vh">
+				This is a header
+			</Txt>
+		),
+	},
+	leftSider: {
+		menuItems: [
+			{ title: 'foo', href: 'roadmap.balena.io' },
+			{ title: 'bar', href: 'docs.balena.io' },
+		],
+		navLink: Txt,
+		minHeight: '100vh',
+		minWidth: '10vw',
+	},
+	children: (
+		<Box m={1}>
+			The Layout component can give your product a sidebar and a header by
+			passing respective props for either component, or you can pass your own
+			into it. It accepts children (in this case the text you're seeing here),
+			as well as components for the Footer, header for the content (children),
+			and error boundary (if one is not provided, a native rendition one will be
+			used).
+		</Box>
+	),
+});

src/components/Layout/index.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { useBreakpoint } from '../../hooks/useBreakpoint';
+import { default as InternalErrorBoundary } from '../../internal/ErrorBoundary';
+import { Box } from '../Box';
+import { Sidebar, SidebarProps } from '../Sidebar';
+import { Header, HeaderProps } from './Header';
+
+export interface LayoutProps {
+	header?:
+		| JSX.Element
+		| HeaderProps
+		| ((
+				isSidebarCollapsed?: boolean,
+				setIsSidebarCollapsed?: (state: boolean) => void,
+		  ) => JSX.Element);
+	footer?: JSX.Element;
+	leftSider?:
+		| JSX.Element
+		| SidebarProps
+		| ((
+				isSidebarCollapsed?: boolean,
+				setIsSidebarCollapsed?: (state: boolean) => void,
+		  ) => JSX.Element);
+	contentHeader?: JSX.Element;
+	children: JSX.Element;
+	ErrorBoundary?: any; // TODO
+	isSidebarCollapsed?: boolean;
+	setIsSidebarCollapsed?: (state: boolean) => void;
+}
+
+const Grid = styled(Box)<{
+	gridTemplateAreas: string;
+	gridTemplateRows: string;
+	gridTemplateColumns: string;
+}>`
+	display: grid;
+	grid-template-areas: ${(props) => props.gridTemplateAreas};
+	grid-template-rows: ${(props) => props.gridTemplateRows};
+	grid-template-columns: ${(props) => props.gridTemplateColumns};
+`;
+
+const GridItem = styled(Box)<{ gridArea: string }>`
+	grid-area: ${(props) => props.gridArea};
+`;
+
+export const Layout = ({
+	header,
+	footer,
+	leftSider,
+	contentHeader,
+	children,
+	ErrorBoundary,
+	isSidebarCollapsed,
+	setIsSidebarCollapsed,
+}: LayoutProps) => {
+	const templateAreas = `
+		"leftSider header"
+		"leftSider contentHeader"
+		"leftSider content"
+		"footer footer"
+	`;
+
+	const templateRows = `
+		[header header] max-content
+		[contentHeader] max-content
+		[content] minmax(0,1fr)
+		[footer footer] max-content
+	`;
+
+	const templateColumns = `
+		[leftSider] max-content
+		[content] minmax(0, 1fr)
+	`;
+
+	const mobile = useBreakpoint([true, true, false]);
+	const [collapsed, setCollapsed] = React.useState(true);
+
+	React.useEffect(() => {
+		if (mobile) {
+			(setIsSidebarCollapsed ?? setCollapsed)(true);
+		} else {
+			(setIsSidebarCollapsed ?? setCollapsed)(false);
+		}
+	}, [mobile]);
+
+	const ErrorBoundaryComponent = React.useCallback(
+		({ children }: { children: JSX.Element }) => {
+			return ErrorBoundary ? (
+				<ErrorBoundary>{children}</ErrorBoundary>
+			) : (
+				<InternalErrorBoundary>{children}</InternalErrorBoundary>
+			);
+		},
+		[ErrorBoundary],
+	);
+
+	return (
+		<Grid
+			bg="transparent"
+			height="100%"
+			gridTemplateAreas={templateAreas.trim()}
+			gridTemplateRows={templateRows.trim()}
+			gridTemplateColumns={templateColumns}
+		>
+			{header && (
+				<GridItem gridArea="header">
+					<ErrorBoundaryComponent>
+						{React.isValidElement(header) ? (
+							header
+						) : typeof header === 'object' ? (
+							<Header
+								isSidebarCollapsed={isSidebarCollapsed ?? collapsed}
+								setIsSidebarCollapsed={setIsSidebarCollapsed ?? setCollapsed}
+								{...(header as HeaderProps)}
+							/>
+						) : (
+							header(
+								isSidebarCollapsed ?? collapsed,
+								setIsSidebarCollapsed ?? setCollapsed,
+							)
+						)}
+					</ErrorBoundaryComponent>
+				</GridItem>
+			)}
+			{leftSider && (
+				<GridItem
+					style={{
+						overflowY: 'auto',
+					}}
+					gridArea="leftSider"
+				>
+					{React.isValidElement(leftSider) ? (
+						leftSider
+					) : typeof leftSider === 'object' ? (
+						<ErrorBoundaryComponent>
+							<Sidebar
+								{...(!mobile && {
+									isCollapsed: isSidebarCollapsed ?? collapsed,
+									setIsCollapsed: setIsSidebarCollapsed ?? setCollapsed,
+								})}
+								{...(leftSider as SidebarProps)}
+							/>
+						</ErrorBoundaryComponent>
+					) : (
+						leftSider(
+							isSidebarCollapsed ?? collapsed,
+							setIsSidebarCollapsed ?? setCollapsed,
+						)
+					)}
+				</GridItem>
+			)}
+			{contentHeader && (
+				<GridItem gridArea="contentHeader">
+					{<ErrorBoundaryComponent>{contentHeader}</ErrorBoundaryComponent>}
+				</GridItem>
+			)}
+			<GridItem
+				style={{
+					flexDirection: 'column',
+					display: 'flex',
+					overflowY: 'auto',
+				}}
+				gridArea="content"
+			>
+				<ErrorBoundaryComponent>{children}</ErrorBoundaryComponent>
+			</GridItem>
+			{footer && (
+				<GridItem gridArea="footer">
+					<ErrorBoundaryComponent>{footer}</ErrorBoundaryComponent>
+				</GridItem>
+			)}
+		</Grid>
+	);
+};

src/index.ts

@@ -65,6 +65,8 @@ export { Provider } from './components/Provider';
 export { Rating, RatingProps } from './components/Rating';
 export { Search, SearchProps } from './components/Search';
 export { Select, SelectProps } from './components/Select';
+export { Layout, LayoutProps } from './components/Layout';
+export { Header, HeaderProps } from './components/Layout/Header';
 export { Sidebar, SidebarProps } from './components/Sidebar';
 export { Spinner, SpinnerProps } from './components/Spinner';
 export {