@cyberbloxai/ui-kit 0.1.2 → 0.2.1

package/src/pages/Index.tsx

@@ -0,0 +1,223 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import {
+  LogIn, LayoutDashboard, Bell, AlertTriangle, Puzzle, Package,
+  ArrowRight, Copy, Check, Github, Sparkles
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import AuthShowcase from "@/components/showcase/AuthShowcase";
+import DashboardShowcase from "@/components/showcase/DashboardShowcase";
+import NotificationShowcase from "@/components/showcase/NotificationShowcase";
+import ErrorShowcase from "@/components/showcase/ErrorShowcase";
+import ComponentsShowcase from "@/components/showcase/ComponentsShowcase";
+
+const sections = [
+  { id: "auth", label: "Authentication", icon: LogIn, desc: "Login, signup, forgot password with social auth" },
+  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard, desc: "Stats, charts, activity feeds, progress bars" },
+  { id: "notifications", label: "Notifications", icon: Bell, desc: "Toast system with auto-dismiss and stacking" },
+  { id: "errors", label: "Error Pages", icon: AlertTriangle, desc: "404, 500, offline, forbidden, maintenance" },
+  { id: "components", label: "UI Components", icon: Puzzle, desc: "Buttons, inputs, badges, toggles, sliders" },
+];
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 20 },
+  visible: (i: number) => ({
+    opacity: 1, y: 0,
+    transition: { delay: i * 0.1, duration: 0.5 }
+  }),
+};
+
+const Index = () => {
+  const [activeSection, setActiveSection] = useState("auth");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText("npx create-ui-kit@latest");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const renderShowcase = () => {
+    switch (activeSection) {
+      case "auth": return <AuthShowcase />;
+      case "dashboard": return <DashboardShowcase />;
+      case "notifications": return <NotificationShowcase />;
+      case "errors": return <ErrorShowcase />;
+      case "components": return <ComponentsShowcase />;
+      default: return <AuthShowcase />;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Hero */}
+      <header className="relative overflow-hidden">
+        <div className="absolute inset-0 dot-grid opacity-40" />
+        <div className="absolute top-20 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-accent/5 rounded-full blur-3xl" />
+
+        <nav className="relative z-10 flex items-center justify-between max-w-6xl mx-auto px-6 py-5">
+          <div className="flex items-center gap-2">
+            <Package className="h-6 w-6 text-primary" />
+            <span className="font-bold text-lg text-foreground">UIKit</span>
+            <span className="text-xs font-mono text-primary bg-primary/10 px-2 py-0.5 rounded-full">v1.0</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <Link to="/components">
+              <Button variant="ghost" size="sm" className="hover:bg-muted/60 text-sm hidden sm:flex">
+                Docs
+              </Button>
+            </Link>
+            <Button variant="ghost" size="sm" className="hover:bg-muted/60 text-sm gap-1.5 hidden sm:flex">
+              <Github className="h-4 w-4" /> GitHub
+            </Button>
+            <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90 text-sm">
+              Get Started <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </nav>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 pt-16 pb-20 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="space-y-6"
+          >
+            <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 text-primary text-xs font-medium px-3 py-1.5 rounded-full">
+              <Sparkles className="h-3.5 w-3.5" />
+              Production-ready components
+            </div>
+
+            <h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight">
+              <span className="text-foreground">Build faster with </span>
+              <span className="gradient-text">beautiful UI</span>
+            </h1>
+
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              A modular, themeable component library. Auth flows, dashboards, notifications, error pages — 
+              all production-grade and ready to drop into your project.
+            </p>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-4">
+              <Link to="/components">
+                <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 text-base px-8">
+                  Browse Components <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+              <button
+                onClick={handleCopy}
+                className="flex items-center gap-2 bg-muted/50 border border-border/60 rounded-lg px-4 py-2.5 font-mono text-sm text-muted-foreground hover:border-primary/30 hover:text-foreground transition-all"
+              >
+                <span>npx create-ui-kit@latest</span>
+                {copied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      </header>
+
+      {/* Component Showcase */}
+      <section className="max-w-6xl mx-auto px-6 pb-24">
+        {/* Section Tabs */}
+        <div className="flex flex-wrap justify-center gap-2 mb-10">
+          {sections.map((s, i) => (
+            <motion.button
+              key={s.id}
+              custom={i}
+              variants={fadeUp}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              onClick={() => setActiveSection(s.id)}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                activeSection === s.id
+                  ? "bg-primary/15 text-primary border border-primary/30"
+                  : "glass-card text-muted-foreground hover:text-foreground hover:border-border/60"
+              }`}
+            >
+              <s.icon className="h-4 w-4" />
+              <span className="hidden sm:inline">{s.label}</span>
+            </motion.button>
+          ))}
+        </div>
+
+        {/* Active section description */}
+        <motion.div
+          key={activeSection}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-8"
+        >
+          <h2 className="text-2xl font-bold text-foreground mb-2">
+            {sections.find((s) => s.id === activeSection)?.label}
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            {sections.find((s) => s.id === activeSection)?.desc}
+          </p>
+        </motion.div>
+
+        {/* Showcase area */}
+        <motion.div
+          key={`showcase-${activeSection}`}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+          className="glass-card p-6 sm:p-8"
+        >
+          {renderShowcase()}
+        </motion.div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="max-w-6xl mx-auto px-6 pb-24">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-foreground mb-3">Why UIKit?</h2>
+          <p className="text-muted-foreground">Everything you need to ship fast.</p>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[
+            { title: "Type-Safe", desc: "Full TypeScript support with proper generics and inference." },
+            { title: "Accessible", desc: "WCAG compliant with proper ARIA labels and keyboard nav." },
+            { title: "Themeable", desc: "CSS variables and design tokens for easy customization." },
+            { title: "Responsive", desc: "Mobile-first design that looks great on every screen." },
+            { title: "Modular", desc: "Import only what you need. Tree-shakeable by default." },
+            { title: "Production Ready", desc: "Battle-tested patterns used in real SaaS applications." },
+          ].map((f, i) => (
+            <motion.div
+              key={f.title}
+              custom={i}
+              variants={fadeUp}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="glass-card p-5 space-y-2 hover:border-primary/20 transition-colors"
+            >
+              <h3 className="font-semibold text-foreground">{f.title}</h3>
+              <p className="text-sm text-muted-foreground">{f.desc}</p>
+            </motion.div>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border/40 py-8">
+        <div className="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <Package className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium text-foreground">UIKit</span>
+            <span className="text-xs text-muted-foreground">© 2026</span>
+          </div>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <a href="#" className="hover:text-foreground transition-colors">Documentation</a>
+            <a href="#" className="hover:text-foreground transition-colors">GitHub</a>
+            <a href="#" className="hover:text-foreground transition-colors">License</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Index;

package/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+        <a href="/" className="text-primary underline hover:text-primary/90">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/src/test/example.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from "vitest";
+
+describe("example", () => {
+  it("should pass", () => {
+    expect(true).toBe(true);
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1,15 @@
+import "@testing-library/jest-dom";
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  }),
+});

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />