create-blitzpack 0.1.0 → 0.1.1

package/template/apps/web/src/app/not-found.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { Button } from '@repo/packages-ui/button';
-import { FileQuestion } from 'lucide-react';
-import Link from 'next/link';
-import React from 'react';
-
-import { ErrorCard } from '@/components/error/error-card';
-
-export default function NotFound() {
-  return (
-    <ErrorCard
-      icon={FileQuestion}
-      title="Page not found"
-      description="The page you're looking for doesn't exist or has been moved."
-      actions={
-        <>
-          <Button variant="outline" onClick={() => window.history.back()}>
-            Go back
-          </Button>
-          <Button asChild>
-            <Link href="/">Go home</Link>
-          </Button>
-        </>
-      }
-    />
-  );
-}

package/template/apps/web/src/app/page.tsx

@@ -1,192 +0,0 @@
-import { AnimatedThemeToggler } from '@repo/packages-ui/animated-theme-toggler';
-import { Button } from '@repo/packages-ui/button';
-import { GitHubIcon } from '@repo/packages-ui/icons/brand-icons';
-import { ArrowRight, Boxes, PackageCheck, Terminal } from 'lucide-react';
-import Link from 'next/link';
-import React from 'react';
-
-import { CommandBlock } from '@/components/landing/command-block';
-import { FeatureCard } from '@/components/landing/feature-card';
-import { IncludedFeatureCard } from '@/components/landing/included-feature-card';
-import { Logo } from '@/components/landing/logo';
-import { TechBadge } from '@/components/landing/tech-badge';
-import {
-  features,
-  includedFeatures,
-  quickStartCommands,
-  techStack,
-} from '@/config/landing-data';
-import { siteConfig } from '@/config/site';
-
-export default async function Home(): Promise<React.ReactElement> {
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || '';
-  const isLocalDev =
-    apiUrl.includes('localhost') || apiUrl.includes('127.0.0.1');
-
-  const backendPort = new URL(apiUrl).port || '8080';
-
-  return (
-    <main className="bg-background relative flex flex-1 flex-col items-center justify-center p-8 pb-0">
-      <div className="absolute right-8 top-8 flex items-center gap-2">
-        <Button asChild variant="default">
-          <Link href="/login">Sign In</Link>
-        </Button>
-        <AnimatedThemeToggler />
-      </div>
-      <div className="w-full max-w-5xl space-y-12">
-        <div className="space-y-6 text-center">
-          <div className="flex justify-center">
-            <Logo className="h-20 w-auto" />
-          </div>
-          <div className="space-y-3">
-            <h1 className="text-foreground text-5xl font-semibold tracking-tight">
-              Ship production apps faster
-            </h1>
-            <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
-              Production-ready full-stack TypeScript monorepo with Next.js,
-              Fastify, Turborepo and other modern technologies.
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
-            <Button
-              asChild
-              size="lg"
-              className="group shadow-lg transition-all hover:scale-105 hover:shadow-xl"
-            >
-              <Link href="#quick-start" className="flex items-center gap-2">
-                Quick Start
-                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
-              </Link>
-            </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="outline"
-              className="group transition-all hover:scale-105"
-            >
-              <a
-                href={siteConfig.github}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2"
-              >
-                <GitHubIcon className="size-4" />
-                GitHub
-              </a>
-            </Button>
-          </div>
-        </div>
-
-        <div className="grid gap-6 md:grid-cols-3">
-          {features.map((feature) => (
-            <FeatureCard
-              key={feature.title}
-              iconName={feature.iconName}
-              title={feature.title}
-              description={feature.description}
-            />
-          ))}
-        </div>
-
-        <div className="border-border bg-card rounded-lg border p-8">
-          <h2 className="text-card-foreground mb-8 flex items-center gap-2 text-xl font-medium">
-            <PackageCheck className="text-foreground h-5 w-5" />
-            <span>Out of the Box</span>
-          </h2>
-          <div className="grid gap-6 md:grid-cols-3">
-            {includedFeatures.map((feature) => (
-              <IncludedFeatureCard
-                key={feature.title}
-                iconName={feature.iconName}
-                title={feature.title}
-                pages={feature.pages}
-              />
-            ))}
-          </div>
-        </div>
-
-        <div className="border-border bg-card rounded-lg border p-8">
-          <h2 className="text-card-foreground mb-8 flex items-center gap-2 text-xl font-medium">
-            <Boxes className="text-foreground h-5 w-5" />
-            <span>Tech Stack</span>
-          </h2>
-          <div className="space-y-8">
-            {Object.values(techStack).map((stack) => (
-              <div key={stack.title}>
-                <h3 className="text-card-foreground mb-4 text-sm font-medium">
-                  {stack.title}
-                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {stack.items.map((item) => (
-                    <TechBadge key={item}>{item}</TechBadge>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div
-          id="quick-start"
-          className="border-border bg-card border-l-primary rounded-lg border border-l-8 p-8"
-        >
-          <div className="mb-6 flex items-center gap-3">
-            <Terminal className="text-foreground h-5 w-5" />
-            <h2 className="text-foreground text-xl font-medium">Quick Start</h2>
-          </div>
-          <div className="space-y-3">
-            {quickStartCommands.map((cmd) => (
-              <CommandBlock
-                key={cmd.command}
-                command={cmd.command}
-                tooltipContent={cmd.tooltip}
-              />
-            ))}
-          </div>
-          {isLocalDev && (
-            <>
-              <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
-                <span className="text-muted-foreground text-xs">Services:</span>
-                <a
-                  href="http://localhost:3000"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
-                >
-                  Web <span className="text-muted-foreground">:3000</span>
-                </a>
-                <a
-                  href={`http://localhost:${backendPort}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
-                >
-                  API{' '}
-                  <span className="text-muted-foreground">:{backendPort}</span>
-                </a>
-                <a
-                  href={`http://localhost:${backendPort}/docs`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
-                >
-                  API Docs
-                  <span className="text-muted-foreground">
-                    :{backendPort}/docs
-                  </span>
-                </a>
-              </div>
-              <p className="text-muted-foreground mt-4 text-center text-xs">
-                See{' '}
-                <code className="bg-muted rounded px-1.5 py-0.5 font-mono">
-                  GETTING_STARTED.md
-                </code>
-                for further optional customization.
-              </p>
-            </>
-          )}
-        </div>
-      </div>
-    </main>
-  );
-}

package/template/apps/web/src/components/admin/activity-feed.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import type { RecentSignup } from '@repo/packages-types/stats';
-import { ScrollArea } from '@repo/packages-ui/scroll-area';
-import { Skeleton } from '@repo/packages-ui/skeleton';
-import { UserAvatar } from '@repo/packages-ui/user-avatar';
-import { motion } from 'framer-motion';
-
-function formatRelativeTime(dateStr: string) {
-  const date = new Date(dateStr);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMins / 60);
-  const diffDays = Math.floor(diffHours / 24);
-
-  if (diffMins < 1) return 'Just now';
-  if (diffMins < 60) return `${diffMins}m ago`;
-  if (diffHours < 24) return `${diffHours}h ago`;
-  if (diffDays === 1) return 'Yesterday';
-  return `${diffDays}d ago`;
-}
-
-interface RecentSignupsFeedProps {
-  signups: RecentSignup[];
-}
-
-export function RecentSignupsFeed({ signups }: RecentSignupsFeedProps) {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4">
-        <h3 className="text-sm font-semibold">Recent Signups</h3>
-        <p className="text-muted-foreground text-xs">
-          Latest user registrations
-        </p>
-      </div>
-      <ScrollArea className="h-[280px] pr-3">
-        <div className="space-y-3">
-          {signups.map((signup, index) => (
-            <motion.div
-              key={signup.id}
-              initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: index * 0.05 }}
-              className="flex items-center gap-3 rounded-lg border p-3"
-            >
-              <UserAvatar
-                src={signup.image}
-                name={signup.name}
-                email={signup.email}
-                size="sm"
-              />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium">
-                  {signup.name || 'No name'}
-                </p>
-                <p className="text-muted-foreground truncate text-xs">
-                  {signup.email}
-                </p>
-              </div>
-              <span className="text-muted-foreground shrink-0 text-xs">
-                {formatRelativeTime(signup.createdAt)}
-              </span>
-            </motion.div>
-          ))}
-          {signups.length === 0 && (
-            <p className="text-muted-foreground py-8 text-center text-sm">
-              No recent signups
-            </p>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}
-
-export function ActivityFeedSkeleton() {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4 space-y-1">
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-3 w-36" />
-      </div>
-      <div className="space-y-3">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div
-            key={i}
-            className="flex items-center gap-3 rounded-lg border p-3"
-          >
-            <Skeleton className="size-8 rounded-full" />
-            <div className="flex-1 space-y-1">
-              <Skeleton className="h-3 w-24" />
-              <Skeleton className="h-2 w-32" />
-            </div>
-            <Skeleton className="h-3 w-12" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/template/apps/web/src/components/admin/charts/auth-breakdown-chart.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import type { AuthBreakdown } from '@repo/packages-types/stats';
-import { Skeleton } from '@repo/packages-ui/skeleton';
-import {
-  Bar,
-  BarChart,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-import { SimpleChartTooltip } from './chart-tooltip';
-
-interface AuthBreakdownChartProps {
-  data: AuthBreakdown;
-}
-
-const AUTH_CONFIG = [
-  { key: 'verified', label: 'Verified', color: '#10b981' },
-  { key: 'unverified', label: 'Unverified', color: '#f59e0b' },
-  { key: 'banned', label: 'Banned', color: '#ef4444' },
-] as const;
-
-export function AuthBreakdownChart({ data }: AuthBreakdownChartProps) {
-  const chartData = AUTH_CONFIG.map((config) => ({
-    name: config.label,
-    count: data[config.key],
-    color: config.color,
-  }));
-
-  const total = data.verified + data.unverified + data.banned;
-
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4">
-        <h3 className="text-sm font-semibold">Auth Status</h3>
-        <p className="text-muted-foreground text-xs">
-          Users by verification and ban status
-        </p>
-      </div>
-      <div className="h-[200px]">
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={chartData}
-            layout="vertical"
-            margin={{ top: 5, right: 30, left: 0, bottom: 5 }}
-          >
-            <XAxis
-              type="number"
-              tick={{ fontSize: 11 }}
-              tickLine={false}
-              axisLine={false}
-              allowDecimals={false}
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <YAxis
-              type="category"
-              dataKey="name"
-              tick={{ fontSize: 11 }}
-              tickLine={false}
-              axisLine={false}
-              width={75}
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <Tooltip
-              content={
-                <SimpleChartTooltip
-                  valueFormatter={(value: number) => [
-                    `${value} (${total > 0 ? ((value / total) * 100).toFixed(1) : 0}%)`,
-                    'Users',
-                  ]}
-                />
-              }
-              cursor={{ fill: 'rgba(99, 102, 241, 0.08)' }}
-            />
-            <Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
-              {chartData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}
-
-export function AuthBreakdownChartSkeleton() {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4 space-y-1">
-        <Skeleton className="h-4 w-20" />
-        <Skeleton className="h-3 w-44" />
-      </div>
-      <div className="space-y-3 pt-4">
-        <div className="flex items-center gap-3">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-6 flex-1" />
-        </div>
-        <div className="flex items-center gap-3">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-6 w-2/3" />
-        </div>
-        <div className="flex items-center gap-3">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-6 w-1/4" />
-        </div>
-      </div>
-    </div>
-  );
-}

package/template/apps/web/src/components/admin/charts/chart-tooltip.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import { cn } from '@repo/packages-ui/lib/utils';
-
-interface TooltipPayload {
-  value?: number;
-  name?: string;
-  color?: string;
-  payload?: { color?: string };
-}
-
-interface ChartTooltipProps {
-  active?: boolean;
-  payload?: TooltipPayload[];
-  label?: string;
-  labelFormatter?: (label: string) => string;
-}
-
-export function ChartTooltip({
-  active,
-  payload,
-  label,
-  labelFormatter,
-}: ChartTooltipProps) {
-  if (!active || !payload?.length) return null;
-
-  const formattedLabel =
-    labelFormatter && label ? labelFormatter(label) : label;
-
-  return (
-    <div
-      className={cn(
-        'rounded-lg border px-3 py-2 shadow-lg',
-        'bg-white/90 dark:bg-zinc-900/90',
-        'backdrop-blur-md',
-        'border-zinc-200/50 dark:border-zinc-700/50'
-      )}
-    >
-      {formattedLabel && (
-        <p className="mb-1.5 text-xs font-semibold text-zinc-900 dark:text-zinc-100">
-          {formattedLabel}
-        </p>
-      )}
-      <div className="space-y-1">
-        {payload.map((entry: TooltipPayload, index: number) => (
-          <div key={index} className="flex items-center gap-2 text-xs">
-            <span
-              className="size-2 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span className="text-zinc-600 dark:text-zinc-400">
-              {entry.name}:
-            </span>
-            <span className="font-medium text-zinc-900 dark:text-zinc-100">
-              {typeof entry.value === 'number'
-                ? entry.value.toLocaleString()
-                : entry.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface SimpleChartTooltipProps {
-  active?: boolean;
-  payload?: TooltipPayload[];
-  label?: string;
-  labelFormatter?: (label: string) => string;
-  valueFormatter?: (value: number, name: string) => [string, string];
-}
-
-export function SimpleChartTooltip({
-  active,
-  payload,
-  label,
-  labelFormatter,
-  valueFormatter,
-}: SimpleChartTooltipProps) {
-  if (!active || !payload?.length) return null;
-
-  const formattedLabel =
-    labelFormatter && label ? labelFormatter(label) : label;
-
-  return (
-    <div
-      className={cn(
-        'rounded-lg border px-3 py-2 shadow-lg',
-        'bg-white/90 dark:bg-zinc-900/90',
-        'backdrop-blur-md',
-        'border-zinc-200/50 dark:border-zinc-700/50'
-      )}
-    >
-      {formattedLabel && (
-        <p className="mb-1.5 text-xs font-semibold text-zinc-900 dark:text-zinc-100">
-          {formattedLabel}
-        </p>
-      )}
-      <div className="space-y-1">
-        {payload.map((entry: TooltipPayload, index: number) => {
-          const [formattedValue, formattedName] = valueFormatter
-            ? valueFormatter(entry.value as number, entry.name as string)
-            : [entry.value?.toLocaleString(), entry.name];
-
-          return (
-            <div key={index} className="flex items-center gap-2 text-xs">
-              <span
-                className="size-2 rounded-full"
-                style={{ backgroundColor: entry.color || entry.payload?.color }}
-              />
-              <span className="text-zinc-600 dark:text-zinc-400">
-                {formattedName}:
-              </span>
-              <span className="font-medium text-zinc-900 dark:text-zinc-100">
-                {formattedValue}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}