@djangocfg/layouts 1.4.27 → 1.4.29

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

@@ -1,168 +0,0 @@
-/**
- * Hooks Configuration
- */
-
-import React from 'react';
-import type { ComponentConfig } from './types';
-
-export const HOOKS: ComponentConfig[] = [
-  {
-    name: 'useMediaQuery',
-    category: 'hooks',
-    description: 'Responsive media query hook',
-    importPath: "import { useMediaQuery } from '@djangocfg/ui';",
-    example: `const isMobile = useMediaQuery('(max-width: 768px)');
-const isDesktop = useMediaQuery('(min-width: 1024px)');
-
-return isMobile ? <MobileView /> : <DesktopView />;`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          useMediaQuery('(max-width: 768px)')
-        </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Returns boolean based on media query match
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'useTheme',
-    category: 'hooks',
-    description: 'Theme management hook',
-    importPath: "import { useTheme } from '@djangocfg/ui';",
-    example: `const theme = useTheme(); // Returns 'light' | 'dark'
-
-// Toggle theme manually
-document.documentElement.classList.toggle('dark');`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          const theme = useTheme();
-        </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Returns current theme: 'light' | 'dark'
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'useCopy',
-    category: 'hooks',
-    description: 'Copy to clipboard hook',
-    importPath: "import { useCopy } from '@djangocfg/ui';",
-    example: `const { copyToClipboard } = useCopy();
-const [copied, setCopied] = useState(false);
-
-const handleCopy = async () => {
-  await copyToClipboard('text to copy');
-  setCopied(true);
-};`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          copyToClipboard(text)
-        </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Copy text to clipboard programmatically
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'useCountdown',
-    category: 'hooks',
-    description: 'Countdown timer hook',
-    importPath: "import { useCountdown } from '@djangocfg/ui';",
-    example: `const targetDate = new Date('2025-12-31').toISOString();
-const countdown = useCountdown(targetDate);
-
-// Returns: { days, hours, minutes, seconds, isExpired }`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          useCountdown(isoDateString)
-        </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Returns countdown object with days, hours, minutes, seconds
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'useDebounce',
-    category: 'hooks',
-    description: 'Debounce value changes to reduce API calls and improve performance. Perfect for search inputs and form fields.',
-    importPath: "import { useDebounce } from '@djangocfg/ui';",
-    example: `// Basic search debouncing
-const [search, setSearch] = useState('');
-const debouncedSearch = useDebounce(search, 300); // Default 300ms
-
-useEffect(() => {
-  if (debouncedSearch) {
-    // API call only fires 300ms after user stops typing
-    fetchResults(debouncedSearch);
-  }
-}, [debouncedSearch]);
-
-// With MultiSelectPro (has built-in search)
-const [searchValue, setSearchValue] = useState('');
-const debouncedSearchValue = useDebounce(searchValue, 500);
-
-useEffect(() => {
-  // Fetch options from API with debounced search
-  if (debouncedSearchValue) {
-    fetchOptions(debouncedSearchValue);
-  }
-}, [debouncedSearchValue]);
-
-<MultiSelectPro
-  options={filteredOptions}
-  onValueChange={setSelected}
-  placeholder="Search and select..."
-  searchable={true}
-  // ... other props
-/>`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          const debouncedValue = useDebounce(value, delay);
-        </code>
-        <div className="mt-3 space-y-2 text-sm text-muted-foreground">
-          <p><strong>Parameters:</strong></p>
-          <ul className="list-disc list-inside space-y-1 ml-2">
-            <li><code>value</code>: Any value to debounce</li>
-            <li><code>delay</code>: Delay in milliseconds (default: 300ms)</li>
-          </ul>
-          <p className="mt-2"><strong>Returns:</strong> Debounced value</p>
-          <p className="mt-2"><strong>Use Cases:</strong></p>
-          <ul className="list-disc list-inside space-y-1 ml-2">
-            <li>Search inputs (reduce API calls)</li>
-            <li>Form validation</li>
-            <li>Auto-save functionality</li>
-            <li>Scroll/resize event handlers</li>
-          </ul>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'useIsMobile',
-    category: 'hooks',
-    description: 'Check if device is mobile',
-    importPath: "import { useIsMobile } from '@djangocfg/ui';",
-    example: `const isMobile = useIsMobile(); // Boolean
-
-return isMobile ? <MobileMenu /> : <DesktopMenu />;`,
-    preview: (
-      <div className="p-4 border rounded-md">
-        <code className="text-sm">
-          const isMobile = useIsMobile();
-        </code>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Returns true if viewport width {'<'} 768px
-        </p>
-      </div>
-    ),
-  },
-];

package/src/layouts/UILayout/config/components/index.ts

@@ -1,72 +0,0 @@
-/**
- * Components Configuration Index
- * Aggregates all component configs from separate files
- */
-
-export type { ComponentConfig } from './types';
-export { FORM_COMPONENTS } from './forms.config';
-export { LAYOUT_COMPONENTS } from './layout.config';
-export { NAVIGATION_COMPONENTS } from './navigation.config';
-export { OVERLAY_COMPONENTS } from './overlay.config';
-export { FEEDBACK_COMPONENTS } from './feedback.config';
-export { DATA_COMPONENTS } from './data.config';
-export { SPECIALIZED_COMPONENTS } from './specialized.config';
-export { TOOLS_COMPONENTS } from './tools.config';
-export { BLOCKS } from './blocks.config';
-export { HOOKS } from './hooks.config';
-
-import { FORM_COMPONENTS } from './forms.config';
-import { LAYOUT_COMPONENTS } from './layout.config';
-import { NAVIGATION_COMPONENTS } from './navigation.config';
-import { OVERLAY_COMPONENTS } from './overlay.config';
-import { FEEDBACK_COMPONENTS } from './feedback.config';
-import { DATA_COMPONENTS } from './data.config';
-import { SPECIALIZED_COMPONENTS } from './specialized.config';
-import { TOOLS_COMPONENTS } from './tools.config';
-import { BLOCKS } from './blocks.config';
-import { HOOKS } from './hooks.config';
-import type { ComponentConfig } from './types';
-
-/**
- * All components aggregated from category configs
- */
-export const COMPONENTS_CONFIG: ComponentConfig[] = [
-  ...FORM_COMPONENTS,
-  ...LAYOUT_COMPONENTS,
-  ...NAVIGATION_COMPONENTS,
-  ...OVERLAY_COMPONENTS,
-  ...FEEDBACK_COMPONENTS,
-  ...DATA_COMPONENTS,
-  ...SPECIALIZED_COMPONENTS,
-  ...TOOLS_COMPONENTS,
-  ...BLOCKS,
-  ...HOOKS,
-];
-
-/**
- * Get components by category
- */
-export function getComponentsByCategory(category: string): ComponentConfig[] {
-  return COMPONENTS_CONFIG.filter(comp => comp.category === category);
-}
-
-/**
- * Get component by name
- */
-export function getComponentByName(name: string): ComponentConfig | undefined {
-  return COMPONENTS_CONFIG.find(comp => comp.name === name);
-}
-
-/**
- * Get all categories
- */
-export function getAllCategories(): string[] {
-  return [...new Set(COMPONENTS_CONFIG.map(comp => comp.category))];
-}
-
-/**
- * Get component count by category
- */
-export function getComponentCount(category: string): number {
-  return COMPONENTS_CONFIG.filter(comp => comp.category === category).length;
-}

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

@@ -1,246 +0,0 @@
-/**
- * Layout Components Configuration
- */
-
-import React from 'react';
-import {
-  Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  Separator,
-  Skeleton,
-  AspectRatio,
-  Sticky,
-  ScrollArea,
-  ScrollBar,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-  Section,
-  SectionHeader,
-} 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 with configurable behavior',
-    importPath: "import { Sticky } from '@djangocfg/ui';",
-    example: `// Top sticky with react-sticky-box (respects parent container)
-<Sticky offsetTop={56} offsetBottom={0} zIndex={10}>
-  <nav className="bg-background border p-4">
-    Sticky Navigation
-  </nav>
-</Sticky>
-
-// Bottom sticky with native CSS sticky
-<Sticky bottom useNativeSticky offsetBottom={0} zIndex={30}>
-  <footer className="bg-background border-t p-4">
-    Sticky Footer
-  </footer>
-</Sticky>
-
-// Props:
-// - offsetTop: number (default: 0) - top offset in pixels
-// - offsetBottom: number (default: 0) - bottom offset in pixels
-// - bottom: boolean (default: false) - stick to bottom instead of top
-// - disabled: boolean (default: false) - disable sticking
-// - disableOnMobile: boolean (default: true) - disable on mobile
-// - useNativeSticky: boolean (default: false) - use CSS sticky instead of react-sticky-box
-// - zIndex: number (default: 10) - z-index value
-// - debug: boolean (default: false) - enable debug logging`,
-    preview: (
-      <div className="h-[300px] overflow-auto border rounded-md relative">
-        <Sticky offsetTop={0} disableOnMobile={false} zIndex={10}>
-          <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>
-    ),
-  },
-  {
-    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>
-    ),
-  },
-];