@djangocfg/layouts 1.0.5 → 1.1.0

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

@@ -0,0 +1,133 @@
+/**
+ * Layout Components Configuration
+ */
+
+import React from 'react';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Separator,
+  Skeleton,
+  AspectRatio,
+  Sticky,
+} from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+export const LAYOUT_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'Card',
+    category: 'layout',
+    description: 'Container with header, content, and footer sections',
+    importPath: "import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@djangocfg/ui';",
+    example: `<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description goes here</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>This is the main content of the card.</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>`,
+    preview: (
+      <Card className="max-w-sm">
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card description goes here</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This is the main content of the card.</p>
+        </CardContent>
+        <CardFooter>
+          <Button>Action</Button>
+        </CardFooter>
+      </Card>
+    ),
+  },
+  {
+    name: 'Separator',
+    category: 'layout',
+    description: 'Visual divider between sections',
+    importPath: "import { Separator } from '@djangocfg/ui';",
+    example: `<div>
+  <p>Section 1</p>
+  <Separator className="my-4" />
+  <p>Section 2</p>
+</div>`,
+    preview: (
+      <div>
+        <p>Section 1</p>
+        <Separator className="my-4" />
+        <p>Section 2</p>
+      </div>
+    ),
+  },
+  {
+    name: 'Skeleton',
+    category: 'layout',
+    description: 'Loading placeholder animation',
+    importPath: "import { Skeleton } from '@djangocfg/ui';",
+    example: `<div className="space-y-3">
+  <Skeleton className="w-full h-12" />
+  <Skeleton className="w-3/4 h-8" />
+  <Skeleton className="w-1/2 h-8" />
+</div>`,
+    preview: (
+      <div className="space-y-3 max-w-sm">
+        <Skeleton className="w-full h-12" />
+        <Skeleton className="w-3/4 h-8" />
+        <Skeleton className="w-1/2 h-8" />
+      </div>
+    ),
+  },
+  {
+    name: 'AspectRatio',
+    category: 'layout',
+    description: 'Maintain aspect ratio for content',
+    importPath: "import { AspectRatio } from '@djangocfg/ui';",
+    example: `<AspectRatio ratio={16/9} className="bg-muted">
+  <img src="/demo.jpg" alt="Demo" className="object-cover rounded-md" />
+</AspectRatio>`,
+    preview: (
+      <AspectRatio ratio={16/9} className="bg-muted rounded-md max-w-sm">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          16:9 Aspect Ratio
+        </div>
+      </AspectRatio>
+    ),
+  },
+  {
+    name: 'Sticky',
+    category: 'layout',
+    description: 'Make content sticky on scroll',
+    importPath: "import { Sticky } from '@djangocfg/ui';",
+    example: `<Sticky offsetTop={0} disableOnMobile={false}>
+  <nav className="bg-background border p-4">
+    Sticky Navigation
+  </nav>
+</Sticky>`,
+    preview: (
+      <div className="h-[300px] overflow-auto border rounded-md relative">
+        <Sticky offsetTop={0} disableOnMobile={false}>
+          <div className="bg-primary text-primary-foreground p-3 text-center font-semibold shadow-md">
+            Sticky Header (scroll to see effect)
+          </div>
+        </Sticky>
+        <div className="p-4 space-y-3">
+          {[...Array(20)].map((_, i) => (
+            <p key={i} className="text-sm">
+              Content line {i + 1} - Scroll down to see the sticky header in action
+            </p>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+];

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

@@ -0,0 +1,244 @@
+/**
+ * Navigation Components Configuration
+ */
+
+import React from 'react';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'NavigationMenu',
+    category: 'navigation',
+    description: 'Accessible navigation menu with dropdown support',
+    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 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>
+      <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',
+    importPath: `import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@djangocfg/ui';`,
+    example: `<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <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',
+    importPath: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';`,
+    example: `<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList className="grid w-full grid-cols-2">
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">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>`,
+    preview: (
+      <Tabs defaultValue="account" className="w-[400px]">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">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',
+    importPath: `import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@djangocfg/ui';`,
+    example: `<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>`,
+    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>
+    ),
+  },
+];