@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/empty-state/empty-state/empty-state-card.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export interface EmptyStateCardProps {
+  readonly icon: ReactNode;
+  readonly title: string;
+  readonly subtitle: string;
+  readonly actionLabel?: string;
+  readonly onAction?: () => void;
+  readonly actionHref?: string;
+  readonly actionTarget?: "_blank" | "_self" | "_parent" | "_top";
+  readonly actionRel?: string;
+  readonly actionDisabled?: boolean;
+  readonly actionIcon?: ReactNode;
+  readonly className?: string;
+}
+
+export function EmptyStateCard({
+  icon,
+  title,
+  subtitle,
+  actionLabel,
+  onAction,
+  actionHref,
+  actionTarget = "_self",
+  actionRel,
+  actionDisabled = false,
+  actionIcon,
+  className,
+}: EmptyStateCardProps): React.ReactElement {
+  const hasLinkAction = actionLabel !== undefined && actionHref !== undefined;
+  const hasButtonAction = actionLabel !== undefined && onAction !== undefined;
+  const hasDisabledAction = actionLabel !== undefined && actionDisabled;
+  const hasAction = hasLinkAction || hasButtonAction || hasDisabledAction;
+
+  return (
+    <Card className={cn("w-full border border-dashed border-border shadow-none ring-0", className)}>
+      <CardContent className="flex flex-col items-center justify-start px-6 py-10 text-center">
+        <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          {icon}
+        </div>
+        <div className="space-y-1.5">
+          <h3 className="text-lg font-medium tracking-tight">{title}</h3>
+          <p className="max-w-2xl text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+        {hasAction ? (
+          hasLinkAction ? (
+            <Button asChild className="mt-5" disabled={actionDisabled}>
+              <a href={actionHref} target={actionTarget} rel={actionRel}>
+                {actionIcon ? <span className="mr-2 inline-flex items-center">{actionIcon}</span> : null}
+                {actionLabel}
+              </a>
+            </Button>
+          ) : hasDisabledAction ? (
+            <Button className="mt-5" disabled>
+              {actionIcon ? <span className="mr-2 inline-flex items-center">{actionIcon}</span> : null}
+              {actionLabel}
+            </Button>
+          ) : (
+            <Button className="mt-5" onClick={onAction} disabled={actionDisabled}>
+              {actionIcon ? <span className="mr-2 inline-flex items-center">{actionIcon}</span> : null}
+              {actionLabel}
+            </Button>
+          )
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/registry/ui/empty-state/empty-state/index.ts

@@ -0,0 +1,8 @@
+export { EmptyStateCard, type EmptyStateCardProps } from "@/components/ui/empty-state/empty-state-card";
+export { InitialEmptyState, type InitialEmptyStateProps } from "@/components/ui/empty-state/initial-empty-state";
+export { NoResultsState, type NoResultsStateProps } from "@/components/ui/empty-state/no-results-state";
+export {
+  resolveCollectionEmptyState,
+  type CollectionEmptyState,
+  type ResolveCollectionEmptyStateOptions,
+} from "@/components/ui/empty-state/collection-empty-state";

package/registry/ui/empty-state/empty-state/initial-empty-state.tsx

@@ -0,0 +1,36 @@
+import { Inbox } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { EmptyStateCard } from "@/components/ui/empty-state/empty-state-card";
+
+export interface InitialEmptyStateProps {
+  readonly icon?: ReactNode;
+  readonly title: string;
+  readonly subtitle: string;
+  readonly actionLabel?: string;
+  readonly onAction?: () => void;
+  readonly actionIcon?: ReactNode;
+  readonly className?: string;
+}
+
+export function InitialEmptyState({
+  icon = <Inbox className="size-7" />,
+  title,
+  subtitle,
+  actionLabel,
+  onAction,
+  actionIcon,
+  className,
+}: InitialEmptyStateProps): React.ReactElement {
+  return (
+    <EmptyStateCard
+      icon={icon}
+      title={title}
+      subtitle={subtitle}
+      actionLabel={actionLabel}
+      onAction={onAction}
+      actionIcon={actionIcon}
+      className={className}
+    />
+  );
+}

package/registry/ui/empty-state/empty-state/no-results-state.tsx

@@ -0,0 +1,20 @@
+import { SearchX } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { EmptyStateCard } from "@/components/ui/empty-state/empty-state-card";
+
+export interface NoResultsStateProps {
+  readonly icon?: ReactNode;
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly className?: string;
+}
+
+export function NoResultsState({
+  icon = <SearchX className="size-7" />,
+  title = "No results",
+  subtitle = "Try changing your search or filters.",
+  className,
+}: NoResultsStateProps): React.ReactElement {
+  return <EmptyStateCard icon={icon} title={title} subtitle={subtitle} className={className} />;
+}

package/registry/ui/empty-state/manifest.json

@@ -0,0 +1,63 @@
+{
+  "name": "empty-state",
+  "description": "Editable source registry entry for empty-state.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "CollectionEmptyState",
+    "EmptyStateCard",
+    "EmptyStateCardProps",
+    "InitialEmptyState",
+    "InitialEmptyStateProps",
+    "NoResultsState",
+    "NoResultsStateProps",
+    "ResolveCollectionEmptyStateOptions",
+    "resolveCollectionEmptyState"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "empty-state/collection-empty-state.ts",
+      "target": "components/ui/empty-state/collection-empty-state.ts"
+    },
+    {
+      "source": "empty-state/empty-state-card.tsx",
+      "target": "components/ui/empty-state/empty-state-card.tsx"
+    },
+    {
+      "source": "empty-state/index.ts",
+      "target": "components/ui/empty-state/index.ts"
+    },
+    {
+      "source": "empty-state/initial-empty-state.tsx",
+      "target": "components/ui/empty-state/initial-empty-state.tsx"
+    },
+    {
+      "source": "empty-state/no-results-state.tsx",
+      "target": "components/ui/empty-state/no-results-state.tsx"
+    },
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/card.tsx",
+      "target": "components/ui/card.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/empty-state/primitives/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };

package/registry/ui/empty-state/primitives/card.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+}

package/registry/ui/empty-state/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/error-page/error-page/error-code.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+export interface ErrorCodeProps {
+  readonly code: string;
+  readonly reference?: string | null;
+  readonly className?: string;
+}
+
+export function ErrorCode({ code, reference, className }: ErrorCodeProps): React.ReactElement {
+  return (
+    <p className={cn("text-xs text-muted-foreground/55", className)}>
+      Codice {code}
+      {reference ? <span className="ml-2">Rif. {reference}</span> : null}
+    </p>
+  );
+}

package/registry/ui/error-page/error-page/error-page-content.ts

@@ -0,0 +1,75 @@
+export type ErrorPageKind = "error" | "not-found";
+
+export interface ErrorPageContent {
+  readonly code: string;
+  readonly title: string;
+  readonly description: string;
+  readonly shouldCapture: boolean;
+}
+
+export interface ResolveErrorPageContentOptions {
+  readonly fallbackCode?: string;
+  readonly fallbackTitle?: string;
+  readonly fallbackDescription?: string;
+}
+
+const NOT_FOUND_STATUS = 404;
+
+function getErrorText(error: unknown): string {
+  if (error instanceof Error) {
+    const digest = "digest" in error ? String(error.digest) : "";
+    return `${error.message} ${digest}`;
+  }
+
+  if (typeof error === "object" && error !== null) {
+    const record = error as { readonly message?: unknown; readonly digest?: unknown };
+    const message = typeof record.message === "string" ? record.message : "";
+    const digest = typeof record.digest === "string" ? record.digest : "";
+    return `${message} ${digest}`;
+  }
+
+  return typeof error === "string" ? error : "";
+}
+
+function getErrorStatusCode(error: unknown): number | null {
+  const text = getErrorText(error);
+  const fallbackMatch = /NEXT_HTTP_ERROR_FALLBACK;(\d{3})/.exec(text);
+
+  if (fallbackMatch) {
+    return Number(fallbackMatch[1]);
+  }
+
+  const statusMatch = /\bstatus(?:Code)?[=:]\s*(\d{3})\b/i.exec(text);
+  return statusMatch ? Number(statusMatch[1]) : null;
+}
+
+export function resolveErrorPageContent(
+  error: unknown,
+  options: ResolveErrorPageContentOptions = {},
+): ErrorPageContent {
+  if (getErrorStatusCode(error) === NOT_FOUND_STATUS) {
+    return {
+      code: "404",
+      title: "Page not found",
+      description: "The page you are looking for does not exist or has been moved.",
+      shouldCapture: false,
+    };
+  }
+
+  return {
+    code: options.fallbackCode ?? "500",
+    title: options.fallbackTitle ?? "An error occurred",
+    description:
+      options.fallbackDescription ?? "An unexpected error occurred. Please try again later.",
+    shouldCapture: true,
+  };
+}
+
+export function getNotFoundPageContent(): ErrorPageContent {
+  return {
+    code: "404",
+    title: "Page not found",
+    description: "The page you are looking for does not exist or has been moved.",
+    shouldCapture: false,
+  };
+}

package/registry/ui/error-page/error-page/index.ts

@@ -0,0 +1,19 @@
+export { ErrorCode, type ErrorCodeProps } from "@/components/ui/error-page/error-code";
+export {
+  getNotFoundPageContent,
+  resolveErrorPageContent,
+  type ErrorPageContent,
+  type ErrorPageKind,
+  type ResolveErrorPageContentOptions,
+} from "@/components/ui/error-page/error-page-content";
+export {
+  captureErrorToPostHog,
+  createErrorReference,
+  type PostHogErrorCapturePayload,
+} from "@/components/ui/error-page/posthog-error-capture";
+export {
+  SaasErrorPage,
+  SaasNotFoundPage,
+  type SaasErrorPageProps,
+  type SaasNotFoundPageProps,
+} from "@/components/ui/error-page/saas-error-page";

package/registry/ui/error-page/error-page/posthog-error-capture.ts

@@ -0,0 +1,83 @@
+export interface PostHogErrorCapturePayload {
+  readonly error: unknown;
+  readonly code: string;
+  readonly reference: string;
+  readonly source?: string;
+  readonly metadata?: Record<string, unknown>;
+}
+
+interface PostHogClient {
+  capture: (eventName: string, properties?: Record<string, unknown>) => void;
+}
+
+function getPostHogClient(): PostHogClient | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const client = (window as typeof window & { readonly posthog?: PostHogClient }).posthog;
+  return typeof client?.capture === "function" ? client : null;
+}
+
+function normalizeError(error: unknown): {
+  readonly name: string;
+  readonly message: string;
+  readonly stack?: string;
+  readonly digest?: string;
+} {
+  if (error instanceof Error) {
+    const digest = "digest" in error && typeof error.digest === "string" ? error.digest : undefined;
+
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+      digest,
+    };
+  }
+
+  return {
+    name: "UnknownError",
+    message: typeof error === "string" ? error : "Unknown error",
+  };
+}
+
+export function createErrorReference(error: unknown): string {
+  if (error instanceof Error && "digest" in error && typeof error.digest === "string") {
+    return error.digest;
+  }
+
+  return `err_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function captureErrorToPostHog({
+  error,
+  code,
+  reference,
+  source = "error-page",
+  metadata,
+}: PostHogErrorCapturePayload): void {
+  const posthog = getPostHogClient();
+
+  if (!posthog) {
+    return;
+  }
+
+  const normalizedError = normalizeError(error);
+
+  try {
+    posthog.capture("$exception", {
+      $exception_type: normalizedError.name,
+      $exception_message: normalizedError.message,
+      $exception_stack_trace: normalizedError.stack,
+      code,
+      digest: normalizedError.digest,
+      error_reference: reference,
+      pathname: window.location.pathname,
+      source,
+      ...metadata,
+    });
+  } catch {
+    // Error pages must never fail while reporting an error.
+  }
+}