zyflow 0.6.4

package/.shadcn-admin-ref/src/components/command-menu.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { ArrowRight, ChevronRight, Laptop, Moon, Sun } from 'lucide-react'
+import { useSearch } from '@/context/search-provider'
+import { useTheme } from '@/context/theme-provider'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import { sidebarData } from './layout/data/sidebar-data'
+import { ScrollArea } from './ui/scroll-area'
+
+export function CommandMenu() {
+  const navigate = useNavigate()
+  const { setTheme } = useTheme()
+  const { open, setOpen } = useSearch()
+
+  const runCommand = React.useCallback(
+    (command: () => unknown) => {
+      setOpen(false)
+      command()
+    },
+    [setOpen]
+  )
+
+  return (
+    <CommandDialog modal open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder='Type a command or search...' />
+      <CommandList>
+        <ScrollArea type='hover' className='h-72 pe-1'>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {sidebarData.navGroups.map((group) => (
+            <CommandGroup key={group.title} heading={group.title}>
+              {group.items.map((navItem, i) => {
+                if (navItem.url)
+                  return (
+                    <CommandItem
+                      key={`${navItem.url}-${i}`}
+                      value={navItem.title}
+                      onSelect={() => {
+                        runCommand(() => navigate({ to: navItem.url }))
+                      }}
+                    >
+                      <div className='flex size-4 items-center justify-center'>
+                        <ArrowRight className='size-2 text-muted-foreground/80' />
+                      </div>
+                      {navItem.title}
+                    </CommandItem>
+                  )
+
+                return navItem.items?.map((subItem, i) => (
+                  <CommandItem
+                    key={`${navItem.title}-${subItem.url}-${i}`}
+                    value={`${navItem.title}-${subItem.url}`}
+                    onSelect={() => {
+                      runCommand(() => navigate({ to: subItem.url }))
+                    }}
+                  >
+                    <div className='flex size-4 items-center justify-center'>
+                      <ArrowRight className='size-2 text-muted-foreground/80' />
+                    </div>
+                    {navItem.title} <ChevronRight /> {subItem.title}
+                  </CommandItem>
+                ))
+              })}
+            </CommandGroup>
+          ))}
+          <CommandSeparator />
+          <CommandGroup heading='Theme'>
+            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
+              <Sun /> <span>Light</span>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
+              <Moon className='scale-90' />
+              <span>Dark</span>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
+              <Laptop />
+              <span>System</span>
+            </CommandItem>
+          </CommandGroup>
+        </ScrollArea>
+      </CommandList>
+    </CommandDialog>
+  )
+}

package/.shadcn-admin-ref/src/components/config-drawer.tsx

@@ -0,0 +1,354 @@
+import { type SVGProps } from 'react'
+import { Root as Radio, Item } from '@radix-ui/react-radio-group'
+import { CircleCheck, RotateCcw, Settings } from 'lucide-react'
+import { IconDir } from '@/assets/custom/icon-dir'
+import { IconLayoutCompact } from '@/assets/custom/icon-layout-compact'
+import { IconLayoutDefault } from '@/assets/custom/icon-layout-default'
+import { IconLayoutFull } from '@/assets/custom/icon-layout-full'
+import { IconSidebarFloating } from '@/assets/custom/icon-sidebar-floating'
+import { IconSidebarInset } from '@/assets/custom/icon-sidebar-inset'
+import { IconSidebarSidebar } from '@/assets/custom/icon-sidebar-sidebar'
+import { IconThemeDark } from '@/assets/custom/icon-theme-dark'
+import { IconThemeLight } from '@/assets/custom/icon-theme-light'
+import { IconThemeSystem } from '@/assets/custom/icon-theme-system'
+import { cn } from '@/lib/utils'
+import { useDirection } from '@/context/direction-provider'
+import { type Collapsible, useLayout } from '@/context/layout-provider'
+import { useTheme } from '@/context/theme-provider'
+import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+import { useSidebar } from './ui/sidebar'
+
+export function ConfigDrawer() {
+  const { setOpen } = useSidebar()
+  const { resetDir } = useDirection()
+  const { resetTheme } = useTheme()
+  const { resetLayout } = useLayout()
+
+  const handleReset = () => {
+    setOpen(true)
+    resetDir()
+    resetTheme()
+    resetLayout()
+  }
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          size='icon'
+          variant='ghost'
+          aria-label='Open theme settings'
+          aria-describedby='config-drawer-description'
+          className='rounded-full'
+        >
+          <Settings aria-hidden='true' />
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='flex flex-col'>
+        <SheetHeader className='pb-0 text-start'>
+          <SheetTitle>Theme Settings</SheetTitle>
+          <SheetDescription id='config-drawer-description'>
+            Adjust the appearance and layout to suit your preferences.
+          </SheetDescription>
+        </SheetHeader>
+        <div className='space-y-6 overflow-y-auto px-4'>
+          <ThemeConfig />
+          <SidebarConfig />
+          <LayoutConfig />
+          <DirConfig />
+        </div>
+        <SheetFooter className='gap-2'>
+          <Button
+            variant='destructive'
+            onClick={handleReset}
+            aria-label='Reset all settings to default values'
+          >
+            Reset
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function SectionTitle({
+  title,
+  showReset = false,
+  onReset,
+  className,
+}: {
+  title: string
+  showReset?: boolean
+  onReset?: () => void
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'mb-2 flex items-center gap-2 text-sm font-semibold text-muted-foreground',
+        className
+      )}
+    >
+      {title}
+      {showReset && onReset && (
+        <Button
+          size='icon'
+          variant='secondary'
+          className='size-4 rounded-full'
+          onClick={onReset}
+        >
+          <RotateCcw className='size-3' />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function RadioGroupItem({
+  item,
+  isTheme = false,
+}: {
+  item: {
+    value: string
+    label: string
+    icon: (props: SVGProps<SVGSVGElement>) => React.ReactElement
+  }
+  isTheme?: boolean
+}) {
+  return (
+    <Item
+      value={item.value}
+      className={cn('group outline-none', 'transition duration-200 ease-in')}
+      aria-label={`Select ${item.label.toLowerCase()}`}
+      aria-describedby={`${item.value}-description`}
+    >
+      <div
+        className={cn(
+          'relative rounded-[6px] ring-[1px] ring-border',
+          'group-data-[state=checked]:shadow-2xl group-data-[state=checked]:ring-primary',
+          'group-focus-visible:ring-2'
+        )}
+        role='img'
+        aria-hidden='false'
+        aria-label={`${item.label} option preview`}
+      >
+        <CircleCheck
+          className={cn(
+            'size-6 fill-primary stroke-white',
+            'group-data-[state=unchecked]:hidden',
+            'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2'
+          )}
+          aria-hidden='true'
+        />
+        <item.icon
+          className={cn(
+            !isTheme &&
+              'fill-primary stroke-primary group-data-[state=unchecked]:fill-muted-foreground group-data-[state=unchecked]:stroke-muted-foreground'
+          )}
+          aria-hidden='true'
+        />
+      </div>
+      <div
+        className='mt-1 text-xs'
+        id={`${item.value}-description`}
+        aria-live='polite'
+      >
+        {item.label}
+      </div>
+    </Item>
+  )
+}
+
+function ThemeConfig() {
+  const { defaultTheme, theme, setTheme } = useTheme()
+  return (
+    <div>
+      <SectionTitle
+        title='Theme'
+        showReset={theme !== defaultTheme}
+        onReset={() => setTheme(defaultTheme)}
+      />
+      <Radio
+        value={theme}
+        onValueChange={setTheme}
+        className='grid w-full max-w-md grid-cols-3 gap-4'
+        aria-label='Select theme preference'
+        aria-describedby='theme-description'
+      >
+        {[
+          {
+            value: 'system',
+            label: 'System',
+            icon: IconThemeSystem,
+          },
+          {
+            value: 'light',
+            label: 'Light',
+            icon: IconThemeLight,
+          },
+          {
+            value: 'dark',
+            label: 'Dark',
+            icon: IconThemeDark,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} isTheme />
+        ))}
+      </Radio>
+      <div id='theme-description' className='sr-only'>
+        Choose between system preference, light mode, or dark mode
+      </div>
+    </div>
+  )
+}
+
+function SidebarConfig() {
+  const { defaultVariant, variant, setVariant } = useLayout()
+  return (
+    <div className='max-md:hidden'>
+      <SectionTitle
+        title='Sidebar'
+        showReset={defaultVariant !== variant}
+        onReset={() => setVariant(defaultVariant)}
+      />
+      <Radio
+        value={variant}
+        onValueChange={setVariant}
+        className='grid w-full max-w-md grid-cols-3 gap-4'
+        aria-label='Select sidebar style'
+        aria-describedby='sidebar-description'
+      >
+        {[
+          {
+            value: 'inset',
+            label: 'Inset',
+            icon: IconSidebarInset,
+          },
+          {
+            value: 'floating',
+            label: 'Floating',
+            icon: IconSidebarFloating,
+          },
+          {
+            value: 'sidebar',
+            label: 'Sidebar',
+            icon: IconSidebarSidebar,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id='sidebar-description' className='sr-only'>
+        Choose between inset, floating, or standard sidebar layout
+      </div>
+    </div>
+  )
+}
+
+function LayoutConfig() {
+  const { open, setOpen } = useSidebar()
+  const { defaultCollapsible, collapsible, setCollapsible } = useLayout()
+
+  const radioState = open ? 'default' : collapsible
+
+  return (
+    <div className='max-md:hidden'>
+      <SectionTitle
+        title='Layout'
+        showReset={radioState !== 'default'}
+        onReset={() => {
+          setOpen(true)
+          setCollapsible(defaultCollapsible)
+        }}
+      />
+      <Radio
+        value={radioState}
+        onValueChange={(v) => {
+          if (v === 'default') {
+            setOpen(true)
+            return
+          }
+          setOpen(false)
+          setCollapsible(v as Collapsible)
+        }}
+        className='grid w-full max-w-md grid-cols-3 gap-4'
+        aria-label='Select layout style'
+        aria-describedby='layout-description'
+      >
+        {[
+          {
+            value: 'default',
+            label: 'Default',
+            icon: IconLayoutDefault,
+          },
+          {
+            value: 'icon',
+            label: 'Compact',
+            icon: IconLayoutCompact,
+          },
+          {
+            value: 'offcanvas',
+            label: 'Full layout',
+            icon: IconLayoutFull,
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id='layout-description' className='sr-only'>
+        Choose between default expanded, compact icon-only, or full layout mode
+      </div>
+    </div>
+  )
+}
+
+function DirConfig() {
+  const { defaultDir, dir, setDir } = useDirection()
+  return (
+    <div>
+      <SectionTitle
+        title='Direction'
+        showReset={defaultDir !== dir}
+        onReset={() => setDir(defaultDir)}
+      />
+      <Radio
+        value={dir}
+        onValueChange={setDir}
+        className='grid w-full max-w-md grid-cols-3 gap-4'
+        aria-label='Select site direction'
+        aria-describedby='direction-description'
+      >
+        {[
+          {
+            value: 'ltr',
+            label: 'Left to Right',
+            icon: (props: SVGProps<SVGSVGElement>) => (
+              <IconDir dir='ltr' {...props} />
+            ),
+          },
+          {
+            value: 'rtl',
+            label: 'Right to Left',
+            icon: (props: SVGProps<SVGSVGElement>) => (
+              <IconDir dir='rtl' {...props} />
+            ),
+          },
+        ].map((item) => (
+          <RadioGroupItem key={item.value} item={item} />
+        ))}
+      </Radio>
+      <div id='direction-description' className='sr-only'>
+        Choose between left-to-right or right-to-left site direction
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/components/confirm-dialog.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+
+type ConfirmDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  disabled?: boolean
+  desc: React.JSX.Element | string
+  cancelBtnText?: string
+  confirmText?: React.ReactNode
+  destructive?: boolean
+  handleConfirm: () => void
+  isLoading?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  const {
+    title,
+    desc,
+    children,
+    className,
+    confirmText,
+    cancelBtnText,
+    destructive,
+    isLoading,
+    disabled = false,
+    handleConfirm,
+    ...actions
+  } = props
+  return (
+    <AlertDialog {...actions}>
+      <AlertDialogContent className={cn(className && className)}>
+        <AlertDialogHeader className='text-start'>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div>{desc}</div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isLoading}>
+            {cancelBtnText ?? 'Cancel'}
+          </AlertDialogCancel>
+          <Button
+            variant={destructive ? 'destructive' : 'default'}
+            onClick={handleConfirm}
+            disabled={disabled || isLoading}
+          >
+            {confirmText ?? 'Continue'}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}