@cyberbloxai/ui-kit 0.1.2 → 0.2.1

package/src/components/ComponentLivePreview.tsx

@@ -0,0 +1,310 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog, DialogTrigger, DialogContent,
+  DialogHeader, DialogTitle, DialogDescription,
+  DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import {
+  Drawer, DrawerTrigger, DrawerContent,
+  DrawerHeader, DrawerTitle, DrawerDescription,
+  DrawerFooter, DrawerClose,
+} from "@/components/ui/drawer";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Select, SelectTrigger, SelectValue, SelectContent,
+  SelectItem, SelectGroup, SelectLabel,
+} from "@/components/ui/select";
+import {
+  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+} from "@/components/ui/accordion";
+import {
+  Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
+} from "@/components/ui/tooltip";
+import { Loader2, ArrowRight, Plus, Settings, Info } from "lucide-react";
+
+interface Props {
+  componentId: string;
+}
+
+const ComponentLivePreview = ({ componentId }: Props) => {
+  const [sliderVal, setSliderVal] = useState([50]);
+
+  switch (componentId) {
+    case "button":
+      return (
+        <div className="flex flex-wrap gap-3">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+          <Button disabled><Loader2 className="mr-2 h-4 w-4 animate-spin" />Loading</Button>
+          <Button size="icon"><ArrowRight /></Button>
+        </div>
+      );
+
+    case "input":
+      return (
+        <div className="space-y-3 max-w-sm">
+          <Input placeholder="Default input" />
+          <Input type="email" placeholder="Email input" />
+          <Input placeholder="Disabled" disabled />
+        </div>
+      );
+
+    case "badge":
+      return (
+        <div className="flex flex-wrap gap-2">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </div>
+      );
+
+    case "switch":
+      return (
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <Switch id="s1" />
+            <Label htmlFor="s1">Off by default</Label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Switch id="s2" defaultChecked />
+            <Label htmlFor="s2">On by default</Label>
+          </div>
+        </div>
+      );
+
+    case "slider":
+      return (
+        <div className="space-y-4 max-w-sm">
+          <div className="space-y-2">
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>Volume</span>
+              <span>{sliderVal[0]}%</span>
+            </div>
+            <Slider value={sliderVal} onValueChange={setSliderVal} max={100} step={1} />
+          </div>
+        </div>
+      );
+
+    case "checkbox":
+      return (
+        <div className="space-y-3">
+          {["Design system", "Components", "Documentation"].map((label) => (
+            <div key={label} className="flex items-center gap-2">
+              <Checkbox id={label} />
+              <Label htmlFor={label}>{label}</Label>
+            </div>
+          ))}
+        </div>
+      );
+
+    case "progress":
+      return (
+        <div className="space-y-4 max-w-sm">
+          <Progress value={30} />
+          <Progress value={60} />
+          <Progress value={90} />
+        </div>
+      );
+
+    case "avatar":
+      return (
+        <div className="flex items-center gap-4">
+          <div className="flex -space-x-2">
+            {["AK", "BR", "CS", "DW"].map((i) => (
+              <Avatar key={i} className="h-10 w-10 border-2 border-background">
+                <AvatarFallback className="bg-primary/20 text-primary text-xs">{i}</AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+          <Avatar className="h-14 w-14">
+            <AvatarFallback className="bg-accent/20 text-accent text-lg">JD</AvatarFallback>
+          </Avatar>
+        </div>
+      );
+
+    case "textarea":
+      return (
+        <div className="space-y-2 max-w-sm">
+          <Label htmlFor="bio">Bio</Label>
+          <Textarea id="bio" placeholder="Tell us about yourself..." rows={4} />
+        </div>
+      );
+
+    case "skeleton":
+      return (
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[200px]" />
+            <Skeleton className="h-4 w-[150px]" />
+          </div>
+        </div>
+      );
+
+    case "label":
+      return (
+        <div className="space-y-2 max-w-sm">
+          <Label htmlFor="demo">Full Name</Label>
+          <Input id="demo" placeholder="John Doe" />
+        </div>
+      );
+
+    case "dialog":
+      return (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline">Open Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Are you sure?</DialogTitle>
+              <DialogDescription>This action cannot be undone.</DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+    case "drawer":
+      return (
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Settings</DrawerTitle>
+              <DrawerDescription>Adjust your preferences below.</DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Notifications</Label>
+                <Switch />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>Dark Mode</Label>
+                <Switch defaultChecked />
+              </div>
+            </div>
+            <DrawerFooter>
+              <Button>Save Changes</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      );
+
+    case "tabs":
+      return (
+        <Tabs defaultValue="overview" className="w-full max-w-md">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview" className="mt-3 text-sm text-muted-foreground">
+            <p>Here's a quick summary of your project status and recent activity.</p>
+          </TabsContent>
+          <TabsContent value="analytics" className="mt-3 text-sm text-muted-foreground">
+            <p>View charts and metrics about your usage and performance.</p>
+          </TabsContent>
+          <TabsContent value="settings" className="mt-3 text-sm text-muted-foreground">
+            <p>Configure notifications, integrations, and account preferences.</p>
+          </TabsContent>
+        </Tabs>
+      );
+
+    case "select":
+      return (
+        <div className="space-y-3 max-w-[220px]">
+          <Label>Favorite fruit</Label>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Fruits</SelectLabel>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="orange">Orange</SelectItem>
+                <SelectItem value="grape">Grape</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+
+    case "accordion":
+      return (
+        <Accordion type="single" collapsible className="w-full max-w-md">
+          <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 match the design system.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>Yes. It uses CSS animations for smooth open and close transitions.</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      );
+
+    case "tooltip":
+      return (
+        <TooltipProvider>
+          <div className="flex flex-wrap gap-3">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Plus className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent><p>Add item</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Settings className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom"><p>Settings</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon"><Info className="h-4 w-4" /></Button>
+              </TooltipTrigger>
+              <TooltipContent side="right"><p>More info</p></TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+      );
+
+    default:
+      return <p className="text-muted-foreground text-sm">No preview available.</p>;
+  }
+};
+
+export default ComponentLivePreview;

package/src/components/NavLink.tsx

@@ -0,0 +1,28 @@
+import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };

package/src/components/PropTable.tsx

@@ -0,0 +1,54 @@
+import type { PropDoc } from "@/data/componentRegistry";
+import { Badge } from "@/components/ui/badge";
+
+interface PropTableProps {
+  props: PropDoc[];
+}
+
+const PropTable = ({ props }: PropTableProps) => {
+  return (
+    <div className="overflow-x-auto rounded-lg border border-border/40">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-muted/60 border-b border-border/40">
+            <th className="text-left px-4 py-3 font-medium text-muted-foreground">Prop</th>
+            <th className="text-left px-4 py-3 font-medium text-muted-foreground">Type</th>
+            <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell">Default</th>
+            <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden md:table-cell">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.map((prop) => (
+            <tr key={prop.name} className="border-b border-border/20 hover:bg-muted/20 transition-colors">
+              <td className="px-4 py-3">
+                <code className="text-xs font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">
+                  {prop.name}
+                </code>
+                {prop.required && (
+                  <Badge variant="destructive" className="ml-2 text-[10px] px-1.5 py-0">
+                    required
+                  </Badge>
+                )}
+              </td>
+              <td className="px-4 py-3">
+                <code className="text-xs font-mono text-muted-foreground break-all">{prop.type}</code>
+              </td>
+              <td className="px-4 py-3 hidden sm:table-cell">
+                {prop.default ? (
+                  <code className="text-xs font-mono text-foreground/70">{prop.default}</code>
+                ) : (
+                  <span className="text-xs text-muted-foreground">—</span>
+                )}
+              </td>
+              <td className="px-4 py-3 text-xs text-muted-foreground hidden md:table-cell">
+                {prop.description}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default PropTable;

package/src/components/showcase/AuthShowcase.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Mail, Lock, Eye, EyeOff, Github, ArrowRight, Loader2, User, KeyRound } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const AuthShowcase = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState("login");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full grid-cols-3 bg-muted/50 mb-6">
+          <TabsTrigger value="login">Login</TabsTrigger>
+          <TabsTrigger value="signup">Sign Up</TabsTrigger>
+          <TabsTrigger value="forgot">Forgot</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="login">
+          <motion.form
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            onSubmit={handleSubmit}
+            className="space-y-4"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-secondary-foreground text-sm">Email</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  className="pl-10 bg-muted/50 border-border/60 focus:border-primary"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password" className="text-secondary-foreground text-sm">Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="••••••••"
+                  className="pl-10 pr-10 bg-muted/50 border-border/60 focus:border-primary"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+              disabled={loading}
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+              {loading ? "Signing in..." : "Sign In"}
+              {!loading && <ArrowRight className="ml-2 h-4 w-4" />}
+            </Button>
+
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-border/60" />
+              </div>
+              <div className="relative flex justify-center text-xs">
+                <span className="bg-card px-3 text-muted-foreground">or continue with</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <Button variant="outline" className="bg-muted/30 border-border/60 hover:bg-muted/60">
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+                Google
+              </Button>
+              <Button variant="outline" className="bg-muted/30 border-border/60 hover:bg-muted/60">
+                <Github className="mr-2 h-4 w-4" />
+                GitHub
+              </Button>
+            </div>
+          </motion.form>
+        </TabsContent>
+
+        <TabsContent value="signup">
+          <motion.form
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            onSubmit={handleSubmit}
+            className="space-y-4"
+          >
+            <div className="space-y-2">
+              <Label className="text-secondary-foreground text-sm">Full Name</Label>
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input placeholder="John Doe" className="pl-10 bg-muted/50 border-border/60" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-secondary-foreground text-sm">Email</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input type="email" placeholder="you@example.com" className="pl-10 bg-muted/50 border-border/60" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-secondary-foreground text-sm">Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input type="password" placeholder="Min 8 characters" className="pl-10 bg-muted/50 border-border/60" />
+              </div>
+            </div>
+            <Button type="submit" className="w-full bg-primary text-primary-foreground hover:bg-primary/90" disabled={loading}>
+              {loading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+              {loading ? "Creating..." : "Create Account"}
+            </Button>
+          </motion.form>
+        </TabsContent>
+
+        <TabsContent value="forgot">
+          <motion.form
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            onSubmit={handleSubmit}
+            className="space-y-4"
+          >
+            <p className="text-sm text-muted-foreground mb-4">
+              Enter your email and we'll send you a reset link.
+            </p>
+            <div className="space-y-2">
+              <Label className="text-secondary-foreground text-sm">Email</Label>
+              <div className="relative">
+                <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input type="email" placeholder="you@example.com" className="pl-10 bg-muted/50 border-border/60" />
+              </div>
+            </div>
+            <Button type="submit" className="w-full bg-primary text-primary-foreground hover:bg-primary/90" disabled={loading}>
+              {loading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+              {loading ? "Sending..." : "Send Reset Link"}
+            </Button>
+          </motion.form>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default AuthShowcase;