Davidrab/utima layout app

package.json

@@ -30,7 +30,7 @@
     "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "tailwindcss": "^3.4.1",
-    "turbo": "^1.12.4",
+    "turbo": "^1.12.5",
     "typescript": "^5.3.3"
   }
 }

packages/ui/src/components/layout/Layout.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from 'lucide-react';
+
+import * as Layout from '.';
+
+// custom width sidebar a custom height header context
+const meta: Meta<typeof Layout.Root> = {
+  component: Layout.Root,
+  tags: ['autodocs'],
+  title: 'Components/Layout',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    children: (
+      <Layout.Root withSidebar withHeader>
+        <Layout.Header>
+          <Layout.SidebarTrigger>
+            <Menu />
+          </Layout.SidebarTrigger>
+          <h1>ahoj</h1>
+        </Layout.Header>
+        <Layout.SideBar>
+          <h1>Hi</h1>
+        </Layout.SideBar>
+        <Layout.Content>
+          <div className='h-screen'>Hi</div>
+          <div className='h-screen'>Hi</div>
+          <div className='h-screen'>Hi</div>
+          <div className='h-screen'>Hi</div>
+          <div className='h-screen'>Hi</div>
+        </Layout.Content>
+      </Layout.Root>
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Layout.Root>;
+
+export const Basic: Story = {};

packages/ui/src/components/layout/Layout.styles.ts

@@ -0,0 +1,21 @@
+import { twOverrides } from '@/overrides';
+
+export const layoutDef = twOverrides(
+  {
+    header:
+      'fixed top-0 z-50 w-full h-16 bg-primary text-primary-fg flex flex-row justify-between items-center',
+    root: '',
+    sideBar: {
+      wrapper:
+        'fixed top-0 left-0 z-40 w-64 max-w-full h-screen transition-transform -translate-x-full sm:translate-x-0',
+      content: 'h-full px-3 pb-4 overflow-y-auto bg-primary text-primary-fg',
+    },
+    content: {
+      base: '',
+      withSidebar: 'sm:ml-64',
+      withHeader: 'mt-16',
+      overlay: 'fixed z-30 t-0 l-0 h-full w-full bg-black/75',
+    },
+  },
+  'layout',
+);

packages/ui/src/components/layout/LayoutContent.tsx

@@ -0,0 +1,33 @@
+import { memo, type ComponentPropsWithoutRef } from 'react';
+
+import { cn } from '@/utils';
+
+import { layoutDef } from './Layout.styles';
+import { useLayoutContext } from './useLayoutContext';
+
+export const LayoutContent = memo(function LayoutContent({
+  className,
+  ...restProps
+}: ComponentPropsWithoutRef<'div'>) {
+  const { withSidebar, withHeader, open, setOpen } = useLayoutContext();
+
+  return (
+    <>
+      {open && (
+        <div
+          onClick={() => setOpen(false)}
+          className={cn(layoutDef.content.overlay)}
+        />
+      )}
+      <div
+        className={cn(
+          layoutDef.content.base,
+          withSidebar && layoutDef.content.withSidebar,
+          withHeader && layoutDef.content.withHeader,
+          className,
+        )}
+        {...restProps}
+      />
+    </>
+  );
+});

packages/ui/src/components/layout/LayoutHeader.tsx

@@ -0,0 +1,21 @@
+import { memo, type ComponentPropsWithoutRef } from 'react';
+
+import { cn } from '@/utils';
+
+import { layoutDef } from './Layout.styles';
+import { useLayoutContext } from './useLayoutContext';
+
+export const LayoutHeader = memo(function LayoutHeader({
+  className,
+  ...restProps
+}: ComponentPropsWithoutRef<'header'>) {
+  const { headerHeight } = useLayoutContext();
+
+  return (
+    <header
+      className={cn(layoutDef.header, className)}
+      style={{ height: headerHeight ? `${headerHeight}px` : '64px' }}
+      {...restProps}
+    />
+  );
+});

packages/ui/src/components/layout/LayoutRoot.tsx

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef, useMemo, useState } from 'react';
+
+import { cn } from '@/utils';
+
+import { layoutDef } from './Layout.styles';
+import { LayoutContext, type LayoutContextType } from './useLayoutContext';
+
+interface LayoutRootProps extends ComponentPropsWithoutRef<'div'> {
+  withSidebar?: boolean;
+  withHeader?: boolean;
+  headerHeight?: number;
+  sideBarWidth?: number;
+}
+
+export function LayoutRoot({
+  className,
+  withSidebar,
+  withHeader,
+  headerHeight,
+  sideBarWidth,
+  ...restProps
+}: LayoutRootProps) {
+  const [open, setOpen] = useState(false);
+  const contextValue = useMemo<LayoutContextType>(
+    () => ({
+      open,
+      setOpen,
+      withSidebar: !!(withSidebar ?? true),
+      withHeader: !!(withHeader ?? true),
+      headerHeight: headerHeight ?? 64,
+      sideBarWidth: sideBarWidth ?? 256,
+    }),
+    [open, withSidebar, withHeader, headerHeight, sideBarWidth],
+  );
+
+  return (
+    <LayoutContext.Provider value={contextValue}>
+      <div className={cn(layoutDef.root, className)} {...restProps} />
+    </LayoutContext.Provider>
+  );
+}

packages/ui/src/components/layout/LayoutSideBar.tsx

@@ -0,0 +1,38 @@
+import { useContext, type ComponentPropsWithoutRef, memo } from 'react';
+
+import { cn } from '@/utils';
+
+import { layoutDef } from './Layout.styles';
+import { LayoutContext, useLayoutContext } from './useLayoutContext';
+
+interface LayoutSideBarProps extends ComponentPropsWithoutRef<'aside'> {
+  open?: boolean;
+}
+
+export const LayoutSideBar = memo(function LayoutSideBar({
+  children,
+  className,
+  open: forceOpen,
+  ...restProps
+}: LayoutSideBarProps) {
+  const { open } = useContext(LayoutContext);
+
+  const { withHeader, sideBarWidth, headerHeight } = useLayoutContext();
+
+  return (
+    <aside
+      className={cn(
+        layoutDef.sideBar.wrapper,
+        (forceOpen ?? open) && 'transform-none',
+        className,
+      )}
+      style={{
+        width: sideBarWidth ? `${sideBarWidth}px` : '256px',
+        paddingTop: withHeader ? `${headerHeight}px` : '0px',
+      }}
+      {...restProps}
+    >
+      <div className={cn(layoutDef.sideBar.content)}>{children}</div>
+    </aside>
+  );
+});

packages/ui/src/components/layout/LayoutSideBarTrigger.tsx

@@ -0,0 +1,27 @@
+import { Slot } from '@radix-ui/react-slot';
+import { memo, type ComponentPropsWithoutRef } from 'react';
+
+import { cn } from '@/utils';
+
+import { useLayoutContext } from './useLayoutContext';
+
+interface LayoutSideBarTriggerProps extends ComponentPropsWithoutRef<'button'> {
+  asChild?: boolean;
+}
+
+export const LayoutSideBarTrigger = memo(function LayoutSideBarTrigger({
+  className,
+  asChild,
+  ...restProps
+}: LayoutSideBarTriggerProps) {
+  const { setOpen } = useLayoutContext();
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      className={cn('sm:hidden')}
+      onClick={() => setOpen(v => !v)}
+      {...restProps}
+    />
+  );
+});

packages/ui/src/components/layout/index.ts

@@ -0,0 +1,5 @@
+export { LayoutRoot as Root } from './LayoutRoot';
+export { LayoutSideBar as SideBar } from './LayoutSideBar';
+export { LayoutHeader as Header } from './LayoutHeader';
+export { LayoutContent as Content } from './LayoutContent';
+export { LayoutSideBarTrigger as SidebarTrigger } from './LayoutSideBarTrigger';

packages/ui/src/components/layout/useLayoutContext.ts

@@ -0,0 +1,34 @@
+import {
+  createContext,
+  useContext,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+export type LayoutContextType = {
+  withSidebar: boolean;
+  withHeader: boolean;
+  headerHeight: number;
+  sideBarWidth: number;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  open: boolean;
+};
+
+/**
+ * Holds layout specific settings and sidebar handlers,
+ * which are propagated to child layout components.
+ */
+export const LayoutContext = createContext<LayoutContextType>(undefined!);
+
+/**
+ * Helper hook to access current layout state.
+ */
+export function useLayoutContext() {
+  const context = useContext(LayoutContext);
+
+  if (!context) {
+    throw new Error('No LayoutContext found when calling useLayoutContext');
+  }
+
+  return context;
+}

packages/ui/src/index.ts

@@ -73,3 +73,11 @@ export * as Breadcrumb from './components/breadcrumb';
 
 // Kbd
 export { Kbd, type KbdProps } from './components/kbd/Kbd';
+
+// Layout
+export * as Layout from './components/layout';
+export {
+  LayoutContext,
+  type LayoutContextType,
+  useLayoutContext,
+} from './components/layout/useLayoutContext';

packages/ui/src/overrides.ts

@@ -14,6 +14,7 @@ import type { dropdownDef } from './components/dropdown/Dropdown.styles';
 import type { globalDef } from './components/global.styles';
 import type { inputDef } from './components/input/Input.styles';
 import type { labelDef } from './components/label/Label.styles';
+import type { layoutDef } from './components/layout/Layout.styles';
 import type { popoverDef } from './components/popover/Popover.styles';
 import type { selectDef } from './components/select/select.styles';
 import type { separatorDef } from './components/separator/Separator.styles';
@@ -45,6 +46,7 @@ type ComponentOverridesDef = {
   checkbox: typeof checkboxDef;
   command: typeof commandDef;
   dialog: typeof dialogDef;
+  layout: typeof layoutDef;
   breadcrumb: typeof breadcrumbDef;
 };