Add Page component (#690)

* Page component

* Sidebar adapted

* Layouts

* typo

* Base layouts

* Remove unused story

lib/experimental/Layouts/StandardLayout/index.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+export interface StandardLayoutProps {
+ children: React.ReactNode
+}
+
+export function StandardLayout({ children }: StandardLayoutProps) {
+ return (
+ <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-5">
+ {children}
+ </div>
+ )
+}

lib/experimental/Navigation/ApplicationFrame/index.stories.tsx

@@ -1,7 +1,8 @@
-import { Placeholder } from "@/lib/storybook-utils"
 import type { Meta, StoryObj } from "@storybook/react"
 import { ComponentProps } from "react"
 import { ApplicationFrame } from "."
+import { Page } from "../Page"
+import * as PageStories from "../Page/index.stories"
 import * as SidebarStories from "../Sidebar/index.stories"
 import { Sidebar } from "../Sidebar/Sidebar"
 
@@ -13,7 +14,7 @@ const meta: Meta<typeof ApplicationFrame> = {
  },
  args: {
  sidebar: <Sidebar {...SidebarStories.default.args} />,
- children: <Placeholder className="flex-1">Application Content</Placeholder>,
+ children: <Page {...PageStories.Default.args} />,
  } satisfies ComponentProps<typeof ApplicationFrame>,
 }
 

lib/experimental/Navigation/ApplicationFrame/index.tsx

@@ -10,7 +10,7 @@ export const ApplicationFrame: React.FC<ApplicationFrameProps> = ({
  return (
  <div className="flex h-full flex-row gap-3">
  <div className="w-64 pl-3">{sidebar}</div>
- <div className="flex flex-1">{children}</div>
+ <div className="flex flex-1 py-1 pr-1">{children}</div>
  </div>
  )
 }

lib/experimental/Navigation/Header/Header/index.stories.tsx

@@ -4,13 +4,13 @@ import Settings from "@/icons/Settings"
 import type { Meta, StoryObj } from "@storybook/react"
 import Header from "."
 
-const meta: Meta<typeof Header> = {
+const meta = {
  component: Header,
  tags: ["autodocs"],
-}
+} satisfies Meta<typeof Header>
 
 export default meta
-type Story = StoryObj<typeof Header>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
  args: {

lib/experimental/Navigation/Header/Header/index.tsx

@@ -43,7 +43,7 @@ export default function Header({
  return (
  <div
  className={cn(
- "flex h-16 items-center justify-between rounded-t-lg bg-f1-background/80 p-4 backdrop-blur-xl",
+ "flex h-16 items-center justify-between bg-f1-background/80 px-6 py-4 backdrop-blur-xl",
  hasNavigation &&
  "border-b border-dashed border-transparent border-b-f1-border/80"
  )}

lib/experimental/Navigation/Page/index.stories.tsx

@@ -0,0 +1,51 @@
+import { Placeholder } from "@/lib/storybook-utils"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Page } from "."
+
+import Header from "../Header/Header"
+import * as HeaderStories from "../Header/Header/index.stories"
+import { Tabs } from "../Tabs"
+import * as TabsStories from "../Tabs/index.stories"
+
+import { StandardLayout } from "@/experimental/Layouts/StandardLayout"
+
+const meta: Meta<typeof Page> = {
+ component: Page,
+ tags: ["autodocs"],
+ parameters: {
+ layout: "fullscreen",
+ },
+ decorators: [
+ (Story) => (
+ <div className="bg-f1-background-tertiary p-2">
+ <Story />
+ </div>
+ ),
+ ],
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ header: (
+ <>
+ <Header
+ {...HeaderStories.FirstLevel.args}
+ menu={{ show: false, onClick: () => {} }}
+ />
+ <Tabs {...TabsStories.Primary.args} />
+ </>
+ ),
+ children: (
+ <StandardLayout>
+ {Array(25)
+ .fill(0)
+ .map((_, index) => (
+ <Placeholder key={index} className="min-h-24" />
+ ))}
+ </StandardLayout>
+ ),
+ },
+}

lib/experimental/Navigation/Page/index.tsx

@@ -0,0 +1,13 @@
+interface PageProps {
+ children?: React.ReactNode
+ header?: React.ReactNode
+}
+
+export function Page({ children, header }: PageProps) {
+ return (
+ <div className="flex w-full flex-col overflow-hidden rounded-xl bg-f1-background shadow">
+ {header && <div className="flex flex-col">{header}</div>}
+ {children}
+ </div>
+ )
+}

lib/experimental/Navigation/Sidebar/Searchbar/index.tsx

@@ -19,7 +19,7 @@ export function SearchBar({
  <button
  onClick={onClick}
  className={cn(
- "mb-4 flex w-full cursor-pointer items-center justify-between rounded border border-solid border-f1-border/70 bg-f1-background/80 p-1.5 text-f1-foreground-secondary transition-colors hover:border-f1-border-hover",
+ "mb-4 mt-2 flex w-full cursor-pointer items-center justify-between rounded border border-solid border-f1-border/70 bg-f1-background/80 p-1.5 text-f1-foreground-secondary transition-colors hover:border-f1-border-hover",
  focusRing()
  )}
  type="button"

lib/experimental/Navigation/Sidebar/Sidebar.tsx

@@ -9,9 +9,9 @@ interface SidebarProps {
 export function Sidebar({ header, body, footer }: SidebarProps) {
  return (
  <div className="flex h-full flex-col gap-2">
- {header}
+ {header && <div className="flex-shrink-0">{header}</div>}
  {body && <div className="flex-grow overflow-y-auto">{body}</div>}
- {footer}
+ {footer && <div className="flex-shrink-0">{footer}</div>}
  </div>
  )
 }

lib/experimental/Navigation/Tabs/index.stories.tsx

@@ -1,51 +1,37 @@
-import { useNavigation } from "@/lib/linkHandler"
 import type { Meta, StoryObj } from "@storybook/react"
-import { TabItem, Tabs } from "."
+import { Tabs } from "."
 
-const tabItems: TabItem[] = [
+const tabItems = [
  { label: "Overview", href: "/", exactMatch: true },
  { label: "Courses", href: "/courses" },
  { label: "Categories", href: "/categories" },
  { label: "Catalog", href: "/catalog" },
  { label: "Requests", href: "/requests" },
 ]
 
-const meta: Meta<typeof Tabs> = {
+const meta = {
  component: Tabs,
  tags: ["autodocs"],
  argTypes: {
  secondary: {
  control: "boolean",
  },
  },
- render: ({ secondary = false }: { secondary?: boolean }) => {
- const { isActive } = useNavigation()
- const activeTab = tabItems.find((tab) =>
- isActive(tab.href, { exact: true })
- )
-
- return (
- <div onClick={(e) => e.preventDefault()}>
- <Tabs tabs={tabItems} secondary={secondary} />
- <p className="mt-4 flex h-full min-h-60 items-center justify-center rounded-lg bg-f1-background-secondary/50 p-4 text-f1-foreground-secondary">
- {activeTab?.label}
- </p>
- </div>
- )
- },
-}
+} satisfies Meta<typeof Tabs>
 
 export default meta
-type Story = StoryObj<typeof Tabs>
+type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
  args: {
+ tabs: tabItems,
  secondary: false,
  },
 }
 
 export const Secondary: Story = {
  args: {
+ tabs: tabItems,
  secondary: true,
  },
 }