Add barbones ApplicationFrame component (#665)

* Add barbones ApplicationFrame component

* Fix sidebar layout

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

@@ -0,0 +1,24 @@
+import { Placeholder } from "@/lib/storybook-utils"
+import type { Meta, StoryObj } from "@storybook/react"
+import { ComponentProps } from "react"
+import { ApplicationFrame } from "."
+import * as SidebarStories from "../Sidebar/index.stories"
+import { Sidebar } from "../Sidebar/Sidebar"
+
+const meta: Meta<typeof ApplicationFrame> = {
+ component: ApplicationFrame,
+ tags: ["autodocs"],
+ parameters: {
+ layout: "fullscreen",
+ },
+ args: {
+ sidebar: <Sidebar {...SidebarStories.default.args} />,
+ children: <Placeholder className="flex-1">Application Content</Placeholder>,
+ } satisfies ComponentProps<typeof ApplicationFrame>,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ApplicationFrame>
+
+export const Default: Story = {}

lib/experimental/Navigation/ApplicationFrame/index.tsx

@@ -0,0 +1,16 @@
+interface ApplicationFrameProps {
+ sidebar: React.ReactNode
+ children: React.ReactNode
+}
+
+export const ApplicationFrame: React.FC<ApplicationFrameProps> = ({
+ children,
+ sidebar,
+}) => {
+ return (
+ <div className="flex h-full flex-row gap-4 p-4">
+ <div className="w-64">{sidebar}</div>
+ <div className="flex flex-1">{children}</div>
+ </div>
+ )
+}

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

@@ -133,7 +133,7 @@ const CategoryItem = ({ category }: { category: MenuCategory }) => {
 
 export function Menu({ tree }: MenuProps) {
  return (
- <div className="min-h-screen w-full bg-transparent">
+ <div className="w-full bg-transparent">
  {tree.map((category, index) => (
  <CategoryItem key={index} category={category} />
  ))}

lib/experimental/Navigation/Sidebar/Sidebar.tsx

@@ -0,0 +1,5 @@
+export const Sidebar: React.FC<{ children?: React.ReactNode }> = ({
+ children,
+}) => {
+ return <div className="flex flex-col gap-2">{children}</div>
+}

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ComponentProps } from "react"
+import { Menu } from "./Menu"
+import * as SidebarMenuStories from "./Menu/index.stories"
+import { SearchBar } from "./Searchbar"
+import * as SearchBarStories from "./Searchbar/index.stories"
+import { Sidebar } from "./Sidebar"
+
+const meta: Meta<typeof Sidebar> = {
+ component: Sidebar,
+ tags: ["autodocs"],
+ parameters: {
+ layout: "centered",
+ },
+ decorators: [
+ (Story) => (
+ <div className="w-[240px] bg-f1-background-tertiary p-3">
+ <Story />
+ </div>
+ ),
+ ],
+ args: {
+ children: (
+ <>
+ <SearchBar {...SearchBarStories.Default.args} />
+ <Menu {...SidebarMenuStories.Default.args} />
+ </>
+ ),
+ } satisfies ComponentProps<typeof Sidebar>,
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {}

lib/experimental/Navigation/Sidebar/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Menu"
 export * from "./Searchbar"
+export * from "./Sidebar"