@almanaclabs/blaze-ui 0.3.2 → 0.5.0

package/recipes/workspace-shell/workspace-shell.tsx

@@ -0,0 +1,636 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { ComponentProps, ComponentType, ReactNode } from 'react'
+import {
+  IconAd2,
+  IconChevronDown,
+  IconFileAnalytics,
+  IconIdBadge,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+  IconLogout,
+  IconMessageStar,
+  IconMessages,
+  IconPlugConnected,
+  IconScoreboard,
+  IconSettings,
+  IconUser,
+  IconUsers,
+  IconWorldSearch,
+  IconWorldWww,
+} from '@tabler/icons-react'
+
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  IdentityMark,
+  IdentityMarkImage,
+  navigationActionVariants,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  TooltipProvider,
+  cn,
+  useSidebar,
+} from '@almanaclabs/blaze-ui'
+
+import './workspace-shell.css'
+
+const googleSearchAdsLogo = new URL(
+  './assets/google-search-ads.svg',
+  import.meta.url,
+).href
+const radiantHealthLogo = new URL(
+  './assets/radiant-health.png',
+  import.meta.url,
+).href
+
+type NavigationIconProps = {
+  className?: string
+  'aria-hidden'?: boolean | 'true' | 'false'
+}
+
+type NavigationIcon = ComponentType<NavigationIconProps>
+
+function HomeNavigationIcon({
+  className,
+  'aria-hidden': ariaHidden,
+}: NavigationIconProps) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      aria-hidden={ariaHidden}
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <path
+        d="M4.6875 10.6641H10.3125M7.06536 2.00698L2.19036 5.30377C1.99251 5.43757 1.875 5.65416 1.875 5.88503V12.0551C1.875 12.646 2.37868 13.125 3 13.125H12C12.6213 13.125 13.125 12.646 13.125 12.0551V5.88503C13.125 5.65416 13.0075 5.43757 12.8096 5.30377L7.93464 2.00698C7.67442 1.83101 7.32558 1.83101 7.06536 2.00698Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+        style={{ strokeWidth: 'var(--icon-stroke-15)' }}
+      />
+    </svg>
+  )
+}
+
+export type WorkspaceShellNavigationItem = {
+  key: string
+  label: string
+  href: string
+  icon: NavigationIcon
+}
+
+export type WorkspaceShellNavigationGroup = {
+  key: string
+  label: string
+  items: readonly WorkspaceShellNavigationItem[]
+}
+
+export type WorkspaceShellRecipeProps = {
+  activeNavigationKey: string
+  channelTitle: string
+  children?: ReactNode
+  channelMark?: ReactNode
+  defaultSidebarOpen?: boolean
+  defaultSidebarWidth?: number
+  footer?: ReactNode
+  headerAction?: ReactNode
+  mode?: 'standard' | 'focused'
+  maxSidebarWidth?: number
+  minSidebarWidth?: number
+  navigationGroups?: readonly WorkspaceShellNavigationGroup[]
+  pageHeader?: ReactNode
+  onSidebarWidthChange?: (width: number) => void
+  userAvatar?: ReactNode
+  userName: string
+  workspaceMark?: ReactNode
+  workspaceName: string
+}
+
+const DEFAULT_SIDEBAR_WIDTH = 220
+const MIN_SIDEBAR_WIDTH = 200
+const MAX_SIDEBAR_WIDTH = 320
+
+function clampSidebarWidth(width: number, min: number, max: number) {
+  return Math.min(Math.max(width, min), max)
+}
+
+const defaultNavigationGroups: readonly WorkspaceShellNavigationGroup[] = [
+  {
+    key: 'primary',
+    label: 'Manage',
+    items: [
+      {
+        key: 'home',
+        label: 'Home',
+        href: '#home',
+        icon: HomeNavigationIcon,
+      },
+      {
+        key: 'analytics',
+        label: 'Analytics',
+        href: '#analytics',
+        icon: IconFileAnalytics,
+      },
+      {
+        key: 'integrations',
+        label: 'Integrations',
+        href: '#integrations',
+        icon: IconPlugConnected,
+      },
+      {
+        key: 'brand-kit',
+        label: 'Brand Kit',
+        href: '#brand-kit',
+        icon: IconIdBadge,
+      },
+      {
+        key: 'scorecard',
+        label: 'Scorecard',
+        href: '#scorecard',
+        icon: IconScoreboard,
+      },
+    ],
+  },
+  {
+    key: 'channels',
+    label: 'Channels',
+    items: [
+      {
+        key: 'google-ads',
+        label: 'Google Ads',
+        href: '#google-ads',
+        icon: IconAd2,
+      },
+      {
+        key: 'seo-aeo',
+        label: 'SEO/AEO',
+        href: '#seo-aeo',
+        icon: IconWorldSearch,
+      },
+      {
+        key: 'website',
+        label: 'Website',
+        href: '#website',
+        icon: IconWorldWww,
+      },
+      {
+        key: 'reputation',
+        label: 'Reputation',
+        href: '#reputation',
+        icon: IconMessageStar,
+      },
+      {
+        key: 'inbound-sdr',
+        label: 'Inbound SDR',
+        href: '#inbound-sdr',
+        icon: IconMessages,
+      },
+    ],
+  },
+]
+
+function initials(value: string) {
+  return value
+    .split(/\s+|@/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+function RecipeLink({
+  href,
+  children,
+  ...props
+}: ComponentProps<'a'> & { href: string }) {
+  return (
+    <a href={href} onClick={(event) => event.preventDefault()} {...props}>
+      {children}
+    </a>
+  )
+}
+
+function DefaultWorkspaceMark() {
+  return (
+    <IdentityMark data-identity="workspace" className="bg-[#45164a]">
+      <IdentityMarkImage
+        data-identity-artwork="workspace"
+        src={radiantHealthLogo}
+        alt=""
+        aria-hidden="true"
+        className="rounded-[4px] object-cover"
+      />
+    </IdentityMark>
+  )
+}
+
+function DefaultChannelMark() {
+  return (
+    <IdentityMark data-identity="channel">
+      <IdentityMarkImage
+        data-identity-artwork="channel"
+        src={googleSearchAdsLogo}
+        alt=""
+        aria-hidden="true"
+      />
+    </IdentityMark>
+  )
+}
+
+function WorkspaceSidebarTrigger() {
+  const { state, toggleSidebar } = useSidebar()
+
+  if (state === 'collapsed') {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="tertiary"
+      size="icon-sm"
+      aria-label="Collapse workspace navigation"
+      onClick={toggleSidebar}
+      className="mr-px shrink-0 text-foreground group-data-[collapsible=icon]:hidden"
+    >
+      <IconLayoutSidebarLeftCollapse aria-hidden="true" />
+    </Button>
+  )
+}
+
+function WorkspaceFrameSidebarTrigger() {
+  const { isMobile, state, toggleSidebar } = useSidebar()
+
+  if (!isMobile && state !== 'collapsed') {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="tertiary"
+      size="icon-sm"
+      aria-label={
+        isMobile ? 'Open workspace navigation' : 'Expand workspace navigation'
+      }
+      onClick={toggleSidebar}
+      className="shrink-0 text-foreground"
+    >
+      <IconLayoutSidebarLeftExpand aria-hidden="true" />
+    </Button>
+  )
+}
+
+function WorkspaceMenu({
+  workspaceMark,
+  workspaceName,
+}: {
+  workspaceMark: ReactNode
+  workspaceName: string
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="tertiary"
+            size="md"
+            aria-label={`Open workspace menu for ${workspaceName}`}
+            className="min-w-0 flex-1 justify-start gap-1.5 px-[10px] text-left group-data-[collapsible=icon]:size-6 group-data-[collapsible=icon]:flex-none group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0"
+          />
+        }
+      >
+        {workspaceMark}
+        <span className="truncate text-sm font-medium leading-[1.4] tracking-[0.01em] group-data-[collapsible=icon]:hidden">
+          {workspaceName}
+        </span>
+        <IconChevronDown
+          className="icon-optical-16 shrink-0 group-data-[collapsible=icon]:hidden"
+          aria-hidden="true"
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="right" className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <IconUsers aria-hidden="true" />
+            All workspaces
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <IconLogout aria-hidden="true" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function NavigationGroup({
+  group,
+  activeKey,
+}: {
+  group: WorkspaceShellNavigationGroup
+  activeKey: string
+}) {
+  return (
+    <SidebarGroup className="gap-0.5 p-0">
+      <SidebarGroupLabel className="h-[27px] rounded-[2px] px-[10px] text-xs font-medium tracking-[0.02em] text-foreground group-data-[collapsible=icon]:mt-0! group-data-[collapsible=icon]:opacity-0">
+        {group.label}
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu className="gap-px">
+          {group.items.map((item) => (
+            <SidebarMenuItem key={item.key}>
+              <SidebarMenuButton
+                tooltip={item.label}
+                isActive={item.key === activeKey}
+                data-navigation-action=""
+                className={cn(
+                  navigationActionVariants(),
+                  'h-[31px] gap-[10px] rounded-[4px] px-[10px] py-2 text-sm font-normal leading-[1.1] tracking-normal [--icon-stroke-width:var(--icon-stroke-15)] data-active:rounded-[8px] data-active:font-normal group-data-[collapsible=icon]:h-[31px]! group-data-[collapsible=icon]:w-full! group-data-[collapsible=icon]:px-[10px]! group-data-[collapsible=icon]:py-2! [&_svg]:size-[15px]',
+                )}
+                render={
+                  <RecipeLink
+                    href={item.href}
+                    aria-label={item.label}
+                    aria-current={item.key === activeKey ? 'page' : undefined}
+                  />
+                }
+              >
+                <item.icon
+                  className="icon-optical-15 text-foreground"
+                  aria-hidden="true"
+                />
+                <span className="workspace-navigation-label group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0">
+                  {item.label}
+                </span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function AccountMenu({
+  userAvatar,
+  userName,
+}: {
+  userAvatar: ReactNode
+  userName: string
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="tertiary"
+            size="md"
+            aria-label={`Open account menu for ${userName}`}
+            className="min-w-0 flex-1 justify-start gap-1.5 px-[10px] text-left font-normal group-data-[collapsible=icon]:size-5 group-data-[collapsible=icon]:flex-none group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0"
+          />
+        }
+      >
+        {userAvatar}
+        <span className="truncate text-sm font-normal leading-[1.4] tracking-[0.01em] group-data-[collapsible=icon]:hidden">
+          {userName}
+        </span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="right" className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{userName}</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <IconUser aria-hidden="true" />
+            Account settings
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <IconLogout aria-hidden="true" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export function WorkspaceShellRecipe({
+  activeNavigationKey,
+  channelTitle,
+  children,
+  channelMark = <DefaultChannelMark />,
+  defaultSidebarOpen = true,
+  defaultSidebarWidth = DEFAULT_SIDEBAR_WIDTH,
+  footer,
+  headerAction,
+  mode = 'standard',
+  maxSidebarWidth = MAX_SIDEBAR_WIDTH,
+  minSidebarWidth = MIN_SIDEBAR_WIDTH,
+  navigationGroups = defaultNavigationGroups,
+  pageHeader,
+  onSidebarWidthChange,
+  userAvatar,
+  userName,
+  workspaceMark = <DefaultWorkspaceMark />,
+  workspaceName,
+}: WorkspaceShellRecipeProps) {
+  const resolvedMinSidebarWidth = Math.min(minSidebarWidth, maxSidebarWidth)
+  const resolvedMaxSidebarWidth = Math.max(minSidebarWidth, maxSidebarWidth)
+  const [sidebarWidth, setSidebarWidth] = useState(() =>
+    clampSidebarWidth(
+      defaultSidebarWidth,
+      resolvedMinSidebarWidth,
+      resolvedMaxSidebarWidth,
+    ),
+  )
+  const [isSidebarResizing, setIsSidebarResizing] = useState(false)
+
+  useEffect(() => {
+    setSidebarWidth((currentWidth) =>
+      clampSidebarWidth(
+        currentWidth,
+        resolvedMinSidebarWidth,
+        resolvedMaxSidebarWidth,
+      ),
+    )
+  }, [resolvedMaxSidebarWidth, resolvedMinSidebarWidth])
+
+  const updateSidebarWidth = useCallback(
+    (nextWidth: number) => {
+      const boundedWidth = clampSidebarWidth(
+        Math.round(nextWidth),
+        resolvedMinSidebarWidth,
+        resolvedMaxSidebarWidth,
+      )
+      if (boundedWidth === sidebarWidth) {
+        return
+      }
+
+      setSidebarWidth(boundedWidth)
+      onSidebarWidthChange?.(boundedWidth)
+    },
+    [
+      onSidebarWidthChange,
+      resolvedMaxSidebarWidth,
+      resolvedMinSidebarWidth,
+      sidebarWidth,
+    ],
+  )
+
+  const resolvedUserAvatar = userAvatar ?? (
+    <Avatar size="xs" shape="rounded">
+      <AvatarFallback>{initials(userName)}</AvatarFallback>
+    </Avatar>
+  )
+
+  return (
+    <TooltipProvider>
+      <SidebarProvider
+        defaultOpen={defaultSidebarOpen}
+        data-sidebar-resizing={isSidebarResizing || undefined}
+        className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-[#f5f5f5]"
+        style={
+          {
+            '--sidebar-width': `${sidebarWidth}px`,
+            '--sidebar-width-icon': '3.4375rem',
+            '--sidebar': '#f5f5f5',
+          } as ComponentProps<typeof SidebarProvider>['style']
+        }
+      >
+        <Sidebar
+          collapsible="icon"
+          className="group-data-[side=left]:border-r-0"
+        >
+          <div className="flex min-h-0 flex-1 flex-col bg-sidebar text-sidebar-foreground">
+            <SidebarGroup className="h-[76px] shrink-0 flex-row items-center gap-2 p-0 px-[10px] group-data-[collapsible=icon]:px-[15px]">
+              <WorkspaceMenu
+                workspaceMark={workspaceMark}
+                workspaceName={workspaceName}
+              />
+              <WorkspaceSidebarTrigger />
+            </SidebarGroup>
+
+            <SidebarContent className="pt-2">
+              <nav
+                aria-label="Workspace"
+                className="flex flex-col gap-6 px-[10px]"
+              >
+                {navigationGroups.map((group) => (
+                  <NavigationGroup
+                    key={group.key}
+                    group={group}
+                    activeKey={activeNavigationKey}
+                  />
+                ))}
+              </nav>
+            </SidebarContent>
+
+            <SidebarFooter className="h-14 shrink-0 flex-row items-center gap-2 px-[10px] py-0 group-data-[collapsible=icon]:h-[90px] group-data-[collapsible=icon]:flex-col-reverse group-data-[collapsible=icon]:gap-[10px] group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-[22px]">
+              <AccountMenu
+                userAvatar={resolvedUserAvatar}
+                userName={userName}
+              />
+              <Button
+                nativeButton={false}
+                render={<RecipeLink href="#settings" />}
+                variant="tertiary"
+                size="icon-sm"
+                aria-label="Settings"
+                className="mr-px shrink-0 text-foreground group-data-[collapsible=icon]:mr-0"
+              >
+                <IconSettings aria-hidden="true" />
+              </Button>
+            </SidebarFooter>
+          </div>
+          <SidebarRail
+            mode="resize"
+            value={sidebarWidth}
+            min={resolvedMinSidebarWidth}
+            max={resolvedMaxSidebarWidth}
+            onValueChange={updateSidebarWidth}
+            onResizeStart={() => setIsSidebarResizing(true)}
+            onResizeEnd={() => setIsSidebarResizing(false)}
+            aria-label="Resize workspace navigation"
+            className="inset-y-2.5"
+          />
+        </Sidebar>
+
+        <SidebarInset className="min-h-0 min-w-0 bg-[#f5f5f5] p-0 md:p-2.5 md:pl-0">
+          <section
+            data-slot="workspace-frame"
+            data-mode={mode}
+            aria-label={channelTitle}
+            className="flex min-h-0 flex-1 flex-col overflow-hidden border bg-background md:rounded-[10px]"
+          >
+            <header className="flex h-14 shrink-0 items-center gap-1 px-4 md:px-5">
+              <WorkspaceFrameSidebarTrigger />
+              <div className="flex min-w-0 items-center gap-2">
+                {channelMark}
+                <span className="truncate text-sm font-medium tracking-normal">
+                  {channelTitle}
+                </span>
+              </div>
+              {headerAction && (
+                <div className="ml-auto flex shrink-0 items-center">
+                  {headerAction}
+                </div>
+              )}
+            </header>
+
+            {pageHeader && (
+              <div data-slot="workspace-page-header" className="shrink-0">
+                {pageHeader}
+              </div>
+            )}
+
+            <div
+              data-slot="workspace-content"
+              className={cn(
+                'min-h-0 flex-1',
+                mode === 'focused' ? 'overflow-hidden' : 'overflow-auto',
+              )}
+            >
+              {children}
+            </div>
+
+            {footer && (
+              <footer
+                data-slot="workspace-footer"
+                className="min-h-[88px] shrink-0 border-t bg-background"
+              >
+                {footer}
+              </footer>
+            )}
+          </section>
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  )
+}