@carefully-built/cli 0.1.1 → 0.1.2

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

@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ErrorCode } from "@/components/ui/error-page/error-code";
+import {
+  getNotFoundPageContent,
+  resolveErrorPageContent,
+  type ErrorPageContent,
+} from "@/components/ui/error-page/error-page-content";
+import { captureErrorToPostHog, createErrorReference } from "@/components/ui/error-page/posthog-error-capture";
+
+export interface SaasErrorPageProps {
+  readonly error?: Error & { readonly digest?: string };
+  readonly reset?: () => void;
+  readonly homeHref?: string;
+  readonly homeLabel?: string;
+  readonly retryLabel?: string;
+  readonly source?: string;
+  readonly metadata?: Record<string, unknown>;
+  readonly content?: Partial<ErrorPageContent>;
+  readonly className?: string;
+  readonly classes?: SaasErrorPageClassNames;
+}
+
+export interface SaasErrorPageClassNames {
+  readonly root?: string;
+  readonly content?: string;
+  readonly code?: string;
+  readonly text?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly actions?: string;
+}
+
+function resolveContent(
+  error: SaasErrorPageProps["error"],
+  content: SaasErrorPageProps["content"],
+): ErrorPageContent {
+  const resolvedContent = error ? resolveErrorPageContent(error) : getNotFoundPageContent();
+
+  return {
+    ...resolvedContent,
+    ...content,
+    shouldCapture: content?.shouldCapture ?? resolvedContent.shouldCapture,
+  };
+}
+
+export function SaasErrorPage({
+  error,
+  reset,
+  homeHref = "/",
+  homeLabel = "Torna alla home",
+  retryLabel = "Riprova",
+  source,
+  metadata,
+  content,
+  className,
+  classes,
+}: SaasErrorPageProps): React.ReactElement {
+  const resolvedContent = useMemo(() => resolveContent(error, content), [content, error]);
+  const [reference] = useState(() => (error ? createErrorReference(error) : null));
+
+  useEffect(() => {
+    if (!error || !resolvedContent.shouldCapture || !reference) {
+      return;
+    }
+
+    captureErrorToPostHog({
+      error,
+      code: resolvedContent.code,
+      reference,
+      source,
+      metadata,
+    });
+  }, [error, metadata, reference, resolvedContent.code, resolvedContent.shouldCapture, source]);
+
+  return (
+    <main
+      className={cn(
+        "bg-background text-foreground flex min-h-screen flex-col items-center justify-center gap-4 px-6 text-center",
+        className,
+        classes?.root,
+      )}
+    >
+      <div className={cn("space-y-3", classes?.content)}>
+        <p
+          className={cn(
+            "text-8xl font-semibold leading-none text-muted-foreground/25 sm:text-9xl",
+            classes?.code,
+          )}
+        >
+          {resolvedContent.code}
+        </p>
+        <div className={cn("space-y-2", classes?.text)}>
+          <h1 className={cn("text-2xl font-semibold tracking-tight", classes?.title)}>
+            {resolvedContent.title}
+          </h1>
+          <p className={cn("mx-auto max-w-md text-sm text-muted-foreground", classes?.description)}>
+            {resolvedContent.description}
+          </p>
+        </div>
+      </div>
+
+      <ErrorCode code={resolvedContent.code} reference={reference} />
+
+      <div className={cn("mt-2 flex flex-wrap justify-center gap-3", classes?.actions)}>
+        {reset ? (
+          <Button type="button" variant="outline" onClick={reset}>
+            {retryLabel}
+          </Button>
+        ) : null}
+        <Button asChild>
+          <a href={homeHref}>{homeLabel}</a>
+        </Button>
+      </div>
+    </main>
+  );
+}
+
+export interface SaasNotFoundPageProps
+  extends Omit<SaasErrorPageProps, "error" | "reset" | "content"> {
+  readonly title?: string;
+  readonly description?: string;
+}
+
+export function SaasNotFoundPage({
+  title,
+  description,
+  ...props
+}: SaasNotFoundPageProps): React.ReactElement {
+  return (
+    <SaasErrorPage
+      {...props}
+      content={{
+        code: "404",
+        title: title ?? "Page not found",
+        description:
+          description ?? "The page you are looking for does not exist or has been moved.",
+        shouldCapture: false,
+      }}
+    />
+  );
+}

package/registry/ui/error-page/manifest.json

@@ -0,0 +1,64 @@
+{
+  "name": "error-page",
+  "description": "Editable source registry entry for error-page.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "ErrorCode",
+    "ErrorCodeProps",
+    "ErrorPageContent",
+    "ErrorPageKind",
+    "PostHogErrorCapturePayload",
+    "ResolveErrorPageContentOptions",
+    "SaasErrorPage",
+    "SaasErrorPageProps",
+    "SaasNotFoundPage",
+    "SaasNotFoundPageProps",
+    "captureErrorToPostHog",
+    "createErrorReference",
+    "getNotFoundPageContent",
+    "resolveErrorPageContent"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "error-page/error-code.tsx",
+      "target": "components/ui/error-page/error-code.tsx"
+    },
+    {
+      "source": "error-page/error-page-content.ts",
+      "target": "components/ui/error-page/error-page-content.ts"
+    },
+    {
+      "source": "error-page/index.ts",
+      "target": "components/ui/error-page/index.ts"
+    },
+    {
+      "source": "error-page/posthog-error-capture.ts",
+      "target": "components/ui/error-page/posthog-error-capture.ts"
+    },
+    {
+      "source": "error-page/saas-error-page.tsx",
+      "target": "components/ui/error-page/saas-error-page.tsx"
+    },
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/error-page/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/error-page/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/field-detail-row/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "field-detail-row",
+  "description": "Editable source registry entry for field-detail-row.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "FieldDetailRow",
+    "FieldDetailRowProps"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/field-detail-row.tsx",
+      "target": "components/ui/field-detail-row.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/field-detail-row/primitives/field-detail-row.tsx

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface FieldDetailRowProps {
+  readonly icon: LucideIcon;
+  readonly label: string;
+  readonly value: ReactNode;
+  readonly labelColumnClassName?: string;
+}
+
+export function FieldDetailRow({
+  icon: Icon,
+  label,
+  value,
+  labelColumnClassName = "grid-cols-[110px_minmax(0,1fr)]",
+}: FieldDetailRowProps): React.ReactElement {
+  return (
+    <div className={`grid ${labelColumnClassName} items-start gap-2 py-1.5`}>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Icon className="size-4 shrink-0" />
+        <span className="text-[12px]">{label}</span>
+      </div>
+      <div className="min-w-0 text-[14px] leading-5 tracking-[-0.28px] text-foreground">
+        {value}
+      </div>
+    </div>
+  );
+}

package/registry/ui/field-detail-row/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/file-dropzone/manifest.json

@@ -0,0 +1,35 @@
+{
+  "name": "file-dropzone",
+  "description": "Editable source registry entry for file-dropzone.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "FileDropzone"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/file-dropzone.tsx",
+      "target": "components/ui/file-dropzone.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/file-dropzone/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 };