create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/vue/src/components/layout/sidebar-data.ts.stub

@@ -0,0 +1,57 @@
+import {
+  Home,
+  Users,
+  Settings,
+  User,
+  Lock,
+  Palette,
+  BookOpen,
+  Github,
+  type LucideIcon,
+} from 'lucide-vue-next'
+
+export interface NavItem {
+  title: string
+  url: string
+  icon: LucideIcon
+  badge?: string
+  external?: boolean
+  items?: NavItem[]
+}
+
+export interface NavGroup {
+  title: string
+  items: NavItem[]
+}
+
+export const sidebarData: NavGroup[] = [
+  {
+    title: 'General',
+    items: [
+      { title: 'Dashboard', url: '/dashboard', icon: Home },
+      { title: 'Users', url: '/users', icon: Users },
+    ],
+  },
+  {
+    title: 'Documentation',
+    items: [
+      { title: 'Docs', url: 'https://github.com/mantiqjs/mantiq#readme', icon: BookOpen, external: true },
+      { title: 'GitHub', url: 'https://github.com/mantiqjs/mantiq', icon: Github, external: true },
+    ],
+  },
+  {
+    title: 'Account',
+    items: [
+      {
+        title: 'Settings',
+        url: '/account/profile',
+        icon: Settings,
+        items: [
+          { title: 'Profile', url: '/account/profile', icon: User },
+          { title: 'Security', url: '/account/security', icon: Lock },
+          { title: 'Preferences', url: '/account/preferences', icon: Palette },
+        ],
+      },
+    ],
+  },
+]

package/stubs/tailwind-only/vue/src/lib/utils.ts.stub

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/stubs/tailwind-only/vue/src/pages/Dashboard.vue.stub

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { AuthenticatedLayout } from '@/components/layout'
+import { Header } from '@/components/layout'
+import { Main } from '@/components/layout'
+import { TopNav } from '@/components/layout'
+import type { TopNavLink } from '@/components/layout/TopNav.vue'
+import { Download } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { id: number; name: string; email: string; role: string } | null
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const topNav: TopNavLink[] = [
+  { title: 'Overview', href: '/dashboard', isActive: true },
+  { title: 'Sales', href: '/dashboard', isActive: false, disabled: true },
+  { title: 'Tickets', href: '/dashboard', isActive: false, disabled: true },
+  { title: 'Performance', href: '/dashboard', isActive: false, disabled: true },
+]
+
+const recentSales = [
+  { name: 'Olivia Martin', email: 'olivia.martin@email.com', amount: '+$1,999.00' },
+  { name: 'Jackson Lee', email: 'jackson.lee@email.com', amount: '+$39.00' },
+  { name: 'Isabella Nguyen', email: 'isabella.nguyen@email.com', amount: '+$299.00' },
+  { name: 'William Kim', email: 'will@email.com', amount: '+$99.00' },
+  { name: 'Sofia Davis', email: 'sofia.davis@email.com', amount: '+$39.00' },
+]
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+const bars = [40, 30, 55, 45, 70, 60, 80, 50, 65, 45, 75, 55]
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const maxH = 160
+const barW = 32
+const gap = 48
+const svgW = bars.length * gap
+const svgH = maxH + 30
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    active-path="/dashboard"
+  >
+    <Header :navigate="navigate">
+      <TopNav :links="topNav" @link-click="navigate" />
+    </Header>
+    <Main>
+      <div class="space-y-4">
+        <!-- Page title row -->
+        <div class="flex items-center justify-between">
+          <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+          <button
+            disabled
+            class="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-muted-foreground shadow-sm"
+          >
+            <Download class="h-4 w-4" />
+            Download
+          </button>
+        </div>
+
+        <!-- Content -->
+        <div class="space-y-4">
+          <!-- Stat cards -->
+          <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <!-- Total Revenue -->
+            <div class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+              <div class="flex items-center justify-between space-y-0 pb-2">
+                <h3 class="text-sm font-medium">Total Revenue</h3>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+                </svg>
+              </div>
+              <div class="text-2xl font-bold">$45,231.89</div>
+              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+            </div>
+
+            <!-- Subscriptions -->
+            <div class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+              <div class="flex items-center justify-between space-y-0 pb-2">
+                <h3 class="text-sm font-medium">Subscriptions</h3>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              </div>
+              <div class="text-2xl font-bold">+2,350</div>
+              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+            </div>
+
+            <!-- Sales -->
+            <div class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+              <div class="flex items-center justify-between space-y-0 pb-2">
+                <h3 class="text-sm font-medium">Sales</h3>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                  <rect width="20" height="14" x="2" y="5" rx="2" />
+                  <path d="M2 10h20" />
+                </svg>
+              </div>
+              <div class="text-2xl font-bold">+12,234</div>
+              <p class="text-xs text-muted-foreground">+19% from last month</p>
+            </div>
+
+            <!-- Active Now -->
+            <div class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+              <div class="flex items-center justify-between space-y-0 pb-2">
+                <h3 class="text-sm font-medium">Active Now</h3>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </div>
+              <div class="text-2xl font-bold">+573</div>
+              <p class="text-xs text-muted-foreground">+201 since last hour</p>
+            </div>
+          </div>
+
+          <!-- Bottom row: chart + recent sales -->
+          <div class="grid gap-4 lg:grid-cols-7">
+            <!-- Chart card -->
+            <div class="rounded-xl border bg-card text-card-foreground shadow-sm lg:col-span-4">
+              <div class="p-6 pb-2">
+                <h3 class="text-lg font-semibold leading-none tracking-tight">Overview</h3>
+              </div>
+              <div class="p-6 pt-0 pl-2">
+                <svg
+                  :viewBox="`0 0 ${svgW} ${svgH}`"
+                  class="h-[350px] w-full"
+                  preserveAspectRatio="none"
+                >
+                  <g v-for="(h, i) in bars" :key="i">
+                    <rect
+                      :x="i * gap + (gap - barW) / 2"
+                      :y="maxH - (h / 100) * maxH"
+                      :width="barW"
+                      :height="(h / 100) * maxH"
+                      rx="4"
+                      class="fill-foreground/15"
+                    />
+                    <text
+                      :x="i * gap + gap / 2"
+                      :y="maxH + 18"
+                      text-anchor="middle"
+                      class="fill-muted-foreground text-[10px]"
+                    >
+                      {{ months[i] }}
+                    </text>
+                  </g>
+                </svg>
+              </div>
+            </div>
+
+            <!-- Recent sales card -->
+            <div class="rounded-xl border bg-card text-card-foreground shadow-sm lg:col-span-3">
+              <div class="p-6 pb-2">
+                <h3 class="text-lg font-semibold leading-none tracking-tight">Recent Sales</h3>
+                <p class="mt-1.5 text-sm text-muted-foreground">You made 265 sales this month.</p>
+              </div>
+              <div class="p-6 pt-0">
+                <div class="space-y-8">
+                  <div
+                    v-for="sale in recentSales"
+                    :key="sale.email"
+                    class="flex items-center"
+                  >
+                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium">
+                      {{ getInitials(sale.name) }}
+                    </span>
+                    <div class="ml-4 space-y-1">
+                      <p class="text-sm font-medium leading-none">{{ sale.name }}</p>
+                      <p class="text-sm text-muted-foreground">{{ sale.email }}</p>
+                    </div>
+                    <div class="ml-auto font-medium">{{ sale.amount }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Main>
+  </AuthenticatedLayout>
+</template>

package/stubs/tailwind-only/vue/src/pages/Login.vue.stub

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/login', { email: email.value, password: password.value })
+  if (ok) props.navigate('/dashboard')
+  else error.value = data?.error ?? 'Invalid email or password. Please try again.'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex bg-background">
+    <!-- Left brand panel -->
+    <div class="hidden lg:flex lg:w-[45%] bg-foreground text-background flex-col justify-between p-10">
+      <div class="flex items-center gap-3">
+        <div class="flex h-8 w-8 items-center justify-center rounded bg-background text-foreground text-xs font-bold">
+          M
+        </div>
+        <span class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div>
+        <blockquote class="text-2xl font-medium leading-snug tracking-tight">
+          "The framework that gets out of your way."
+        </blockquote>
+      </div>
+
+      <p class="text-sm text-background/50">
+        &copy; {{ new Date().getFullYear() }} {{ appName }}. All rights reserved.
+      </p>
+    </div>
+
+    <!-- Right form panel -->
+    <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+      <!-- Mobile-only logo -->
+      <div class="mb-10 flex items-center gap-3 lg:hidden">
+        <div class="flex h-8 w-8 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+          M
+        </div>
+        <span class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div class="w-full max-w-sm">
+        <div class="mb-8">
+          <h1 class="text-2xl font-semibold tracking-tight">Sign in</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Enter your credentials to continue
+          </p>
+        </div>
+
+        <div
+          v-if="error"
+          class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive"
+        >
+          {{ error }}
+        </div>
+
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <label for="email" class="text-sm font-medium leading-none">Email</label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <div class="space-y-2">
+            <label for="password" class="text-sm font-medium leading-none">Password</label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              placeholder="Enter your password"
+              autocomplete="current-password"
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <button
+            type="submit"
+            class="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+            :disabled="loading"
+          >
+            {{ loading ? 'Signing in...' : 'Sign in' }}
+          </button>
+        </form>
+
+        <p class="mt-6 text-center text-sm text-muted-foreground">
+          Don't have an account?
+          <button
+            type="button"
+            class="font-medium text-foreground underline underline-offset-4"
+            @click="navigate('/register')"
+          >
+            Register
+          </button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/stubs/tailwind-only/vue/src/pages/Register.vue.stub

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { post } from '@/lib/api'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const name = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  const { ok, data } = await post('/register', {
+    name: name.value,
+    email: email.value,
+    password: password.value,
+  })
+  if (ok) props.navigate('/dashboard')
+  else error.value = data?.error?.message ?? data?.error ?? 'Registration failed'
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex bg-background">
+    <!-- Left brand panel -->
+    <div class="hidden lg:flex lg:w-[45%] bg-foreground text-background flex-col justify-between p-10">
+      <div class="flex items-center gap-3">
+        <div class="flex h-8 w-8 items-center justify-center rounded bg-background text-foreground text-xs font-bold">
+          M
+        </div>
+        <span class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div>
+        <blockquote class="text-2xl font-medium leading-snug tracking-tight">
+          "The framework that gets out of your way."
+        </blockquote>
+      </div>
+
+      <p class="text-sm text-background/50">
+        &copy; {{ new Date().getFullYear() }} {{ appName }}. All rights reserved.
+      </p>
+    </div>
+
+    <!-- Right form panel -->
+    <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+      <!-- Mobile-only logo -->
+      <div class="mb-10 flex items-center gap-3 lg:hidden">
+        <div class="flex h-8 w-8 items-center justify-center rounded bg-foreground text-background text-xs font-bold">
+          M
+        </div>
+        <span class="text-lg font-semibold tracking-tight">{{ appName }}</span>
+      </div>
+
+      <div class="w-full max-w-sm">
+        <div class="mb-8">
+          <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Get started with {{ appName }}
+          </p>
+        </div>
+
+        <div
+          v-if="error"
+          class="mb-6 rounded-md border border-destructive px-4 py-3 text-sm text-destructive"
+        >
+          {{ error }}
+        </div>
+
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <label for="name" class="text-sm font-medium leading-none">Name</label>
+            <input
+              id="name"
+              v-model="name"
+              required
+              placeholder="Your name"
+              autocomplete="name"
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <div class="space-y-2">
+            <label for="email" class="text-sm font-medium leading-none">Email</label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              placeholder="you@example.com"
+              autocomplete="email"
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <div class="space-y-2">
+            <label for="password" class="text-sm font-medium leading-none">Password</label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              placeholder="Create a password"
+              autocomplete="new-password"
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+          <button
+            type="submit"
+            class="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+            :disabled="loading"
+          >
+            {{ loading ? 'Creating account...' : 'Create account' }}
+          </button>
+        </form>
+
+        <p class="mt-6 text-center text-sm text-muted-foreground">
+          Already have an account?
+          <button
+            type="button"
+            class="font-medium text-foreground underline underline-offset-4"
+            @click="navigate('/login')"
+          >
+            Sign in
+          </button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>