+
{children}
diff --git a/apps/web/src/components/layout/__tests__/MainLayout.test.tsx b/apps/web/src/components/layout/__tests__/MainLayout.test.tsx
new file mode 100644
index 00000000..a4f0070d
--- /dev/null
+++ b/apps/web/src/components/layout/__tests__/MainLayout.test.tsx
@@ -0,0 +1,14 @@
+import { MainLayout } from '@/components/layout/MainLayout'
+import { render, screen } from '@/test-utils'
+
+describe('main layout tests', () => {
+ it('should render children', async () => {
+ render(
+
+ Hello
+
+ )
+ const appContent = screen.getByRole('article')
+ expect(appContent).toHaveTextContent('Hello')
+ })
+})
diff --git a/apps/web/src/components/nav/MainNav.tsx b/apps/web/src/components/nav/MainNav.tsx
new file mode 100644
index 00000000..748ec82e
--- /dev/null
+++ b/apps/web/src/components/nav/MainNav.tsx
@@ -0,0 +1,148 @@
+import { useRouter } from 'next/compat/router'
+import Link from 'next/link'
+import type { FC } from 'react'
+import { useState } from 'react'
+import AppLogo from '@/components/app-logo/AppLogo'
+import Dropdown from '@/components/dropdown/Dropdown'
+import { DropdownButton } from '@/components/dropdown/DropdownLink'
+import NavLink from '@/components/nav/NavLink'
+import ResponsiveNavLink, { ResponsiveNavButton } from '@/components/nav/ResponsiveNavLink'
+
+export const MainNav: FC = () => {
+ const router = useRouter()
+ const [open, setOpen] = useState(false)
+ const dropdownWidth = 48
+
+ return (
+
+ {/* Primary Navigation Menu */}
+
+
+
+ {/* Logo */}
+
+
+ {/* Navigation Links */}
+
+
+ Home
+
+
+ Products
+
+
+
+
+ {/* Settings Dropdown */}
+
+
+ John Doe
+
+
+
+ }
+ >
+ Logout
+
+
+
+ {/* Hamburger */}
+
+
setOpen(open => !open)}
+ className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
+ >
+
+ {open ? (
+
+
+
+
+
+
+
+ Home
+
+
+ Products
+
+
+
+ {/* Responsive Settings Options */}
+
+
+
+
+
+
John Doe
+
john.doe@example.com
+
+
+
+
+ Profile
+ Settings
+ My Orders
+ Logout
+
+
+
+ )
+}
diff --git a/apps/web/src/components/nav/NavLink.js b/apps/web/src/components/nav/NavLink.js
new file mode 100644
index 00000000..68c7d495
--- /dev/null
+++ b/apps/web/src/components/nav/NavLink.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+const NavLink = ({ active = false, children, ...props }) => (
+
+ {children}
+
+)
+
+export default NavLink
diff --git a/apps/web/src/components/nav/ResponsiveNavLink.js b/apps/web/src/components/nav/ResponsiveNavLink.js
new file mode 100644
index 00000000..a7dde463
--- /dev/null
+++ b/apps/web/src/components/nav/ResponsiveNavLink.js
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+const ResponsiveNavLink = ({ active = false, children, ...props }) => (
+
+ {children}
+
+)
+
+export const ResponsiveNavButton = props => (
+
+)
+
+export default ResponsiveNavLink
diff --git a/apps/web/src/features/home/pages/HomePage.tsx b/apps/web/src/features/home/pages/HomePage.tsx
index eac2ad47..a61954bb 100644
--- a/apps/web/src/features/home/pages/HomePage.tsx
+++ b/apps/web/src/features/home/pages/HomePage.tsx
@@ -1,9 +1,9 @@
-import Image from 'next/image'
import { useTranslation } from 'next-i18next'
import { NextSeo } from 'next-seo'
import type { FC } from 'react'
import { Banner } from '@/components/banner/Banner'
import { MainLayout } from '@/components/layout/MainLayout'
+import { MainNav } from '@/components/nav/MainNav'
import { homeConfig } from '../home.config'
export const HomePage: FC = () => {
@@ -13,22 +13,11 @@ export const HomePage: FC = () => {
<>
I'm the web-app
-
-
-
+
)
diff --git a/apps/web/src/stories/Button.stories.ts b/apps/web/src/stories/Button.stories.ts
new file mode 100644
index 00000000..2dba53af
--- /dev/null
+++ b/apps/web/src/stories/Button.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta
= {
+ title: 'Example/Button',
+ component: Button,
+ tags: ['autodocs'],
+ argTypes: {
+ backgroundColor: {
+ control: 'color',
+ },
+ },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ primary: true,
+ label: 'Button',
+ },
+}
+
+export const Secondary: Story = {
+ args: {
+ label: 'Button',
+ },
+}
+
+export const Large: Story = {
+ args: {
+ size: 'large',
+ label: 'Button',
+ },
+}
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ label: 'Button',
+ },
+}
diff --git a/apps/web/src/stories/Button.tsx b/apps/web/src/stories/Button.tsx
new file mode 100644
index 00000000..a3db8e3d
--- /dev/null
+++ b/apps/web/src/stories/Button.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import './button.css'
+
+interface ButtonProps {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ primary?: boolean
+ /**
+ * What background color to use
+ */
+ backgroundColor?: string
+ /**
+ * How large should the button be?
+ */
+ size?: 'small' | 'medium' | 'large'
+ /**
+ * Button contents
+ */
+ label: string
+ /**
+ * Optional click handler
+ */
+ onClick?: () => void
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+ primary = false,
+ size = 'medium',
+ backgroundColor,
+ label,
+ ...props
+}: ButtonProps) => {
+ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
+ return (
+
+ {label}
+
+
+ )
+}
diff --git a/apps/web/src/stories/Header.stories.ts b/apps/web/src/stories/Header.stories.ts
new file mode 100644
index 00000000..07f87a82
--- /dev/null
+++ b/apps/web/src/stories/Header.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Header } from './Header'
+
+const meta: Meta = {
+ title: 'Example/Header',
+ component: Header,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+ tags: ['autodocs'],
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+ layout: 'fullscreen',
+ },
+}
+
+export default meta
+type Story = StoryObj
+
+export const LoggedIn: Story = {
+ args: {
+ user: {
+ name: 'Jane Doe',
+ },
+ },
+}
+
+export const LoggedOut: Story = {}
diff --git a/apps/web/src/stories/Header.tsx b/apps/web/src/stories/Header.tsx
new file mode 100644
index 00000000..19ca040b
--- /dev/null
+++ b/apps/web/src/stories/Header.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { Button } from './Button'
+import './header.css'
+
+type User = {
+ name: string
+}
+
+interface HeaderProps {
+ user?: User
+ onLogin: () => void
+ onLogout: () => void
+ onCreateAccount: () => void
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+
+)
diff --git a/apps/web/src/stories/Introduction.mdx b/apps/web/src/stories/Introduction.mdx
new file mode 100644
index 00000000..9747cee9
--- /dev/null
+++ b/apps/web/src/stories/Introduction.mdx
@@ -0,0 +1,210 @@
+import { Meta } from '@storybook/blocks'
+import Code from './assets/code-brackets.svg'
+import Colors from './assets/colors.svg'
+import Comments from './assets/comments.svg'
+import Direction from './assets/direction.svg'
+import Flow from './assets/flow.svg'
+import Plugin from './assets/plugin.svg'
+import Repo from './assets/repo.svg'
+import StackAlt from './assets/stackalt.svg'
+
+Configure
+
+
+
+Learn
+
+
+
+
+ Tip Edit the Markdown in stories/Introduction.stories.mdx
+
diff --git a/apps/web/src/stories/Introduction.stories.mdx b/apps/web/src/stories/Introduction.stories.mdx
new file mode 100644
index 00000000..278fcff5
--- /dev/null
+++ b/apps/web/src/stories/Introduction.stories.mdx
@@ -0,0 +1,228 @@
+import { Meta } from '@storybook/blocks'
+import Image from 'next/image'
+
+import Code from './assets/code-brackets.svg'
+import Colors from './assets/colors.svg'
+import Comments from './assets/comments.svg'
+import Direction from './assets/direction.svg'
+import Flow from './assets/flow.svg'
+import Plugin from './assets/plugin.svg'
+import Repo from './assets/repo.svg'
+import StackAlt from './assets/stackalt.svg'
+
+Configure
+
+
+
+Learn
+
+
+
+
+ Tip Edit the Markdown in stories/Introduction.stories.mdx
+
diff --git a/apps/web/src/stories/Page.stories.ts b/apps/web/src/stories/Page.stories.ts
new file mode 100644
index 00000000..931712e9
--- /dev/null
+++ b/apps/web/src/stories/Page.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { within, userEvent } from '@storybook/testing-library'
+
+import { Page } from './Page'
+
+const meta: Meta = {
+ title: 'Example/Page',
+ component: Page,
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+ layout: 'fullscreen',
+ },
+}
+
+export default meta
+type Story = StoryObj
+
+export const LoggedOut: Story = {}
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ const loginButton = await canvas.getByRole('button', {
+ name: /Log in/i,
+ })
+ await userEvent.click(loginButton)
+ },
+}
diff --git a/apps/web/src/stories/Page.tsx b/apps/web/src/stories/Page.tsx
new file mode 100644
index 00000000..6bc6e588
--- /dev/null
+++ b/apps/web/src/stories/Page.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+
+import { Header } from './Header'
+import './page.css'
+
+type User = {
+ name: string
+}
+
+export const Page: React.FC = () => {
+ const [user, setUser] = React.useState()
+
+ return (
+
+ setUser({ name: 'Jane Doe' })}
+ onLogout={() => setUser(undefined)}
+ onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+ />
+
+
+ Pages in Storybook
+
+ We recommend building UIs with a{' '}
+
+ component-driven
+ {' '}
+ process starting with atomic components and ending with pages.
+
+
+ Render pages with mock data. This makes it easy to build and review page states without
+ needing to navigate to them in your app. Here are some handy patterns for managing page
+ data in Storybook:
+
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the
+ "args" of child component stories
+
+
+ Assemble data in the page component from your services. You can mock these services out
+ using Storybook.
+
+
+
+ Get a guided tutorial on component-driven development at{' '}
+
+ Storybook tutorials
+
+ . Read more in the{' '}
+
+ docs
+
+ .
+
+
+
Tip Adjust the width of the canvas with the{' '}
+
+
+
+
+ Viewports addon in the toolbar
+
+
+ )
+}
diff --git a/apps/web/src/stories/assets/code-brackets.svg b/apps/web/src/stories/assets/code-brackets.svg
new file mode 100644
index 00000000..73de9477
--- /dev/null
+++ b/apps/web/src/stories/assets/code-brackets.svg
@@ -0,0 +1 @@
+illustration/code-brackets illustration/colors illustration/comments illustration/direction illustration/flow illustration/plugin illustration/repo illustration/stackalt 
