@djangocfg/layouts 1.0.6 → 1.2.0

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

@@ -0,0 +1,233 @@
+/**
+ * Blocks Configuration
+ */
+
+import React from 'react';
+import {
+  Hero,
+  SuperHero,
+  FeatureSection,
+  CTASection,
+  NewsletterSection,
+  StatsSection,
+  TestimonialSection,
+} from '@djangocfg/ui/blocks';
+import { Sparkles, BookOpen, Zap, Shield, Code } from 'lucide-react';
+import type { ComponentConfig } from './types';
+
+export const BLOCKS: ComponentConfig[] = [
+  {
+    name: 'Hero',
+    category: 'blocks',
+    description: 'Hero section with title, description, and CTAs',
+    importPath: "import { Hero } from '@djangocfg/ui/blocks';",
+    example: `<Hero
+  title="Build Your Next Project"
+  description="The best way to create modern web applications with React and TypeScript"
+  primaryAction={{ label: "Get Started", href: "/docs" }}
+  secondaryAction={{ label: "View Demo", href: "/demo" }}
+/>`,
+    preview: (
+      <Hero
+        title="Build Your Next Project"
+        description="The best way to create modern web applications"
+        primaryAction={{ label: "Get Started", href: "/docs" }}
+        secondaryAction={{ label: "View Demo", href: "/demo" }}
+      />
+    ),
+  },
+  {
+    name: 'SuperHero',
+    category: 'blocks',
+    description: 'Enhanced hero with badge, gradient title, features, and stats',
+    importPath: "import { SuperHero } from '@djangocfg/ui/blocks';",
+    example: `<SuperHero
+  badge={{ icon: <Sparkles />, text: "New in v2.0" }}
+  title="Next-Generation"
+  titleGradient="Development Platform"
+  subtitle="Build faster with our comprehensive UI library"
+  features={[
+    { icon: <span>⚛️</span>, text: "React 19" },
+    { icon: <span>📘</span>, text: "TypeScript" },
+    { icon: <span>🎨</span>, text: "Tailwind CSS 4" },
+    { icon: <span>⚡</span>, text: "Lightning Fast" }
+  ]}
+  primaryAction={{ label: "Start Building", href: "/start" }}
+  secondaryAction={{ label: "Learn More", href: "/docs", icon: <BookOpen /> }}
+  stats={[
+    { number: "56+", label: "Components" },
+    { number: "7", label: "Blocks" },
+    { number: "6", label: "Hooks" },
+    { number: "100%", label: "Type Safe" }
+  ]}
+  scrollIndicator={false}
+/>`,
+    preview: (
+      <SuperHero
+        badge={{ icon: <Sparkles className="w-4 h-4" />, text: "New in v2.0" }}
+        title="Next-Generation"
+        titleGradient="Development Platform"
+        subtitle="Build faster with our comprehensive UI library"
+        features={[
+          { icon: <span>⚛️</span>, text: "React 19" },
+          { icon: <span>📘</span>, text: "TypeScript" },
+          { icon: <span>🎨</span>, text: "Tailwind CSS 4" },
+          { icon: <span>⚡</span>, text: "Lightning Fast" },
+        ]}
+        primaryAction={{ label: "Start Building", href: "/start" }}
+        secondaryAction={{ label: "Learn More", href: "/docs", icon: <BookOpen /> }}
+        stats={[
+          { number: "56+", label: "Components" },
+          { number: "7", label: "Blocks" },
+          { number: "6", label: "Hooks" },
+          { number: "100%", label: "Type Safe" },
+        ]}
+        scrollIndicator={false}
+      />
+    ),
+  },
+  {
+    name: 'FeatureSection',
+    category: 'blocks',
+    description: 'Grid of features with icons and descriptions',
+    importPath: "import { FeatureSection } from '@djangocfg/ui/blocks';",
+    example: `<FeatureSection
+  title="Everything You Need"
+  subtitle="All the tools to build modern applications"
+  features={[
+    {
+      icon: <Zap className="w-6 h-6" />,
+      title: "Lightning Fast",
+      description: "Optimized for performance"
+    },
+    {
+      icon: <Shield className="w-6 h-6" />,
+      title: "Secure",
+      description: "Built with security in mind"
+    }
+  ]}
+/>`,
+    preview: (
+      <FeatureSection
+        title="Everything You Need"
+        subtitle="All the tools to build modern applications"
+        features={[
+          {
+            icon: <Zap className="w-6 h-6" />,
+            title: "Lightning Fast",
+            description: "Optimized for performance"
+          },
+          {
+            icon: <Shield className="w-6 h-6" />,
+            title: "Secure",
+            description: "Built with security in mind"
+          },
+          {
+            icon: <Code className="w-6 h-6" />,
+            title: "Developer Friendly",
+            description: "Great DX with TypeScript"
+          }
+        ]}
+      />
+    ),
+  },
+  {
+    name: 'CTASection',
+    category: 'blocks',
+    description: 'Call-to-action section to drive conversions',
+    importPath: "import { CTASection } from '@djangocfg/ui/blocks';",
+    example: `<CTASection
+  title="Ready to Get Started?"
+  subtitle="Join thousands of developers building amazing products"
+  primaryCTA={{ label: "Start Free Trial", href: "/signup" }}
+  secondaryCTA={{ label: "Contact Sales", href: "/contact" }}
+/>`,
+    preview: (
+      <CTASection
+        title="Ready to Get Started?"
+        subtitle="Join thousands of developers"
+        primaryCTA={{ label: "Start Free Trial", href: "/signup" }}
+        secondaryCTA={{ label: "Contact Sales", href: "/contact" }}
+      />
+    ),
+  },
+  {
+    name: 'NewsletterSection',
+    category: 'blocks',
+    description: 'Email capture section for newsletters',
+    importPath: "import { NewsletterSection } from '@djangocfg/ui/blocks';",
+    example: `<NewsletterSection
+  title="Stay Updated"
+  description="Get the latest news delivered to your inbox"
+  placeholder="Enter your email"
+  buttonText="Subscribe"
+  onSubmit={(email) => console.log(email)}
+/>`,
+    preview: (
+      <NewsletterSection
+        title="Stay Updated"
+        description="Get the latest news delivered to your inbox"
+        placeholder="Enter your email"
+        buttonText="Subscribe"
+        onSubmit={(email) => console.log('Subscribed:', email)}
+      />
+    ),
+  },
+  {
+    name: 'StatsSection',
+    category: 'blocks',
+    description: 'Display key metrics and statistics',
+    importPath: "import { StatsSection } from '@djangocfg/ui/blocks';",
+    example: `<StatsSection
+  title="Our Impact"
+  stats={[
+    { number: "10K+", label: "Active Users" },
+    { number: "99.9%", label: "Uptime" }
+  ]}
+/>`,
+    preview: (
+      <StatsSection
+        title="Our Impact"
+        stats={[
+          { number: "10K+", label: "Active Users" },
+          { number: "500+", label: "Companies" },
+          { number: "99.9%", label: "Uptime" },
+          { number: "24/7", label: "Support" }
+        ]}
+      />
+    ),
+  },
+  {
+    name: 'TestimonialSection',
+    category: 'blocks',
+    description: 'Customer testimonials and reviews',
+    importPath: "import { TestimonialSection } from '@djangocfg/ui/blocks';",
+    example: `<TestimonialSection
+  title="What Our Customers Say"
+  testimonials={[{
+    content: "This product changed how we work!",
+    author: {
+      name: "John Doe",
+      title: "CEO",
+      company: "Company"
+    }
+  }]}
+/>`,
+    preview: (
+      <TestimonialSection
+        title="What Our Customers Say"
+        testimonials={[
+          {
+            content: "This product changed how we work. Highly recommended!",
+            author: {
+              name: "John Doe",
+              title: "CEO",
+              company: "Company",
+              avatar: "/avatar.jpg"
+            }
+          }
+        ]}
+      />
+    ),
+  },
+];

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

@@ -0,0 +1,308 @@
+/**
+ * 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,
+} 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>
+    ),
+  },
+];