create-aron-app 0.1.0 → 0.1.1

package/templates/_base/shared/ui/src/base/spinner.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "@/ui/base/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/templates/_base/shared/ui/src/base/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/ui/base/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-color_tool.tsx focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/templates/_base/shared/ui/src/base/table.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+
+import { cn } from "@/ui/base/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-color_tool.tsx hover:bg-muted/50 data-[design_doc=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/templates/_base/shared/ui/src/base/text_area.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/ui/base/utils";
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+TextArea.displayName = "TextArea";
+
+export { TextArea };

package/templates/_base/shared/ui/src/base/tooltip.tsx

@@ -0,0 +1,31 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/ui/base/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[design_doc=closed]:animate-out data-[design_doc=closed]:fade-out-0 data-[design_doc=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <TooltipPrimitive.Arrow className="bg-white" width={11} height={5} />
+  </TooltipPrimitive.Content>
+));
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/templates/_base/shared/ui/src/base/utils.ts

@@ -0,0 +1,17 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatList(items: string[], locale = "en"): string {
+  return new Intl.ListFormat(locale, {
+    style: "long",
+    type: "conjunction",
+  }).format(items);
+}
+
+export function capitaliseFirst(s: string): string {
+  return s.length > 0 ? s[0].toUpperCase() + s.slice(1) : s;
+}

package/templates/_base/shared/ui/src/hooks/use_keyboard_press.tsx

@@ -0,0 +1,48 @@
+import { Store } from "@tanstack/react-store";
+import { useEffect } from "react";
+
+export type KeyboardSubscriberCallback = (
+  key: string,
+  shift: boolean,
+  alt: boolean,
+  target: EventTarget | null,
+) => void;
+
+export const keyboardSubscribers = new Store(
+  new Set<KeyboardSubscriberCallback>(),
+);
+
+/**
+ * Only use once in a project, likely at the surface entrypoint
+ */
+export const useKeyboardPressObserver = () => {
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      for (const subscriber of keyboardSubscribers.state) {
+        subscriber(e.key, e.shiftKey, e.altKey, e.target);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return () => {
+      document.removeEventListener("keydown", listener);
+      keyboardSubscribers.state.clear();
+    };
+  }, []);
+};
+
+export const useKeyboardPressSubscriber = (
+  cb: KeyboardSubscriberCallback,
+  deps: any[],
+) => {
+  useEffect(() => {
+    keyboardSubscribers.state.add(cb);
+
+    return () => {
+      keyboardSubscribers.state.delete(cb);
+    };
+  }, deps);
+
+  return () => keyboardSubscribers.state.delete(cb);
+};

package/templates/_base/shared/ui/src/hooks/use_keyboard_release.tsx

@@ -0,0 +1,48 @@
+import { Store } from "@tanstack/react-store";
+import { useEffect } from "react";
+
+export type KeyboardSubscriberCallback = (
+  key: string,
+  shift: boolean,
+  alt: boolean,
+  target: EventTarget | null,
+) => void;
+
+export const keyboardSubscribers = new Store(
+  new Set<KeyboardSubscriberCallback>(),
+);
+
+/**
+ * Only use once in a project, likely at the surface entrypoint
+ */
+export const useKeyboardReleaseObserver = () => {
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      for (const subscriber of keyboardSubscribers.state) {
+        subscriber(e.key, e.shiftKey, e.altKey, e.target);
+      }
+    };
+
+    document.addEventListener("keyup", listener);
+
+    return () => {
+      document.removeEventListener("keyup", listener);
+      keyboardSubscribers.state.clear();
+    };
+  }, []);
+};
+
+export const useKeyboardReleaseSubscriber = (
+  cb: KeyboardSubscriberCallback,
+  deps: any[],
+) => {
+  useEffect(() => {
+    keyboardSubscribers.state.add(cb);
+
+    return () => {
+      keyboardSubscribers.state.delete(cb);
+    };
+  }, deps);
+
+  return () => keyboardSubscribers.state.delete(cb);
+};

package/templates/_base/shared/ui/src/hooks/use_mobile.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export const useMobile = () => {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+};

package/templates/_base/shared/ui/src/hooks/use_mouse_click.tsx

@@ -0,0 +1,44 @@
+import { Store } from "@tanstack/react-store";
+import { useEffect } from "react";
+
+export type MouseSubscriberCallback = (
+  position: [number, number],
+  target: EventTarget | null,
+) => void;
+
+export const mouseSubscribers = new Store(new Set<MouseSubscriberCallback>());
+
+/**
+ * Only use once in a project, likely at the surface entrypoint
+ */
+export const useMouseClickObserver = () => {
+  useEffect(() => {
+    const listener = (e: MouseEvent) => {
+      for (const subscriber of mouseSubscribers.state) {
+        subscriber([e.clientX, e.clientY], e.target);
+      }
+    };
+
+    document.addEventListener("mousedown", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      mouseSubscribers.state.clear();
+    };
+  }, []);
+};
+
+export const useMouseClickSubscriber = (
+  cb: MouseSubscriberCallback,
+  deps: any[],
+) => {
+  useEffect(() => {
+    mouseSubscribers.state.add(cb);
+
+    return () => {
+      mouseSubscribers.state.delete(cb);
+    };
+  }, deps);
+
+  return () => mouseSubscribers.state.delete(cb);
+};

package/templates/_base/shared/ui/src/hooks/use_mouse_location.tsx

@@ -0,0 +1,55 @@
+import { Store } from "@tanstack/react-store";
+import { useEffect } from "react";
+
+export type MouseLocationState = {
+  x: number;
+  y: number;
+};
+
+export const initialMouseLocationState: MouseLocationState = {
+  x: 0,
+  y: 0,
+};
+
+export const mouseLocationState = new Store<MouseLocationState>(
+  initialMouseLocationState,
+);
+
+export const mouseLocationSubscribers = new Store(
+  new Set<(state: MouseLocationState) => void>(),
+);
+
+export const setMouse = (x: number, y: number) =>
+  mouseLocationState.setState(() => ({ x, y }));
+
+/**
+ * Only use once in a project, likely at the surface entrypoint
+ */
+export const useMouseLocationObserver = () => {
+  useEffect(() => {
+    const listener = (e: MouseEvent) => {
+      setMouse(e.clientX, e.clientY);
+
+      for (const subscriber of mouseLocationSubscribers.state) {
+        subscriber(mouseLocationState.state);
+      }
+    };
+
+    document.addEventListener("mousemove", listener);
+
+    return () => {
+      document.removeEventListener("mousemove", listener);
+      mouseLocationSubscribers.state.clear();
+    };
+  }, []);
+};
+
+export const useMouseLocationSubscriber = (
+  cb: (state: MouseLocationState) => void,
+) => {
+  useEffect(() => {
+    mouseLocationSubscribers.state.add(cb);
+  }, []);
+
+  return () => mouseLocationSubscribers.state.delete(cb);
+};

package/templates/_base/shared/ui/src/hooks/use_outside_click.tsx

@@ -0,0 +1,29 @@
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+/**
+ * Hook that alerts clicks outside the passed ref
+ */
+export const useOutsideClick = (
+  ref: RefObject<HTMLDivElement>,
+  cb: () => void,
+) => {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        cb();
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+};

package/templates/_base/shared/ui/src/hooks/use_query_params.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+import { useCallback } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+
+export const useQueryParams = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  return useCallback(
+    (paths: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      for (const [key, value] of Object.entries(paths)) {
+        if (value === null) {
+          params.delete(key);
+          continue;
+        }
+
+        params.set(key, value);
+      }
+
+      const path = pathname + "?" + params.toString();
+
+      return router.push(path);
+    },
+    [searchParams],
+  );
+};

package/templates/_base/shared/ui/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "Node"
+  },
+  "include": ["src/base/**/*"],
+  "exclude": ["node_modules"]
+}

package/templates/_base/shared/utils/src/convex.ts

@@ -0,0 +1,3 @@
+import { ConvexClient } from "convex/browser";
+
+export const convex = new ConvexClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

package/templates/_base/shared/utils/src/time.ts

@@ -0,0 +1,12 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+export const formatTime = (date: Date | number) => {
+  return dayjs(date).format("DD/MM/YYYY hh:mma");
+};
+
+export const formatDistanceToNow = (timestamp: number) => {
+  return dayjs(timestamp).fromNow();
+};

package/templates/_base/shared/utils/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

package/templates/_base/skills-lock.json

@@ -0,0 +1,35 @@
+{
+  "version": 1,
+  "skills": {
+    "shadcn": {
+      "source": "shadcn/ui",
+      "sourceType": "github",
+      "computedHash": "1ec42c9b918b315d8e5c6c856b78c3c4725fc93dea30b9b7e9975c69848fcce6"
+    },
+    "clerk": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "computedHash": "912205692b6c1db07d6933f0584af27c6582484e5d6fac1c13fec4b6a963a528"
+    },
+    "clerk-backend-api": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "computedHash": "4f51a8aac3bb33c5dd6ec06740e13db9c45ad40bb372c918155ea8076f80367b"
+    },
+    "clerk-custom-ui": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "computedHash": "bf28bf1908604c50876a302c8bebd90cf31b04fcf0482ccfc542b22778677bcb"
+    },
+    "clerk-nextjs-patterns": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "computedHash": "c55aeca9c8ca0602af4a2bdc0370e3c349e53752177cb1187edf213f51d34636"
+    },
+    "clerk-webhooks": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "computedHash": "6a13eea450dda0b57edc358970f53c55ad7a2eb237d31decbc38e312555ddac5"
+    }
+  }
+}

package/templates/_base/tsconfig.base.json

@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "lib": ["ESNext", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "paths": {
+      "@/api/*": ["./apps/api/*"],
+      "@/assets/*": ["./shared/assets/src/*"],
+      "@/ui/*": ["./shared/ui/src/*"],
+      "@/utils/*": ["./shared/utils/src/*"],
+      "@/emails/*": ["./emails/*"],
+      "@/web/*": ["./apps/web/src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist", "build", "public"],
+  "include": [
+    "./apps/api/src/**/*",
+    "./apps/web/src/**/*",
+    "./shared/**/*",
+    "./tsconfig.json"
+  ]
+}

package/templates/nextjs/.env.example

@@ -0,0 +1,8 @@
+# Convex
+CONVEX_DEPLOYMENT=
+CONVEX_DEPLOYMENT_URL=
+NEXT_PUBLIC_CONVEX_URL=
+
+# Authentication
+CLERK_SECRET_KEY=
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

package/templates/nextjs/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}

package/templates/nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs/next.config.js

@@ -0,0 +1,22 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { composePlugins, withNx } = require("@nx/next");
+
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);

package/templates/nextjs/postcss.config.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Aron Weston 2025.
+ */
+
+const { join } = require("node:path");
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};