@djangocfg/layouts 1.2.5 → 1.2.7

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

@@ -18,10 +18,39 @@ import {
   Textarea,
   Switch,
   Slider,
+  Combobox,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  PhoneInput,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Field,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 export const FORM_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'Label',
+    category: 'forms',
+    description: 'Accessible label component for form inputs',
+    importPath: "import { Label } from '@djangocfg/ui';",
+    example: `<div className="space-y-2">
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>`,
+    preview: (
+      <div className="space-y-2 max-w-sm">
+        <Label htmlFor="demo-email">Email address</Label>
+        <Input id="demo-email" type="email" placeholder="Enter your email" />
+      </div>
+    ),
+  },
   {
     name: 'Button',
     category: 'forms',
@@ -168,4 +197,169 @@ export const FORM_COMPONENTS: ComponentConfig[] = [
       <Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />
     ),
   },
+  {
+    name: 'Combobox',
+    category: 'forms',
+    description: 'Searchable dropdown with autocomplete',
+    importPath: "import { Combobox } from '@djangocfg/ui';",
+    example: `<Combobox
+  options={[
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "python", label: "Python" },
+    { value: "rust", label: "Rust" },
+  ]}
+  placeholder="Select language..."
+  searchPlaceholder="Search language..."
+  emptyText="No language found."
+/>`,
+    preview: (
+      <Combobox
+        options={[
+          { value: "javascript", label: "JavaScript" },
+          { value: "typescript", label: "TypeScript" },
+          { value: "python", label: "Python" },
+          { value: "rust", label: "Rust" },
+        ]}
+        placeholder="Select language..."
+        searchPlaceholder="Search language..."
+        emptyText="No language found."
+        className="w-[200px]"
+      />
+    ),
+  },
+  {
+    name: 'InputOTP',
+    category: 'forms',
+    description: 'One-time password input component',
+    importPath: "import { InputOTP, InputOTPGroup, InputOTPSlot } from '@djangocfg/ui';",
+    example: `<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`,
+    preview: (
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    ),
+  },
+  {
+    name: 'PhoneInput',
+    category: 'forms',
+    description: 'International phone number input with country selector',
+    importPath: "import { PhoneInput } from '@djangocfg/ui';",
+    example: `<PhoneInput
+  defaultCountry="US"
+  placeholder="Enter phone number"
+  className="max-w-sm"
+/>`,
+    preview: (
+      <PhoneInput
+        defaultCountry="US"
+        placeholder="Enter phone number"
+        className="max-w-sm"
+      />
+    ),
+  },
+  {
+    name: 'Form',
+    category: 'forms',
+    description: 'React Hook Form wrapper with form validation',
+    importPath: "import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@djangocfg/ui';",
+    example: `// Requires react-hook-form
+import { useForm } from 'react-hook-form';
+
+function MyForm() {
+  const form = useForm();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter username" {...field} />
+              </FormControl>
+              <FormDescription>
+                Your public display name
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          The Form component is a wrapper around React Hook Form with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Integrated form validation</li>
+          <li>• Accessible form fields</li>
+          <li>• Error message handling</li>
+          <li>• Field descriptions and labels</li>
+          <li>• Type-safe with TypeScript</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          See the <strong>react-hook-form</strong> documentation for usage examples
+        </p>
+      </div>
+    ),
+  },
+  {
+    name: 'Field',
+    category: 'forms',
+    description: 'Advanced field component with label, description and validation',
+    importPath: "import { Field, FieldGroup, FieldSet, FieldLegend } from '@djangocfg/ui';",
+    example: `<FieldSet>
+  <FieldLegend>Account Information</FieldLegend>
+  <FieldGroup>
+    <Field>
+      <FieldLabel>Username</FieldLabel>
+      <Input placeholder="Enter username" />
+      <FieldDescription>
+        Your unique username for the platform
+      </FieldDescription>
+      <FieldError>Username is required</FieldError>
+    </Field>
+  </FieldGroup>
+</FieldSet>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Field component provides structured form fields with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Label and description support</li>
+          <li>• Error message handling</li>
+          <li>• Field grouping (FieldSet, FieldGroup)</li>
+          <li>• Accessible by default</li>
+          <li>• Consistent styling</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          Perfect for complex forms with validation
+        </p>
+      </div>
+    ),
+  },
 ];

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

@@ -15,6 +15,13 @@ import {
   Skeleton,
   AspectRatio,
   Sticky,
+  ScrollArea,
+  ScrollBar,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  Section,
+  SectionHeader,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -130,4 +137,92 @@ export const LAYOUT_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'ScrollArea',
+    category: 'layout',
+    description: 'Custom scrollable area with styled scrollbar',
+    importPath: "import { ScrollArea, ScrollBar } from '@djangocfg/ui';",
+    example: `<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+  <div className="space-y-4">
+    {Array.from({ length: 20 }).map((_, i) => (
+      <div key={i} className="text-sm">
+        Content item {i + 1}
+      </div>
+    ))}
+  </div>
+  <ScrollBar orientation="vertical" />
+</ScrollArea>`,
+    preview: (
+      <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+        <div className="space-y-4">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div key={i} className="text-sm">
+              Content item {i + 1} - Scroll to see more content
+            </div>
+          ))}
+        </div>
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+    ),
+  },
+  {
+    name: 'Resizable',
+    category: 'layout',
+    description: 'Resizable panel layout with draggable handles',
+    importPath: "import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@djangocfg/ui';",
+    example: `<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">Panel One</span>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">Panel Two</span>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>`,
+    preview: (
+      <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">Panel One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">Panel Two</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    ),
+  },
+  {
+    name: 'Section',
+    category: 'layout',
+    description: 'Semantic section container with header',
+    importPath: "import { Section, SectionHeader } from '@djangocfg/ui';",
+    example: `<Section>
+  <SectionHeader
+    title="Section Title"
+    description="Section description goes here"
+  />
+  <div className="p-4">
+    Section content goes here...
+  </div>
+</Section>`,
+    preview: (
+      <Section>
+        <SectionHeader
+          title="Section Title"
+          subtitle="Section description goes here"
+        />
+        <div className="p-4 border-t">
+          <p className="text-sm">Section content goes here...</p>
+        </div>
+      </Section>
+    ),
+  },
 ];

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

@@ -16,6 +16,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbNavigation,
   Tabs,
   TabsContent,
   TabsList,
@@ -27,6 +28,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  SSRPagination,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -241,4 +243,52 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
       </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}
+      />
+    ),
+  },
 ];

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

@@ -3,6 +3,22 @@
  */
 
 import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+  Spinner,
+  Kbd,
+  TokenIcon,
+  Toaster,
+  InputGroup,
+  Item,
+} from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
@@ -122,4 +138,238 @@ export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'ButtonGroup',
+    category: 'specialized',
+    description: 'Group buttons together with shared borders',
+    importPath: `import { ButtonGroup, Button } from '@djangocfg/ui';`,
+    example: `<ButtonGroup orientation="horizontal">
+  <Button variant="outline">Left</Button>
+  <Button variant="outline">Center</Button>
+  <Button variant="outline">Right</Button>
+</ButtonGroup>`,
+    preview: (
+      <div className="space-y-4">
+        <ButtonGroup orientation="horizontal">
+          <Button variant="outline">Left</Button>
+          <Button variant="outline">Center</Button>
+          <Button variant="outline">Right</Button>
+        </ButtonGroup>
+        <ButtonGroup orientation="vertical">
+          <Button variant="outline">Top</Button>
+          <Button variant="outline">Middle</Button>
+          <Button variant="outline">Bottom</Button>
+        </ButtonGroup>
+      </div>
+    ),
+  },
+  {
+    name: 'Empty',
+    category: 'specialized',
+    description: 'Empty state component for no data scenarios',
+    importPath: `import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '@djangocfg/ui';`,
+    example: `<Empty>
+  <EmptyHeader>
+    <EmptyMedia>
+      <svg>...</svg>
+    </EmptyMedia>
+    <EmptyTitle>No results found</EmptyTitle>
+    <EmptyDescription>
+      Try adjusting your search or filter to find what you're looking for.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Clear filters</Button>
+  </EmptyContent>
+</Empty>`,
+    preview: (
+      <Empty className="border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+            </svg>
+          </EmptyMedia>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            Try adjusting your search or filter to find what you're looking for.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button>Clear filters</Button>
+        </EmptyContent>
+      </Empty>
+    ),
+  },
+  {
+    name: 'Spinner',
+    category: 'specialized',
+    description: 'Loading spinner indicator',
+    importPath: `import { Spinner } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-4 items-center">
+  <Spinner />
+  <Spinner className="size-6" />
+  <Spinner className="size-8" />
+</div>`,
+    preview: (
+      <div className="flex gap-4 items-center">
+        <Spinner />
+        <Spinner className="size-6" />
+        <Spinner className="size-8" />
+      </div>
+    ),
+  },
+  {
+    name: 'Kbd',
+    category: 'specialized',
+    description: 'Keyboard key display component',
+    importPath: `import { Kbd } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-2">
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</div>`,
+    preview: (
+      <div className="space-y-4">
+        <div className="flex gap-2 items-center">
+          <span className="text-sm">Press</span>
+          <Kbd>⌘</Kbd>
+          <Kbd>K</Kbd>
+          <span className="text-sm">to open</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <span className="text-sm">Press</span>
+          <Kbd>Ctrl</Kbd>
+          <span className="text-sm">+</span>
+          <Kbd>C</Kbd>
+          <span className="text-sm">to copy</span>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: 'TokenIcon',
+    category: 'specialized',
+    description: 'Cryptocurrency token icon component',
+    importPath: `import { TokenIcon } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-4">
+  <TokenIcon symbol="btc" size={32} />
+  <TokenIcon symbol="eth" size={32} />
+  <TokenIcon symbol="usdt" size={32} />
+</div>`,
+    preview: (
+      <div className="flex gap-4 items-center">
+        <TokenIcon symbol="btc" size={32} />
+        <TokenIcon symbol="eth" size={32} />
+        <TokenIcon symbol="usdt" size={32} />
+        <TokenIcon symbol="bnb" size={32} />
+      </div>
+    ),
+  },
+  {
+    name: 'Sonner (Toaster)',
+    category: 'specialized',
+    description: 'Toast notifications powered by Sonner library',
+    importPath: `import { Toaster } from '@djangocfg/ui';
+import { toast } from 'sonner';`,
+    example: `// Add Toaster to your app layout
+<Toaster />
+
+// Then use toast anywhere in your app
+toast.success('Operation completed!');
+toast.error('Something went wrong');
+toast.info('New message received');
+toast.promise(
+  fetchData(),
+  {
+    loading: 'Loading...',
+    success: 'Data loaded!',
+    error: 'Failed to load',
+  }
+);`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Sonner is a powerful toast notification system with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Promise-based toasts</li>
+          <li>• Multiple variants (success, error, info, warning)</li>
+          <li>• Custom duration and position</li>
+          <li>• Action buttons support</li>
+          <li>• Dark mode support</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          See <strong>sonner</strong> documentation for API details
+        </p>
+      </div>
+    ),
+  },
+  {
+    name: 'InputGroup',
+    category: 'specialized',
+    description: 'Enhanced input with prefix/suffix addons',
+    importPath: `import { InputGroup, Input } from '@djangocfg/ui';`,
+    example: `<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <SearchIcon className="size-4" />
+  </InputGroupAddon>
+  <Input placeholder="Search..." />
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘K</Kbd>
+  </InputGroupAddon>
+</InputGroup>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50 space-y-4">
+        <p className="text-sm text-muted-foreground">
+          InputGroup allows you to add prefixes and suffixes to inputs:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Icons and text addons</li>
+          <li>• Button addons</li>
+          <li>• Keyboard shortcuts display</li>
+          <li>• Currency and units</li>
+          <li>• Inline and block alignment</li>
+        </ul>
+        <InputGroup className="max-w-sm">
+          <div className="px-3 text-sm text-muted-foreground">$</div>
+          <input type="text" placeholder="0.00" className="flex-1 bg-transparent border-0 outline-none px-2" />
+          <div className="px-3 text-sm text-muted-foreground">USD</div>
+        </InputGroup>
+      </div>
+    ),
+  },
+  {
+    name: 'Item',
+    category: 'specialized',
+    description: 'List item component with variants and layouts',
+    importPath: `import { Item, ItemGroup } from '@djangocfg/ui';`,
+    example: `<ItemGroup>
+  <Item variant="outline" size="default">
+    <ItemIcon>
+      <FileIcon />
+    </ItemIcon>
+    <ItemContent>
+      <ItemTitle>Document.pdf</ItemTitle>
+      <ItemDescription>Updated 2 hours ago</ItemDescription>
+    </ItemContent>
+    <ItemAction>
+      <Button variant="ghost" size="sm">View</Button>
+    </ItemAction>
+  </Item>
+</ItemGroup>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Item component for building lists with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Multiple variants (default, outline, muted)</li>
+          <li>• Icon, content, and action slots</li>
+          <li>• Flexible layouts</li>
+          <li>• Separator support</li>
+          <li>• Perfect for file lists, notifications, etc.</li>
+        </ul>
+      </div>
+    ),
+  },
 ];

package/src/layouts/index.ts

@@ -11,3 +11,6 @@ export * from './ErrorLayout';
 
 // UILayout - Config-driven UI documentation layout
 export * from './UILayout';
+
+// Note: CfgLayout is now part of AppLayout exports
+// Import it via: import { CfgLayout, useCfgApp } from '@djangocfg/layouts';

package/src/utils/logger.ts

@@ -3,7 +3,7 @@ import { createConsola } from 'consola';
 /**
  * Universal logger for @djangocfg/layouts
  * Uses consola for beautiful console logging
- * 
+ *
  * Log levels:
  * - 0: silent
  * - 1: fatal, error
@@ -12,8 +12,10 @@ import { createConsola } from 'consola';
  * - 4: debug
  * - 5: trace, verbose
  */
+const isDevelopment = process.env.NODE_ENV === 'development';
+
 export const logger = createConsola({
-  level: process.env.NODE_ENV === 'production' ? 3 : 4,
+  level: isDevelopment ? 4 : 1,  // dev: debug, production: errors only
 }).withTag('layouts');
 
 // ─────────────────────────────────────────────────────────────────────────