feat: add compound layout component (#1363)

* feat: add compound layout component

* chore: add PageBoundary

* test: add Layout to storybook

* refactor: finalize compound layout

* feat: add background to banner

* test: update stories

* move PageContainer into Layout

* refactor: move header out, fix storybook

* fix storybook

* feat(Banner): add className prop

* chore: add classname as optional

---------

Co-authored-by: valid <[email protected]>

.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/nextjs"
+import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -20,5 +20,5 @@ const config: StorybookConfig = {
       disable: true,
     },
   },
-}
-export default config
+};
+export default config;

src/v2/components/GuildAvatar.tsx

@@ -8,10 +8,15 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const GuildAvatar = memo(({ address, className }: Props) => {
+  const addressEnding = address
+    ?.toLowerCase()
+    ?.slice(-2) as keyof typeof addressAvatarPairs
+
   const Avatar = dynamic(
     () =>
+      // webpack can't resolve the dynamic import path when running storybook, so we just pass the first svg manually there
       import(
-        `static/avatars/${addressAvatarPairs[address?.toLowerCase()?.slice(-2)]}.svg`
+        `static/avatars/${process.env.STORYBOOK ? 1 : addressAvatarPairs[addressEnding]}.svg`
       )
   )
 

src/v2/components/Layout/Layout.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryFn } from "@storybook/react"
+import { Layout } from "."
+
+const meta: Meta = {
+  title: "Design system/Layout",
+  parameters: {
+    layout: "fullscreen",
+  },
+}
+
+export default meta
+
+export const Static: StoryFn = () => (
+  <Layout.Root>
+    <Layout.Hero>
+      <Layout.Banner />
+      <Layout.Headline title="Layout title" />
+    </Layout.Hero>
+    <Layout.Main>Page contents</Layout.Main>
+    <Layout.Footer />
+  </Layout.Root>
+)

src/v2/components/Layout/Layout.tsx

@@ -0,0 +1,108 @@
+import { cn } from "@/lib/utils"
+import { Slot } from "@radix-ui/react-slot"
+import clsx from "clsx"
+import { PropsWithChildren, ReactNode, forwardRef } from "react"
+
+/* -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const Root = ({ children }: PropsWithChildren) => (
+  <div className="flex min-h-screen flex-col">{children}</div>
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * PageContainer
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
+  ({ children, className, asChild = false }, ref) => {
+    const Comp = asChild ? Slot : "div"
+    return (
+      <Comp
+        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
+        ref={ref}
+      >
+        {children}
+      </Comp>
+    )
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Hero
+ * -----------------------------------------------------------------------------------------------*/
+
+const Hero = ({ children }: PropsWithChildren) => (
+  <div className="relative">{children}</div>
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Headline
+ * -----------------------------------------------------------------------------------------------*/
+
+interface HeadlineProps {
+  title: ReactNode
+}
+
+const Headline = ({ title }: HeadlineProps) => (
+  <PageContainer>
+    <h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
+      {title}
+    </h1>
+  </PageContainer>
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Banner
+ * -----------------------------------------------------------------------------------------------*/
+
+interface BannerProps extends PropsWithChildren {
+  offset?: number
+  className?: string
+}
+
+const Banner = ({ children, offset = 112, className }: BannerProps) => (
+  <div
+    className={cn(
+      "-z-10 absolute inset-0 overflow-hidden",
+      `-bottom-[${Math.abs(offset)}px]`
+    )}
+  >
+    <div
+      className={cn(
+        "absolute inset-0 bg-[hsl(240_4%_16%)] data-[theme='dark']:bg-[hsl(240_3%_22%)]",
+        className
+      )}
+    />
+    {children}
+  </div>
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Main
+ * -----------------------------------------------------------------------------------------------*/
+
+const Main = ({ children }: PropsWithChildren) => (
+  <main>
+    <PageContainer>{children}</PageContainer>
+  </main>
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const Footer = ({ children }: PropsWithChildren) => (
+  <footer className="mt-auto">
+    <PageContainer>{children}</PageContainer>
+  </footer>
+)
+
+/* -----------------------------------------------------------------------------------------------*/
+
+export { Banner, Footer, Headline, Hero, Main, PageContainer, Root }

src/v2/components/Layout/index.ts

@@ -0,0 +1,4 @@
+import { Header } from "@/components/Header"
+import { Banner, Footer, Headline, Hero, Main, Root } from "./Layout"
+
+export const Layout = { Root, Headline, Banner, Hero, Footer, Main, Header }