create-aron-app 0.1.7 → 0.1.8

package/templates/nx.json

@@ -24,17 +24,6 @@
           "watchDepsName": "watch-deps"
         }
       }
-    },
-    {
-      "plugin": "@nx/next/plugin",
-      "options": {
-        "startTargetName": "start",
-        "buildTargetName": "build",
-        "devTargetName": "dev",
-        "serveStaticTargetName": "serve-static",
-        "buildDepsTargetName": "build-deps",
-        "watchDepsTargetName": "watch-deps"
-      }
     }
   ]
 }

package/templates/package.json

@@ -2,10 +2,10 @@
   "name": "@/source",
   "version": "0.0.0",
   "license": "MIT",
+  "type": "module",
   "private": true,
   "scripts": {},
   "dependencies": {
-    "@clerk/nextjs": "^6.33.7",
     "@clerk/react-router": "^3.0.4",
     "@convex-dev/react-query": "^0.0.0-alpha.8",
     "@hookform/resolvers": "^3.9.1",
@@ -48,12 +48,12 @@
     "mobx-react": "^9.2.1",
     "mobx-react-lite": "^4.1.1",
     "nanoid": "^5.1.6",
-    "next": "~15.1.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.2",
     "react-resizable-panels": "^4.7.2",
     "react-router": "^7.5.0",
+    "react-top-loading-bar": "^3.0.0",
     "sharp": "^0.33.5",
     "sonner": "^2.0.1",
     "ts-essentials": "^10.1.1",
@@ -63,7 +63,6 @@
   "devDependencies": {
     "@biomejs/biome": "^2.2.3",
     "@nx/js": "20.6.2",
-    "@nx/next": "20.6.2",
     "@nx/workspace": "20.6.2",
     "@react-router/dev": "^7.5.0",
     "@swc-node/register": "~1.9.1",

package/templates/shared/assets/src/styles/global.css

@@ -5,7 +5,6 @@
 :root {
   --spacing: 0.222222rem;
   --radius: 0.625rem;
-
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -29,17 +28,22 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar: oklch(0.25 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.5 0.15 250);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.3 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.3 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-muted-foreground: oklch(0.6 0 0);
+  --sidebar-brand: oklch(0.5 0.15 250);
 }
 
 @theme inline {
+  --font-sans:
+    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --font-heading: var(--font-heading);
   --font-body: var(--font-body);
   --color-background: var(--background);
@@ -69,5 +73,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-muted-foreground: var(--sidebar-muted-foreground);
+  --color-sidebar-brand: var(--sidebar-brand);
 }
 

package/templates/shared/ui/src/base/collapsible.tsx

@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/templates/shared/ui/src/base/hover-card.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/ui/base/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/templates/shared/ui/src/base/input-group.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/ui/base/utils"
+import { Button } from "@/ui/base/button"
+import { Input } from "@/ui/base/input"
+import { Textarea } from "@/ui/base/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/templates/shared/ui/src/base/panel.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) SalesStar Limited 2026.
+ */
+
+import type * as React from "react";
+
+import { cn } from "@/ui/base/utils";
+import { useMobile } from "@/ui/hooks/use_mobile";
+
+type PanelProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  side?: "left" | "right";
+  width?: string;
+  className?: string;
+};
+
+const Panel = ({
+  open,
+  onOpenChange,
+  children,
+  side = "right",
+  width = "20rem",
+  className,
+}: PanelProps) => {
+  const isMobile = useMobile();
+
+  if (isMobile) {
+    return null;
+    // <Sheet open={open} onOpenChange={onOpenChange}>
+    //   <SheetContent
+    //     side={side}
+    //     style={{ width } as React.CSSProperties}
+    //     className={cn(
+    //       "p-0 data-[state=open]:duration-700 data-[state=closed]:duration-500",
+    //       className,
+    //     )}
+    //   >
+    //     <div className="flex h-full flex-col overflow-auto">{children}</div>
+    //   </SheetContent>
+    // </Sheet>
+  }
+
+  return (
+    <aside
+      style={open ? { width } : { width: 0 }}
+      className={cn(
+        "bg-background text-foreground flex h-full flex-col shrink-0 border-border transition-[width] duration-500 ease-in-out",
+        side === "right" ? "border-l" : "border-r",
+        open ? "overflow-auto" : "overflow-hidden invisible",
+      )}
+    >
+      {open && (
+        <div className={cn("flex h-full w-full flex-col overflow-auto", className)}>{children}</div>
+      )}
+    </aside>
+  );
+};
+
+type PanelHeaderProps = React.ComponentProps<"div">;
+const PanelHeader = ({ className, ...props }: PanelHeaderProps) => {
+  return (
+    <div data-slot="panel-header" className={cn("flex flex-col gap-2 p-4", className)} {...props} />
+  );
+};
+
+type PanelContentProps = React.ComponentProps<"div">;
+const PanelContent = ({ className, ...props }: PanelContentProps) => {
+  return (
+    <div
+      data-slot="panel-content"
+      className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", className)}
+      {...props}
+    />
+  );
+};
+
+type PanelFooterProps = React.ComponentProps<"div">;
+const PanelFooter = ({ className, ...props }: PanelFooterProps) => {
+  return (
+    <div data-slot="panel-footer" className={cn("flex flex-col gap-2 p-4", className)} {...props} />
+  );
+};
+
+type PanelGroupProps = React.ComponentProps<"div">;
+const PanelGroup = ({ className, ...props }: PanelGroupProps) => {
+  return (
+    <div data-slot="panel-group" className={cn("flex flex-col gap-2", className)} {...props} />
+  );
+};
+
+export { Panel, PanelContent, PanelFooter, PanelGroup, PanelHeader };

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Aron Weston 2025.
+ * Copyright (c) Sales Star Limited 2026.
  */
 
 "use client";

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

@@ -3,13 +3,12 @@
  */
 
 import { useCallback } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useRouter } from "next/navigation";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
 
 export const useQueryParams = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
 
   return useCallback(
     (paths: Record<string, string | null>) => {
@@ -26,8 +25,8 @@ export const useQueryParams = () => {
 
       const path = pathname + "?" + params.toString();
 
-      return router.push(path);
+      return navigate(path);
     },
-    [searchParams],
+    [navigate, pathname, searchParams],
   );
 };

package/templates/shared/ui/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "moduleResolution": "Node"
   },
-  "include": ["src/base/**/*"],
+  "include": ["src/base/**/*", "src/hooks/**/*"],
   "exclude": ["node_modules"]
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import { ConvexClient } from "convex/browser";
 
-export const convex = new ConvexClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+export const convex = new ConvexClient(import.meta.env.VITE_CONVEX_URL!);

package/templates/tsconfig.base.json

@@ -21,16 +21,14 @@
       "@/ui/*": ["./shared/ui/src/*"],
       "@/utils/*": ["./shared/utils/src/*"],
       "@/emails/*": ["./emails/*"],
-      "@/web/*": ["./apps/web/src/*", "./apps/nextjs/src/*", "./apps/react-router/src/*"],
-      "@/router/*": ["./apps/react-router/.react-router/types/*"],
+      "@/web/*": ["./apps/web/src/*"],
+      "@/router/*": ["./apps/web/.react-router/types/*"],
     }
   },
   "exclude": ["node_modules", "dist", "build", "public"],
   "include": [
     "./apps/api/src/**/*",
     "./apps/web/src/**/*",
-    "./apps/nextjs/src/**/*",
-    "./apps/react-router/src/**/*",
     "./shared/**/*",
     "./tsconfig.json"
   ]