zyflow 0.6.4

package/.shadcn-admin-ref/src/components/layout/nav-group.tsx

@@ -0,0 +1,185 @@
+import { type ReactNode } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { ChevronRight } from 'lucide-react'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { Badge } from '../ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  type NavCollapsible,
+  type NavItem,
+  type NavLink,
+  type NavGroup as NavGroupProps,
+} from './types'
+
+export function NavGroup({ title, items }: NavGroupProps) {
+  const { state, isMobile } = useSidebar()
+  const href = useLocation({ select: (location) => location.href })
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{title}</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => {
+          const key = `${item.title}-${item.url}`
+
+          if (!item.items)
+            return <SidebarMenuLink key={key} item={item} href={href} />
+
+          if (state === 'collapsed' && !isMobile)
+            return (
+              <SidebarMenuCollapsedDropdown key={key} item={item} href={href} />
+            )
+
+          return <SidebarMenuCollapsible key={key} item={item} href={href} />
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function NavBadge({ children }: { children: ReactNode }) {
+  return <Badge className='rounded-full px-1 py-0 text-xs'>{children}</Badge>
+}
+
+function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
+  const { setOpenMobile } = useSidebar()
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={checkIsActive(href, item)}
+        tooltip={item.title}
+      >
+        <Link to={item.url} onClick={() => setOpenMobile(false)}>
+          {item.icon && <item.icon />}
+          <span>{item.title}</span>
+          {item.badge && <NavBadge>{item.badge}</NavBadge>}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+function SidebarMenuCollapsible({
+  item,
+  href,
+}: {
+  item: NavCollapsible
+  href: string
+}) {
+  const { setOpenMobile } = useSidebar()
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={checkIsActive(href, item, true)}
+      className='group/collapsible'
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton tooltip={item.title}>
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+            {item.badge && <NavBadge>{item.badge}</NavBadge>}
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180' />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className='CollapsibleContent'>
+          <SidebarMenuSub>
+            {item.items.map((subItem) => (
+              <SidebarMenuSubItem key={subItem.title}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={checkIsActive(href, subItem)}
+                >
+                  <Link to={subItem.url} onClick={() => setOpenMobile(false)}>
+                    {subItem.icon && <subItem.icon />}
+                    <span>{subItem.title}</span>
+                    {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
+                  </Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+function SidebarMenuCollapsedDropdown({
+  item,
+  href,
+}: {
+  item: NavCollapsible
+  href: string
+}) {
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton
+            tooltip={item.title}
+            isActive={checkIsActive(href, item)}
+          >
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+            {item.badge && <NavBadge>{item.badge}</NavBadge>}
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side='right' align='start' sideOffset={4}>
+          <DropdownMenuLabel>
+            {item.title} {item.badge ? `(${item.badge})` : ''}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {item.items.map((sub) => (
+            <DropdownMenuItem key={`${sub.title}-${sub.url}`} asChild>
+              <Link
+                to={sub.url}
+                className={`${checkIsActive(href, sub) ? 'bg-secondary' : ''}`}
+              >
+                {sub.icon && <sub.icon />}
+                <span className='max-w-52 text-wrap'>{sub.title}</span>
+                {sub.badge && (
+                  <span className='ms-auto text-xs'>{sub.badge}</span>
+                )}
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  )
+}
+
+function checkIsActive(href: string, item: NavItem, mainNav = false) {
+  return (
+    href === item.url || // /endpint?search=param
+    href.split('?')[0] === item.url || // endpoint
+    !!item?.items?.filter((i) => i.url === href).length || // if child nav is active
+    (mainNav &&
+      href.split('/')[1] !== '' &&
+      href.split('/')[1] === item?.url?.split('/')[1])
+  )
+}

package/.shadcn-admin-ref/src/components/layout/nav-user.tsx

@@ -0,0 +1,124 @@
+import { Link } from '@tanstack/react-router'
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-react'
+import useDialogState from '@/hooks/use-dialog-state'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+
+type NavUserProps = {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}
+
+export function NavUser({ user }: NavUserProps) {
+  const { isMobile } = useSidebar()
+  const [open, setOpen] = useDialogState()
+
+  return (
+    <>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size='lg'
+                className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
+              >
+                <Avatar className='h-8 w-8 rounded-lg'>
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className='rounded-lg'>SN</AvatarFallback>
+                </Avatar>
+                <div className='grid flex-1 text-start text-sm leading-tight'>
+                  <span className='truncate font-semibold'>{user.name}</span>
+                  <span className='truncate text-xs'>{user.email}</span>
+                </div>
+                <ChevronsUpDown className='ms-auto size-4' />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg'
+              side={isMobile ? 'bottom' : 'right'}
+              align='end'
+              sideOffset={4}
+            >
+              <DropdownMenuLabel className='p-0 font-normal'>
+                <div className='flex items-center gap-2 px-1 py-1.5 text-start text-sm'>
+                  <Avatar className='h-8 w-8 rounded-lg'>
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback className='rounded-lg'>SN</AvatarFallback>
+                  </Avatar>
+                  <div className='grid flex-1 text-start text-sm leading-tight'>
+                    <span className='truncate font-semibold'>{user.name}</span>
+                    <span className='truncate text-xs'>{user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <Sparkles />
+                  Upgrade to Pro
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                  <Link to='/settings/account'>
+                    <BadgeCheck />
+                    Account
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to='/settings'>
+                    <CreditCard />
+                    Billing
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to='/settings/notifications'>
+                    <Bell />
+                    Notifications
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                variant='destructive'
+                onClick={() => setOpen(true)}
+              >
+                <LogOut />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+
+      <SignOutDialog open={!!open} onOpenChange={setOpen} />
+    </>
+  )
+}

package/.shadcn-admin-ref/src/components/layout/team-switcher.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { ChevronsUpDown, Plus } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+
+type TeamSwitcherProps = {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}
+
+export function TeamSwitcher({ teams }: TeamSwitcherProps) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size='lg'
+              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
+            >
+              <div className='flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground'>
+                <activeTeam.logo className='size-4' />
+              </div>
+              <div className='grid flex-1 text-start text-sm leading-tight'>
+                <span className='truncate font-semibold'>
+                  {activeTeam.name}
+                </span>
+                <span className='truncate text-xs'>{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className='ms-auto' />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg'
+            align='start'
+            side={isMobile ? 'bottom' : 'right'}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className='text-xs text-muted-foreground'>
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className='gap-2 p-2'
+              >
+                <div className='flex size-6 items-center justify-center rounded-sm border'>
+                  <team.logo className='size-4 shrink-0' />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className='gap-2 p-2'>
+              <div className='flex size-6 items-center justify-center rounded-md border bg-background'>
+                <Plus className='size-4' />
+              </div>
+              <div className='font-medium text-muted-foreground'>Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/.shadcn-admin-ref/src/components/layout/top-nav.tsx

@@ -0,0 +1,67 @@
+import { Link } from '@tanstack/react-router'
+import { Menu } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+type TopNavProps = React.HTMLAttributes<HTMLElement> & {
+  links: {
+    title: string
+    href: string
+    isActive: boolean
+    disabled?: boolean
+  }[]
+}
+
+export function TopNav({ className, links, ...props }: TopNavProps) {
+  return (
+    <>
+      <div className='lg:hidden'>
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button size='icon' variant='outline' className='md:size-7'>
+              <Menu />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side='bottom' align='start'>
+            {links.map(({ title, href, isActive, disabled }) => (
+              <DropdownMenuItem key={`${title}-${href}`} asChild>
+                <Link
+                  to={href}
+                  className={!isActive ? 'text-muted-foreground' : ''}
+                  disabled={disabled}
+                >
+                  {title}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <nav
+        className={cn(
+          'hidden items-center space-x-4 lg:flex lg:space-x-4 xl:space-x-6',
+          className
+        )}
+        {...props}
+      >
+        {links.map(({ title, href, isActive, disabled }) => (
+          <Link
+            key={`${title}-${href}`}
+            to={href}
+            disabled={disabled}
+            className={`text-sm font-medium transition-colors hover:text-primary ${isActive ? '' : 'text-muted-foreground'}`}
+          >
+            {title}
+          </Link>
+        ))}
+      </nav>
+    </>
+  )
+}

package/.shadcn-admin-ref/src/components/layout/types.ts

@@ -0,0 +1,44 @@
+import { type LinkProps } from '@tanstack/react-router'
+
+type User = {
+  name: string
+  email: string
+  avatar: string
+}
+
+type Team = {
+  name: string
+  logo: React.ElementType
+  plan: string
+}
+
+type BaseNavItem = {
+  title: string
+  badge?: string
+  icon?: React.ElementType
+}
+
+type NavLink = BaseNavItem & {
+  url: LinkProps['to'] | (string & {})
+  items?: never
+}
+
+type NavCollapsible = BaseNavItem & {
+  items: (BaseNavItem & { url: LinkProps['to'] | (string & {}) })[]
+  url?: never
+}
+
+type NavItem = NavCollapsible | NavLink
+
+type NavGroup = {
+  title: string
+  items: NavItem[]
+}
+
+type SidebarData = {
+  user: User
+  teams: Team[]
+  navGroups: NavGroup[]
+}
+
+export type { SidebarData, NavGroup, NavItem, NavCollapsible, NavLink }

package/.shadcn-admin-ref/src/components/learn-more.tsx

@@ -0,0 +1,44 @@
+import { type Root, type Content, type Trigger } from '@radix-ui/react-popover'
+import { CircleQuestionMark } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+
+type LearnMoreProps = React.ComponentProps<typeof Root> & {
+  contentProps?: React.ComponentProps<typeof Content>
+  triggerProps?: React.ComponentProps<typeof Trigger>
+}
+
+export function LearnMore({
+  children,
+  contentProps,
+  triggerProps,
+  ...props
+}: LearnMoreProps) {
+  return (
+    <Popover {...props}>
+      <PopoverTrigger
+        asChild
+        {...triggerProps}
+        className={cn('size-5 rounded-full', triggerProps?.className)}
+      >
+        <Button variant='outline' size='icon'>
+          <span className='sr-only'>Learn more</span>
+          <CircleQuestionMark className='size-4 [&>circle]:hidden' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side='top'
+        align='start'
+        {...contentProps}
+        className={cn('text-sm text-muted-foreground', contentProps?.className)}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/.shadcn-admin-ref/src/components/long-text.tsx

@@ -0,0 +1,84 @@
+import { useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type LongTextProps = {
+  children: React.ReactNode
+  className?: string
+  contentClassName?: string
+}
+
+export function LongText({
+  children,
+  className = '',
+  contentClassName = '',
+}: LongTextProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [isOverflown, setIsOverflown] = useState(false)
+
+  // Use ref callback to check overflow when element is mounted
+  const refCallback = (node: HTMLDivElement | null) => {
+    ref.current = node
+    if (node && checkOverflow(node)) {
+      queueMicrotask(() => setIsOverflown(true))
+    }
+  }
+
+  if (!isOverflown)
+    return (
+      <div ref={refCallback} className={cn('truncate', className)}>
+        {children}
+      </div>
+    )
+
+  return (
+    <>
+      <div className='hidden sm:block'>
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div ref={refCallback} className={cn('truncate', className)}>
+                {children}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className={contentClassName}>{children}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div className='sm:hidden'>
+        <Popover>
+          <PopoverTrigger asChild>
+            <div ref={refCallback} className={cn('truncate', className)}>
+              {children}
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className={cn('w-fit', contentClassName)}>
+            <p>{children}</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  )
+}
+
+const checkOverflow = (textContainer: HTMLDivElement | null) => {
+  if (textContainer) {
+    return (
+      textContainer.offsetHeight < textContainer.scrollHeight ||
+      textContainer.offsetWidth < textContainer.scrollWidth
+    )
+  }
+  return false
+}

package/.shadcn-admin-ref/src/components/navigation-progress.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+import LoadingBar, { type LoadingBarRef } from 'react-top-loading-bar'
+
+export function NavigationProgress() {
+  const ref = useRef<LoadingBarRef>(null)
+  const state = useRouterState()
+
+  useEffect(() => {
+    if (state.status === 'pending') {
+      ref.current?.continuousStart()
+    } else {
+      ref.current?.complete()
+    }
+  }, [state.status])
+
+  return (
+    <LoadingBar
+      color='var(--muted-foreground)'
+      ref={ref}
+      shadow={true}
+      height={2}
+    />
+  )
+}