@questpie/admin 0.0.1 → 1.0.1

package/src/styles/index.css

@@ -1,340 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/dm-sans";
-@import "@fontsource-variable/jetbrains-mono";
-
-@custom-variant dark (&:is(.dark *));
-
-/* =============================================================================
-   QUESTPIE Design System - Cyber-Minimalist Theme
-   
-   Core principles:
-   - Zero radius (sharp corners)
-   - Neon purple accents with glow effects
-   - Pitch-black foundation
-   - Backdrop blur for depth
-   ============================================================================= */
-
-:root {
-	/* Core Colors (Light mode - for completeness, but dark is primary) */
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(0.98 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.55 0.3 300);
-	--primary-foreground: oklch(1 0 0);
-	--secondary: oklch(0.96 0 0);
-	--secondary-foreground: oklch(0.55 0.3 300);
-	--muted: oklch(0.96 0 0);
-	--muted-foreground: oklch(0.5 0 0);
-	--accent: oklch(0.96 0 0);
-	--accent-foreground: oklch(0.2 0 0);
-	--destructive: oklch(0.58 0.22 27);
-	--border: oklch(0.9 0 0);
-	--input: oklch(0.9 0 0);
-	--ring: oklch(0.55 0.3 300 / 50%);
-
-	/* Chart Colors */
-	--chart-1: oklch(0.7 0.25 300);
-	--chart-2: oklch(0.65 0.28 310);
-	--chart-3: oklch(0.6 0.3 300);
-	--chart-4: oklch(0.55 0.3 300);
-	--chart-5: oklch(0.5 0.28 300);
-
-	/* QUESTPIE: Zero Radius */
-	--radius: 0px;
-
-	/* Sidebar */
-	--sidebar: oklch(0.98 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.55 0.3 300);
-	--sidebar-primary-foreground: oklch(1 0 0);
-	--sidebar-accent: oklch(0.96 0 0);
-	--sidebar-accent-foreground: oklch(0.2 0 0);
-	--sidebar-border: oklch(0.9 0 0);
-	--sidebar-ring: oklch(0.55 0.3 300 / 50%);
-}
-
-/* Dark Mode - QUESTPIE Primary Theme */
-.dark {
-	/* Depth Black Foundation */
-	--background: oklch(0.14 0 0);
-	--foreground: oklch(0.92 0.01 255);
-
-	/* Surface Black */
-	--card: oklch(0.18 0 0);
-	--card-foreground: oklch(0.92 0.01 255);
-
-	/* Popover */
-	--popover: oklch(0.18 0 0);
-	--popover-foreground: oklch(0.92 0.01 255);
-
-	/* Neon Purple Accent */
-	--primary: oklch(0.55 0.3 300);
-	--primary-foreground: oklch(1 0 0);
-
-	/* Neutral Surface */
-	--secondary: oklch(0.22 0 0);
-	--secondary-foreground: oklch(0.55 0.3 300);
-
-	/* Muted */
-	--muted: oklch(0.25 0 0);
-	--muted-foreground: oklch(0.7 0 0);
-
-	/* Accent */
-	--accent: oklch(0.25 0 0);
-	--accent-foreground: oklch(0.92 0.01 255);
-
-	/* Destructive */
-	--destructive: oklch(0.65 0.22 27);
-
-	/* Technical Border */
-	--border: oklch(0.32 0 0);
-	--input: oklch(0.28 0 0);
-
-	/* Glow Focus Ring */
-	--ring: oklch(0.55 0.3 300 / 50%);
-
-	/* Chart Colors */
-	--chart-1: oklch(0.7 0.25 300);
-	--chart-2: oklch(0.65 0.28 310);
-	--chart-3: oklch(0.6 0.3 300);
-	--chart-4: oklch(0.55 0.3 300);
-	--chart-5: oklch(0.5 0.28 300);
-
-	/* Sidebar */
-	--sidebar: oklch(0.16 0 0);
-	--sidebar-foreground: oklch(0.92 0.01 255);
-	--sidebar-primary: oklch(0.55 0.3 300);
-	--sidebar-primary-foreground: oklch(1 0 0);
-	--sidebar-accent: oklch(0.22 0 0);
-	--sidebar-accent-foreground: oklch(0.92 0.01 255);
-	--sidebar-border: oklch(0.32 0 0);
-	--sidebar-ring: oklch(0.55 0.3 300 / 50%);
-}
-
-@theme inline {
-	/* Typography */
-	--font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
-	--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
-
-	/* Color Variables */
-	--color-sidebar-ring: var(--sidebar-ring);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar: var(--sidebar);
-	--color-chart-5: var(--chart-5);
-	--color-chart-4: var(--chart-4);
-	--color-chart-3: var(--chart-3);
-	--color-chart-2: var(--chart-2);
-	--color-chart-1: var(--chart-1);
-	--color-ring: var(--ring);
-	--color-input: var(--input);
-	--color-border: var(--border);
-	--color-destructive: var(--destructive);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-accent: var(--accent);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-muted: var(--muted);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-secondary: var(--secondary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-primary: var(--primary);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-popover: var(--popover);
-	--color-card-foreground: var(--card-foreground);
-	--color-card: var(--card);
-	--color-foreground: var(--foreground);
-	--color-background: var(--background);
-
-	/* QUESTPIE: Zero Radius */
-	--radius-sm: 0px;
-	--radius-md: 0px;
-	--radius-lg: 0px;
-	--radius-xl: 0px;
-	--radius-2xl: 0px;
-	--radius-3xl: 0px;
-	--radius-4xl: 0px;
-}
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50;
-	}
-	body {
-		@apply bg-background font-sans text-foreground;
-	}
-	html {
-		@apply font-sans;
-	}
-}
-
-/* =============================================================================
-   QUESTPIE Atmospheric Utilities
-   ============================================================================= */
-
-@utility bg-grid-quest {
-	background-image:
-		linear-gradient(to right, oklch(0.55 0.3 300 / 5%) 1px, transparent 1px),
-		linear-gradient(to bottom, oklch(0.55 0.3 300 / 5%) 1px, transparent 1px);
-	background-size: 24px 24px;
-}
-
-@utility glow-primary {
-	box-shadow: 0 0 20px oklch(0.55 0.3 300 / 30%);
-}
-
-@utility glow-primary-sm {
-	box-shadow: 0 0 8px oklch(0.55 0.3 300 / 25%);
-}
-
-@utility glow-destructive {
-	box-shadow: 0 0 20px oklch(0.65 0.22 27 / 30%);
-}
-
-@utility ambient-beam {
-	background: radial-gradient(
-		circle,
-		oklch(0.55 0.3 300 / 15%) 0%,
-		transparent 70%
-	);
-	filter: blur(100px);
-}
-
-/* =============================================================================
-   Rich Text Editor Styles
-   ============================================================================= */
-
-.qp-rich-text-editor__content {
-	min-height: 200px;
-	padding: 0.75rem;
-	outline: none;
-}
-
-.qp-rich-text-editor__content > *:first-child {
-	margin-top: 0;
-}
-
-.qp-rich-text-editor__content > *:last-child {
-	margin-bottom: 0;
-}
-
-.qp-rich-text-editor__content p {
-	margin: 0 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h1 {
-	font-size: 1.5rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h2 {
-	font-size: 1.25rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content h3 {
-	font-size: 1.125rem;
-	font-weight: 600;
-	margin: 1rem 0 0.75rem;
-}
-
-.qp-rich-text-editor__content ul,
-.qp-rich-text-editor__content ol {
-	padding-left: 1.5rem;
-	margin: 0.75rem 0;
-}
-
-.qp-rich-text-editor__content blockquote {
-	border-left: 2px solid var(--border);
-	padding-left: 0.75rem;
-	color: var(--muted-foreground);
-	margin: 0.75rem 0;
-}
-
-.qp-rich-text-editor__content code {
-	background: var(--muted);
-	padding: 0.1rem 0.25rem;
-	font-size: 0.875em;
-	font-family: var(--font-mono);
-}
-
-.qp-rich-text-editor__content pre {
-	background: var(--muted);
-	padding: 0.75rem;
-	overflow-x: auto;
-	font-family: var(--font-mono);
-}
-
-.qp-rich-text-editor__content hr {
-	border: none;
-	border-top: 1px solid var(--border);
-	margin: 1rem 0;
-}
-
-.qp-rich-text-editor__content table {
-	border-collapse: collapse;
-	margin: 1rem 0;
-	width: 100%;
-}
-
-.qp-rich-text-editor__content th,
-.qp-rich-text-editor__content td {
-	border: 1px solid var(--border);
-	padding: 0.5rem;
-	text-align: left;
-}
-
-.tippy-box[data-theme~="qp-rich-text-editor"] {
-	background: var(--popover);
-	color: var(--popover-foreground);
-	border: 1px solid var(--border);
-	box-shadow: 0 0 20px oklch(0 0 0 / 40%);
-}
-
-.qp-rich-text-editor__slash {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	padding: 0.5rem;
-	min-width: 220px;
-}
-
-.qp-rich-text-editor__slash-item {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.125rem;
-	padding: 0.5rem;
-	font-size: 0.75rem;
-	line-height: 1.2;
-	color: var(--foreground);
-}
-
-.qp-rich-text-editor__slash-item--active,
-.qp-rich-text-editor__slash-item:hover {
-	background: var(--muted);
-}
-
-.qp-rich-text-editor__slash-title {
-	font-weight: 600;
-}
-
-.qp-rich-text-editor__slash-description {
-	color: var(--muted-foreground);
-}
-
-.qp-rich-text-editor__slash-empty {
-	padding: 0.5rem;
-	font-size: 0.75rem;
-	color: var(--muted-foreground);
-}

package/src/utils/index.ts

@@ -1,6 +0,0 @@
-// Re-export cn helper from lib/utils
-export { cn } from "../lib/utils";
-
-/**
- * Utility functions for admin package
- */

package/src/views/auth/auth-layout.tsx

@@ -1,77 +0,0 @@
-/**
- * Auth Layout - centered card layout for authentication pages
- */
-
-import * as React from "react";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "../../components/ui/card";
-import { cn } from "../../lib/utils";
-
-export type AuthLayoutProps = {
-	/** Page title */
-	title: string;
-	/** Page description */
-	description?: string;
-	/** Logo component or element */
-	logo?: React.ReactNode;
-	/** Footer content (e.g., links to other auth pages) */
-	footer?: React.ReactNode;
-	/** Form content */
-	children: React.ReactNode;
-	/** Additional class name for the card */
-	className?: string;
-};
-
-/**
- * Centered layout for authentication pages (login, register, forgot password, etc.)
- *
- * @example
- * ```tsx
- * <AuthLayout
- *   title="Sign in"
- *   description="Enter your credentials to access the admin panel"
- *   logo={<Logo />}
- *   footer={<Link to="/forgot-password">Forgot password?</Link>}
- * >
- *   <LoginForm />
- * </AuthLayout>
- * ```
- */
-export function AuthLayout({
-	title,
-	description,
-	logo,
-	footer,
-	children,
-	className,
-}: AuthLayoutProps) {
-	return (
-		<div className="bg-background flex min-h-screen flex-col items-center justify-center p-4">
-			<div className="w-full max-w-sm space-y-6">
-				{/* Logo */}
-				{logo && <div className="flex justify-center">{logo}</div>}
-
-				{/* Main Card */}
-				<Card className={cn("w-full", className)}>
-					<CardHeader className="text-center">
-						<CardTitle className="text-lg">{title}</CardTitle>
-						{description && <CardDescription>{description}</CardDescription>}
-					</CardHeader>
-					<CardContent>{children}</CardContent>
-				</Card>
-
-				{/* Footer */}
-				{footer && (
-					<div className="text-muted-foreground text-center text-xs">
-						{footer}
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}

package/src/views/auth/forgot-password-form.tsx

@@ -1,192 +0,0 @@
-/**
- * Forgot Password Form - request password reset email
- */
-
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { Envelope, SpinnerGap, CheckCircle } from "@phosphor-icons/react";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import {
-	Field,
-	FieldContent,
-	FieldError,
-	FieldGroup,
-	FieldLabel,
-} from "../../components/ui/field";
-import { cn } from "../../lib/utils";
-
-export type ForgotPasswordFormValues = {
-	email: string;
-};
-
-export type ForgotPasswordFormProps = {
-	/** Called when form is submitted with valid data */
-	onSubmit: (values: ForgotPasswordFormValues) => Promise<void>;
-	/** Called when back to login link is clicked */
-	onBackToLoginClick?: () => void;
-	/** Default values */
-	defaultValues?: Partial<ForgotPasswordFormValues>;
-	/** Additional class name */
-	className?: string;
-	/** Error message from auth */
-	error?: string | null;
-};
-
-/**
- * Forgot password form with email field
- *
- * @example
- * ```tsx
- * const authClient = createAdminAuthClient<typeof cms>({ baseURL: '...' })
- *
- * function ForgotPasswordPage() {
- *   const [error, setError] = useState<string | null>(null)
- *
- *   const handleSubmit = async (values: ForgotPasswordFormValues) => {
- *     const result = await authClient.forgetPassword({
- *       email: values.email,
- *       redirectTo: '/reset-password',
- *     })
- *     if (result.error) {
- *       setError(result.error.message)
- *     }
- *   }
- *
- *   return (
- *     <AuthLayout title="Forgot password">
- *       <ForgotPasswordForm onSubmit={handleSubmit} error={error} />
- *     </AuthLayout>
- *   )
- * }
- * ```
- */
-export function ForgotPasswordForm({
-	onSubmit,
-	onBackToLoginClick,
-	defaultValues,
-	className,
-	error,
-}: ForgotPasswordFormProps) {
-	const [isSuccess, setIsSuccess] = React.useState(false);
-
-	const {
-		register,
-		handleSubmit,
-		formState: { errors, isSubmitting },
-	} = useForm<ForgotPasswordFormValues>({
-		defaultValues: {
-			email: "",
-			...defaultValues,
-		},
-	});
-
-	const handleFormSubmit = handleSubmit(async (values) => {
-		await onSubmit(values);
-		if (!error) {
-			setIsSuccess(true);
-		}
-	});
-
-	// Success state
-	if (isSuccess) {
-		return (
-			<div className={cn("space-y-4 text-center", className)}>
-				<div className="bg-primary/10 mx-auto flex size-12 items-center justify-center rounded-full">
-					<CheckCircle className="text-primary size-6" weight="duotone" />
-				</div>
-				<div className="space-y-2">
-					<h3 className="text-sm font-medium">Check your email</h3>
-					<p className="text-muted-foreground text-xs">
-						We've sent a password reset link to your email address. Please check
-						your inbox and follow the instructions.
-					</p>
-				</div>
-				<Button
-					type="button"
-					variant="outline"
-					className="w-full"
-					onClick={onBackToLoginClick}
-				>
-					Back to login
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<form onSubmit={handleFormSubmit} className={cn("space-y-4", className)}>
-			<p className="text-muted-foreground text-xs">
-				Enter your email address and we'll send you a link to reset your
-				password.
-			</p>
-
-			<FieldGroup>
-				{/* Email Field */}
-				<Field data-invalid={!!errors.email}>
-					<FieldLabel htmlFor="email">Email</FieldLabel>
-					<FieldContent>
-						<div className="relative">
-							<Envelope
-								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
-								weight="duotone"
-							/>
-							<Input
-								id="email"
-								type="email"
-								placeholder="you@example.com"
-								className="pl-8"
-								autoComplete="email"
-								aria-invalid={!!errors.email}
-								{...register("email", {
-									required: "Email is required",
-									pattern: {
-										value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-										message: "Invalid email address",
-									},
-								})}
-							/>
-						</div>
-						<FieldError>{errors.email?.message}</FieldError>
-					</FieldContent>
-				</Field>
-			</FieldGroup>
-
-			{/* Error Message */}
-			{error && (
-				<div className="bg-destructive/10 text-destructive rounded-md p-3 text-xs">
-					{error}
-				</div>
-			)}
-
-			{/* Submit Button */}
-			<Button
-				type="submit"
-				className="w-full"
-				size="lg"
-				disabled={isSubmitting}
-			>
-				{isSubmitting ? (
-					<>
-						<SpinnerGap className="animate-spin" weight="bold" />
-						Sending...
-					</>
-				) : (
-					"Send reset link"
-				)}
-			</Button>
-
-			{/* Back to Login Link */}
-			<p className="text-muted-foreground text-center text-xs">
-				Remember your password?{" "}
-				<button
-					type="button"
-					onClick={onBackToLoginClick}
-					className="text-primary hover:underline"
-				>
-					Back to login
-				</button>
-			</p>
-		</form>
-	);
-}

package/src/views/auth/index.ts

@@ -1,21 +0,0 @@
-/**
- * Auth views - authentication related components
- */
-
-export { AuthLayout } from "./auth-layout";
-export type { AuthLayoutProps } from "./auth-layout";
-
-export { LoginForm } from "./login-form";
-export type { LoginFormProps, LoginFormValues } from "./login-form";
-
-export { ForgotPasswordForm } from "./forgot-password-form";
-export type {
-	ForgotPasswordFormProps,
-	ForgotPasswordFormValues,
-} from "./forgot-password-form";
-
-export { ResetPasswordForm } from "./reset-password-form";
-export type {
-	ResetPasswordFormProps,
-	ResetPasswordFormValues,
-} from "./reset-password-form";