@djangocfg/layouts 1.4.26 → 1.4.28

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

@@ -1,433 +0,0 @@
-/**
- * Data Display Components Configuration
- */
-
-import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Toggle,
-  ToggleGroup,
-  ToggleGroupItem,
-  Calendar,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-} from '@djangocfg/ui';
-import type { ComponentConfig } from './types';
-
-export const DATA_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'Table',
-    category: 'data',
-    description: 'Responsive data table component',
-    importPath: `import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@djangocfg/ui';`,
-    example: `<Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">INV001</TableCell>
-      <TableCell>Paid</TableCell>
-      <TableCell>Credit Card</TableCell>
-      <TableCell className="text-right">$250.00</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell className="font-medium">INV002</TableCell>
-      <TableCell>Pending</TableCell>
-      <TableCell>PayPal</TableCell>
-      <TableCell className="text-right">$150.00</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>`,
-    preview: (
-      <Table>
-        <TableCaption>A list of your recent invoices.</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Invoice</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Method</TableHead>
-            <TableHead className="text-right">Amount</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell className="font-medium">INV001</TableCell>
-            <TableCell>Paid</TableCell>
-            <TableCell>Credit Card</TableCell>
-            <TableCell className="text-right">$250.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className="font-medium">INV002</TableCell>
-            <TableCell>Pending</TableCell>
-            <TableCell>PayPal</TableCell>
-            <TableCell className="text-right">$150.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className="font-medium">INV003</TableCell>
-            <TableCell>Unpaid</TableCell>
-            <TableCell>Bank Transfer</TableCell>
-            <TableCell className="text-right">$350.00</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    ),
-  },
-  {
-    name: 'Accordion',
-    category: 'data',
-    description: 'Vertically stacked set of collapsible sections',
-    importPath: `import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@djangocfg/ui';`,
-    example: `<Accordion type="single" collapsible className="w-full">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It comes with default styles that matches the aesthetic.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-3">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It's animated by default, but you can disable it if you prefer.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>`,
-    preview: (
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Is it styled?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It comes with default styles that matches the aesthetic.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Is it animated?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It's animated by default, but you can disable it if you prefer.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    ),
-  },
-  {
-    name: 'Collapsible',
-    category: 'data',
-    description: 'Simple collapsible content panel',
-    importPath: `import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@djangocfg/ui';`,
-    example: `<Collapsible className="w-full max-w-md space-y-2">
-  <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-muted rounded-md">
-    <span className="font-medium">Can I use this in my project?</span>
-    <ChevronDown className="h-4 w-4" />
-  </CollapsibleTrigger>
-  <CollapsibleContent className="p-4 bg-muted/50 rounded-md">
-    <p className="text-sm text-muted-foreground">
-      Yes! This component is free to use in your projects.
-    </p>
-  </CollapsibleContent>
-</Collapsible>`,
-    preview: (
-      <Collapsible className="w-full max-w-md space-y-2">
-        <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-muted rounded-md">
-          <span className="font-medium">Can I use this in my project?</span>
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="p-4 bg-muted/50 rounded-md">
-          <p className="text-sm text-muted-foreground">
-            Yes! This component is free to use in your projects. It's built with
-            Radix UI primitives and Tailwind CSS.
-          </p>
-        </CollapsibleContent>
-      </Collapsible>
-    ),
-  },
-  {
-    name: 'Toggle',
-    category: 'data',
-    description: 'Two-state button for on/off interactions',
-    importPath: `import { Toggle } from '@djangocfg/ui';`,
-    example: `<div className="flex gap-2">
-  <Toggle aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </Toggle>
-  <Toggle aria-label="Toggle italic">
-    <Italic className="h-4 w-4" />
-  </Toggle>
-  <Toggle aria-label="Toggle underline">
-    <Underline className="h-4 w-4" />
-  </Toggle>
-</div>`,
-    preview: (
-      <div className="flex gap-2">
-        <Toggle aria-label="Toggle bold">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12M6 6h12M6 18h12" />
-          </svg>
-        </Toggle>
-        <Toggle aria-label="Toggle italic">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-        </Toggle>
-        <Toggle aria-label="Toggle underline">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h.01M12 12h.01M18 12h.01" />
-          </svg>
-        </Toggle>
-      </div>
-    ),
-  },
-  {
-    name: 'ToggleGroup',
-    category: 'data',
-    description: 'Group of toggle buttons with single or multiple selection',
-    importPath: `import { ToggleGroup, ToggleGroupItem } from '@djangocfg/ui';`,
-    example: `<div className="space-y-4">
-  <div>
-    <p className="text-sm font-medium mb-2">Single Selection</p>
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  </div>
-
-  <div>
-    <p className="text-sm font-medium mb-2">Multiple Selection</p>
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  </div>
-</div>`,
-    preview: (
-      <div className="space-y-4">
-        <div>
-          <p className="text-sm font-medium mb-2">Single Selection</p>
-          <ToggleGroup type="single">
-            <ToggleGroupItem value="bold" aria-label="Toggle bold">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="italic" aria-label="Toggle italic">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="underline" aria-label="Toggle underline">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18h12" />
-              </svg>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-
-        <div>
-          <p className="text-sm font-medium mb-2">Multiple Selection</p>
-          <ToggleGroup type="multiple">
-            <ToggleGroupItem value="bold" aria-label="Toggle bold">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="italic" aria-label="Toggle italic">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="underline" aria-label="Toggle underline">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18h12" />
-              </svg>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'Calendar',
-    category: 'data',
-    description: 'Date picker calendar component',
-    importPath: `import { Calendar } from '@djangocfg/ui';`,
-    example: `<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  className="rounded-md border"
-/>`,
-    preview: (
-      <Calendar
-        mode="single"
-        className="rounded-md border"
-      />
-    ),
-  },
-  {
-    name: 'Carousel',
-    category: 'data',
-    description: 'Image and content carousel with navigation',
-    importPath: `import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@djangocfg/ui';`,
-    example: `<Carousel className="w-full max-w-xs">
-  <CarouselContent>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">1</span>
-      </div>
-    </CarouselItem>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">2</span>
-      </div>
-    </CarouselItem>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">3</span>
-      </div>
-    </CarouselItem>
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`,
-    preview: (
-      <Carousel className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-6 border rounded-md bg-muted/50">
-                <div className="flex aspect-square items-center justify-center">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </div>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    ),
-  },
-  {
-    name: 'Chart',
-    category: 'data',
-    description: 'Data visualization charts powered by Recharts',
-    importPath: `import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '@djangocfg/ui';`,
-    example: `import { Bar, BarChart, XAxis, YAxis } from 'recharts';
-
-const chartConfig = {
-  sales: { label: "Sales", color: "hsl(var(--chart-1))" },
-  profit: { label: "Profit", color: "hsl(var(--chart-2))" },
-};
-
-const chartData = [
-  { month: "Jan", sales: 400, profit: 240 },
-  { month: "Feb", sales: 300, profit: 180 },
-  { month: "Mar", sales: 500, profit: 300 },
-];
-
-<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-  <BarChart data={chartData}>
-    <XAxis dataKey="month" />
-    <YAxis />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-    <Bar dataKey="sales" fill="var(--color-sales)" />
-    <Bar dataKey="profit" fill="var(--color-profit)" />
-  </BarChart>
-</ChartContainer>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          Chart components built on Recharts with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Bar, Line, Area, Pie charts</li>
-          <li>• Responsive container</li>
-          <li>• Theme-aware colors</li>
-          <li>• Tooltips and legends</li>
-          <li>• Customizable styling</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          See <strong>Recharts documentation</strong> for all chart types
-        </p>
-      </div>
-    ),
-  },
-];