@djangocfg/layouts 1.4.26 → 1.4.28

package/src/layouts/UILayout/config/components/navigation.config.tsx

@@ -1,352 +0,0 @@
-/**
- * Navigation Components Configuration
- */
-
-import React from 'react';
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbNavigation,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  SSRPagination,
-  StaticPagination,
-} from '@djangocfg/ui';
-import type { ComponentConfig } from './types';
-
-export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'NavigationMenu',
-    category: 'navigation',
-    description: 'Accessible navigation menu with dropdown support and Next.js router integration',
-    importPath: `import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from '@djangocfg/ui';`,
-    example: `<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid gap-3 p-6 md:w-[400px]">
-          <li>
-            {/* NavigationMenuLink with href uses Next.js Link automatically */}
-            <NavigationMenuLink href="/">
-              <div className="text-sm font-medium">Welcome</div>
-              <p className="text-sm text-muted-foreground">
-                Get started with our components
-              </p>
-            </NavigationMenuLink>
-          </li>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      {/* Direct link with client-side navigation */}
-      <NavigationMenuLink href="/docs">
-        Documentation
-      </NavigationMenuLink>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>`,
-    preview: (
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-3 p-6 md:w-[400px]">
-                <li>
-                  <NavigationMenuLink asChild>
-                    <a href="/" className="block select-none space-y-1 rounded-md p-3 no-underline outline-none hover:bg-accent">
-                      <div className="text-sm font-medium">Welcome</div>
-                      <p className="text-sm text-muted-foreground">
-                        Get started with our components
-                      </p>
-                    </a>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuLink href="/docs">
-              Documentation
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-    ),
-  },
-  {
-    name: 'Breadcrumb',
-    category: 'navigation',
-    description: 'Navigation breadcrumbs showing current page hierarchy with Next.js router support',
-    importPath: `import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@djangocfg/ui';`,
-    example: `<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      {/* BreadcrumbLink with href automatically uses Next.js Link */}
-      <BreadcrumbLink href="/">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      {/* Current page - not a link */}
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>`,
-    preview: (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/">Home</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    ),
-  },
-  {
-    name: 'Tabs',
-    category: 'navigation',
-    description: 'Tab navigation for switching between different views. Supports mobile sheet mode, sticky positioning, and auto-responsive behavior.',
-    importPath: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';`,
-    example: `// Basic tabs with equal-width tabs
-<Tabs defaultValue="account" className="w-[400px]">
-  <TabsList fullWidth>
-    <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
-    <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">
-    <div className="p-4 border rounded-md">
-      <p className="text-sm">Make changes to your account here.</p>
-    </div>
-  </TabsContent>
-  <TabsContent value="password">
-    <div className="p-4 border rounded-md">
-      <p className="text-sm">Change your password here.</p>
-    </div>
-  </TabsContent>
-</Tabs>
-
-// Mobile-responsive tabs with sticky positioning
-<Tabs
-  defaultValue="account"
-  mobileSheet
-  mobileTitleText="Settings"
-  mobileSheetTitle="Navigation"
-  sticky
->
-  <TabsList fullWidth>
-    <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
-    <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">
-    Account content
-  </TabsContent>
-  <TabsContent value="password">
-    Password content
-  </TabsContent>
-</Tabs>`,
-    preview: (
-      <Tabs defaultValue="account" className="w-[400px]">
-        <TabsList fullWidth>
-          <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
-          <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
-        </TabsList>
-        <TabsContent value="account">
-          <div className="p-4 border rounded-md">
-            <p className="text-sm">Make changes to your account here.</p>
-          </div>
-        </TabsContent>
-        <TabsContent value="password">
-          <div className="p-4 border rounded-md">
-            <p className="text-sm">Change your password here.</p>
-          </div>
-        </TabsContent>
-      </Tabs>
-    ),
-  },
-  {
-    name: 'Pagination',
-    category: 'navigation',
-    description: 'Page navigation with previous/next controls and Next.js router support',
-    importPath: `import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@djangocfg/ui';`,
-    example: `<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      {/* Previous/Next with href automatically use Next.js Link */}
-      <PaginationPrevious href="/page/1" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/1" isActive>1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/2">2</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/page/3">3</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="/page/2" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>`,
-    preview: (
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">2</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    ),
-  },
-  {
-    name: 'BreadcrumbNavigation',
-    category: 'navigation',
-    description: 'Enhanced breadcrumb component with automatic path generation',
-    importPath: `import { BreadcrumbNavigation } from '@djangocfg/ui';`,
-    example: `<BreadcrumbNavigation
-  items={[
-    { label: "Home", href: "/" },
-    { label: "Products", href: "/products" },
-    { label: "Category", href: "/products/category" },
-    { label: "Item", href: "/products/category/item" },
-  ]}
-/>`,
-    preview: (
-      <BreadcrumbNavigation
-        items={[
-          { label: "Home", href: "/" },
-          { label: "Products", href: "/products" },
-          { label: "Category", href: "/products/category" },
-          { label: "Item", href: "/products/category/item" },
-        ]}
-      />
-    ),
-  },
-  {
-    name: 'SSRPagination',
-    category: 'navigation',
-    description: 'Server-side rendered pagination component',
-    importPath: `import { SSRPagination } from '@djangocfg/ui';`,
-    example: `<SSRPagination
-  currentPage={2}
-  totalPages={10}
-  totalItems={100}
-  itemsPerPage={10}
-  hasNextPage={true}
-  hasPreviousPage={true}
-/>`,
-    preview: (
-      <SSRPagination
-        currentPage={2}
-        totalPages={10}
-        totalItems={100}
-        itemsPerPage={10}
-        hasNextPage={true}
-        hasPreviousPage={true}
-      />
-    ),
-  },
-  {
-    name: 'StaticPagination',
-    category: 'navigation',
-    description: 'Client-side pagination component for static builds with callback support',
-    importPath: `import { StaticPagination } from '@djangocfg/ui';`,
-    example: `import { useDRFPagination } from '@djangocfg/ui';
-
-const pagination = useDRFPagination(1, 10);
-const { data } = useMyAPI(pagination.params);
-
-<StaticPagination
-  data={data}
-  onPageChange={pagination.setPage}
-/>`,
-    preview: (
-      <StaticPagination
-        data={{
-          count: 100,
-          page: 2,
-          pages: 10,
-          page_size: 10,
-          has_next: true,
-          has_previous: true,
-          next_page: 3,
-          previous_page: 1,
-          results: [],
-        }}
-        onPageChange={(page) => console.log('Page changed to:', page)}
-      />
-    ),
-  },
-];