@askrjs/cli 0.0.2

package/templates/startkit/src/components/app-header.tsx

@@ -0,0 +1,93 @@
+import { currentRoute, Link } from '@askrjs/askr/router';
+import { Input } from '@askrjs/ui/input';
+import {
+  Avatar,
+  AvatarFallback,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Inline,
+} from '@askrjs/themes/components';
+import { SearchIcon } from '@askrjs/lucide';
+import { buildLoginHref, getRouteLabel, settingsRoute } from '../lib/routes';
+import { showToast } from '../toast';
+import { signOut } from '../lib/mock-data';
+
+export default function AppHeader() {
+  const breadcrumb = () => getRouteLabel(currentRoute().path);
+
+  return (
+    <header class="app-header">
+      <Inline
+        align="center"
+        justify="between"
+        gap="var(--ak-space-lg)"
+        wrap="wrap"
+      >
+        <div class="breadcrumbs">
+          <span>App</span>
+          <span aria-hidden="true">/</span>
+          <strong>{breadcrumb()}</strong>
+        </div>
+
+        <label class="header-search" aria-label="Search">
+          <SearchIcon size={15} aria-hidden="true" />
+          <Input placeholder="Search docs, accounts, settings..." disabled />
+        </label>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger class="header-account-trigger">
+            <Avatar>
+              <AvatarFallback>AM</AvatarFallback>
+            </Avatar>
+            <span class="header-account-name">Alex Morgan</span>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent side="bottom" align="end" sideOffset={8}>
+              <DropdownMenuLabel>Workspace</DropdownMenuLabel>
+              <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                  <Link href={settingsRoute.href}>Profile settings</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() =>
+                    showToast({
+                      title: 'Notifications enabled',
+                      description:
+                        'Connect this action to your notification center.',
+                    })
+                  }
+                >
+                  Notifications
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  const nextTarget =
+                    typeof window === 'undefined'
+                      ? undefined
+                      : `${window.location.pathname}${window.location.search}${window.location.hash}`;
+                  signOut();
+                  showToast({
+                    title: 'Signed out',
+                    description:
+                      'Session state is now cleared from local storage.',
+                  });
+                  window.location.assign(buildLoginHref(nextTarget));
+                }}
+              >
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
+      </Inline>
+    </header>
+  );
+}

package/templates/startkit/src/components/app-sidebar.tsx

@@ -0,0 +1,95 @@
+import { Link } from '@askrjs/askr/router';
+import {
+  LayoutDashboardIcon,
+  UsersIcon,
+  SettingsIcon,
+  LayersIcon,
+  ShieldCheckIcon,
+} from '@askrjs/lucide';
+import type { IconProps } from '@askrjs/lucide';
+import type { JSXElement } from '@askrjs/askr/foundations';
+import { NavBrand, NavGroup, NavLink, Navbar } from '@askrjs/themes/components';
+import {
+  accountsRoute,
+  dashboardRoute,
+  landingRoute,
+  loginRoute,
+  settingsRoute,
+} from '../lib/routes';
+
+type NavItem = {
+  href: string;
+  label: string;
+  icon: (props: IconProps) => JSXElement;
+};
+
+const primaryNav: NavItem[] = [
+  {
+    href: dashboardRoute.href,
+    label: dashboardRoute.navLabel,
+    icon: LayoutDashboardIcon,
+  },
+  {
+    href: accountsRoute.href,
+    label: accountsRoute.navLabel,
+    icon: UsersIcon,
+  },
+  {
+    href: settingsRoute.href,
+    label: settingsRoute.navLabel,
+    icon: SettingsIcon,
+  },
+];
+
+const secondaryNav: NavItem[] = [
+  { href: landingRoute.href, label: 'Marketing site', icon: LayersIcon },
+  { href: loginRoute.href, label: 'Auth entry', icon: ShieldCheckIcon },
+];
+
+export default function AppSidebar() {
+  return (
+    <aside class="app-sidebar" aria-label="Sidebar navigation">
+      <Navbar
+        orientation="vertical"
+        class="app-sidebar-nav"
+        aria-label="Sidebar navigation"
+      >
+        <NavBrand>
+          <Link href={dashboardRoute.href} class="sidebar-brand">
+            <span class="brand-pill" aria-hidden="true">
+              A
+            </span>
+            <div>
+              <p class="sidebar-title">{'{{appName}}'}</p>
+              <p class="sidebar-subtitle">Starter Kit</p>
+            </div>
+          </Link>
+        </NavBrand>
+
+        <NavGroup id="workspace-nav-group" label="Workspace">
+          {primaryNav.map((item) => {
+            const Icon = item.icon;
+            return (
+              <NavLink href={item.href}>
+                <Icon size={16} aria-hidden={true} />
+                <span>{item.label}</span>
+              </NavLink>
+            );
+          })}
+        </NavGroup>
+
+        <NavGroup id="other-nav-group" label="Other" placement="bottom">
+          {secondaryNav.map((item) => {
+            const Icon = item.icon;
+            return (
+              <NavLink href={item.href}>
+                <Icon size={16} aria-hidden={true} />
+                <span>{item.label}</span>
+              </NavLink>
+            );
+          })}
+        </NavGroup>
+      </Navbar>
+    </aside>
+  );
+}

package/templates/startkit/src/components/data-table.tsx

@@ -0,0 +1,80 @@
+import { For } from '@askrjs/askr/control';
+import { Skeleton } from '@askrjs/themes/components';
+import EmptyState from './empty-state';
+import { joinClasses } from '../utils/join-classes';
+
+export type DataTableColumn<Row> = {
+  key: string;
+  header: unknown;
+  class?: string;
+  render: (row: Row) => unknown;
+};
+
+export default function DataTable<Row>(props: {
+  rows: () => Row[];
+  rowKey: (row: Row) => string;
+  columns: DataTableColumn<Row>[];
+  class?: string;
+  tableClass?: string;
+  rowClass?: (row: Row) => string | undefined;
+  isLoading?: boolean;
+  errorText?: string | null;
+  emptyTitle?: string;
+  emptyDescription?: string;
+}) {
+  if (props.errorText) {
+    return (
+      <EmptyState title="Could not load table" description={props.errorText} />
+    );
+  }
+
+  if (props.isLoading) {
+    return (
+      <div
+        class={joinClasses('panel stack-sm', props.class)}
+        aria-hidden="true"
+      >
+        <Skeleton class="skeleton-line" />
+        <Skeleton class="skeleton-line" />
+        <Skeleton class="skeleton-line" />
+      </div>
+    );
+  }
+
+  if (props.rows().length === 0) {
+    return (
+      <EmptyState
+        title={props.emptyTitle ?? 'No rows found'}
+        description={
+          props.emptyDescription ??
+          'Try changing filters or adding new records.'
+        }
+      />
+    );
+  }
+
+  return (
+    <div class={joinClasses('table-wrap', props.class)}>
+      <table class={props.tableClass}>
+        <thead>
+          <tr>
+            {props.columns.map((column) => (
+              <th class={column.class}>{column.header}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          <For each={props.rows} by={props.rowKey}>
+            {(row: Row) => (
+              <tr class={props.rowClass?.(row)}>
+                {props.columns.map((column) => (
+                  <td class={column.class}>{column.render(row)}</td>
+                ))}
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/startkit/src/components/empty-state.tsx

@@ -0,0 +1,13 @@
+export default function EmptyState(props: {
+  title: string;
+  description: string;
+  action?: unknown;
+}) {
+  return (
+    <section class="empty-state panel" role="status">
+      <h2>{props.title}</h2>
+      <p>{props.description}</p>
+      {props.action && <div>{props.action}</div>}
+    </section>
+  );
+}

package/templates/startkit/src/components/page-header.tsx

@@ -0,0 +1,23 @@
+import { Inline } from '@askrjs/themes/components';
+
+export default function PageHeader(props: {
+  title: string;
+  description: string;
+  actions?: unknown;
+}) {
+  return (
+    <Inline
+      class="page-header"
+      align="center"
+      justify="between"
+      gap="var(--ak-space-lg)"
+      wrap="wrap"
+    >
+      <div class="page-header-copy">
+        <h1>{props.title}</h1>
+        <p>{props.description}</p>
+      </div>
+      {props.actions && <div>{props.actions}</div>}
+    </Inline>
+  );
+}

package/templates/startkit/src/components/stat-card.tsx

@@ -0,0 +1,24 @@
+import type { JSXElement } from '@askrjs/askr/foundations';
+import type { IconProps } from '@askrjs/lucide';
+
+type IconComponent = (props: IconProps) => JSXElement;
+
+export default function StatCard(props: {
+  label: string;
+  value: string;
+  trend: string;
+  icon: IconComponent;
+}) {
+  const Icon = props.icon;
+
+  return (
+    <article class="panel stat-card">
+      <div class="stat-card-head">
+        <p>{props.label}</p>
+        <Icon size={16} aria-hidden="true" />
+      </div>
+      <strong>{props.value}</strong>
+      <p class="trend">{props.trend}</p>
+    </article>
+  );
+}

package/templates/startkit/src/features/accounts/account-filters.tsx

@@ -0,0 +1,61 @@
+import { Input } from '@askrjs/ui/input';
+import { SearchIcon } from '@askrjs/lucide';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from '@askrjs/ui/select';
+import { Button } from '@askrjs/ui/button';
+import type { AccountStatus } from '../../lib/mock-data';
+
+export default function AccountFilters(props: {
+  query: string;
+  status: AccountStatus | 'all';
+  onQueryChange: (next: string) => void;
+  onStatusChange: (next: AccountStatus | 'all') => void;
+  onReset: () => void;
+}) {
+  const hasFilters = () =>
+    props.query.trim().length > 0 || props.status !== 'all';
+
+  return (
+    <div class="account-filters">
+      <label class="input-row account-search" aria-label="Search accounts">
+        <SearchIcon size={15} aria-hidden="true" />
+        <Input
+          placeholder="Search by name, email, or id"
+          value={props.query}
+          onInput={(event: Event) =>
+            props.onQueryChange((event.target as HTMLInputElement).value)
+          }
+        />
+      </label>
+
+      <Select
+        value={props.status}
+        onValueChange={(value) =>
+          props.onStatusChange(value as AccountStatus | 'all')
+        }
+      >
+        <SelectTrigger aria-label="Status filter">
+          <SelectValue placeholder="Filter by status" />
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectContent>
+            <SelectItem value="all">All statuses</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+          </SelectContent>
+        </SelectPortal>
+      </Select>
+
+      <Button onPress={props.onReset} disabled={!hasFilters()}>
+        Clear filters
+      </Button>
+    </div>
+  );
+}

package/templates/startkit/src/features/accounts/account-table.tsx

@@ -0,0 +1,79 @@
+import { Checkbox } from '@askrjs/ui/checkbox';
+import { Button } from '@askrjs/ui/button';
+import { EyeIcon } from '@askrjs/lucide';
+import DataTable, { type DataTableColumn } from '../../components/data-table';
+import type { AccountRecord } from '../../lib/mock-data';
+import { formatCurrency } from '../../lib/format';
+
+export default function AccountTable(props: {
+  rows: () => AccountRecord[];
+  selectedIds: () => string[];
+  onToggleRow: (id: string) => void;
+  onOpenRow: (row: AccountRecord) => void;
+  loading?: boolean;
+  errorText?: string | null;
+}) {
+  const columns: DataTableColumn<AccountRecord>[] = [
+    {
+      key: 'select',
+      header: 'Select',
+      class: 'cell-select',
+      render: (row) => (
+        <Checkbox
+          checked={props.selectedIds().includes(row.id)}
+          onPress={() => props.onToggleRow(row.id)}
+          aria-label={`Select ${row.name}`}
+        />
+      ),
+    },
+    {
+      key: 'account',
+      header: 'Account',
+      render: (row) => (
+        <div class="entity-copy">
+          <strong>{row.name}</strong>
+          <span class="muted">{row.email}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'plan',
+      header: 'Plan',
+      render: (row) => row.plan,
+    },
+    {
+      key: 'mrr',
+      header: 'MRR',
+      render: (row) => formatCurrency(row.mrr),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (row) => (
+        <span class={`status-pill status-${row.status}`}>{row.status}</span>
+      ),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      class: 'cell-actions',
+      render: (row) => (
+        <Button onPress={() => props.onOpenRow(row)}>
+          <EyeIcon size={14} aria-hidden="true" /> View
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <DataTable
+      rows={props.rows}
+      rowKey={(row) => row.id}
+      columns={columns}
+      isLoading={props.loading}
+      errorText={props.errorText}
+      emptyTitle="No accounts matched"
+      emptyDescription="Try a broader search, or clear your status filter."
+    />
+  );
+}

package/templates/startkit/src/lib/format.ts

@@ -0,0 +1,31 @@
+export function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export function formatPercent(value: number): string {
+  return `${value > 0 ? '+' : ''}${value.toFixed(1)}%`;
+}
+
+export function formatRelativeDate(timestamp: string): string {
+  const date = new Date(timestamp);
+  const diffMs = Date.now() - date.getTime();
+  const hourMs = 60 * 60 * 1000;
+  const dayMs = 24 * hourMs;
+
+  if (diffMs < hourMs) {
+    const minutes = Math.max(1, Math.floor(diffMs / (60 * 1000)));
+    return `${minutes}m ago`;
+  }
+
+  if (diffMs < dayMs) {
+    const hours = Math.max(1, Math.floor(diffMs / hourMs));
+    return `${hours}h ago`;
+  }
+
+  const days = Math.max(1, Math.floor(diffMs / dayMs));
+  return `${days}d ago`;
+}