create-reactivite 1.6.0 → 1.7.0

package/template/src/components/ui-lib/pricing-card.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { PricingCard } from "./pricing-card";
+
+const meta = {
+  title: "UI Library/PricingCard",
+  component: PricingCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PricingCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    plan: "Pro",
+    price: "$29",
+    description: "For growing teams that need more power.",
+    features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains"],
+    featured: false,
+  },
+};
+
+export const Featured: Story = {
+  args: {
+    ...Default.args,
+    featured: true,
+  },
+};
+
+export const Tiers: Story = {
+  args: { plan: "Pro", price: "$29", features: [] },
+  render: () => (
+    <div className="grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-3">
+      <PricingCard
+        plan="Starter"
+        price="$0"
+        description="For side projects."
+        features={["1 project", "Community support", "1 GB storage"]}
+        cta="Start free"
+      />
+      <PricingCard
+        plan="Pro"
+        price="$29"
+        description="For growing teams."
+        features={["Unlimited projects", "Priority support", "Analytics"]}
+        featured
+      />
+      <PricingCard
+        plan="Enterprise"
+        price="$99"
+        description="For large orgs."
+        features={["SSO + SAML", "Dedicated support", "SLA", "Audit logs"]}
+        cta="Contact sales"
+      />
+    </div>
+  ),
+};

package/template/src/components/ui-lib/pricing-card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export interface PricingCardProps extends React.ComponentProps<typeof Card> {
+  plan: string
+  price: string
+  period?: string
+  description?: string
+  features: string[]
+  cta?: string
+  /** Highlights the card with a ring + badge — the "recommended" plan. */
+  featured?: boolean
+  onSelect?: () => void
+}
+
+/**
+ * PricingCard — pricing tier composed from Card + Badge + Button + check list.
+ */
+export function PricingCard({
+  plan,
+  price,
+  period = "/mo",
+  description,
+  features,
+  cta = "Get started",
+  featured = false,
+  onSelect,
+  className,
+  ...props
+}: PricingCardProps) {
+  return (
+    <Card
+      className={cn(
+        "relative gap-6",
+        featured && "ring-primary ring-2",
+        className
+      )}
+      {...props}
+    >
+      {featured && (
+        <Badge className="absolute -top-3 left-6">Most popular</Badge>
+      )}
+      <CardHeader>
+        <CardDescription>{plan}</CardDescription>
+        <CardTitle className="flex items-baseline gap-1">
+          <span className="text-4xl font-bold tracking-tight">{price}</span>
+          <span className="text-muted-foreground text-sm font-normal">
+            {period}
+          </span>
+        </CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2.5 text-sm">
+          {features.map((f) => (
+            <li key={f} className="flex items-center gap-2">
+              <Check className="text-primary size-4 shrink-0" />
+              <span>{f}</span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full"
+          variant={featured ? "default" : "outline"}
+          onClick={onSelect}
+        >
+          {cta}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

package/template/src/components/ui-lib/stat-card.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DollarSign, Users, Activity } from "lucide-react";
+
+import { StatCard } from "./stat-card";
+
+const meta = {
+  title: "UI Library/StatCard",
+  component: StatCard,
+  tags: ["autodocs"],
+  argTypes: {
+    delta: { control: { type: "number" } },
+  },
+} satisfies Meta<typeof StatCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Total revenue",
+    value: "$48,120",
+    delta: 12.4,
+    hint: "vs last month",
+    icon: DollarSign,
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    label: "Churn rate",
+    value: "3.8%",
+    delta: -2.1,
+    hint: "vs last month",
+    icon: Activity,
+  },
+};
+
+export const NoDelta: Story = {
+  args: {
+    label: "Active users",
+    value: "12,840",
+    icon: Users,
+  },
+};
+
+export const Grid: Story = {
+  args: { label: "Total revenue", value: "$48,120", delta: 12.4, icon: DollarSign },
+  render: () => (
+    <div className="grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3">
+      <StatCard label="Revenue" value="$48,120" delta={12.4} icon={DollarSign} />
+      <StatCard label="Users" value="12,840" delta={4.2} icon={Users} />
+      <StatCard label="Churn" value="3.8%" delta={-2.1} icon={Activity} />
+    </div>
+  ),
+};

package/template/src/components/ui-lib/stat-card.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { type LucideIcon, TrendingDown, TrendingUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export interface StatCardProps extends React.ComponentProps<typeof Card> {
+  /** Metric label, e.g. "Total revenue". */
+  label: string
+  /** Big value, e.g. "$48,120". */
+  value: React.ReactNode
+  /** Optional period / context line under the value. */
+  hint?: string
+  /** Signed percentage change. Positive renders up + accent, negative down + destructive. */
+  delta?: number
+  /** Icon shown top-right. */
+  icon?: LucideIcon
+}
+
+/**
+ * StatCard — a dashboard KPI tile composed from Card + Badge.
+ * Purely var-driven, so it adopts whatever `data-theme` is active.
+ */
+export function StatCard({
+  label,
+  value,
+  hint,
+  delta,
+  icon: Icon,
+  className,
+  ...props
+}: StatCardProps) {
+  const up = (delta ?? 0) >= 0
+  return (
+    <Card className={cn("gap-3", className)} {...props}>
+      <CardHeader>
+        <CardDescription>{label}</CardDescription>
+        <CardTitle className="text-3xl font-semibold tabular-nums tracking-tight">
+          {value}
+        </CardTitle>
+        {Icon ? (
+          <CardAction>
+            <span className="bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md">
+              <Icon className="size-4" />
+            </span>
+          </CardAction>
+        ) : null}
+      </CardHeader>
+      {(delta !== undefined || hint) && (
+        <CardContent className="flex items-center gap-2">
+          {delta !== undefined && (
+            <Badge variant={up ? "default" : "destructive"}>
+              {up ? <TrendingUp /> : <TrendingDown />}
+              {up ? "+" : ""}
+              {delta}%
+            </Badge>
+          )}
+          {hint && (
+            <span className="text-muted-foreground text-xs">{hint}</span>
+          )}
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/template/src/components/ui-lib/themes.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DollarSign, Zap } from "lucide-react";
+
+import { StatCard } from "./stat-card";
+import { FeatureCard } from "./feature-card";
+import { PricingCard } from "./pricing-card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+const THEMES = ["minimal", "brutalist", "aurora"] as const;
+
+/** A compact sampler rendered once per theme, side by side. */
+function Sampler() {
+  return (
+    <div className="grid w-72 gap-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">Primary</Button>
+        <Button size="sm" variant="outline">
+          Outline
+        </Button>
+        <Badge>New</Badge>
+      </div>
+      <StatCard label="Revenue" value="$48,120" delta={12.4} icon={DollarSign} />
+      <FeatureCard
+        icon={Zap}
+        title="Themeable"
+        description="One attribute re-skins everything."
+      />
+      <PricingCard
+        plan="Pro"
+        price="$29"
+        features={["Unlimited", "Support", "Analytics"]}
+        featured
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "UI Library/Themes",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * All three themes at once. Each column hard-sets its own `data-theme`,
+ * overriding the toolbar selection — this is the "3 variants" overview.
+ */
+export const AllThemes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-6 p-2">
+      {THEMES.map((t) => (
+        <div
+          key={t}
+          data-theme={t}
+          className="bg-background text-foreground rounded-xl border p-5"
+        >
+          <p className="text-muted-foreground mb-4 text-xs font-medium tracking-wide uppercase">
+            {t}
+          </p>
+          <Sampler />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/template/src/global.css

@@ -74,6 +74,128 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
+/* ──────────────────────────────────────────────────────────────
+   UI LIBRARY THEMES
+   3 distinct, var-driven looks. Switch by setting `data-theme` on
+   <html>: "minimal" | "brutalist" | "aurora". Every shadcn + ui-lib
+   component reads these vars, so themes need ZERO component changes.
+   Default theme is set in index.html. The base :root above stays the
+   neutral-dark fallback when no data-theme is present.
+   ────────────────────────────────────────────────────────────── */
+
+/* Theme 1 — MINIMAL: light, calm neutrals, soft radius, editorial. */
+[data-theme="minimal"] {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.18 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0 0);
+  --primary: oklch(0.21 0 0);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.21 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.52 0 0);
+  --accent: oklch(0.96 0 0);
+  --accent-foreground: oklch(0.21 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.92 0 0);
+  --ring: oklch(0.7 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.18 0 0);
+  --sidebar-primary: oklch(0.21 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.96 0 0);
+  --sidebar-accent-foreground: oklch(0.21 0 0);
+  --sidebar-border: oklch(0.92 0 0);
+  --sidebar-ring: oklch(0.7 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+/* Theme 2 — BRUTALIST: stark black/white, acid-yellow accent, 0 radius,
+   pure-black borders. High-contrast, raw, intentionally loud. */
+[data-theme="brutalist"] {
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.93 0.19 102);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.95 0 0);
+  --muted-foreground: oklch(0.35 0 0);
+  --accent: oklch(0.93 0.19 102);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.55 0.24 27);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0 0 0);
+  --radius: 0rem;
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.93 0.19 102);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0 0 0);
+  --chart-1: oklch(0 0 0);
+  --chart-2: oklch(0.93 0.19 102);
+  --chart-3: oklch(0.55 0.24 27);
+  --chart-4: oklch(0.5 0 0);
+  --chart-5: oklch(0.75 0 0);
+}
+
+/* Theme 3 — AURORA: deep violet dark, neon violet/cyan accents,
+   generous radius. Glowy, premium, night-mode product feel. */
+[data-theme="aurora"] {
+  --background: oklch(0.16 0.02 280);
+  --foreground: oklch(0.96 0.01 280);
+  --card: oklch(0.2 0.03 280);
+  --card-foreground: oklch(0.96 0.01 280);
+  --popover: oklch(0.2 0.03 280);
+  --popover-foreground: oklch(0.96 0.01 280);
+  --primary: oklch(0.7 0.18 295);
+  --primary-foreground: oklch(0.16 0.02 280);
+  --secondary: oklch(0.28 0.04 280);
+  --secondary-foreground: oklch(0.96 0.01 280);
+  --muted: oklch(0.26 0.03 280);
+  --muted-foreground: oklch(0.72 0.03 280);
+  --accent: oklch(0.55 0.16 230);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.62 0.24 18);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.32 0.04 280);
+  --input: oklch(0.3 0.04 280);
+  --ring: oklch(0.7 0.18 295);
+  --radius: 1rem;
+  --sidebar: oklch(0.18 0.025 280);
+  --sidebar-foreground: oklch(0.96 0.01 280);
+  --sidebar-primary: oklch(0.7 0.18 295);
+  --sidebar-primary-foreground: oklch(0.16 0.02 280);
+  --sidebar-accent: oklch(0.28 0.04 280);
+  --sidebar-accent-foreground: oklch(0.96 0.01 280);
+  --sidebar-border: oklch(0.32 0.04 280);
+  --sidebar-ring: oklch(0.7 0.18 295);
+  --chart-1: oklch(0.7 0.18 295);
+  --chart-2: oklch(0.6 0.16 230);
+  --chart-3: oklch(0.75 0.17 160);
+  --chart-4: oklch(0.7 0.19 20);
+  --chart-5: oklch(0.8 0.16 90);
+}
+
 @theme inline {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);