create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,268 @@
+import { Link, useLocation, useRouter } from '@tanstack/react-router'
+import { objAppConfig } from '@/config/appConfig'
+import { useLocale, useLocaleMessages } from '@/locale'
+import { objRouteMessages } from '@/router/messages'
+import { fnCreateNavigationCatalog } from '@/router/navigation'
+import type { INavigationCatalogEntry } from '@/router/types'
+import { ChevronRight, PanelLeftIcon } from 'lucide-react'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { BrandLogo } from '@/components/BrandLogo'
+
+function fnIsActivePath(strPathname: string, strTo: string) {
+  return strPathname === strTo || strPathname.startsWith(`${strTo}/`)
+}
+
+function SidebarBrand() {
+  const { fnTranslateShared } = useLocale()
+  const { state: strState, toggleSidebar: fnToggleSidebar } = useSidebar()
+  const bIsCollapsed = strState === 'collapsed'
+
+  if (bIsCollapsed) {
+    return (
+      <SidebarMenuButton
+        type='button'
+        size='lg'
+        aria-label={fnTranslateShared('sidebar.expand')}
+        className='group/brand'
+        onClick={fnToggleSidebar}
+      >
+        <span className='relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary/10'>
+          <BrandLogo strClassName='size-6 shrink-0 object-contain transition-opacity duration-150 group-hover/brand:opacity-0 group-focus-visible/brand:opacity-0 motion-reduce:transition-none' />
+          <PanelLeftIcon className='absolute size-4 shrink-0 opacity-0 transition-opacity duration-150 group-hover/brand:opacity-100 group-focus-visible/brand:opacity-100 motion-reduce:transition-none' />
+        </span>
+      </SidebarMenuButton>
+    )
+  }
+
+  return (
+    <SidebarMenuButton size='lg' asChild>
+      <Link to={objAppConfig.navigation.strDefaultAuthenticatedPath}>
+        <div className='flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary/10'>
+          <BrandLogo strClassName='size-6 shrink-0 object-contain' />
+        </div>
+        <div className='grid min-w-0 flex-1 text-start text-sm leading-tight'>
+          <span className='truncate font-semibold'>
+            {objAppConfig.brand.strName}
+          </span>
+          <span className='truncate text-xs'>
+            {objAppConfig.brand.strDescription}
+          </span>
+        </div>
+      </Link>
+    </SidebarMenuButton>
+  )
+}
+
+function NavigationLink({ objEntry }: { objEntry: INavigationCatalogEntry }) {
+  const strPathname = useLocation({
+    select: (objLocation) => objLocation.pathname,
+  })
+  const { objRoute, strTitle } = objEntry
+  const objStaticData = objRoute.options.staticData
+
+  if (!objStaticData?.strTitle || !objStaticData.Icon) return null
+
+  const Icon = objStaticData.Icon
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={fnIsActivePath(strPathname, objRoute.to)}
+        tooltip={strTitle}
+      >
+        <Link to={objRoute.to}>
+          <Icon />
+          <span>{strTitle}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+function NavigationChildren({
+  objEntry,
+}: {
+  objEntry: INavigationCatalogEntry
+}) {
+  const strPathname = useLocation({
+    select: (objLocation) => objLocation.pathname,
+  })
+  const { state: strState } = useSidebar()
+  const { arrChildren, objRoute, strTitle } = objEntry
+  const objStaticData = objRoute.options.staticData
+  const bIsActive = arrChildren.some((objChildEntry) =>
+    fnIsActivePath(strPathname, objChildEntry.objRoute.to)
+  )
+
+  if (!arrChildren || !objStaticData?.strTitle || !objStaticData.Icon) {
+    return null
+  }
+
+  const Icon = objStaticData.Icon
+
+  if (strState === 'collapsed') {
+    return (
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton isActive={bIsActive} tooltip={strTitle}>
+              <Icon />
+              <span>{strTitle}</span>
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side='right' align='start' sideOffset={4}>
+            <DropdownMenuLabel>{strTitle}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {arrChildren.map((objChildEntry) => {
+              const { objRoute: objChildRoute, strTitle: strChildTitle } =
+                objChildEntry
+              const objChildStaticData = objChildRoute.options.staticData
+
+              if (!objChildStaticData?.strTitle || !objChildStaticData.Icon) {
+                return null
+              }
+
+              const ChildIcon = objChildStaticData.Icon
+              return (
+                <DropdownMenuItem key={objChildRoute.id} asChild>
+                  <Link to={objChildRoute.to}>
+                    <ChildIcon />
+                    {strChildTitle}
+                  </Link>
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <Collapsible asChild defaultOpen={bIsActive} className='group/collapsible'>
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={bIsActive} tooltip={strTitle}>
+            <Icon />
+            <span>{strTitle}</span>
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className='CollapsibleContent'>
+          <SidebarMenuSub>
+            {arrChildren.map((objChildEntry) => {
+              const { objRoute: objChildRoute, strTitle: strChildTitle } =
+                objChildEntry
+              const objChildStaticData = objChildRoute.options.staticData
+
+              if (!objChildStaticData?.strTitle || !objChildStaticData.Icon) {
+                return null
+              }
+
+              const ChildIcon = objChildStaticData.Icon
+              return (
+                <SidebarMenuSubItem key={objChildRoute.id}>
+                  <SidebarMenuSubButton
+                    asChild
+                    isActive={fnIsActivePath(strPathname, objChildRoute.to)}
+                  >
+                    <Link to={objChildRoute.to}>
+                      <ChildIcon />
+                      <span>{strChildTitle}</span>
+                    </Link>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              )
+            })}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+export function AppSidebar() {
+  const objRouter = useRouter()
+  const { fnCompare, fnTranslateShared } = useLocale()
+  const { fnTranslate: fnTranslateRoute } = useLocaleMessages(objRouteMessages)
+  const arrNavigationGroups = fnCreateNavigationCatalog(
+    objRouter,
+    objRouter.options.context.objAuth.fnHasPermission,
+    fnCompare,
+    fnTranslateRoute
+  )
+
+  return (
+    <Sidebar variant='floating' collapsible='icon'>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarBrand />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        {arrNavigationGroups.map((objGroup) => (
+          <SidebarGroup key={objGroup.strTitle}>
+            <SidebarGroupLabel>{objGroup.strTitle}</SidebarGroupLabel>
+            <SidebarMenu>
+              {objGroup.arrEntries.map((objEntry) =>
+                objEntry.arrChildren.length > 0 ? (
+                  <NavigationChildren
+                    key={objEntry.objRoute.id}
+                    objEntry={objEntry}
+                  />
+                ) : (
+                  <NavigationLink
+                    key={objEntry.objRoute.id}
+                    objEntry={objEntry}
+                  />
+                )
+              )}
+            </SidebarMenu>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter className='group-data-[collapsible=icon]:hidden'>
+        <p
+          aria-label={`${fnTranslateShared('sidebar.version')} ${objAppConfig.release.strVersion}, ${fnTranslateShared('sidebar.environment')} ${objAppConfig.release.strEnvironment}`}
+          className='truncate px-2 text-xs text-muted-foreground'
+          title={`${fnTranslateShared('sidebar.commit')} ${objAppConfig.release.strCommit} · ${fnTranslateShared('sidebar.builtAt')} ${objAppConfig.release.strBuildTime}`}
+        >
+          v{objAppConfig.release.strVersion} ·{' '}
+          {objAppConfig.release.strEnvironment}
+        </p>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/template/src/components/layout/PageContainer.tsx

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+
+export function PageContainer({
+  className: strClassName,
+  ...objProps
+}: React.ComponentProps<'main'>) {
+  return (
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-4 p-3 sm:gap-6 @7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl',
+        strClassName
+      )}
+      {...objProps}
+    />
+  )
+}

package/template/src/components/ui/avatar.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import * as React from 'react'
+import { Avatar as AvatarPrimitive } from 'radix-ui'
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot='avatar'
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot='avatar-image'
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot='avatar-fallback'
+      className={cn(
+        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='avatar-badge'
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='avatar-group'
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='avatar-group-count'
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/template/src/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : 'span'
+
+  return (
+    <Comp
+      data-slot='badge'
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/template/src/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : 'button'
+
+  return (
+    <Comp
+      data-slot='button'
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/template/src/components/ui/card.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card'
+      className={cn(
+        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-header'
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-title'
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-description'
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-content'
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent }

package/template/src/components/ui/checkbox.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import { CheckIcon } from 'lucide-react'
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot='checkbox-indicator'
+        className='grid place-content-center text-current'
+      >
+        <CheckIcon className='size-3.5' />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/template/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot='collapsible-trigger'
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot='collapsible-content'
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }