create-astram-app 0.1.2 → 0.2.0

package/template/frontend/src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/template/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/template/frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/template/frontend/src/components/ui/table.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * shadcn Table primitive set, tuned to OCA's matured DataTable look
+ * (translated from oca/src/index.css `.oca-dt*` — plain CSS → Tailwind tokens):
+ *  - `TableHead` renders mono-uppercase, tiny, wide-tracked, muted labels on a
+ *    subtle surface (OCA's `thead th`: IBM Plex Mono, .66rem, .08em tracking).
+ *  - Hairline row borders + comfortable-but-dense cell padding.
+ *  - Row hover lifts to `bg-muted/40`.
+ *  - `<Table>` is wrapped in an `overflow-x-auto` scroll container so wide
+ *    tables scroll horizontally instead of breaking the layout.
+ *  - Sticky-right ACTIONS column: pass `sticky` to `TableHead` / `TableCell`
+ *    (OCA's `.oca-dt-pinned` — `position:sticky; right:0`). The frozen edge is
+ *    marked with BOTH a token `border-l` (reads in LIGHT mode, where a soft
+ *    shadow all but vanishes) AND a left drop-shadow (adds depth in dark, where
+ *    the border is faint) — so scrolling content reads as sliding UNDER the
+ *    pinned column in both themes. Header/body backgrounds stay opaque and track
+ *    the row (incl. hover) via the `group`/`group-hover` on `TableRow`.
+ *
+ * All colors are tokens (`--muted`, `--muted-foreground`, `--border`, `--card`,
+ * `--background`) so light + dark (next-themes `.dark`) are both correct.
+ *
+ * React 18.3: sub-components use `React.forwardRef` (mirroring `dialog.tsx`) so a
+ * forwarded ref lands on the underlying DOM element and never logs "Function
+ * components cannot be given refs".
+ */
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.ComponentPropsWithoutRef<"table">
+>(({ className, ...props }, ref) => (
+  <div data-slot="table-container" className="relative w-full overflow-x-auto">
+    <table
+      ref={ref}
+      data-slot="table"
+      className={cn("w-full caption-bottom border-collapse text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentPropsWithoutRef<"thead">
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    data-slot="table-header"
+    className={cn("[&_tr]:border-b", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentPropsWithoutRef<"tbody">
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    data-slot="table-body"
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentPropsWithoutRef<"tfoot">
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    data-slot="table-footer"
+    className={cn(
+      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.ComponentPropsWithoutRef<"tr">
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    data-slot="table-row"
+    // `group` so sticky cells can react to row hover (OCA keeps the pinned
+    // Actions cell in step with the row's hover surface).
+    className={cn(
+      "group border-b border-border transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ComponentPropsWithoutRef<"th"> & {
+    /** Freeze this header to the right edge (the Actions column). */
+    sticky?: boolean;
+  }
+>(({ className, sticky = false, ...props }, ref) => (
+  <th
+    ref={ref}
+    data-slot="table-head"
+    data-sticky={sticky ? "" : undefined}
+    className={cn(
+      // OCA thead th: mono-uppercase, tiny, wide-tracked, muted, on a subtle
+      // surface with a hairline bottom border.
+      "bg-muted/60 text-muted-foreground h-9 px-3.5 text-left align-middle font-mono text-[0.68rem] font-semibold tracking-[0.08em] whitespace-nowrap uppercase [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      sticky &&
+        // Pinned to the right edge: opaque header surface, sits above the
+        // other sticky-top cells, centered label, token left-border (light) +
+        // left shadow divider (dark).
+        "bg-muted/60 border-border sticky right-0 z-20 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.ComponentPropsWithoutRef<"td"> & {
+    /** Freeze this cell to the right edge (the Actions column). */
+    sticky?: boolean;
+  }
+>(({ className, sticky = false, ...props }, ref) => (
+  <td
+    ref={ref}
+    data-slot="table-cell"
+    data-sticky={sticky ? "" : undefined}
+    className={cn(
+      // OCA tbody td: 11px/14px padding (px-3.5 py-2.5), hairline border,
+      // secondary ink, middle-aligned.
+      "text-foreground/90 px-3.5 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      sticky &&
+        // Pinned cell: opaque background that tracks the row hover surface
+        // (via the row's `group` + group-hover), centered actions, token
+        // left-border (light) + left shadow (dark).
+        "bg-background group-hover:bg-muted/40 border-border sticky right-0 z-10 w-[1%] border-l text-center shadow-[-8px_0_10px_-8px_rgba(0,0,0,0.28)]",
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.ComponentPropsWithoutRef<"caption">
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    data-slot="table-caption"
+    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/template/frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/template/frontend/src/config/branding.js

@@ -0,0 +1,80 @@
+/**
+ * Branding config — the ONE place the app's visual identity is defined, so a re-skin
+ * means editing this file (not hunting through components). Everything brandable reads
+ * from here: the app name, logo (light/dark), tagline, brand colors, and background.
+ *
+ * DYNAMIC-READY: today this is a static object. To make branding per-tenant later,
+ * fetch it from the server at load and merge over these defaults (a `GET /branding`
+ * endpoint), or swap the whole object — the consuming components don't change.
+ * `applyBrandColors()` writes the brand colors into CSS custom properties at runtime,
+ * so even colors can come from data.
+ *
+ * BUILD-TIME OVERRIDES: `appName`, the logo, and the login copy (tagline / sub-tagline)
+ * can all be set per-deploy via Vite env vars (`VITE_APP_NAME`, `VITE_APP_LOGO`,
+ * `VITE_APP_LOGO_DARK`, `VITE_APP_TAGLINE`, `VITE_APP_SUB_TAGLINE`) — see `.env.example`.
+ * `import.meta.env` is inlined at build time, so each deployment bakes in its own copy
+ * without a code change. When a var is unset (or empty), we fall back to the static
+ * astram default below, so the app always renders sensible copy out of the box.
+ */
+
+/** Read a Vite env string, falling back to `fallback` when unset or blank. */
+function envString(value, fallback) {
+  const trimmed = typeof value === 'string' ? value.trim() : '';
+  return trimmed || fallback;
+}
+
+export const branding = {
+  /** App / product name shown in the shell + titles. Overridable via `VITE_APP_NAME`. */
+  appName: envString(import.meta.env.VITE_APP_NAME, 'Astram'),
+
+  /**
+   * Login/header logo. Served from /public. Light + dark variants, each overridable
+   * per-deploy via `VITE_APP_LOGO` / `VITE_APP_LOGO_DARK`.
+   */
+  logo: {
+    light: envString(import.meta.env.VITE_APP_LOGO, '/astram-logo-full.png'),
+    dark: envString(import.meta.env.VITE_APP_LOGO_DARK, '/astram-logo-white.png'),
+    /** A compact mark for the collapsed sidebar rail (optional; falls back to the icon tile). */
+    icon: null,
+  },
+
+  /**
+   * Login screen copy. Overridable per-deploy via Vite env (`VITE_APP_TAGLINE` /
+   * `VITE_APP_SUB_TAGLINE`); falls back to these static strings when the env is unset.
+   */
+  tagline: envString(import.meta.env.VITE_APP_TAGLINE, 'Welcome back'),
+  subTagline: envString(
+    import.meta.env.VITE_APP_SUB_TAGLINE,
+    'Sign in to your account',
+  ),
+  poweredBy: 'Astram',
+
+  /**
+   * Brand accent (reference value). The accent + sidebar are BOTH theme-driven by the
+   * CSS tokens in index.css (`--primary`, `--sidebar*`), which define DISTINCT light and
+   * dark values — e.g. a brighter primary in dark mode so text/fills stay legible.
+   *
+   * These are intentionally NOT pushed to inline CSS variables at runtime: an inline
+   * `root.style` override beats the theme tokens' cascade, pinning one value across BOTH
+   * themes. That is exactly what made dark-mode primary text ("200 OK …", active states)
+   * too dim — the light primary was clobbering the intended brighter dark primary. To
+   * re-skin per tenant later, override the tokens PER THEME (`:root` + `.dark`), not via a
+   * single inline value.
+   */
+  colors: {
+    primary: 'oklch(0.55 0.216 265)', // astram blue (#3366ff family) — light-mode value
+  },
+
+  /** Auth/content background style: 'grid' (dot grid) | 'plain'. */
+  background: 'grid',
+};
+
+/**
+ * Runtime brand-color hook. Currently a NO-OP: the accent + sidebar are theme-driven by
+ * the CSS tokens (distinct light/dark values), and a blanket inline override would break
+ * the dark variants (see the `colors` note above). Kept as the seam so per-tenant theming
+ * can be wired later — the right way is to set the tokens PER THEME, not one inline value.
+ */
+export function applyBrandColors() {
+  /* no-op — theme tokens own the accent + sidebar colors (see branding.colors note). */
+}

package/template/frontend/src/hooks/useMobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.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;
+}