@djangocfg/layouts 1.0.6 → 1.2.0

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

@@ -0,0 +1,246 @@
+/**
+ * Feedback Components Configuration
+ */
+
+import React from 'react';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Progress,
+  Badge,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  useToast,
+} from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+// Toast Preview Component
+function ToastPreview() {
+  const { toast } = useToast();
+
+  return (
+    <div className="p-4 border rounded-md bg-muted/30">
+      <p className="text-sm text-muted-foreground mb-3">
+        Toast is a hook-based component. Click buttons to trigger toasts:
+      </p>
+      <div className="space-x-2">
+        <Button
+          onClick={() => {
+            toast({
+              title: "Success!",
+              description: "Your changes have been saved.",
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            toast({
+              variant: "destructive",
+              title: "Error!",
+              description: "Something went wrong.",
+            });
+          }}
+        >
+          Show Error Toast
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground mt-3">
+        ✓ Toaster is globally available via AppLayout
+      </p>
+    </div>
+  );
+}
+
+export const FEEDBACK_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'Toast',
+    category: 'feedback',
+    description: 'Toast notifications for user feedback',
+    importPath: `import { useToast, Button } from '@djangocfg/ui';`,
+    example: `function Component() {
+  const { toast } = useToast();
+
+  return (
+    <div className="space-x-2">
+      <Button
+        onClick={() => {
+          toast({
+            title: "Success!",
+            description: "Your changes have been saved.",
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+      <Button
+        variant="destructive"
+        onClick={() => {
+          toast({
+            variant: "destructive",
+            title: "Error!",
+            description: "Something went wrong.",
+          });
+        }}
+      >
+        Show Error Toast
+      </Button>
+    </div>
+  );
+}`,
+    preview: <ToastPreview />,
+  },
+  {
+    name: 'Alert',
+    category: 'feedback',
+    description: 'Alert messages for important information',
+    importPath: `import { Alert, AlertDescription, AlertTitle } from '@djangocfg/ui';`,
+    example: `<div className="space-y-4">
+  <Alert>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+
+  <Alert variant="destructive">
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</div>`,
+    preview: (
+      <div className="space-y-4">
+        <Alert>
+          <AlertTitle>Heads up!</AlertTitle>
+          <AlertDescription>
+            You can add components to your app using the cli.
+          </AlertDescription>
+        </Alert>
+
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            Your session has expired. Please log in again.
+          </AlertDescription>
+        </Alert>
+      </div>
+    ),
+  },
+  {
+    name: 'Progress',
+    category: 'feedback',
+    description: 'Progress bar for showing completion status',
+    importPath: `import { Progress } from '@djangocfg/ui';`,
+    example: `<div className="space-y-4 max-w-md">
+  <div>
+    <div className="flex justify-between mb-2">
+      <span className="text-sm">25%</span>
+    </div>
+    <Progress value={25} />
+  </div>
+
+  <div>
+    <div className="flex justify-between mb-2">
+      <span className="text-sm">50%</span>
+    </div>
+    <Progress value={50} />
+  </div>
+
+  <div>
+    <div className="flex justify-between mb-2">
+      <span className="text-sm">75%</span>
+    </div>
+    <Progress value={75} />
+  </div>
+</div>`,
+    preview: (
+      <div className="space-y-4 max-w-md">
+        <div>
+          <div className="flex justify-between mb-2">
+            <span className="text-sm">25%</span>
+          </div>
+          <Progress value={25} />
+        </div>
+
+        <div>
+          <div className="flex justify-between mb-2">
+            <span className="text-sm">50%</span>
+          </div>
+          <Progress value={50} />
+        </div>
+
+        <div>
+          <div className="flex justify-between mb-2">
+            <span className="text-sm">75%</span>
+          </div>
+          <Progress value={75} />
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: 'Badge',
+    category: 'feedback',
+    description: 'Status badges for labels and categories',
+    importPath: `import { Badge } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-2 flex-wrap">
+  <Badge>Default</Badge>
+  <Badge variant="secondary">Secondary</Badge>
+  <Badge variant="destructive">Destructive</Badge>
+  <Badge variant="outline">Outline</Badge>
+</div>`,
+    preview: (
+      <div className="flex gap-2 flex-wrap">
+        <Badge>Default</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outline</Badge>
+      </div>
+    ),
+  },
+  {
+    name: 'Avatar',
+    category: 'feedback',
+    description: 'User avatar with fallback support',
+    importPath: `import { Avatar, AvatarFallback, AvatarImage } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-4">
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+
+  <Avatar>
+    <AvatarImage src="/nonexistent.png" alt="@user" />
+    <AvatarFallback>JD</AvatarFallback>
+  </Avatar>
+
+  <Avatar>
+    <AvatarFallback>AB</AvatarFallback>
+  </Avatar>
+</div>`,
+    preview: (
+      <div className="flex gap-4">
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+
+        <Avatar>
+          <AvatarImage src="/nonexistent.png" alt="@user" />
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      </div>
+    ),
+  },
+];

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

@@ -0,0 +1,171 @@
+/**
+ * Form Components Configuration
+ */
+
+import React from 'react';
+import {
+  Button,
+  Input,
+  Checkbox,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  Switch,
+  Slider,
+} from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+export const FORM_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'Button',
+    category: 'forms',
+    description: 'Interactive button with multiple variants and sizes',
+    importPath: "import { Button } from '@djangocfg/ui';",
+    example: `<Button variant="default">Click me</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>`,
+    preview: (
+      <div className="flex flex-wrap gap-3">
+        <Button variant="default">Click me</Button>
+        <Button variant="destructive">Delete</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button size="sm">Small</Button>
+        <Button size="lg">Large</Button>
+      </div>
+    ),
+  },
+  {
+    name: 'Input',
+    category: 'forms',
+    description: 'Text input field with validation support',
+    importPath: "import { Input } from '@djangocfg/ui';",
+    example: `<Input type="text" placeholder="Enter text..." />
+<Input type="email" placeholder="Email" />
+<Input type="password" placeholder="Password" disabled />`,
+    preview: (
+      <div className="space-y-3 max-w-sm">
+        <Input type="text" placeholder="Enter text..." />
+        <Input type="email" placeholder="Email" />
+        <Input type="password" placeholder="Password" disabled />
+      </div>
+    ),
+  },
+  {
+    name: 'Checkbox',
+    category: 'forms',
+    description: 'Checkbox with label support',
+    importPath: "import { Checkbox, Label } from '@djangocfg/ui';",
+    example: `<div className="flex items-center gap-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>`,
+    preview: (
+      <div className="flex items-center gap-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    ),
+  },
+  {
+    name: 'RadioGroup',
+    category: 'forms',
+    description: 'Radio button group for single selection',
+    importPath: "import { RadioGroup, RadioGroupItem, Label } from '@djangocfg/ui';",
+    example: `<RadioGroup defaultValue="option1">
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="option1" id="opt1" />
+    <Label htmlFor="opt1">Option 1</Label>
+  </div>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="option2" id="opt2" />
+    <Label htmlFor="opt2">Option 2</Label>
+  </div>
+</RadioGroup>`,
+    preview: (
+      <RadioGroup defaultValue="option1">
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option1" id="opt1" />
+          <Label htmlFor="opt1">Option 1</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="option2" id="opt2" />
+          <Label htmlFor="opt2">Option 2</Label>
+        </div>
+      </RadioGroup>
+    ),
+  },
+  {
+    name: 'Select',
+    category: 'forms',
+    description: 'Dropdown select component',
+    importPath: "import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@djangocfg/ui';",
+    example: `<Select>
+  <SelectTrigger className="w-[200px]">
+    <SelectValue placeholder="Select option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="1">Option 1</SelectItem>
+    <SelectItem value="2">Option 2</SelectItem>
+    <SelectItem value="3">Option 3</SelectItem>
+  </SelectContent>
+</Select>`,
+    preview: (
+      <Select>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="Select option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">Option 1</SelectItem>
+          <SelectItem value="2">Option 2</SelectItem>
+          <SelectItem value="3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    ),
+  },
+  {
+    name: 'Textarea',
+    category: 'forms',
+    description: 'Multi-line text input',
+    importPath: "import { Textarea } from '@djangocfg/ui';",
+    example: `<Textarea placeholder="Enter your message..." rows={4} />`,
+    preview: (
+      <Textarea placeholder="Enter your message..." rows={4} className="max-w-sm" />
+    ),
+  },
+  {
+    name: 'Switch',
+    category: 'forms',
+    description: 'Toggle switch component',
+    importPath: "import { Switch, Label } from '@djangocfg/ui';",
+    example: `<div className="flex items-center gap-2">
+  <Switch id="notifications" />
+  <Label htmlFor="notifications">Enable notifications</Label>
+</div>`,
+    preview: (
+      <div className="flex items-center gap-2">
+        <Switch id="notifications" />
+        <Label htmlFor="notifications">Enable notifications</Label>
+      </div>
+    ),
+  },
+  {
+    name: 'Slider',
+    category: 'forms',
+    description: 'Range slider input',
+    importPath: "import { Slider } from '@djangocfg/ui';",
+    example: `<Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />`,
+    preview: (
+      <Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />
+    ),
+  },
+];

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

@@ -0,0 +1,131 @@
+/**
+ * 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',
+    importPath: "import { useDebounce } from '@djangocfg/ui';",
+    example: `const [search, setSearch] = useState('');
+const debouncedSearch = useDebounce(search, 500);
+
+// debouncedSearch updates 500ms after last change`,
+    preview: (
+      <div className="p-4 border rounded-md">
+        <code className="text-sm">
+          useDebounce(value, delay)
+        </code>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Debounces value changes with specified delay
+        </p>
+      </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

@@ -0,0 +1,69 @@
+/**
+ * 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 { 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 { 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,
+  ...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;
+}